/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 16px; border-radius: 11px;
  font-weight: 650; white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton-primario { background: var(--acento); color: var(--acento-tinta); }
.boton-primario:hover { background: color-mix(in srgb, var(--acento), #ffffff 12%); }
.boton-secundario { background: var(--panel-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.boton-secundario:hover { background: var(--panel-3); }
.boton-peligro { background: var(--peligro-solido); color: #fff; }
.boton-peligro:hover { background: var(--peligro-solido-encima); }
.boton-peligro-suave { background: var(--peligro-fondo); color: var(--peligro-texto); box-shadow: inset 0 0 0 1px var(--peligro-borde); min-height: 34px; padding: 6px 12px; }
.boton-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--texto-2); flex: none; }
.boton-icono:hover { background: var(--panel-2); color: var(--texto); }
.boton-enlace { color: var(--acento-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.boton-enlace.activo { color: var(--texto); text-decoration: none; }
.botonera { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.botonera-izquierda { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Campos ---------- */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo-completo, .campo-area, .campo-varias { grid-column: 1 / -1; }
.etiqueta { font-weight: 600; color: var(--texto); font-size: 14.5px; }
.obligatorio { color: var(--acento-fuerte); }
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea, .filtro input, .filtro select, .selector-remoto {
  width: 100%;
  background: var(--fondo-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  padding: 11px 12px;
  color: var(--texto);
  min-height: 44px;
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .filtro input:focus, .filtro select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo input[type=color] { padding: 4px; height: 48px; }
.campo-casilla { display: flex; align-items: center; gap: 10px; grid-auto-flow: column; justify-content: start; }
.campo-casilla input { width: 22px; height: 22px; accent-color: var(--acento); }
.ayuda { color: var(--texto-3); font-size: 13px; }
.error-campo { color: var(--peligro-texto); font-size: 13.5px; font-weight: 600; }
.con-error input, .con-error select, .con-error textarea, .con-error .selector-remoto { border-color: var(--peligro) !important; }
.seccion { border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px 18px; display: grid; gap: 12px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.seccion legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 0 6px; }
.seccion-numero { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: var(--acento-tinta); font-size: 14px; }
.seccion-numero:empty { display: none; }

.campo { position: relative; }
.control-oculto { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.rejilla > .campo:has(> .chips-campo:not([hidden])) { grid-column: 1 / -1; }
.chips-campo .chip { position: relative; cursor: pointer; justify-content: flex-start; text-align: left; min-height: 48px; padding: 10px 16px; border-radius: 14px; }
.chip-opcion input { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.chip-opcion .icono { color: var(--area); }
.chip-textos { display: grid; gap: 1px; }
.chip-textos small { color: var(--texto-3); font-weight: 500; font-size: 12.5px; }
.chip-opcion:has(input:checked) .chip-textos small { color: var(--texto-2); }
.chip-bien { --tono: var(--bien); }
.chip-aviso { --tono: var(--aviso); }
.chip-peligro { --tono: var(--peligro); }
.chip-critico { --tono: var(--critico); }
.chip-bien::before, .chip-aviso::before, .chip-peligro::before, .chip-critico::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tono); flex: none; }
.chip-bien:has(input:checked), .chip-aviso:has(input:checked), .chip-peligro:has(input:checked), .chip-critico:has(input:checked) { background: color-mix(in srgb, var(--tono) 16%, var(--panel)); border-color: var(--tono); }
.con-error .chips-campo .chip { border-color: var(--peligro); }
.casillas { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.casilla { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--fondo-2); border: 1px solid var(--linea); }
.casilla input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acento); }

.selector-remoto { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--texto-3); }
.selector-remoto input { border: 0 !important; background: transparent !important; padding: 11px 0 !important; box-shadow: none !important; min-height: 42px; }
.opciones-remotas {
  position: absolute; z-index: 30; left: -1px; right: -1px; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); box-shadow: var(--sombra);
  color: var(--texto);
}
.opcion { padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.opcion:hover { background: var(--acento-suave); }
.opcion-vacia { padding: 9px 10px; color: var(--texto-3); }
.opcion-mas { padding: 8px 10px; }

/* ---------- Filas repetibles ---------- */
.filas { border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.filas-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.filas-cabecera h3 { font-size: 16px; }
.filas-vacio { color: var(--texto-3); text-align: center; padding: 10px; }
.filas-cuerpo { display: grid; gap: 10px; }
.fila-editable { display: grid; grid-template-columns: 34px 1fr 40px; gap: 10px; align-items: start; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px; }
.fila-numero { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); font-weight: 700; margin-top: 26px; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fila-editable .boton-icono { margin-top: 24px; color: var(--peligro-texto); }

/* ---------- Filtros ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtro { display: grid; gap: 5px; min-width: 170px; color: var(--texto-2); font-size: 13.5px; font-weight: 600; }
.filtro-busqueda { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; background: var(--fondo-2); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); padding: 0 12px; color: var(--texto-3); }
.filtro-busqueda input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 11px 0 !important; }
.filtro-periodo { display: grid; gap: 10px; min-width: 0; position: relative; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea-fuerte); color: var(--texto-2); font-weight: 650; font-size: 14.5px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.chip:hover { color: var(--texto); border-color: var(--texto-3); }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: color-mix(in srgb, var(--area) 18%, var(--panel)); border-color: var(--area); color: var(--texto); }
.fechas-elegidas { display: flex; flex-wrap: wrap; gap: 10px; }
.fecha-elegida { display: grid; gap: 4px; min-width: 170px; color: var(--texto-2); font-size: 13.5px; font-weight: 600; }

/* ---------- Tablas ---------- */
.contenedor-tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { text-align: left; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); padding: 12px 14px; border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--fondo-2); }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tr.elegible { cursor: pointer; }
.tabla tr.elegible:hover td, .tabla tr.elegible:focus td { background: var(--panel-2); }
.tabla td.principal { font-weight: 650; }
.tabla td.recortado { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla td.sin-corte, .tabla .codigo { white-space: nowrap; }
.tabla .codigo { font-variant-numeric: tabular-nums; }
.fila-anulada td { opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--peligro-borde); }
.fila-anulada td:last-child, .fila-anulada td:nth-last-child(2) { text-decoration: none; }
.anulado { display: grid; gap: 2px; }
.anulado small { color: var(--texto-3); }
.pie-lista { display: flex; justify-content: center; padding: 14px; }
.lista-paginada { display: grid; gap: 12px; }
.barra-de-lista { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.titulo-de-lista { font-size: 17px; font-weight: 750; }
.lista-paginada:not(.en-pantalla-completa) .titulo-de-lista { display: none; }
.buscador-de-lista { flex: 1 1 260px; max-width: 460px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--panel); color: var(--texto-3); }
.buscador-de-lista:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; color: var(--texto-2); }
.entrada-de-busqueda { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; padding: 0; color: var(--texto); font: inherit; outline: none; }
.entrada-de-busqueda:focus-visible { outline: none; }
.cuenta-de-lista { color: var(--texto-3); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acciones-de-lista { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vistas-de-lista { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--linea); }
.boton-vista { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--texto-3); transition: background-color 0.15s ease, color 0.15s ease; }
.boton-vista:hover { color: var(--texto); }
.boton-vista[aria-pressed="true"] { background: var(--panel); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.boton-pantalla-completa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--texto-2); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--linea); transition: background-color 0.15s ease, color 0.15s ease; }
.boton-pantalla-completa:hover { color: var(--texto); background: var(--panel-3); }
.lista-paginada.en-pantalla-completa { position: fixed; inset: 0; z-index: 45; overflow: auto; align-content: start; padding: 0 clamp(16px, 3vw, 32px) 32px; background: var(--fondo); }
.lista-paginada.en-pantalla-completa .barra-de-lista { position: sticky; top: 0; z-index: 2; padding: 14px 0 12px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
body.con-lista-completa { overflow: hidden; }
.tabla.como-tarjetas thead { display: none; }
.tabla.como-tarjetas, .tabla.como-tarjetas tbody { display: grid; gap: 12px; width: 100%; }
.tabla.como-tarjetas tbody { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.tabla.como-tarjetas tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; align-content: start; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--panel); }
.tabla.como-tarjetas td { display: grid; gap: 2px; align-content: start; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
.tabla.como-tarjetas td::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tabla.como-tarjetas td.principal { grid-column: 1 / -1; font-size: 17px; }
.tabla.como-tarjetas td.principal::before { content: none; }
.tabla.como-tarjetas tr.elegible { transition: border-color 0.15s ease, background-color 0.15s ease; }
.tabla.como-tarjetas tr.elegible:hover, .tabla.como-tarjetas tr.elegible:focus-visible { border-color: color-mix(in srgb, var(--area) 50%, transparent); background: var(--panel-2); }
.tabla.como-tarjetas tr.elegible:hover td, .tabla.como-tarjetas tr.elegible:focus td { background: transparent; }
.tabla.como-tarjetas td.recortado { max-width: none; white-space: normal; }
.tabla.como-tarjetas td > .insignia { justify-self: start; }
.cuerpo-de-lista.en-tarjetas .contenedor-tabla { border: 0; background: transparent; overflow: visible; }
.sin-coincidencias { margin-top: 12px; }
.con-marca { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtro-gravedad .chip[data-opcion]:not([data-opcion=""])::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--texto-3); }
.filtro-gravedad .chip[data-opcion][data-opcion="BAJA"]::before { background: var(--bien); }
.filtro-gravedad .chip[data-opcion][data-opcion="MEDIA"]::before { background: var(--aviso); }
.filtro-gravedad .chip[data-opcion][data-opcion="ALTA"]::before { background: var(--peligro); }
.filtro-gravedad .chip[data-opcion][data-opcion="CRITICA"]::before { background: var(--critico); }
.chip-interruptor .icono { color: var(--texto-3); }
.chip-interruptor[aria-pressed="true"] .icono { color: currentColor; }
.con-detalle { display: inline-grid; gap: 1px; }
.con-detalle small { color: var(--texto-3); font-size: 12.5px; font-weight: 500; }
.fila-inactiva td { color: var(--texto-3); }
.cargando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 36px 16px; color: var(--texto-2); font-weight: 600; animation: aparecer-carga 0.24s ease 0.16s both; }
.cargando-grande { flex-direction: column; gap: 14px; min-height: 42vh; font-size: 16px; }
.cargando-chico { justify-content: flex-start; padding: 6px 0; gap: 8px; font-size: 14px; font-weight: 550; }
.pie-lista .cargando-chico { justify-content: center; }
.cargador { flex: none; color: var(--area); overflow: visible; }
.cargador-silueta { fill: color-mix(in srgb, currentColor 10%, transparent); stroke: color-mix(in srgb, currentColor 26%, transparent); stroke-width: 2; stroke-linejoin: round; }
.cargador-trazo { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26 74; animation: recorrer-montana 1.5s cubic-bezier(0.62, 0.05, 0.38, 0.95) infinite; }
.cargador-riel { fill: none; stroke: color-mix(in srgb, currentColor 38%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.cargador-carro { fill: currentColor; animation: mover-carro 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.boton .cargador { color: currentColor; }
@keyframes recorrer-montana { to { stroke-dashoffset: -100; } }
@keyframes mover-carro { from { transform: translateX(0); } to { transform: translateX(23px); } }
@keyframes aparecer-carga { from { opacity: 0; } }
@keyframes latir-carga { 50% { opacity: 0.45; } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cargador-trazo { animation: none; stroke-dasharray: none; }
  .cargador-carro { animation: none; }
  .cargador { animation: latir-carga 1.8s ease-in-out infinite; }
}
.estado-vacio, .estado-error { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 42px 20px; color: var(--texto-2); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); }
.estado-vacio h3 { color: var(--texto); }
.estado-error { color: var(--peligro-texto); border-color: var(--peligro-borde); }

@media (max-width: 720px) {
  .contenedor-tabla:not(:has(> .como-tabla)) { border: 0; background: transparent; overflow: visible; }
  .tabla:not(.como-tabla) thead { display: none; }
  .tabla:not(.como-tabla), .tabla:not(.como-tabla) tbody { display: grid; gap: 10px; width: 100%; }
  .tabla:not(.como-tabla) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--panel); }
  .tabla:not(.como-tabla) tr.elegible:active { background: var(--panel-2); }
  .tabla:not(.como-tabla) td { display: grid; gap: 2px; align-content: start; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .tabla:not(.como-tabla) td::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .tabla:not(.como-tabla) td.principal { grid-column: 1 / -1; font-size: 17px; }
  .tabla:not(.como-tabla) td.principal::before { content: none; }
  .tabla:not(.como-tabla) tr.elegible:hover td, .tabla:not(.como-tabla) tr.elegible:focus td { background: transparent; }
  .tabla:not(.como-tabla) td.recortado { max-width: none; white-space: normal; }
  .tabla:not(.como-tabla) td > .insignia { justify-self: start; }
  .tabla.como-tabla { min-width: 640px; }
  .buscador-de-lista { flex-basis: 100%; max-width: none; }
  .cuenta-de-lista { order: 3; }
}

/* ---------- Insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.insignia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.insignia-bien { background: var(--bien-fondo); color: var(--bien-texto); }
.insignia-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.insignia-peligro { background: var(--peligro-fondo); color: var(--peligro-texto); }
.insignia-critico { background: var(--critico-fondo); color: var(--critico-texto); }
.insignia-apagado { background: color-mix(in srgb, var(--texto-3) 14%, transparent); color: var(--texto-2); }
.insignia-neutro { background: var(--panel-3); color: var(--texto-2); }
.insignias-detalle { display: flex; gap: 8px; flex-wrap: wrap; }
.insignia-zona::before { content: none; }
.zona-superficie { background: var(--info-fondo); color: var(--info-texto); }
.zona-mina { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* ---------- Modal y panel ---------- */
.capa-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: var(--velo); backdrop-filter: blur(3px); }
.modal { width: min(640px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--panel); border: 1px solid var(--linea-fuerte); border-radius: 18px; box-shadow: var(--sombra); }
.capa-modal[data-ancho="ancho"] .modal { width: min(1040px, 100%); }
.capa-modal[data-ancho="angosto"] .modal { width: min(460px, 100%); }
.modal-cabecera, .panel-cabecera { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 22px 14px; background: var(--panel); border-bottom: 1px solid var(--linea); }
.modal-cabecera h2, .panel-cabecera h2 { font-size: 21px; }
.modal-cuerpo { padding: 20px 22px 22px; }
.confirmacion { display: grid; gap: 14px; }

.panel-detalle { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(620px, 100%); overflow-y: auto; background: var(--panel); border-left: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); }
.panel-cuerpo { padding: 18px 22px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ficha { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; margin: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.ficha dt, .ficha dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--linea); }
.ficha dt { color: var(--texto-3); font-size: 13.5px; font-weight: 600; background: var(--fondo-2); }
.ficha dt:nth-last-of-type(1), .ficha dd:last-of-type { border-bottom: 0; }
.seccion-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.seccion-detalle h3 { font-size: 16px; }
.acciones-detalle { display: flex; flex-wrap: wrap; gap: 10px; }
.texto-largo { white-space: pre-wrap; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 14px; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 10px; width: min(420px, calc(100vw - 36px)); }
@media (max-width: 960px) {
  .avisos { right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}
.aviso { display: grid; grid-template-columns: 20px 1fr 28px; gap: 10px; align-items: start; padding: 13px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); animation: entrar 0.2s ease; }
.aviso-exito { border-color: var(--bien-borde); }
.aviso-exito .icono { color: var(--bien); }
.aviso-error { border-color: var(--peligro-borde); }
.aviso-error .icono { color: var(--peligro); }
.aviso-info .icono { color: var(--acento-fuerte); }
.aviso-cerrar { color: var(--texto-3); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Indicadores ---------- */
.tablero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.periodo { color: var(--texto-2); font-weight: 600; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; }
.tarjeta-indicador { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: grid; gap: 6px; align-content: start; container-type: inline-size; }
.tarjeta-cabeza { display: flex; align-items: center; gap: 10px; min-height: 2.9em; color: var(--texto-2); font-weight: 600; line-height: 1.3; }
.zona-grafica { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tarjeta-cabeza .icono { color: var(--area); }
.tarjeta-valor { font-size: clamp(22px, 19cqi, 30px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tarjeta-valor small { font-size: 15px; color: var(--texto-2); font-weight: 600; }
.tarjeta-nota { color: var(--texto-3); font-size: 13.5px; }
.tono-aviso { border-color: var(--aviso-borde); }
.tono-peligro { border-color: var(--peligro-borde); }
.tono-bien { border-color: var(--bien-borde); }
.grafica-barras { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: grid; gap: 12px; }
.grafica-barras h3 { font-size: 16px; }
.grafica-barras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.grafica-barras li { display: grid; grid-template-columns: minmax(120px, 36%) 1fr auto; gap: 12px; align-items: center; }
.barra-etiqueta { color: var(--texto-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { height: 14px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.barra-pista i { display: block; height: 100%; border-radius: inherit; background: var(--area); }
.barra-pista i.barra-bien { background: var(--bien); }
.barra-pista i.barra-aviso { background: var(--aviso); }
.barra-pista i.barra-peligro { background: var(--peligro); }
.barra-pista i.barra-critico { background: var(--critico); }
.barra-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.progreso { height: 8px; min-width: 80px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.progreso i.completo { background: var(--bien); }
.celda-progreso { display: grid; gap: 4px; min-width: 90px; }
.resumen-linea { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.contador-grande { display: grid; justify-items: center; gap: 4px; padding: 26px; border-radius: var(--radio); background: color-mix(in srgb, var(--area) 8%, var(--panel)); border: 1px solid var(--linea); text-align: center; }
.contador-numero { font-size: 64px; font-weight: 800; line-height: 1; color: var(--area); }
.contador-grande small { color: var(--texto-3); }
.contador-bien { --area: var(--bien); }
.contador-peligro { --area: var(--area-seguridad); }
.resumen-seguridad { display: grid; grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 14px; }
.racha-seguridad { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: color-mix(in srgb, var(--color-racha) 9%, var(--panel)); --color-racha: var(--bien); }
.racha-seguridad.tono-aviso { --color-racha: var(--aviso); border-color: var(--aviso-borde); }
.racha-seguridad.tono-peligro { --color-racha: var(--peligro); border-color: var(--peligro-borde); }
.racha-seguridad.tono-bien { border-color: var(--bien-borde); }
.racha-icono { grid-row: 1 / span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--color-racha); background: color-mix(in srgb, var(--color-racha) 16%, transparent); }
.racha-numero { font-size: 44px; font-weight: 800; line-height: 1; color: var(--color-racha); font-variant-numeric: tabular-nums; }
.racha-texto { font-weight: 650; line-height: 1.3; }
.racha-seguridad small { color: var(--texto-3); font-size: 13px; }
.tendencia { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--texto-3); }
.tendencia-peligro { color: var(--peligro-texto); }
.tendencia-bien { color: var(--bien-texto); }
.tarjeta-grafica { display: grid; gap: 12px; align-content: start; padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--panel); min-width: 0; }
.tarjeta-grafica h3 { font-size: 16px; }
.sin-datos-grafica { padding: 12px 0; }
.subtitulo-grafica { color: var(--texto-3); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.leyenda-grafica { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texto-3); font-size: 13px; }
.leyenda-grafica > span { display: inline-flex; align-items: center; gap: 6px; }
.muestra-graves, .muestra-otros { width: 12px; height: 12px; border-radius: 4px; background: var(--peligro); }
.muestra-otros { background: color-mix(in srgb, var(--area-seguridad) 35%, var(--panel-2)); }
.columnas-seguridad { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr); }
.piramide { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: 6px; }
.piramide-nivel { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 6px 10px; border-radius: 10px; color: var(--texto); background: var(--panel-2); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.piramide-nivel strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.piramide-nivel span { color: var(--texto-2); font-size: 13.5px; font-weight: 650; }
.piramide-nivel.tono-critico { background: color-mix(in srgb, var(--critico) 62%, var(--panel)); }
.piramide-nivel.tono-peligro { background: color-mix(in srgb, var(--peligro) 46%, var(--panel)); }
.piramide-nivel.tono-aviso { background: color-mix(in srgb, var(--aviso) 40%, var(--panel)); }
.piramide-nivel.tono-bien { background: color-mix(in srgb, var(--bien) 32%, var(--panel)); }
.piramide-nivel.tono-critico span, .piramide-nivel.tono-peligro span { color: var(--texto); }
.tendencia-columnas { list-style: none; margin: 0; padding: 0; height: 168px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--linea-fuerte); }
.columna-tendencia { flex: 1 1 0; min-width: 4px; height: 100%; display: flex; align-items: flex-end; }
.columna-pila { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; border-radius: 4px 4px 0 0; overflow: hidden; background: color-mix(in srgb, var(--area-seguridad) 35%, var(--panel-2)); }
.columna-graves { display: block; width: 100%; background: var(--peligro); }
.columna-tendencia:hover .columna-pila { outline: 2px solid var(--texto-3); outline-offset: 1px; }
.eje-tendencia, .eje-horas { display: flex; justify-content: space-between; color: var(--texto-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranking li { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ranking-nombre { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--texto-2); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ranking-pista { height: 14px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.ranking-total { display: flex; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--area-seguridad) 35%, var(--panel-2)); overflow: hidden; }
.ranking-graves { display: block; height: 100%; background: var(--peligro); }
.ranking-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.marca-paro { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; color: var(--peligro-texto); background: var(--peligro-fondo); }
.reparto-turnos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reparto-turnos li { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.reparto-nombre { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 14px; min-width: 0; }
.reparto-nombre .icono { color: var(--area); flex: none; }
.reparto-pista { height: 14px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.reparto-pista i { display: block; height: 100%; border-radius: inherit; background: var(--area); }
.reparto-turnos strong { text-align: right; font-variant-numeric: tabular-nums; }
.mapa-de-horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.mapa-de-horas li { aspect-ratio: 1 / 1.4; border-radius: 4px; background: var(--panel-2); }
.lista-recientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reciente { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo-2); text-align: left; color: var(--texto); transition: border-color 0.15s ease, background-color 0.15s ease; }
.reciente:hover { border-color: color-mix(in srgb, var(--area) 50%, transparent); background: var(--panel-2); }
.reciente-textos { display: grid; gap: 2px; min-width: 0; }
.reciente-textos small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reciente > .icono { color: var(--texto-3); }
.grafica-recientes > .boton { justify-self: start; }
.indices-seguridad { display: grid; gap: 10px; }
.indices-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.indices-seguridad > .boton { justify-self: start; }
.aviso-en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--aviso-borde); background: var(--aviso-fondo); color: var(--aviso-texto); font-weight: 600; }
.aviso-en-linea > span { flex: 1 1 220px; min-width: 0; }
.aviso-en-linea .boton-enlace { color: inherit; }
.aviso-en-linea.aviso-suave { border-color: var(--linea); background: var(--panel-2); color: var(--texto-2); }
.disponibilidad-flota { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.medidor { display: grid; gap: 6px; }
.medidor-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--texto-2); font-weight: 650; }
.medidor-cabeza strong { font-size: 26px; color: var(--texto); font-variant-numeric: tabular-nums; }
.medidor-pista { height: 12px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.medidor-pista i { display: block; height: 100%; border-radius: inherit; background: var(--area); }
.medidor small { color: var(--texto-3); font-size: 13px; }
.equipos-disponibilidad { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.equipos-disponibilidad li { display: grid; grid-template-columns: minmax(90px, 26%) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.equipos-disponibilidad .encabezado { color: var(--texto-3); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.equipo-nombre { display: grid; min-width: 0; }
.equipo-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipo-nombre small { color: var(--texto-3); font-size: 12.5px; }
.barra-con-valor { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.barra-con-valor .barra-pista i.barra-peligro { background: var(--peligro); }
.barra-con-valor strong { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 560px) {
  .indices-tarjetas, .disponibilidad-flota { grid-template-columns: minmax(0, 1fr); }
  .equipos-disponibilidad li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .equipos-disponibilidad .equipo-nombre { grid-column: 1 / -1; }
  .equipos-disponibilidad .encabezado .equipo-nombre { display: none; }
}
@media (max-width: 1100px) {
  .resumen-seguridad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columnas-seguridad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .resumen-seguridad { grid-template-columns: minmax(0, 1fr); }
  .ranking li, .reparto-turnos li { grid-template-columns: minmax(0, 1fr) auto; }
  .ranking-pista, .reparto-pista { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Inicio ---------- */
.saludo-inicio { display: grid; gap: 2px; }
.saludo-inicio h2 { font-size: 26px; }
.saludo-inicio p { color: var(--texto-3); }
.bloque-inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bloque-titulo { font-size: 18px; }
.rejilla-mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.rejilla-grande { grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 14px; }
.rejilla-mediana { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.mosaico { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--linea); text-align: left; font-weight: 650; color: var(--texto); transition: border-color 0.15s ease, background-color 0.15s ease; }
.mosaico:hover { border-color: color-mix(in srgb, var(--area) 55%, transparent); background: var(--panel-2); }
.mosaico:active { transform: scale(0.985); }
.mosaico-icono { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--area) 16%, transparent); color: var(--area); flex: none; }
.mosaico-nombre { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.mosaico-grande { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 22px 12px 18px; min-height: 156px; font-size: 16.5px; }
.mosaico-grande .mosaico-icono { width: 70px; height: 70px; border-radius: 22px; }
.mosaico-mediano { padding: 16px; font-size: 16px; }
.mosaico-mediano .mosaico-icono { width: 50px; height: 50px; border-radius: 14px; }
.bloque-resto { gap: 16px; }
.grupo-mosaicos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.grupo-mosaicos-titulo { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.boton-aviso-grande { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--area-seguridad) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--area-seguridad) 45%, transparent); text-align: left; color: var(--texto); transition: background-color 0.15s ease; }
.boton-aviso-grande:hover { background: color-mix(in srgb, var(--area-seguridad) 20%, var(--panel)); }
.boton-aviso-icono { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--area-seguridad); color: var(--sobre-area); flex: none; }
.boton-aviso-textos { flex: 1; display: grid; gap: 2px; min-width: 0; }
.boton-aviso-textos strong { font-size: 18px; }
.boton-aviso-textos span { color: var(--texto-2); }
@media (max-width: 720px) {
  .rejilla-grande { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mosaico-grande { min-height: 132px; padding: 16px 8px 14px; font-size: 15px; }
  .mosaico-grande .mosaico-icono { width: 58px; height: 58px; border-radius: 18px; }
  .rejilla-mosaicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { padding: 10px; gap: 10px; font-size: 14.5px; }
  .mosaico .mosaico-icono { width: 36px; height: 36px; }
  .mosaico-grande .mosaico-icono { width: 58px; height: 58px; }
}
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.tarjeta h3 { font-size: 17px; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.vista-previa-marca { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--linea); }
.vista-previa-marca img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.vista-previa-marca div { display: grid; }
.subida-logo { display: grid; gap: 6px; justify-items: start; }
.matriz-permisos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.modulo-permisos { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px 12px 12px; display: grid; gap: 6px; }
.modulo-permisos legend { font-weight: 700; padding: 0 6px; color: var(--acento-texto); }
.modulo-permisos .casilla { background: transparent; border: 0; padding: 4px 0; }
.detalle-accesos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ---------- Trabajo sin internet ---------- */
.indicador-de-conexion { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 650; white-space: nowrap; background: var(--panel-2); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.indicador-de-conexion[data-tono="bien"] { color: var(--bien-texto); }
.indicador-de-conexion[data-tono="aviso"] { color: var(--aviso-texto); background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px var(--aviso-borde); }
.indicador-de-conexion[data-tono="peligro"] { color: var(--peligro-texto); background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px var(--peligro-borde); }
.indicador-de-conexion[data-tono="apagado"] { color: var(--texto); background: var(--panel-3); }
.indicador-de-conexion[data-tono="accion"] { color: var(--aviso-texto); background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px var(--aviso-borde); }
.indicador-de-conexion[data-tono="aviso"] .icono { animation: girar 1.6s linear infinite; }
.indicador-de-conexion[data-tono="prueba"] { color: var(--aviso-texto); background: var(--aviso-fondo); box-shadow: none; outline: 1.5px dashed var(--aviso-borde); outline-offset: -1.5px; }
.franja { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 28px 0; padding: 10px 14px; border-radius: var(--radio-chico); background: var(--panel-2); border: 1px solid var(--linea-fuerte); color: var(--texto); }
.franja p { flex: 1; min-width: 200px; margin: 0; }
.franja .icono { color: var(--acento-fuerte); flex: none; }
.franja-accion { background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.franja-accion .icono { color: var(--aviso); }
.franja-apagada { color: var(--texto-2); }
.franja-apagada .icono { color: var(--texto-3); }
@media (max-width: 960px) {
  .franja { margin: 12px 16px 0; }
}
.aviso-de-version { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra); max-width: calc(100vw - 32px); }
.estado-de-red { gap: 6px; }
.prueba-sin-conexion { gap: 8px; }
.prueba-sin-conexion.encendida { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1.5px var(--aviso-borde); }
.interruptor { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.interruptor-pista { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: background-color 0.15s ease; }
.interruptor-pista i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; }
.interruptor[aria-checked="true"] .interruptor-pista { background: var(--aviso); }
.interruptor[aria-checked="true"] .interruptor-pista i { transform: translateX(20px); }
.interruptor:focus-visible { outline: 2px solid var(--area); outline-offset: 4px; border-radius: 8px; }
.interruptor:disabled { cursor: progress; opacity: 0.7; }
.estado-de-red-cabeza { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.estado-de-red-cabeza .icono { color: var(--acento-fuerte); }
.nota-peligro { border-left-color: var(--peligro); color: var(--peligro-texto); }
.pasos-sin-internet { display: grid; gap: 8px; margin-top: 4px; }
.pasos-sin-internet ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.pasos-sin-internet li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--linea); font-weight: 600; }
.paso-icono { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--area) 16%, transparent); color: var(--area); flex: none; }
.lista-pendientes { display: grid; gap: 22px; margin-top: 18px; }
.grupo-pendientes { display: grid; gap: 10px; }
.grupo-pendientes h3 { font-size: 17px; }
.pendiente { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radio-chico); background: var(--panel); border: 1px solid var(--linea); }
.pendiente-rechazada { border-color: var(--peligro-borde); background: color-mix(in srgb, var(--peligro) 6%, var(--panel)); }
.pendiente-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pendiente-cabeza strong { flex: 1; min-width: 160px; }
.pendiente-detalle { color: var(--texto); }
.pendiente-nota { color: var(--texto-3); font-size: 13.5px; }
.pendiente-motivo { color: var(--peligro-texto); font-weight: 600; }
.pendiente-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fila-con-problema td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
@media (max-width: 720px) {
  .indicador-de-conexion span { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .aviso-de-version { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ---------- Rutas y mapas ---------- */
.ruta-en-linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 1.6fr) minmax(0, 1fr); align-items: center; gap: 12px; }
.ruta-extremo { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 650; font-size: 14px; }
.ruta-extremo-textos { display: grid; min-width: 0; line-height: 1.25; }
.ruta-extremo-textos strong, .ruta-extremo-textos small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruta-extremo-textos small { color: var(--texto-3); font-weight: 600; font-size: 12.5px; }
.ruta-extremo .icono { color: var(--area); flex: none; }
.ruta-destino { justify-content: flex-end; text-align: right; }
.ruta-camino { position: relative; height: 8px; border-radius: 999px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.ruta-recorrido { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--area); }
.ruta-vehiculo { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--area); box-shadow: 0 0 0 3px var(--panel); }
.rejilla-de-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; }
.ficha-elegible { display: block; width: 100%; text-align: left; padding: 0; border-radius: var(--radio); }
.ficha-linea { display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); transition: border-color 0.15s ease, background-color 0.15s ease; }
.ficha-elegible:hover .ficha-linea { border-color: color-mix(in srgb, var(--area) 50%, transparent); background: var(--panel-2); }
.ficha-elegible:hover .ruta-vehiculo { box-shadow: 0 0 0 3px var(--panel-2); }
.ficha-linea-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-linea-cifras { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--texto-2); font-weight: 600; }
.ficha-linea-cifras span { display: inline-flex; align-items: center; gap: 6px; }
.ficha-linea-cifras .icono { color: var(--texto-3); }
.ficha-linea-cifras .con-demora { color: var(--aviso-texto); }
.ficha-linea-nota { color: var(--texto-3); font-size: 13.5px; }
.lista-rutas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.renglon-ruta { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radio-chico); background: var(--panel); border: 1px solid var(--linea); }
.renglon-ruta-cifras { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--texto-2); }
.renglon-ruta-cifras strong { color: var(--texto); }
.tarjeta-mapa { gap: 12px; padding: 16px; }
.ayuda-de-minas { color: var(--texto-2); font-size: 13.5px; font-weight: 600; }
.chips-de-minas .chip small { color: var(--texto-3); font-weight: 600; font-size: 12.5px; }
.chips-de-minas .chip[aria-pressed="true"] small { color: var(--texto-2); }
.corte-de-mina { display: grid; gap: 12px; }
.rutas-resumidas { display: grid; gap: 10px; }
@media (max-width: 720px) {
  .chips-de-minas { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: thin; }
  .chips-de-minas .chip { flex: none; scroll-snap-align: start; }
}
.leyenda-mapa { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--texto-2); font-size: 13.5px; }
.leyenda-mapa span { display: inline-flex; align-items: center; gap: 8px; }
.muestra-camino { width: 28px; height: 6px; border-radius: 999px; background: var(--area); }
.muestra-a-mano { width: 18px; height: 12px; border-radius: 4px; border: 1.5px dashed var(--texto-3); }
.contenedor-mapa { overflow-x: auto; border-radius: var(--radio-chico); border: 1px solid var(--linea); background: var(--fondo-2); }
.mapa-rutas { display: block; width: 100%; min-width: 720px; height: auto; margin: 0 auto; font-family: inherit; }
@media (max-width: 720px) {
  .mapa-rutas { min-width: calc(var(--ancho-natural, 1000px) * 0.85); }
}
.mapa-cielo { fill: var(--mapa-cielo); }
.mapa-roca { fill: var(--mapa-roca); }
.mapa-arte { pointer-events: none; }
:root[data-tema="claro"] .mapa-arte-noche, :root:not([data-tema="claro"]) .mapa-arte-dia { display: none; }
:root:not([data-tema="claro"]) .mapa-arte-roca { filter: brightness(0.6) saturate(0.85); }
.mapa-galeria-arte, .mapa-rampa-arte { filter: drop-shadow(0 0 1.5px rgba(8, 6, 4, 0.8)); }
.mapa-rutas text { paint-order: stroke fill; stroke: var(--mapa-halo); stroke-width: 4px; stroke-linejoin: round; }
.mapa-guia { fill: none; stroke: var(--mapa-guia); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.mapa-banda-nombre { fill: var(--texto-2); font-size: 13px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.mapa-rotulo { fill: var(--texto); font-size: 12.5px; font-weight: 750; }
.mapa-rotulo-boca { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.mapa-lugar { cursor: pointer; }
.mapa-lugar:focus { outline: none; }
.mapa-lugar-codigo { fill: var(--texto); font-size: 14px; font-weight: 750; }
.mapa-lugar-nombre { fill: var(--texto-2); font-size: 12.5px; font-weight: 650; }
.mapa-lugar-a_mano .mapa-estacion, .mapa-lugar-a_mano .mapa-destino-punto { stroke-dasharray: 3 3; }
.mapa-carril { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.mapa-flujos { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.65)); }
.mapa-marcha { fill: none; stroke: var(--mapa-marcha); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.5 11; animation: mapa-marcha 1.4s linear infinite; }
@keyframes mapa-marcha { to { stroke-dashoffset: -11.5; } }
.mapa-carril-mineral { stroke: var(--mapa-flujo-mineral); }
.mapa-carril-tepetate { stroke: var(--mapa-flujo-tepetate); }
.mapa-carril-otro { stroke: var(--mapa-flujo-otro); }
.mapa-flujo { transition: opacity 0.15s ease; }
.mapa-flecha { fill: none; stroke: var(--mapa-flecha); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mapa-nivel { fill: var(--texto-2); font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.mapa-cifra-boca { fill: var(--texto); font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mapa-cifra-entra { fill: var(--texto-2); }
.mapa-estacion { fill: var(--panel); stroke: var(--mapa-flujo-mineral); stroke-width: 3; }
.mapa-estacion-recibe { stroke: var(--mapa-flujo-tepetate); }
.mapa-estacion-halo { fill: var(--mapa-zona); stroke: var(--mapa-marcha); stroke-width: 1; stroke-opacity: 0.5; }
.mapa-destino-punto { fill: var(--panel); stroke: var(--mapa-flujo-mineral); stroke-width: 2.5; }
.mapa-lugar-zona { fill: transparent; stroke: transparent; transition: fill 0.15s ease, stroke 0.15s ease; }
.mapa-lugar:hover .mapa-lugar-zona, .mapa-lugar:focus-visible .mapa-lugar-zona { fill: var(--mapa-zona); stroke: var(--linea-fuerte); }
.mapa-lugar.elegido .mapa-lugar-zona { fill: var(--mapa-zona); stroke: var(--area); stroke-width: 2.5; }
.mapa-lugar-cifra { fill: var(--texto); font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mapa-lugar { transition: opacity 0.15s ease; }
.mapa-destino-cifra { fill: var(--texto); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mapa-lugar-superficie .mapa-lugar-codigo { font-size: 13px; }
.mapa-rutas.con-eleccion .mapa-flujo:not(.resaltado) { opacity: 0.12; }
.mapa-rutas.con-eleccion .mapa-lugar:not(.elegido):not(.vecino) { opacity: 0.35; }
.mapa-y-detalle { display: grid; gap: 12px; }
.detalle-de-lugar { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--radio-chico); border: 1px solid var(--linea); background: var(--panel); }
.detalle-lugar-cabeza { display: flex; align-items: center; gap: 12px; }
.detalle-lugar-cabeza small { display: block; color: var(--texto-2); }
.detalle-lugar-icono { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--area); background: color-mix(in srgb, var(--area) 14%, transparent); }
.detalle-lugar-grupo { display: grid; gap: 6px; }
.detalle-rutas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.detalle-ruta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--fondo-2); box-shadow: inset 4px 0 0 var(--flujo-otro); }
.detalle-ruta-mineral { box-shadow: inset 4px 0 0 var(--flujo-mineral); }
.detalle-ruta-tepetate { box-shadow: inset 4px 0 0 var(--flujo-tepetate); }
.detalle-ruta .icono { color: var(--texto-3); }
.detalle-ruta-lugar { min-width: 0; overflow-wrap: anywhere; }
.detalle-ruta strong { font-variant-numeric: tabular-nums; }
.detalle-ruta small { grid-column: 2 / -1; color: var(--texto-3); }
.renglon-ruta.con-detalle-de-ruta { padding: 0; }
.renglon-ruta-boton { display: grid; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; }
.renglon-ruta-boton:hover { background: var(--panel-2); }
.renglon-ruta-boton:focus-visible { outline: 2px solid var(--area); outline-offset: -2px; }
.renglon-ruta-ver { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--area); font-weight: 700; }
.detalle-ruta.con-detalle-de-ruta { display: block; padding: 0; }
.detalle-ruta-boton { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 2px; align-items: center; width: 100%; padding: 8px 12px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; }
.detalle-ruta-boton small { grid-column: 2 / 4; }
.detalle-ruta-boton > .icono:last-child { grid-column: 4; grid-row: 1 / span 2; color: var(--area); }
.detalle-ruta-boton:hover { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.detalle-ruta-boton:focus-visible { outline: 2px solid var(--area); outline-offset: -2px; }
.aviso-de-ruta { padding: 10px 12px; border-radius: var(--radio-chico); background: var(--aviso-fondo, color-mix(in srgb, var(--aviso) 14%, transparent)); color: var(--aviso-texto); font-size: 14px; }
.leyenda-dias { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texto-2); font-size: 13.5px; }
.leyenda-dias span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-dias i { width: 14px; height: 10px; border-radius: 3px; }
.columnas-dias { display: flex; align-items: stretch; justify-content: center; gap: 2px; height: 132px; padding: 8px 4px 0; overflow-x: auto; border-radius: var(--radio-chico); background: var(--fondo-2); scrollbar-width: thin; }
.columna-dia { flex: 1 0 6px; display: grid; grid-template-rows: minmax(0, 1fr) 18px; gap: 4px; min-width: 6px; max-width: 44px; }
.pila-dia { display: flex; flex-direction: column-reverse; justify-content: flex-start; min-height: 0; }
.pila-dia i { display: block; width: 100%; min-height: 2px; }
.pila-dia i:last-child { border-radius: 3px 3px 0 0; }
.columna-dia small { color: var(--texto-3); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia-turno-0 { background: var(--area); }
.dia-turno-1 { background: color-mix(in srgb, var(--area) 40%, var(--texto-3)); }
.dia-turno-2 { background: var(--texto-3); }
.plan-de-ruta { display: grid; gap: 8px; }
.plan-de-ruta .progreso { height: 12px; }
.plan-de-ruta p { margin: 0; }
.plan-de-ruta small { color: var(--texto-3); }
.rejilla-quienes { display: grid; gap: 12px; }
.ficha-movimiento { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radio-chico); background: var(--panel); border: 1px solid var(--linea); text-align: left; }
.ficha-movimiento-cabeza, .ficha-movimiento-cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-movimiento-cuerpo strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuente-bascula { color: var(--texto-2); }
.muestra-mineral, .muestra-tepetate { width: 28px; height: 8px; border-radius: 999px; background: var(--mapa-flujo-mineral); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.muestra-tepetate { background: var(--mapa-flujo-tepetate); }
.muestra-flecha { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 999px; color: var(--texto-2); background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
@media (prefers-reduced-motion: reduce) {
  .mapa-flujo, .mapa-lugar, .mapa-lugar-zona, .ficha-linea, .mosaico, .chip { transition: none; }
  .mapa-marcha { animation: none; }
  .renglon-ruta-boton, .detalle-ruta-boton { transition: none; }
  .interruptor-pista, .interruptor-pista i { transition: none; }
}
@media (max-width: 720px) {
  .ruta-en-linea { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 8px; }
  .ruta-extremo { font-size: 13px; }
}

/* ---------- Avance de la plataforma ---------- */
.avance-completo { --estado: var(--bien); --estado-texto: var(--bien-texto); }
.avance-avanzando { --estado: var(--aviso); --estado-texto: var(--aviso-texto); }
.avance-sin_empezar { --estado: var(--texto-3); --estado-texto: var(--texto-2); }
.enlace-nav { position: relative; isolation: isolate; }
.avance-enlace { margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 750; color: var(--estado-texto); font-variant-numeric: tabular-nums; }
.barra-avance { display: block; height: 3px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.barra-avance i { display: block; height: 100%; border-radius: inherit; background: var(--estado); }
.enlace-nav .barra-avance { position: absolute; inset: 0; z-index: -1; height: auto; border-radius: inherit; background: color-mix(in srgb, var(--texto-3) 9%, transparent); }
.enlace-nav .barra-avance i { border-radius: 0; background: color-mix(in srgb, var(--estado) 20%, transparent); }
.enlace-nav:hover .barra-avance i, .enlace-nav.activo .barra-avance i { background: color-mix(in srgb, var(--estado) 30%, transparent); }
:root[data-tema="claro"] .enlace-nav .barra-avance i { background: color-mix(in srgb, var(--estado) 13%, transparent); }
:root[data-tema="claro"] .enlace-nav:hover .barra-avance i, :root[data-tema="claro"] .enlace-nav.activo .barra-avance i { background: color-mix(in srgb, var(--estado) 22%, transparent); }
.enlace-nav.activo:has(.barra-avance) { outline: 1.5px solid color-mix(in srgb, var(--area) 75%, transparent); outline-offset: -1.5px; }
.barra-avance-grande { height: 8px; }
.avance-grupo { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0; color: var(--estado-texto); background: color-mix(in srgb, var(--estado) 14%, transparent); }
.enlace-construccion .icono { color: var(--texto-3); }
.avance-global { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); }
.avance-global-numero { font-size: 56px; font-weight: 800; line-height: 1; color: var(--area); font-variant-numeric: tabular-nums; }
.avance-global-detalle { flex: 1; min-width: 220px; display: grid; gap: 10px; }
.avance-global-cuentas { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texto-2); font-weight: 600; }
.avance-global-cuentas span { display: inline-flex; align-items: center; gap: 6px; }
.punto-estado { width: 10px; height: 10px; border-radius: 50%; background: var(--estado); }
.rejilla-avance { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.ficha-avance { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); }
.ficha-avance.elegida { border-color: var(--estado); outline: 3px solid color-mix(in srgb, var(--estado) 30%, transparent); }
.ficha-avance-cabeza { display: flex; align-items: center; gap: 10px; }
.ficha-avance-cabeza strong { flex: 1; min-width: 0; }
.ficha-avance-icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--estado) 16%, transparent); color: var(--estado); flex: none; }
.ficha-avance-total { font-size: 22px; font-weight: 800; color: var(--estado-texto); font-variant-numeric: tabular-nums; }
.capas-avance { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.capas-avance li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px; align-items: center; gap: 10px; color: var(--texto-2); font-size: 13.5px; }
.capas-avance b { text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.capas-avance .barra-avance { height: 6px; }

/* ---------- Tema ---------- */
.boton-tema { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--acento-fuerte); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: background-color 0.15s ease, color 0.15s ease; }
.boton-tema:hover { background: var(--panel-3); color: var(--texto); }
.boton-tema:focus-visible { border-radius: 50%; }
.boton-tema-cabecera { margin-left: auto; }
.boton-tema-acceso { position: absolute; top: 16px; right: 16px; }
.idiomas { align-items: center; flex-wrap: wrap; }

/* ---------- Página no encontrada (efecto glitch basado en ltrademark) ---------- */
.no-encontrado { --brillo: var(--acento-fuerte); position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: min(68vh, 620px); padding: 48px 20px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--fondo); color: var(--brillo); font-size: clamp(11px, 0.55rem + 0.75vw, 16px); text-align: center; }
.no-encontrado-completa { position: fixed; inset: 0; min-height: 100dvh; border: 0; border-radius: 0; }
.no-encontrado::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--brillo); mix-blend-mode: overlay; opacity: 0.6; pointer-events: none; }
.no-encontrado::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--fondo) 21px, transparent 1%) center, linear-gradient(var(--fondo) 21px, transparent 1%) center, var(--linea-fuerte); background-size: 22px 22px; opacity: 0.55; pointer-events: none; }
.no-encontrado-fondo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); mix-blend-mode: luminosity; opacity: 0.6; pointer-events: none; }
.no-encontrado-mensaje { position: relative; z-index: 3; display: grid; justify-items: center; gap: 0.5em; max-width: 40em; }
.no-encontrado-numero { position: relative; margin: 0; font-size: 9em; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; user-select: none; animation: temblar 600ms ease-in-out infinite alternate; text-shadow: 0 0 0.07em var(--brillo), -0.2em 0 2em color-mix(in srgb, var(--brillo) 35%, transparent), 0.2em 0 2em color-mix(in srgb, var(--brillo) 35%, transparent); }
.no-encontrado-numero::before, .no-encontrado-numero::after { content: attr(data-texto); position: absolute; left: 50%; width: 100%; overflow: hidden; }
.no-encontrado-numero::before { top: 0; transform: translate(-50%, 0.34em); height: 0.1em; line-height: 0.5em; opacity: 0.7; animation: escanear 500ms ease-in-out 594ms infinite alternate, interferencia 300ms ease-in-out infinite alternate; }
.no-encontrado-numero::after { top: -0.17em; transform: translate(-50%, 0.34em); height: 0.5em; line-height: 0.1em; opacity: 0.8; animation: escanear 665ms ease-in-out 201ms infinite alternate, interferencia 300ms ease-in-out infinite alternate; }
.no-encontrado-titulo { margin: 0; font-size: 2em; font-weight: 750; color: var(--brillo); text-shadow: 0 0 5px color-mix(in srgb, var(--brillo) 55%, transparent); }
.no-encontrado-texto { margin: 0; font-size: 1.1em; color: var(--texto-2); }
.no-encontrado-volver { margin-top: 1.1em; display: inline-block; padding: 8px 32px; border: 2px solid var(--brillo); color: var(--brillo); font-size: 1.15em; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; box-shadow: inset 0 0 0 0 var(--brillo); transition: box-shadow 0.22s ease, color 0.22s ease; animation: llamar 3s ease-in-out infinite; }
.no-encontrado-volver:hover, .no-encontrado-volver:focus-visible { color: var(--fondo); box-shadow: inset 0 -3em 0 0 var(--brillo); animation: none; }
:root[data-tema="claro"] .no-encontrado::before { opacity: 0.08; }
:root[data-tema="claro"] .no-encontrado::after { opacity: 0.3; }
:root[data-tema="claro"] .no-encontrado-fondo { opacity: 0.16; mix-blend-mode: multiply; }
@keyframes escanear { from, 20%, 100% { height: 0; transform: translate(-50%, 0.44em); } 10%, 15% { height: 1em; line-height: 0.2em; transform: translate(-55%, 0.26em); } }
@keyframes llamar { 0%, 100% { opacity: 1; } 30%, 35% { opacity: 0.45; } }
@keyframes temblar {
  0%, 100% { transform: translate(-1px, 0); }
  10% { transform: translate(2px, 1px); }
  30% { transform: translate(-3px, 2px); }
  35% { transform: translate(2px, -3px); filter: blur(4px); }
  45% { transform: translate(2px, 2px) skewY(-8deg) scale(0.96, 1); filter: blur(0); }
  50% { transform: translate(-3px, 1px); }
}
@keyframes interferencia {
  0% { clip: rect(17px, 9999px, 83px, 0); } 10% { clip: rect(76px, 9999px, 14px, 0); } 20% { clip: rect(26px, 9999px, 39px, 0); }
  30% { clip: rect(92px, 9999px, 37px, 0); } 40% { clip: rect(18px, 9999px, 7px, 0); } 50% { clip: rect(90px, 9999px, 19px, 0); }
  60% { clip: rect(36px, 9999px, 3px, 0); } 70% { clip: rect(83px, 9999px, 38px, 0); } 80% { clip: rect(7px, 9999px, 16px, 0); }
  90% { clip: rect(86px, 9999px, 42px, 0); } 100% { clip: rect(19px, 9999px, 48px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .no-encontrado-numero, .no-encontrado-numero::before, .no-encontrado-numero::after, .no-encontrado-volver { animation: none; }
}

/* ---------- Guías ---------- */
.boton-guia { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; color: var(--texto); background: color-mix(in srgb, var(--area) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area) 35%, transparent); font-size: 13.5px; font-weight: 700; flex: none; transition: background-color 0.15s ease; }
.boton-guia:hover { background: color-mix(in srgb, var(--area) 20%, transparent); }
.boton-guia .icono { color: var(--area); }
.boton-comentarios { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 10px 5px 10px; border-radius: 999px; color: var(--texto); background: color-mix(in srgb, var(--area) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area) 35%, transparent); font-size: 13.5px; font-weight: 700; flex: none; transition: background-color 0.15s ease; }
.boton-comentarios:hover { background: color-mix(in srgb, var(--area) 20%, transparent); }
.boton-comentarios > .icono { color: var(--area); }
.insignia-comentarios { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 12px; font-weight: 800; line-height: 1; }
.insignia-comentarios[data-tono="bien"] { background: var(--bien-fondo); color: var(--bien-texto); }
.insignia-comentarios .icono { color: currentColor; }
.panel-comentarios { display: grid; gap: 16px; }
.comentarios-pagina { display: grid; gap: 18px; }
.formulario-comentario { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.chip-todo-bien { justify-self: start; }
.chip-todo-bien .icono { color: var(--texto-3); }
.chip-todo-bien[aria-pressed="true"] { background: var(--bien-fondo); border-color: var(--bien); color: var(--bien-texto); }
.chip-todo-bien[aria-pressed="true"] .icono { color: currentColor; }
.acciones-comentario { display: flex; justify-content: flex-end; }
.comentarios-historial { display: grid; gap: 12px; }
.lista-de-comentarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.comentario { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.comentario-inicial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--area) 18%, var(--panel)); color: var(--texto); font-size: 13px; font-weight: 800; }
.comentario-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; }
.comentario-cabeza time { color: var(--texto-3); font-size: 13px; }
.comentario-texto { margin: 4px 0 0; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.comentario-por-enviar .comentario-inicial { background: var(--panel-3); }
.comentarios-vacio { margin: 0; padding: 12px 0; color: var(--texto-3); text-align: center; }
.ver-mas-comentarios { justify-self: center; }
.comentarios-paginas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fila-pagina-comentada { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--panel); color: var(--texto); text-align: left; transition: border-color 0.15s ease; }
.fila-pagina-comentada:hover { border-color: var(--texto-3); }
.fila-pagina-comentada > .icono { color: var(--area); }
.fila-pagina-textos { display: grid; gap: 2px; min-width: 0; }
.fila-pagina-textos small { overflow: hidden; color: var(--texto-3); text-overflow: ellipsis; white-space: nowrap; }
.insignia-con-icono::before { content: none; }
.insignia-con-icono .icono { color: currentColor; }
.guia-portada { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radio); background: color-mix(in srgb, var(--area) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--area) 28%, var(--linea)); }
.guia-portada-icono { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--area) 16%, transparent); color: var(--area); }
.guia-portada-textos { display: grid; gap: 10px; min-width: 0; }
.guia-resumen { font-size: 17px; color: var(--texto); max-width: 72ch; }
.guia-para-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--texto-2); font-size: 13.5px; }
.guia-para-quien strong { margin-right: 4px; }
.guia-puesto { padding: 2px 10px; border-radius: 999px; background: var(--panel-3); color: var(--texto); font-weight: 600; }
.guia-ir { white-space: nowrap; }
.guia-antes { display: grid; gap: 8px; padding: 14px 18px; border-radius: var(--radio-chico); background: var(--info-fondo); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
.guia-antes strong { display: inline-flex; align-items: center; gap: 8px; color: var(--info-texto); }
.guia-antes ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.guia-indice { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-seccion { display: grid; gap: 14px; scroll-margin-top: 96px; }
.guia-seccion-titulo { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.guia-seccion-titulo .icono { color: var(--area); }
.guia-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 14px; align-items: start; }
.guia-accion { display: grid; gap: 12px; padding: 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); scroll-margin-top: 96px; }
.guia-accion-cabeza { display: flex; align-items: center; gap: 12px; }
.guia-accion-cabeza h4 { font-size: 17px; }
.guia-accion-icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--area) 15%, transparent); color: var(--area); flex: none; }
.guia-permiso { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--fondo-2); color: var(--texto-2); font-size: 12.5px; font-weight: 650; }
.guia-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 8px; }
.guia-pasos li { counter-increment: paso; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.guia-pasos li::before { content: counter(paso); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--texto); font-size: 13px; font-weight: 750; }
.guia-que-pasa { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radio-chico); background: var(--bien-fondo); border-left: 3px solid var(--bien); }
.guia-que-pasa strong { color: var(--bien-texto); font-size: 13.5px; }
.guia-influye, .guia-cuidado { display: grid; gap: 8px; }
.guia-influye strong { font-size: 13.5px; color: var(--texto-2); }
.guia-influye ul, .guia-cuidado ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.guia-influye li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; color: var(--texto-2); font-size: 14px; }
.guia-cuidado { padding: 12px 14px; border-radius: var(--radio-chico); background: var(--aviso-fondo); }
.guia-cuidado strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--aviso-texto); }
.guia-cuidado li { position: relative; padding-left: 16px; font-size: 14px; }
.guia-cuidado li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--aviso); }
.chip-pantalla { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--area) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--area) 35%, transparent); color: var(--texto); font-size: 13px; font-weight: 650; white-space: nowrap; }
.chip-pantalla .icono { color: var(--area); }
button.chip-pantalla { transition: background-color 0.15s ease; }
button.chip-pantalla:hover { background: color-mix(in srgb, var(--area) 22%, var(--panel)); }
.guia-diagramas { display: grid; gap: 14px; }
.diagrama { margin: 0; display: grid; gap: 14px; padding: 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); }
.diagrama figcaption { font-weight: 750; font-size: 16px; }
.diagrama-flujo { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.flujo-paso { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--linea); }
.flujo-paso strong { font-size: 14.5px; }
.flujo-paso p { color: var(--texto-2); font-size: 13.5px; }
.flujo-numero { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--area); color: var(--sobre-area); font-weight: 800; font-size: 14px; }
.flujo-paso:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -23px; width: 18px; height: 16px; transform: translateY(-50%); background: var(--texto-3); clip-path: polygon(0 32%, 55% 32%, 55% 0, 100% 50%, 55% 100%, 55% 68%, 0 68%); }
.diagrama-estados { display: grid; gap: 14px; }
.estados-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.estado-pastilla { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--fondo-2); border: 1px solid var(--linea-fuerte); color: var(--texto); white-space: nowrap; }
.estado-pastilla i { width: 10px; height: 10px; border-radius: 50%; background: var(--tono-estado, var(--texto-3)); flex: none; }
.estado-bien { --tono-estado: var(--bien); background: var(--bien-fondo); border-color: var(--bien-borde); }
.estado-aviso { --tono-estado: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.estado-peligro { --tono-estado: var(--peligro); background: var(--peligro-fondo); border-color: var(--peligro-borde); }
.estado-neutro { --tono-estado: var(--texto-3); }
.estados-transiciones { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.estados-transiciones li { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto; align-items: center; gap: 12px; }
.transicion { position: relative; display: grid; gap: 2px; color: var(--texto-2); font-size: 13px; text-align: center; padding-bottom: 14px; }
.transicion::before { content: ""; position: absolute; left: 0; right: 12px; bottom: 6px; border-top: 2px dashed var(--linea-fuerte); }
.transicion-flecha { position: absolute; right: -4px; bottom: -3px; color: var(--texto-3); line-height: 0; }
.diagrama-relaciones { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.relaciones-columna { display: grid; gap: 8px; align-content: start; }
.relaciones-columna h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.relaciones-columna ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; }
.relaciones-columna li { display: grid; gap: 3px; justify-items: start; }
.relaciones-columna small { color: var(--texto-2); font-size: 13px; }
.relaciones-centro { display: flex; align-items: center; gap: 10px; color: var(--texto-3); }
.relaciones-nodo { display: grid; justify-items: center; gap: 6px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--area) 12%, var(--panel)); border: 2px solid var(--area); color: var(--texto); text-align: center; min-width: 130px; }
.relaciones-nodo .icono { color: var(--area); }
.relaciones-flecha { line-height: 0; }
.guia-casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: start; }
.guia-caso { display: grid; gap: 10px; padding: 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); }
.guia-caso h4 { font-size: 16.5px; }
.guia-caso-quien { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--area) 12%, transparent); color: var(--texto); font-size: 12.5px; font-weight: 700; }
.guia-caso-quien .icono { color: var(--area); }
.guia-caso-situacion { color: var(--texto-2); }
.guia-caso-resultado { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--bien-fondo); font-weight: 600; }
.guia-caso-resultado .icono { color: var(--bien); flex: none; margin-top: 3px; }
.guia-preguntas { display: grid; gap: 8px; }
.guia-pregunta { border-radius: var(--radio-chico); background: var(--panel); border: 1px solid var(--linea); }
.guia-pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 650; list-style: none; border-radius: inherit; }
.guia-pregunta summary::-webkit-details-marker { display: none; }
.guia-pregunta summary .icono { color: var(--texto-3); transition: transform 0.15s ease; flex: none; }
.guia-pregunta[open] summary .icono { transform: rotate(180deg); }
.guia-pregunta p { padding: 0 16px 14px; color: var(--texto-2); }
.mosaico-guia-icono { margin-left: auto; color: var(--texto-3); line-height: 0; }
@media (max-width: 900px) {
  .diagrama-flujo { grid-auto-flow: row; gap: 24px; }
  .flujo-paso:not(:last-child)::after { top: auto; bottom: -21px; right: auto; left: 22px; transform: rotate(90deg); }
  .diagrama-relaciones { grid-template-columns: minmax(0, 1fr); }
  .relaciones-centro { flex-direction: column; justify-self: center; }
  .relaciones-flecha { transform: rotate(90deg); }
}
@media (max-width: 720px) {
  .boton-guia { width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: 2px; }
  .boton-guia span { display: none; }
  .boton-comentarios { width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: 2px; }
  .boton-comentarios > span { display: none; }
  .insignia-comentarios { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  .guia-portada { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; gap: 14px; }
  .guia-portada-icono { width: 48px; height: 48px; border-radius: 14px; }
  .guia-ir { grid-column: 1 / -1; justify-self: start; }
  .estados-transiciones li { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--fondo-2); }
  .transicion { text-align: left; padding: 0 0 0 26px; }
  .transicion::before { content: none; }
  .transicion-flecha { left: 0; right: auto; top: 0; bottom: auto; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .guia-pregunta summary .icono, .boton-guia, .boton-comentarios, .fila-pagina-comentada, button.chip-pantalla, .boton-tema, .boton-vista, .boton-pantalla-completa, .tabla.como-tarjetas tr.elegible, .reciente { transition: none; }
}