/* gps-sistema.css · GPS Track · Sistema visual · bloque F2/F3/F4/F5
   =========================================================================
   REQUIERE, CARGADO ANTES:  assets/css/gps-tokens-v5.css
   Sin el, esta hoja no pinta: aqui no hay ni un color literal salvo el
   naranja de aviso, que va marcado y explicado mas abajo.

   QUE HAY AQUI
     1. La capa semantica: nombres de USO sobre los nombres de COLOR.
     2. Tipografia.
     3. .gpsi           · los iconos
     4. .gps-visible    · el ojo y el ojo tachado          (F5)
     5. .gps-barra      · avance repartido por peso de fase (F3)
     6. .gps-cuenta     · de donde sale este numero         (F4)

   LO QUE ESTA HOJA NO HACE NUNCA
     · Degradados. Ninguno.
     · Sombras de color. La elevacion se hace con BORDE, no con sombra.
     · Verde #04A86C como color de texto sobre claro: mide 2,87 y no pasa.
       Sobre claro el verde que se lee es --gps-verde-texto (5,97).
     · Acero #8A8F96 como texto sobre claro: mide 3,03 y no pasa. El token
       ya lo dice ("sobre oscuro"); aqui se respeta.
   ========================================================================= */


/* ── 1 · CAPA SEMANTICA ──────────────────────────────────────────────────
   Se nombra por USO, no por color, para que cambiar la marca sea cambiar
   los tokens y no perseguir 84 apariciones por las hojas.
   Contexto CLARO por defecto (fondo --gps-blanco).                        */

:root {
  --sis-fondo:          var(--gps-blanco);
  --sis-fondo-hundido:  var(--gps-humo);
  --sis-borde:          var(--gps-humo);
  --sis-borde-fuerte:   var(--gps-grafito);

  --sis-titular:        var(--gps-azul);      /* 15,60 sobre blanco */
  --sis-texto:          var(--gps-grafito);   /* 15,53 */
  --sis-meta:           var(--gps-grafito);   /* NO acero: sobre claro da 3,03 */

  --sis-accion:         var(--gps-verde);       /* RELLENO. Nunca texto sobre claro */
  --sis-accion-texto:   var(--gps-verde-texto); /* 5,97. El unico verde que se lee */
  --sis-sobre-accion:   var(--gps-azul);        /* lo que va ENCIMA del verde: 5,44 */

  --sis-aviso:          var(--gps-aviso);        /* relleno */
  --sis-aviso-texto:    var(--gps-aviso-texto);  /* texto sobre claro */

  --sis-radio:   4px;
  --sis-radio-g: 8px;
  --sis-tinta-icono: currentColor;
}

/* EL NARANJA DE AVISO · UNA SOLA PAREJA EN TODO EL PRODUCTO
   ------------------------------------------------------------------------
   V5.0 NO trae naranja, y con razon: el manual prohibe el naranja COMO
   COLOR DE MARCA ("Meter naranja en cualquier pieza de marca: no esta en la
   paleta y no entra"). Pero el producto necesita UN aviso, y hoy usa tres
   rojos distintos y ninguno es token (#FCA5A5, #DC2626, #FCA5A5 sobre claro
   mide 1,77: invisible).

   Asi que se declara aqui UNA pareja, como COLOR DE ESTADO, nunca de marca,
   construida con la misma relacion que la pareja verde del manual:
       verde  relleno #04A86C -> azul encima 5,44   |  verde-texto 5,97
       aviso  relleno #D2521A -> azul encima 5,63   |  aviso-texto 5,64
   Pendiente de que el CEO la ratifique en V5.1. Mientras tanto vive aqui,
   sola y con nombre, para que nadie invente un segundo naranja.           */
:root {
  --gps-aviso:       #D2521A;  /* relleno de aviso. Encima va --gps-azul */
  --gps-aviso-texto: #AD4920;  /* unico naranja legible como texto sobre claro */
}

/* Contexto OSCURO. Se pone la clase en cualquier contenedor y todo lo de
   dentro se recolorea solo. No se duplican reglas: se reasignan tokens.   */
.gps-oscuro {
  --sis-fondo:         var(--gps-azul);
  --sis-fondo-hundido: var(--gps-azul-2);
  --sis-borde:         var(--gps-azul-3);
  --sis-borde-fuerte:  var(--gps-apagado);

  --sis-titular:       var(--gps-blanco);      /* 15,60 sobre azul */
  --sis-texto:         var(--gps-apagado);     /*  7,88 */
  --sis-meta:          var(--gps-acero);       /*  5,14 · aqui SI vale acero */

  --sis-accion-texto:  var(--gps-verde-claro); /*  8,94 */
  --sis-aviso-texto:   var(--gps-aviso);       /*  5,63 sobre azul */

  background: var(--sis-fondo);
  color: var(--sis-texto);
}


/* ── 2 · TIPOGRAFIA ───────────────────────────────────────────────────── */

.gps-sis {
  background: var(--sis-fondo);
  color: var(--sis-texto);
  font-family: var(--gps-body);
  font-size: var(--gps-body-size);
  line-height: 1.65;
}
.gps-display {
  font-family: var(--gps-display);
  font-weight: 800;
  font-size: var(--gps-display-size);
  letter-spacing: var(--gps-track-display);
  line-height: 1.04;
  color: var(--sis-titular);
}
.gps-h2 { font-family: var(--gps-ui); font-weight: 600; font-size: var(--gps-h2);
          line-height: 1.2; letter-spacing: -.01em; color: var(--sis-titular); }
.gps-h3 { font-family: var(--gps-ui); font-weight: 600; font-size: var(--gps-h3);
          line-height: 1.3; color: var(--sis-titular); }
.gps-meta { color: var(--sis-meta); font-size: 13px; line-height: 1.5; }
.gps-mono {
  font-family: var(--gps-mono);
  font-size: var(--gps-mono-size);
  letter-spacing: var(--gps-track-mono);
  text-transform: uppercase;
}
/* Numeros: ancho fijo, para que una columna de cifras quede a plomo. */
.gps-cifra {
  font-family: var(--gps-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}


/* ── 3 · ICONOS ──────────────────────────────────────────────────────────
   El SVG no lleva color: lo hereda. Para recolorear, se le cambia el
   `color` al contenedor.                                                  */

.gpsi {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  color: var(--sis-tinta-icono);
}
/* Envoltorio de [data-icono]: que no altere el ritmo de la linea. */
[data-icono] { display: inline-flex; align-items: center; }

/* Los iconos NO se rellenan. Blindaje contra un `fill` de otra hoja. */
.gpsi path, .gpsi circle, .gpsi rect, .gpsi line, .gpsi polyline, .gpsi polygon {
  fill: none !important;
}


/* ── 4 · F5 · EL OJO Y EL OJO TACHADO ────────────────────────────────────
   Contesta, sin leer una palabra, que ve el cliente y que no.

     <span class="gps-visible" data-visible="si"></span>
     <span class="gps-visible" data-visible="no"></span>

   El texto lo pone la propia hoja: asi dice lo mismo en las cuatro
   versiones y nadie escribe "oculto" en una pantalla y "privado" en otra.
   El icono lo inyecta gps-iconos.js.

   Por que el "no" no es rojo ni naranja: que el cliente no vea una pieza
   no es un fallo, es una decision. El aviso se reserva para lo que va mal. */

.gps-visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--sis-borde);
  border-radius: 999px;
  font-family: var(--gps-ui);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--sis-fondo);
}
.gps-visible[data-visible="si"] {
  color: var(--sis-accion-texto);
  border-color: var(--sis-accion-texto);
}
.gps-visible[data-visible="no"] {
  color: var(--sis-meta);
  background: var(--sis-fondo-hundido);
  border-color: var(--sis-borde);
}
.gps-oscuro .gps-visible[data-visible="no"] { background: var(--sis-fondo-hundido); }

/* El rotulo lo escribe la hoja, no la plantilla.
   Se excluye la variante compacta en cada regla: si se dejara para el final
   con un `content:none` suelto, perderia por especificidad y el chip de solo
   icono saldria con texto (paso, y se veia). */
.gps-visible:not(.gps-visible--solo-icono)::after {
  content: attr(data-rotulo);
  font-family: var(--gps-ui);
}
.gps-visible:not(.gps-visible--solo-icono)[data-visible="si"]:not([data-rotulo])::after {
  content: "Lo ve el cliente";
}
.gps-visible:not(.gps-visible--solo-icono)[data-visible="no"]:not([data-rotulo])::after {
  content: "No lo ve el cliente";
}

/* Variante compacta para filas densas: se queda el icono, el texto pasa a
   ser `title` + aria-label. NUNCA se usa sin uno de los dos. */
.gps-visible--solo-icono { padding: 4px; gap: 0; }

/* Variante interruptor: el admin cambia la visibilidad desde aqui. */
button.gps-visible { cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; }
button.gps-visible:hover { border-color: var(--sis-borde-fuerte); }
button.gps-visible:focus-visible {
  outline: 2px solid var(--sis-accion-texto);
  outline-offset: 2px;
}


/* ── 5 · F3 · BARRA DE AVANCE REPARTIDA POR PESO DE FASE ─────────────────
   Un anillo dice 75 %. No dice que fase va por donde. Esta barra si:
   cada bloque ocupa EL PESO de su fase y se llena segun SU avance.
   La pinta gps-piezas.js -> GPSPiezas.barra(fases).                       */

.gps-barra { display: block; }

.gps-barra__pista {
  display: flex;
  gap: 2px;
  height: 22px;
  border: 1px solid var(--sis-borde);
  border-radius: var(--sis-radio);
  overflow: hidden;
  background: var(--sis-fondo-hundido);
}
/* flex-grow = peso de la fase. De ahi sale el reparto, no de un ancho fijo. */
.gps-barra__tramo {
  flex: var(--peso) 1 0;
  min-width: 0;
  position: relative;
  background: var(--sis-fondo-hundido);
}
.gps-barra__lleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--avance);
  background: var(--sis-accion);          /* verde de RELLENO: aqui si */
}
.gps-barra__tramo[data-estado="aviso"] .gps-barra__lleno { background: var(--sis-aviso); }

/* Que fase es cada bloque, sin depender del color. */
.gps-barra__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gps-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--sis-titular);
  mix-blend-mode: normal;
}
/* Sobre el verde va azul (5,44). Sobre el hueco tambien (11,83 sobre humo). */

.gps-barra__leyenda {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.gps-barra__fila {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--sis-texto);
}
.gps-barra__fila > .gps-barra__idx {
  font-family: var(--gps-mono); font-size: 11px; color: var(--sis-meta);
}
.gps-barra__fila > .gps-barra__peso,
.gps-barra__fila > .gps-barra__pct { justify-self: end; }
.gps-barra__peso { color: var(--sis-meta); }
.gps-barra__pct  { font-family: var(--gps-mono); font-variant-numeric: tabular-nums; }
.gps-barra__fila[data-estado="aviso"] .gps-barra__pct { color: var(--sis-aviso-texto); }

/* En estrecho el peso NO se esconde: baja a una segunda linea. Ocultarlo
   dejaria la pieza sin lo unico que la distingue de una barra cualquiera. */
@media (max-width: 420px) {
  .gps-barra__pista { height: 26px; }
  .gps-barra__fila {
    grid-template-columns: auto 1fr auto;
    row-gap: 0;
  }
  .gps-barra__fila > .gps-barra__idx { grid-area: 1 / 1; }
  .gps-barra__fila > .gps-barra__nom { grid-area: 1 / 2; }
  .gps-barra__fila > .gps-barra__pct { grid-area: 1 / 3; }
  .gps-barra__fila > .gps-barra__peso {
    grid-area: 2 / 2 / 3 / 4;
    justify-self: start;
    font-size: 12px;
  }
}


/* ── 6 · F4 · DE DONDE SALE ESTE NUMERO ──────────────────────────────────
   La cuenta abierta: Σ(peso × avance) ÷ 100, fase por fase.
   Un porcentaje que no se puede comprobar es una promesa, no un dato.
   La pinta gps-piezas.js -> GPSPiezas.cuenta(fases).                      */

.gps-cuenta {
  border: 1px solid var(--sis-borde);
  border-radius: var(--sis-radio-g);
  background: var(--sis-fondo);
}
.gps-cuenta > summary {
  cursor: pointer;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gps-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--sis-titular);
  list-style: none;
}
.gps-cuenta > summary::-webkit-details-marker { display: none; }
.gps-cuenta > summary:focus-visible { outline: 2px solid var(--sis-accion-texto); outline-offset: -2px; }
.gps-cuenta > summary .gpsi { transition: transform .15s ease; }
.gps-cuenta[open] > summary .gpsi { transform: rotate(90deg); }

.gps-cuenta__cuerpo { padding: 0 14px 14px; }

.gps-cuenta__tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gps-cuenta__tabla th,
.gps-cuenta__tabla td { padding: 7px 6px; text-align: right; }
.gps-cuenta__tabla th:first-child,
.gps-cuenta__tabla td:first-child { text-align: left; }
.gps-cuenta__tabla thead th {
  font-family: var(--gps-mono);
  font-size: var(--gps-mono-size);
  letter-spacing: var(--gps-track-mono);
  text-transform: uppercase;
  color: var(--sis-meta);
  font-weight: 400;
  border-bottom: 1px solid var(--sis-borde);
  white-space: nowrap;
}
.gps-cuenta__tabla tbody td { border-bottom: 1px solid var(--sis-borde); color: var(--sis-texto); }
.gps-cuenta__tabla td.gps-cifra { font-variant-numeric: tabular-nums; }
.gps-cuenta__tabla tfoot td {
  padding-top: 10px;
  font-family: var(--gps-ui);
  font-weight: 600;
  color: var(--sis-titular);
}
.gps-cuenta__op { color: var(--sis-meta); }

.gps-cuenta__formula {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--sis-borde);
  border-radius: var(--sis-radio);
  background: var(--sis-fondo-hundido);
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--sis-titular);
  line-height: 1.6;
  overflow-x: auto;
}

/* Si los pesos no suman 100, se dice. No se maquilla. */
.gps-cuenta__alerta {
  margin: 10px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--sis-aviso-texto);
  border-radius: var(--sis-radio);
  color: var(--sis-aviso-texto);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 420px) {
  .gps-cuenta__tabla { font-size: 12.5px; }
  .gps-cuenta__tabla th, .gps-cuenta__tabla td { padding: 6px 3px; }
  .gps-cuenta__formula { font-size: 11px; }
}


/* ── UTILIDAD ─────────────────────────────────────────────────────────── */
.gps-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .gps-cuenta > summary .gpsi { transition: none; }
}