:root {
  --rojo: #D94452;
  --rojo-osc: #B8323F;
  --rosa: #FFF5F5;
  --tinta: #1A1A2E;
  --texto: #333333;
  --gris: #666666;
  --gris-claro: #9A9497;
  --linea: #E8E2E4;
  --fondo: #FFFFFF;
  --verde: #1F7A52;
  --verde-f: #E7F4EC;
  --ambar: #8A5A00;
  --ambar-f: #FFF3D6;
  --azul: #2457A6;
  --azul-f: #E9F0FB;
  --error: #B42335;
  --error-f: #FDECEE;
  --gris-f: #F4F2F3;
  --radio: 10px;
  --letra: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}
h1, h2, h3 { color: var(--tinta); margin: 0; line-height: 1.2; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 800; }
p { margin: 0; }
a { color: var(--rojo-osc); }
.sub { color: var(--gris); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--rojo) 55%, white); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ── Barra ─────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 24px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 17px; }
.filas { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.fila {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--gris-f); font-size: 13px; color: var(--gris); white-space: nowrap;
}
.fila b { color: var(--tinta); font-weight: 700; }
.fila .luz { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-claro); }
.fila.ocupada { background: var(--azul-f); color: var(--azul); }
.fila.ocupada .luz { background: var(--azul); animation: latido 1.6s ease-in-out infinite; }
.fila.vence .luz { background: var(--ambar); }
.quien { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gris); white-space: nowrap; }
.quien b { color: var(--tinta); }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; outline: none; }

/* ── Botones ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--fondo); color: var(--tinta); font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--gris-claro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.principal { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.principal:hover { background: var(--rojo-osc); border-color: var(--rojo-osc); }
.btn.grande { min-height: 48px; padding: 10px 22px; font-size: 16px; }
.btn.chico { min-height: 32px; padding: 4px 12px; font-size: 13.5px; }
.btn.peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, white); }
.btn.texto { border-color: transparent; background: none; padding-left: 6px; padding-right: 6px; color: var(--rojo-osc); }

/* Menús desplegables con <details> */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu .opciones {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; min-width: 260px;
  display: grid; padding: 6px; background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 8px 24px rgba(26, 26, 46, .12);
}
.menu .opciones button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.menu .opciones button:hover { background: var(--rosa); }
.menu .opciones small { display: block; color: var(--gris); font-size: 12.5px; }

/* ── Entrada ───────────────────────────────────────── */
.entrada { max-width: 380px; margin: 12vh auto 0; display: grid; gap: 22px; }
.entrada img { width: 56px; height: 56px; }
.entrada form { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo > span { font-weight: 700; color: var(--tinta); font-size: 14px; }
.campo small { color: var(--gris); font-size: 13px; }
input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo);
}
input:focus, select:focus, textarea:focus { border-color: var(--rojo); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 18%, transparent); }
textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 280px; }
.error-form { color: var(--error); background: var(--error-f); padding: 10px 12px; border-radius: 8px; font-size: 14px; }

/* ── Tablero ───────────────────────────────────────── */
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.filtro {
  border: 1px solid var(--linea); background: var(--fondo); border-radius: 999px; padding: 5px 14px;
  font-size: 14px; font-weight: 700; color: var(--gris); cursor: pointer;
}
.filtro[aria-pressed=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro .n { font-weight: 600; opacity: .75; margin-left: 4px; }
.buscar { max-width: 280px; }

.lista { border-top: 1px solid var(--linea); }
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.herramientas .buscar { width: 260px; }
.renglon {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(420px, 2.2fr) 90px;
  gap: 20px; align-items: center;
  padding: 16px 10px; border-bottom: 1px solid var(--linea);
  color: inherit; text-decoration: none;
}
.renglon:hover { background: var(--rosa); }
.renglon .nombre { font-weight: 800; color: var(--tinta); font-size: 16px; }
.renglon .sub { color: var(--gris); font-size: 13px; }
.renglon .cuando { color: var(--gris); font-size: 13px; text-align: right; }
.flujos-mini { display: grid; gap: 10px; }
.flujo-mini { display: grid; grid-template-columns: 62px 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.flujo-mini .que { font-size: 13px; color: var(--gris); font-weight: 700; }
.vacio { padding: 48px 0; color: var(--gris); text-align: center; }

/* Semáforo */
.estado { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.estado .punto { width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.estado .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado .d { grid-column: 2; color: var(--gris); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-azul .punto { background: var(--azul); } .c-azul .t { color: var(--azul); }
.c-verde .punto { background: var(--verde); } .c-verde .t { color: var(--verde); }
.c-amarillo .punto { background: #D99A00; } .c-amarillo .t { color: var(--ambar); }
.c-rojo .punto { background: var(--error); } .c-rojo .t { color: var(--error); }
.c-gris .punto { background: var(--gris-claro); } .c-gris .t { color: var(--gris); }
.c-azul .punto { animation: latido 1.6s ease-in-out infinite; }

/* ── El recorrido: las etapas de la certificación ──── */
.recorrido { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.recorrido li { position: relative; flex: 1; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.recorrido li::before {
  content: ""; position: absolute; top: 8px; left: calc(-50% + 11px); right: calc(50% + 11px);
  height: 2px; background: var(--linea);
}
.recorrido li:first-child::before { display: none; }
.recorrido li.hecho::before, .recorrido li.en_curso::before, .recorrido li.por_confirmar::before { background: var(--tinta); }
.parada { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea); background: var(--fondo); }
.hecho .parada { background: var(--tinta); border-color: var(--tinta); }
.hecho .parada::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.en_curso .parada { border-color: var(--rojo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rojo) 18%, transparent); }
.en_curso .parada::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--rojo); }
.corriendo .en_curso .parada { animation: anillo 1.8s ease-out infinite; }
.por_confirmar .parada { background: linear-gradient(90deg, var(--tinta) 50%, var(--fondo) 50%); border-color: var(--tinta); }
.no_aplica .parada { border-style: dashed; }
.error .parada { background: var(--error); border-color: var(--error); }
.recorrido .rotulo { font-size: 12.5px; font-weight: 700; color: var(--gris); text-align: center; line-height: 1.25; padding: 0 2px; }
.hecho .rotulo, .en_curso .rotulo { color: var(--tinta); }
.no_aplica .rotulo { color: var(--gris-claro); font-weight: 600; }
.recorrido.mini li { gap: 0; }
.recorrido.mini li::before { top: 5px; left: calc(-50% + 7px); right: calc(50% + 7px); }
.recorrido.mini .parada { width: 12px; height: 12px; border-width: 2px; }
.recorrido.mini .hecho .parada::after { display: none; }
.recorrido.mini .en_curso .parada { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 18%, transparent); }
.recorrido.mini .en_curso .parada::after { inset: 2px; }
.recorrido.mini .rotulo { display: none; }

@keyframes latido { 50% { opacity: .35; } }
@keyframes anillo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rojo) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ── Ficha ─────────────────────────────────────────── */
.volver { display: inline-block; margin-bottom: 14px; font-weight: 700; text-decoration: none; }
.ficha-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--linea); }
.ficha-cabeza .datos-cabeza { display: grid; gap: 6px; min-width: 0; }
.ficha-cabeza .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--gris); font-size: 14px; }
.ficha-cabeza .meta b { color: var(--tinta); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { background: var(--rosa); color: var(--rojo-osc); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; }
.acciones { display: grid; gap: 8px; justify-items: end; }
.acciones .fila-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.alerta { margin-top: 18px; padding: 12px 16px; border-radius: 10px; background: var(--ambar-f); color: var(--ambar); font-size: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.alerta.roja { background: var(--error-f); color: var(--error); }

.flujos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; margin: 26px 0; }
.flujo { border: 1px solid var(--linea); border-radius: 16px; padding: 20px 22px; display: grid; gap: 18px; align-content: start; }
.flujo-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.flujo-cabeza small { color: var(--gris); font-size: 13px; }
.situacion { border-left: 4px solid var(--gris-claro); padding: 2px 0 2px 14px; display: grid; gap: 4px; }
.situacion .t { font-weight: 800; color: var(--tinta); font-size: 16px; }
.situacion .d { color: var(--texto); font-size: 14px; }
.situacion.c-azul { border-color: var(--azul); } .situacion.c-verde { border-color: var(--verde); }
.situacion.c-amarillo { border-color: #D99A00; } .situacion.c-rojo { border-color: var(--error); }
.que-hacer { background: var(--rosa); border-radius: 10px; padding: 12px 14px; font-size: 14px; white-space: pre-line; }
.que-hacer b { display: block; color: var(--tinta); margin-bottom: 2px; }
.relanzado { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); }
.portal { font-size: 13px; color: var(--gris); }

/* Corrida */
.seccion { margin-top: 34px; display: grid; gap: 14px; }
.seccion-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.corrida { border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.corrida-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 18px; flex-wrap: wrap; }
.corrida-cabeza .meta { color: var(--gris); font-size: 13.5px; }
.insignia { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.i-corriendo, .i-en_fila { background: var(--azul-f); color: var(--azul); }
.i-ok { background: var(--verde-f); color: var(--verde); }
.i-esperando { background: var(--ambar-f); color: var(--ambar); }
.i-error { background: var(--error-f); color: var(--error); }
.i-interrumpido, .i-cancelada { background: var(--gris-f); color: var(--gris); }
.avisos { display: grid; gap: 8px; padding: 0 18px 14px; }
.aviso { border-radius: 10px; padding: 10px 14px; font-size: 14px; background: var(--gris-f); }
.aviso .cod { font-size: 12px; color: var(--gris); font-weight: 700; margin-left: 6px; }
.aviso .acc { margin-top: 4px; white-space: pre-line; color: var(--texto); }
.aviso.n-error { background: var(--error-f); }
.aviso.n-error .msj { color: var(--error); font-weight: 700; }
.aviso.n-advertencia { background: var(--ambar-f); }
.aviso.n-advertencia .msj { color: var(--ambar); font-weight: 700; }
.aviso.n-info .msj { color: var(--tinta); font-weight: 700; }
.consola {
  margin: 0; max-height: 460px; min-height: 120px; overflow: auto;
  background: var(--tinta); color: #EDEAF0; padding: 14px 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.consola .l-error { color: #FF9AA5; }
.consola .l-adv { color: #FFD27A; }
.consola .l-ok { color: #8FE3B5; }
.final { padding: 12px 18px; font-weight: 800; font-size: 15px; border-top: 1px solid var(--linea); }
.final.ok { color: var(--verde); background: var(--verde-f); }
.final.esperando { color: var(--ambar); background: var(--ambar-f); }
.final.error { color: var(--error); background: var(--error-f); }
.final.interrumpido { color: var(--gris); background: var(--gris-f); }
.progreso { font-size: 13px; color: var(--azul); }

table.historial { width: 100%; border-collapse: collapse; font-size: 14px; }
.historial th { text-align: left; font-size: 13px; color: var(--gris); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--linea); }
.historial td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.historial tr.sel td { background: var(--rosa); }
.historial tr { cursor: pointer; }
.historial tr:hover td { background: var(--rosa); }
.historial .det { color: var(--gris); font-size: 13px; }

dl.archivo { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
dl.archivo dt { color: var(--gris); font-weight: 700; font-size: 13px; }
dl.archivo dd { margin: 0; color: var(--tinta); word-break: break-word; }

.soporte { border: 1px dashed color-mix(in srgb, var(--rojo) 45%, white); border-radius: 16px; padding: 18px 20px; display: grid; gap: 18px; }
.soporte .grupo { display: grid; gap: 10px; }
.linea-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.linea-form .campo { flex: 1; min-width: 160px; }
.opciones-corrida { display: grid; gap: 6px; font-size: 14px; }
.opciones-corrida label, .check { display: flex; gap: 8px; align-items: flex-start; }
.check input { margin-top: 4px; }

/* ── Formulario empresa nueva ──────────────────────── */
.formulario { max-width: 660px; display: grid; gap: 22px; }
.formulario fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.formulario legend { font-weight: 800; color: var(--tinta); margin-bottom: 8px; font-size: 15px; }
.opcion-cert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; cursor: pointer; }
.opcion-cert:has(input:checked) { border-color: var(--rojo); background: var(--rosa); }
.opcion-cert input { margin-top: 4px; }
.opcion-cert small { display: block; color: var(--gris); }
.subdocs { display: grid; gap: 8px; padding-left: 26px; }
.recordatorio { background: var(--rosa); border-radius: 12px; padding: 14px 16px; font-size: 14px; }

dialog { border: 1px solid var(--linea); border-radius: 16px; padding: 22px; max-width: 520px; width: calc(100% - 32px); color: var(--texto); }
dialog::backdrop { background: rgba(26, 26, 46, .35); }
dialog form { display: grid; gap: 14px; }
dialog .botones { display: flex; justify-content: flex-end; gap: 8px; }

.aviso-flotante { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; }
.aviso-flotante div { background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(26, 26, 46, .25); }
.aviso-flotante div.mal { background: var(--error); }

@media (max-width: 860px) {
  .barra { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .filas { order: 3; width: 100%; justify-content: flex-start; }
  main { padding: 20px 16px 60px; }
  .renglon { grid-template-columns: 1fr; gap: 10px; }
  .flujo-mini { grid-template-columns: 62px minmax(0, 1fr); gap: 6px 10px; }
  .flujo-mini .estado { grid-column: 1 / -1; }
  .flujo { padding: 16px; }
  .recorrido .rotulo { font-size: 10.5px; hyphens: auto; overflow-wrap: anywhere; }
  .corrida-cabeza, .avisos { padding-left: 14px; padding-right: 14px; }
  .consola { padding: 12px 14px; font-size: 12px; }
  table.historial td:nth-child(3), table.historial th:nth-child(3) { display: none; }
  .ficha-cabeza { grid-template-columns: 1fr; }
  .herramientas { width: 100%; }
  .herramientas .buscar { flex: 1; width: auto; }
  .renglon .cuando { text-align: left; }
  .acciones { justify-items: start; }
  .acciones .fila-botones { justify-content: flex-start; }
  .flujos { grid-template-columns: 1fr; }
}