/* ============================================================
   OPERACIÓN · PASE DE LISTA v2 · las medidas

   Rediseño aprobado por Dirección el 25/oct/2026 («apruebo la B»).
   La geometría sale de `docs/mockups-orvik/pase-de-lista-v2-aprobado.html`;
   el color y la medida, de `orvik-tokens.css`. Ningún hex, ningún
   tamaño suelto: donde el mockup pide 28 px y no hay token de 28, se
   compone con `calc` de dos tokens en vez de escribir un número.

   ── QUÉ CAMBIÓ RESPECTO AL DISEÑO DEL 22-OCT ──

   · SE FUE LA LÍNEA DE COLOR DE LA IZQUIERDA. La tarjeta es neutra y el
     estado vive en una pastilla con texto e ícono, no en un borde que
     hay que aprender. Un borde ámbar no dice «por confirmar»: lo dice
     la palabra «por confirmar».

   · UNA TARJETA POR SITIO, no por cobertura. Adentro, un renglón por
     servicio de hoy. Antes un sitio con tres turnos eran tres tarjetas
     separadas y no se veía que eran el mismo lugar.

   · LOS CUATRO NÚMEROS SON EL FILTRO. Eran adorno; ahora se tocan.

   · NADA EN ROJO. El rojo de este sistema es el de la Alerta. Una falta
     es un hecho que hay que cubrir, no una alarma: va en `--neutro` con
     su botón al lado.

   ── LOS ESTADOS Y SUS TOKENS ──

     por confirmar · tarde ... --proceso-suave  / --proceso-texto
     se presentó ............. --exito-suave   / --exito-texto
     falta ................... --neutro-suave  / --neutro-texto
     aún no entra ............ --neutro-suave  / --neutro-texto
     falta quién ............. --proceso-suave / --proceso-texto
                               + punteado, como el Master Staffing

   `--exito` aquí SÍ es verde de «se presentó», que es exactamente lo
   que significa en todo el sistema. El Master Staffing no lo usa para
   «trabaja» justamente para no decir dos cosas con el mismo color.
   ============================================================ */

/* ── LA BARRA DE MIGAS, EL TÍTULO Y LAS PESTAÑAS ──
   Viven aquí una sola vez y el Master Staffing las reutiliza: son la
   misma tira. Copiarlas sería tener dos definiciones de la misma
   pestaña, que se separan solas el día que se agregue una tercera. */
#app .pase-barra {
  min-height: var(--alto-barra); border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-2) var(--e-5);
  font: var(--t-sec); color: var(--texto-2);
  margin: 0 0 var(--hueco);
}
#app .pase-barra b { color: var(--texto); font-weight: 600 }

#app .pase-tit {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin: 0 0 var(--hueco);
}
#app .pase-tit h1 { font: var(--t-pantalla); margin: 0; letter-spacing: -.01em }
#app .pase-tit h1::before { content: none }

/* ── LAS PESTAÑAS · CONTROL SEGMENTADO · anexo del 27-oct ──

   Eran tres píldoras sueltas, cada una con su borde. Ahora son UN
   control, con la forma que el anexo dio como referencia autorizada:
   la de «Todo · Guardias · Rondines» de En vivo (`.opv-filtro`).

   Las medidas salen del anexo, ninguna inventada: contenedor de radio
   `--r-control-g` (14), borde de 1, fondo `--superficie` y relleno 4;
   cada segmento de radio `--r-control` (12) y alto 36 --4 + 36 + 4 = 44
   de toque, que es lo que se pide--; y la activa con el acento al 14 %
   y el texto en acento, peso 600.

   SÓLIDO, NUNCA VIDRIO. El vidrio de En vivo sólo se justifica porque
   aquel control FLOTA sobre el plano; éste va sobre la página.

   `inline-flex` y no `flex`: el control mide lo que miden sus
   pestañas, no el ancho de la fila. Con `flex` se estiraba de lado a
   lado del título. */
#app .pase-tabs {
  display: inline-flex; gap: var(--e-1); flex-wrap: wrap;
  padding: var(--e-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-control-g);
  background: var(--superficie);
}
#app .pase-tb {
  min-height: 36px; padding: 0 var(--e-4);
  border-radius: var(--r-control);
  border: 0;
  background: transparent; color: var(--texto-2);
  display: inline-flex; align-items: center;
  font: var(--t-sec); font-family: inherit; cursor: pointer;
  transition: background var(--dur-base) var(--curva);
}
#app .pase-tb:hover { background: var(--control) }
/* La activa, con el acento al 14 % y el texto en acento. El relleno de
   `--texto` sobre `--superficie` que tenía antes era de una píldora
   suelta: dentro de un segmentado, el bloque negro pesa de más. */
#app .pase-tb.on {
  background: color-mix(in srgb, var(--marca-principal) 14%, transparent);
  color: var(--marca-principal-texto); font-weight: 600;
  cursor: default;
}
#app .pase-tb:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }

/* ── LOS CUATRO NÚMEROS · QUE SON EL FILTRO ──
   Son botones, no tarjetas de adorno. La cifra va en `--texto` --un
   número no es un semáforo-- y el color vive SÓLO en su ícono, que es
   donde sirve: distingue de un vistazo cuál es cuál sin pintar la
   pantalla de colores. */
#app .pase-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hueco-tarjetas); margin: 0 0 var(--e-3);
}
#app .pase-k {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea);
  min-width: 0; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: border-color var(--dur-base) var(--curva);
}
#app .pase-k:hover { border-color: var(--linea-fuerte) }
#app .pase-k:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }
/* El filtro abierto se marca con el anillo de foco de la casa, no con
   un fondo: el fondo ya lo usa cada estado y repetirlo confundiría. */
#app .pase-k[aria-pressed="true"] {
  border-color: var(--foco);
  box-shadow: inset 0 0 0 1px var(--foco);
  cursor: default;
}
#app .pase-k .pase-ic {
  width: var(--e-10); height: var(--e-10); flex: none;
  border-radius: var(--r-control);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--e-5);
}
#app .pase-k .pase-tx { min-width: 0 }
#app .pase-k small { display: block; font: var(--t-sec); color: var(--texto-2) }
#app .pase-k b { font: var(--t-cifra); color: var(--texto) }
#app .pase-ic.pro { background: var(--proceso-suave); color: var(--proceso-texto) }
#app .pase-ic.exi { background: var(--exito-suave);   color: var(--exito-texto) }
#app .pase-ic.neu { background: var(--neutro-suave);  color: var(--neutro-texto) }

/* ── QUÉ SE ESTÁ ENSEÑANDO ──
   Un filtro que no dice que está puesto es una pantalla que miente por
   omisión: con «por confirmar» abierto, los servicios completos no
   salen, y sin este renglón parecería que no existen. */
/* Va en bloque y NO en flex con `gap`: en flex cada trozo de texto es
   un elemento y el hueco se mete también antes de la coma, así que
   salía «por confirmar , por hora de entrada». El botón va en línea. */
#app .pase-mostrando {
  font: var(--t-sec); color: var(--texto-3);
  margin: 0 0 var(--hueco);
}
#app .pase-mostrando b { color: var(--texto-2); font-weight: 600 }
#app .pase-todos {
  background: none; border: 0; padding: 0; font: var(--t-sec);
  font-family: inherit; font-weight: 600; cursor: pointer;
  color: var(--marca-principal-texto);
}
#app .pase-todos:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }

/* ── LAS TARJETAS · UNA POR SITIO ── */
#app .pase-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hueco-tarjetas); align-items: start;
}
#app .pase-sv {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1);
  min-width: 0; overflow: hidden;
}
#app .pase-cab {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) var(--e-5) var(--e-3);
}
#app .pase-cab .pase-tx { flex: 1; min-width: 0 }
#app .pase-cab h3 {
  margin: 0; font: var(--t-tarjeta); color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .pase-cab small { display: block; font: var(--t-sec); color: var(--texto-3) }

/* El anillo: cuánto de este sitio ya está confirmado. Mide 28 px, que
   no es un token: se compone con dos. El hueco de en medio es del color
   de la tarjeta, así que el anillo es un arco y no un disco. */
#app .pase-cuenta {
  font: var(--t-sec); color: var(--texto-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--e-2); flex: none;
}
#app .pase-anillo {
  width: calc(var(--e-6) + var(--e-1)); height: calc(var(--e-6) + var(--e-1));
  border-radius: var(--r-pildora); flex: none;
  background: conic-gradient(var(--exito) calc(var(--p, 0) * 1%), var(--pista) 0);
}
#app .pase-anillo::after {
  content: ""; display: block;
  width: var(--e-5); height: var(--e-5); margin: var(--e-1);
  border-radius: var(--r-pildora); background: var(--superficie);
}

/* ── UN RENGLÓN POR SERVICIO ── */
#app .pase-fila {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--linea);
  min-height: calc(var(--e-8) * 2);
}
#app .pase-foto {
  width: var(--e-10); height: var(--e-10); flex: none;
  border-radius: var(--r-pildora);
  background: var(--superficie-2); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-3); font-size: var(--e-5);
  overflow: hidden; position: relative;
}
#app .pase-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* El hueco de quien no tiene a nadie asignado: punteado y en
   `--proceso`, igual que la casilla «sin asignar» del Master Staffing.
   Mismo significado, mismo dibujo. */
#app .pase-foto.hueco {
  border-style: dashed; border-color: var(--proceso);
  background: var(--proceso-suave); color: var(--proceso-texto);
}
#app .pase-quien { flex: 1; min-width: 0 }
#app .pase-quien b {
  display: block; font: var(--t-cuerpo-f); color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .pase-quien b.sin { color: var(--proceso-texto) }
#app .pase-quien span { display: block; font: var(--t-sec); color: var(--texto-3) }

/* ── LA PASTILLA DEL ESTADO ── */
#app .pase-chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: calc(var(--e-6) + var(--e-1));
  padding: 0 var(--e-3); border-radius: var(--r-pildora);
  font: var(--t-sec); font-weight: 600; white-space: nowrap; flex: none;
  border: 1px solid transparent;
}
#app .pase-chip.pro { background: var(--proceso-suave); color: var(--proceso-texto) }
#app .pase-chip.exi { background: var(--exito-suave);   color: var(--exito-texto) }
#app .pase-chip.neu { background: var(--neutro-suave);  color: var(--neutro-texto) }
/* «Falta quién» lleva el punteado del Master Staffing: es el mismo
   estado, dicho en otra pantalla. */
#app .pase-chip.hueco { border: 1px dashed var(--proceso) }

/* ── LOS BOTONES DEL RENGLÓN ── */
#app .pase-ac { display: flex; gap: var(--e-2); flex: none }
#app .pase-btn {
  /* 44 de alto y radio 12 · anexo del 27-oct. Era `--r-pildora`. */
  min-height: var(--toque); padding: 0 var(--e-4);
  border-radius: var(--r-control);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2); white-space: nowrap;
  font: var(--t-sec); font-weight: 600; font-family: inherit;
  cursor: pointer; border: 1px solid transparent;
  transition: filter var(--dur-rapida) var(--curva);
}
#app .pase-btn.pri { background: var(--marca-principal); color: var(--marca-sobre-principal) }
#app .pase-btn.sec { background: var(--control); border-color: var(--linea); color: var(--texto-2) }
#app .pase-btn.cub { background: var(--control); border-color: var(--linea); color: var(--marca-principal-texto) }
#app .pase-btn:hover { filter: brightness(1.06) }
#app .pase-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }
#app .pase-btn[disabled] { opacity: .6; cursor: default; filter: none }

/* El ícono de WhatsApp del renglón: la foto sigue llegando por ahí en
   la V1 y decirlo ahorra la pregunta «¿y dónde veo su foto?». */
#app .pase-wa { color: var(--texto-3); font-size: var(--e-5); flex: none }

/* ── LOS SERVICIOS COMPLETOS · UN SOLO RENGLÓN DOBLADO ──
   Lo que ya está resuelto no compite por la pantalla con lo que falta,
   pero tampoco desaparece: se cuenta y se puede abrir. */
/* Va en REJILLA y no en flex envuelto, por lo mismo que la fila: en
   celular el `flex-wrap` bajaba el «Ver» a un renglón propio y el
   renglón doblado ocupaba tres líneas. Aquí el sitio de cada pieza se
   declara --ícono, texto, «Ver»-- y el que cede es el texto, que es el
   único que puede. */
#app .pase-completos {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--e-3);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  padding: var(--e-3) var(--e-5);
  min-height: calc(var(--e-6) + var(--e-8));
  font: var(--t-cuerpo); color: var(--texto-2);
  margin-top: var(--hueco-tarjetas);
}
/* El texto es el único que se encoge: se recorta con puntos suspensivos
   antes que empujar el «Ver» fuera de la línea. */
#app .pase-completos > span:not(.pase-ver) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
#app .pase-completos > i { color: var(--exito-texto); font-size: var(--e-5); flex: none }
#app .pase-completos b { color: var(--texto); font-weight: 600 }
#app .pase-completos .pase-ver {
  background: none; border: 0; padding: 0; justify-self: end;
  font: var(--t-sec); font-family: inherit; font-weight: 600;
  cursor: pointer; color: var(--marca-principal-texto);
  display: inline-flex; align-items: center; gap: var(--e-1);
}
#app .pase-completos .pase-ver:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }

/* ── LO DEMÁS ── */
#app .pase-nota,
#app .pase-cargando { font: var(--t-sec); color: var(--texto-3); margin-top: var(--e-3) }
#app .pase-vacio {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-6); border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea);
}
#app .pase-vacio b { font: var(--t-tarjeta); color: var(--texto) }
#app .pase-vacio span { font: var(--t-cuerpo); color: var(--texto-2) }

/* ── TABLET · hasta 1023 ──
   Dos columnas de tarjeta no caben con el lateral desplegado: una. */
@media (max-width: 1023px) {
  #app .pase-grid { grid-template-columns: 1fr }
  #app .pase-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ── CELULAR · 768 o menos ──
   El renglón se dobla en vez de encogerse: la pastilla baja bajo el
   nombre --alineada con él, no con la foto-- y los botones se reparten
   el ancho completo, que es lo que el pulgar necesita. Es remaquetar,
   no encoger: ver [[orvik-no-es-recolorear-es-remaquetar]]. */
@media (max-width: 768px) {
  #app .pase-tit { flex-direction: column; align-items: stretch }
  #app .pase-tabs { overflow-x: auto; padding-bottom: var(--e-1) }
  #app .pase-k { padding: var(--e-3) }
  #app .pase-k b { font: var(--t-banda) }
  #app .pase-cab { padding: var(--e-3) var(--e-4) var(--e-2) }
  /* ── EL RENGLÓN, EN REJILLA Y NO EN FLEX ENVUELTO ──
     Con `flex-wrap` el renglón dependía de que 40 px de foto + 12 de
     hueco + el resto cuadraran AL PÍXEL: dos de más --un borde que no
     entra en la cuenta-- y el nombre se iba abajo dejando la foto sola.
     Lo medí y pasó.

     En rejilla el sitio de cada pieza se declara y no se calcula:

         foto  nombre
          ·    pastilla
         botones a todo el ancho

     La columna de la pastilla arranca donde arranca el nombre, no donde
     la foto, que es como lo pide el mockup. */
  #app .pase-fila {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "foto quien" "hueco chip" "acc acc";
    row-gap: var(--e-2); column-gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
  }
  #app .pase-foto  { grid-area: foto }
  #app .pase-quien { grid-area: quien }
  #app .pase-chip  { grid-area: chip; justify-self: start }
  #app .pase-wa    { grid-area: hueco; justify-self: center }
  #app .pase-ac    { grid-area: acc; width: 100% }
  #app .pase-ac .pase-btn { flex: 1 }
}

/* En un teléfono estrecho los cuatro números no caben de a dos con el
   relleno normal: se recorta el relleno, no el área táctil. */
@media (max-width: 360px) {
  #app .pase-kpis { gap: var(--e-2) }
  #app .pase-k { gap: var(--e-2) }
  #app .pase-k .pase-ic { width: var(--e-8); height: var(--e-8) }
}