/* ==========================================================================
   Don Parqueo · componentes.css
   Cada regla de aca sale de un estilo del prototipo
   "ParkSystem Flujo v2.dc.html": o de una linea del <helmet>, o del objeto de
   estilo que renderVals() le pasa a esa pieza. No hay medidas propias.
   Donde el prototipo no dice nada, va marcado NO DETERMINADO.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Columna: barra de titulo, zona que se desplaza y contenido
   -------------------------------------------------------------------------- */

/* topbar > salir (prototipo, sc-if salirEnBarra) */
.topbar__salir {
  position: absolute;
  right: 8px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tit-banda);
}

/* La zona que se desplaza: el prototipo la deja sin data-ps, solo con estilo. */
.desplazable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 24px;
  box-sizing: border-box;
}

[data-ps="contenido"] {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Toda pantalla del prototipo entra con el mismo desvanecido. */
.pantalla { animation: psfade .18s ease-out; }
/* La bienvenida ademas ocupa el alto, para que sus botones bajen al fondo. */
.pantalla--alta { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   1. Cabeza de pantalla — rotulo arriba, titulo debajo, sobre la banda
   -------------------------------------------------------------------------- */
.cabeza          { padding: 8px 4px 20px; }
.cabeza--login   { padding: 24px 8px; }
.cabeza--clave   { padding: 8px 4px 24px; }
.cabeza__rotulo {
  font: 700 12px/1 var(--fuente);
  letter-spacing: .10em;
  color: var(--sub-banda);
  text-transform: uppercase;
}
.cabeza__titulo    { margin-top: 8px; font: 700 24px/1.2 var(--fuente); color: var(--tit-banda); }
.cabeza__titulo--l { font: 700 28px/1.15 var(--fuente); }
.cabeza__sub       { margin-top: 8px; font: 400 16px/1.35 var(--fuente); color: var(--sub-banda); }

/* --------------------------------------------------------------------------
   2. Botones — prototipo: boton(), btnGhost, btnFila, estSecundaria
   -------------------------------------------------------------------------- */
.boton {
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 700 18px/1 var(--fuente);
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.boton--principal { background: var(--marca); color: var(--sobre-marca); cursor: pointer; }
.boton--principal:active { background: var(--marca-osc); }        /* pressAccent */
.boton--cargando  { background: var(--marca-osc); color: var(--sobre-marca); cursor: default; }

/* boton(false, false): el prototipo NO lo esconde, lo apaga. */
.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--btn-off);
  color: var(--btn-off-ink);
  border: 1px solid var(--borde-sup);
  cursor: default;
}

/* btnGhost */
.boton--fantasma {
  background: transparent;
  border: 2px solid var(--borde-input);
  color: var(--ink);
  cursor: pointer;
}
.boton--fantasma:active { background: var(--press-ghost); }        /* pressGhost */

/* JERARQUIA DE BOTONES, de mayor a menor peso visual:
     1. --principal   solido en el color de marca. La accion que se espera.
     2. --secundaria  superficie con borde y letra DE MARCA. Es accion, pero no
                      la principal. Antes era igual de gris que --fantasma y las
                      dos competian sin decir cual pesaba mas.
     3. --fantasma    transparente con borde neutro. La salida: volver, omitir.
     4. --fila        la mas pequena, dentro de una lista.
     5. --peligro     rojo, y solo para lo que no se puede deshacer.
   estSecundaria de la barra de accion */
.boton--secundaria {
  height: 56px;
  border-radius: 16px;
  border: 2px solid var(--marca-borde);
  background: var(--sup-glass-2);
  color: var(--marca-ink);
  font: 700 17px/1 var(--fuente);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
}
.boton--secundaria:active { background: var(--press-ghost); }

/* btnFila */
.boton--fila {
  min-height: 48px;
  height: auto;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 16px;
  border: 2px solid var(--borde-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--fuente);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  width: 100%;
}
.boton--fila:active { background: var(--press-ghost); }
.boton--fila-alta   { min-height: 56px; }

/* La rueda del boton cargando. */
.rueda {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: psspin .8s linear infinite;
}

/* --------------------------------------------------------------------------
   3. Superficies
   -------------------------------------------------------------------------- */

/* Tarjeta de vidrio del login y del salogin. */
.vidrio {
  background: var(--sup-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde-glass);
  border-radius: 20px;
  padding: 24px 16px;
}

/* Tarjeta llana de cuentaCerrada. */
.tarjeta {
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  border-radius: 20px;
  padding: 20px 16px;
}

/* --------------------------------------------------------------------------
   4. Campos — rotulo, linea inferior de 3 px y ayuda debajo
   -------------------------------------------------------------------------- */
.rotulo {
  font: 700 12px/1 var(--fuente);
  letter-spacing: .10em;
  color: var(--ink2);
  text-transform: uppercase;
}
.rotulo--sep { margin-top: 28px; }
/* En el prototipo el rótulo es un <div>. Donde aquí es <label> (login,
   claveNueva) tiene que ser bloque, o el margen de arriba no se aplica. */
label.rotulo { display: block; }

/* El campo es una caja, no un renglón subrayado. Con la raya de abajo no se
   veía dónde tocar ni dónde estaba el cursor; la caja da un blanco grande, un
   foco que se nota y sitio para el estado sin mover nada de lugar. */
.linea {
  margin-top: 8px;
  box-sizing: border-box;
  min-height: 58px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--borde-input);
  border-radius: 14px;
  background: var(--suave);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* El foco se ve en la caja entera, no solo en el cursor. */
.linea:focus-within {
  border-color: var(--marca);
  background: var(--sup);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.linea--ok  { border-color: var(--marca); background: var(--sup); }
.linea--mal { border-color: var(--rojo); background: var(--mal-suave); }
/* Dentro de la caja el cursor del navegador sobra: el borde ya lo dice. */
.linea .entrada:focus-visible { outline: none; }

.ayuda      { margin-top: 8px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.ayuda--mal { color: var(--rojo); }
.ayuda--chica { font: 400 14px/1.4 var(--fuente); }

.entrada {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  min-height: 0;
}
.entrada--nit   { font: 700 26px/1.2 var(--mono); letter-spacing: .04em; }
.entrada--texto { font: 400 20px/1.3 var(--fuente); }
.entrada--clave { flex: 1; min-width: 0; width: auto; font: 400 20px/1.3 var(--fuente); }
.entrada--entregada {
  margin-top: 12px;
  font: 700 22px/1.25 var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
}

.ojo {
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.casilla-fila {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.casilla {
  min-width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fuente);
  color: var(--sobre-marca);
  background: transparent;
  border: 2px solid var(--borde-input);
  flex: none;
}
.casilla[aria-checked="true"] { background: var(--marca); border-color: var(--marca); }
.casilla-fila__texto { font: 400 16px/1.3 var(--fuente); color: var(--ink); }

/* Bloque "Su clave de acceso" del login (CONTEXTO §4.4). */
.entrega { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--linea); }
.entrega__copiar {
  margin-top: 12px;
  min-height: 48px;
  height: auto;
  border-radius: 16px;
  background: var(--marca);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fuente);
  color: #fff;
  cursor: pointer;
  width: 100%;
  border: 0;
}
.entrega__copiar:active { background: var(--press-ghost); }

/* --------------------------------------------------------------------------
   4.b Navegación: barra lateral sobre 900 px, barra de iconos en celular y
       cuadro del usuario. Medidas del prototipo (estLateral / estMovil).
   -------------------------------------------------------------------------- */
.lateral__empresa { padding: 0 20px 24px; font: 700 17px/1.2 var(--fuente); letter-spacing: .01em; color: var(--ink); }
.lateral__nav { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-lateral {
  min-height: 48px;
  border-radius: 14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font: 700 16px/1 var(--fuente);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  width: 100%;
  border: 0;
  text-align: left;
}
.nav-lateral[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }
.nav-lateral__texto { margin-left: 10px; }

.lateral__pie {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--borde-sup);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lateral__datos  { flex: 1; min-width: 0; }
.lateral__nombre { font: 700 15px/1.2 var(--fuente); color: var(--ink); }
.lateral__rol    { margin-top: 4px; font: 700 12px/1.3 var(--fuente); letter-spacing: .10em; color: var(--ink2); text-transform: uppercase; }
.lateral__salir {
  flex: none;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink2);
  background: none;
  border: 0;
}

[data-ps="perfilmovil"] {
  flex: none;
  margin: 0 16px 10px;
  background: var(--glass-hd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--borde-glass-2);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.perfil__iniciales {
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fuente);
  color: var(--marca-ink);
}
.perfil__datos  { flex: 1; min-width: 0; }
.perfil__nombre { font: 700 15px/1.2 var(--fuente); color: var(--tit-banda); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil__rol    { margin-top: 4px; font: 700 12px/1 var(--fuente); letter-spacing: .10em; color: var(--sub-banda); text-transform: uppercase; }
/* El prototipo lo pinta 44x44 (linea 113). Se cancela aqui el piso de area
   tactil de base.css:45, igual que .entrada y .interruptor cancelan el suyo:
   la regla general sigue viva para todo lo que el prototipo no contradiga.
   44 va literal y no por token: el unico 44 de tokens.css es --h-boton-fila,
   que es el boton Cobrar de la fila y no esta pieza. */
.perfil__salir {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tit-banda);
  background: none;
  border: 0;
}

.nav-movil {
  flex: 1;
  min-height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--fuente);
  cursor: pointer;
  background: transparent;
  color: var(--ink2);
  text-align: center;
  padding: 0 4px;
  box-sizing: border-box;
  border: 0;
  min-width: 0;
}
.nav-movil[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }

/* --------------------------------------------------------------------------
   5. Bienvenida
   -------------------------------------------------------------------------- */
.marca-cabeza { display: flex; flex-direction: column; align-items: center; padding: 8px 8px 12px; }
.marca-logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 15px;
  /* El logo esconde un acceso (siete toques): no se anuncia como boton. */
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
/* Blanco sobre el fondo oscuro; en el claro, el azul exacto de marca. */
.marca-logo { color: #FFFFFF; }
[data-tema="claro"] .marca-logo { color: var(--marca); }
.marca-logo svg { display: block; width: 96px; height: 96px; }
.marca-nombre {
  margin-top: 16px; padding: 4px 10px; min-height: 0; min-width: 0;
  font: 700 22px/1 var(--fuente); letter-spacing: .01em; color: var(--tit-banda);
  background: none; border: 0; border-radius: 10px; cursor: default;
  user-select: none; -webkit-user-select: none;
}
.marca-nombre--cambia { animation: nombreCambia .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes nombreCambia {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(.86); opacity: .2; }
  100% { transform: scale(1); opacity: 1; }
}
.marca-lema   { margin-top: 6px; font: 400 15px/1.35 var(--fuente); color: var(--sub-banda); text-align: center; }

.bienvenida__botones { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Registrar es la oferta y va en azul sólido; Iniciar sesión, de vidrio debajo. */
.boton--registrar {
  min-height: 56px;
  height: auto;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 0;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .8);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.boton--registrar:hover  { background: #3597E3; }
.boton--registrar:active { background: var(--acento-osc); transform: translateY(1px); }
.boton--entrar {
  min-height: 56px;
  height: auto;
  background: color-mix(in srgb, var(--sup) 62%, transparent);
  border: 1.5px solid var(--borde-input);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  transition: background-color .2s ease;
}
.boton--entrar:hover  { background: color-mix(in srgb, var(--sup) 85%, transparent); }
.boton--entrar:active { background: var(--press-ghost); }

.pie {
  margin-top: 12px;
  padding: 0 4px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pie__version { font: 500 12px/1.3 var(--fuente); color: var(--ink3); }

/* Soporte: solo la llave. Al tocarla se despliega la palabra hacia la izquierda
   y toma el azul de marca, para que se lea como botón; se recoge sola. */
.soporte-llave {
  display: inline-flex; align-items: center; justify-content: flex-end;
  height: 48px; min-width: 48px; padding: 0; gap: 0;
  border-radius: 999px; border: 1px solid var(--borde-sup);
  background: color-mix(in srgb, var(--sup) 70%, transparent);
  color: var(--ink2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; overflow: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, padding .3s cubic-bezier(.2, .8, .2, 1);
}
.soporte-llave__ico { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.soporte-llave__txt {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  font: 700 15px/1 var(--fuente);
  transition: max-width .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, margin .3s ease;
}
.soporte-llave:hover { color: var(--ink); }
.soporte-llave--abierta {
  padding-left: 18px;
  background: var(--marca); border-color: var(--marca); color: var(--sobre-marca);
  box-shadow: 0 10px 24px -12px rgba(0, 99, 177, .8);
}
.soporte-llave--abierta:hover { color: var(--sobre-marca); }
.soporte-llave--abierta .soporte-llave__txt { max-width: 120px; opacity: 1; margin-right: -4px; }

/* --------------------------------------------------------------------------
   6. Novedades — carruseles en foco (bienvenida y landing) y sus puntos
   -------------------------------------------------------------------------- */
/* Estado cargando del carrusel: dos bloques grises latiendo. */
.nov-hueso {
  flex: none;
  width: 80%;
  min-width: 240px;
  margin-right: 12px;
  height: 340px;
  border-radius: 20px;
  background: var(--skel);
  animation: psskel 1.2s ease-in-out infinite;
  display: inline-block;
  vertical-align: top;
}
.nov-hueso:nth-child(2) { animation-delay: .15s; }

.puntos { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.punto  { width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.punto--activo { width: 20px; background: var(--acento); }
.punto { transition: width .3s ease, background-color .3s ease; }

/* Carrusel en foco de la bienvenida: todas las piezas en la misma celda de la
   rejilla, corridas con transform desde JS. Sale de lado a lado del marco. */
.foco {
  margin: 4px -16px 0;
  padding: 4px 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: -3px;
}
.foco__pista {
  display: grid;
  /* Sin el renglón de texto debajo, el carrusel se queda con ese alto: las
     capturas crecen para ocuparlo. Son lo único que hay que mirar. */
  width: min(78%, 376px);
  margin: 0 auto;
}
.foco__pieza {
  grid-area: 1 / 1;
  min-width: 0;
  cursor: pointer;
  transition: transform .8s cubic-bezier(.25, .75, .25, 1), filter .8s ease, opacity .8s ease;
  will-change: transform;
}
.foco--arrastre .foco__pieza { transition: none; }
.foco__pieza--centro { cursor: grab; }
.foco--arrastre .foco__pieza--centro { cursor: grabbing; }
.foco__pieza--lado  { filter: blur(3px) saturate(.8); opacity: .5; }
.foco__pieza--lejos { filter: blur(3px); opacity: 0; pointer-events: none; }

.foco__medio {
  container-type: inline-size;
  aspect-ratio: 800 / 960;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foco__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Burbujas de comentario sobre la captura: una arriba a la izquierda y otra
   abajo a la derecha, cada una con su colita hacia el dispositivo. */
.foco__medio { position: relative; }
.foco__burbuja {
  position: absolute; z-index: 2;
  max-width: 64%; padding: 8px 12px; border-radius: 16px;
  font: 700 13px/1.25 var(--fuente); text-wrap: balance;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.foco__burbuja::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}
.foco__burbuja--0 {
  top: 16%; left: -10%; transform-origin: 80% 100%;
  background: var(--marca); color: var(--sobre-marca); border-bottom-right-radius: 6px;
}
.foco__burbuja--0::after { bottom: -4px; right: 18px; }
.foco__burbuja--1 {
  bottom: 18%; right: -10%; transform-origin: 20% 0%;
  background: var(--sup); color: var(--ink); border: 1px solid var(--borde-sup); border-top-left-radius: 6px;
}
.foco__burbuja--1::after { top: -5px; left: 18px; border-left: 1px solid var(--borde-sup); border-top: 1px solid var(--borde-sup); }

/* Tarjeta de pregunta: ocupa el mismo hueco del dispositivo y va en la
   superficie del tema (blanca en claro, gris oscuro en oscuro). La pregunta la
   contestan las dos capturas que vienen detrás. */
.foco__tarjeta {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 89%;
  height: 97%;
  padding: 9cqw 8cqw;
  border-radius: 7cqw;
  background: var(--sup-glass);
  border: 1px solid var(--borde-sup);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La pregunta, centrada en la tarjeta y sin adornos: es lo unico que hay que
   leer, y las dos capturas que siguen son la respuesta. */
.foco__frase {
  font: 700 clamp(17px, 8cqw, 25px)/1.2 var(--fuente);
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.foco__pieza--centro .foco__burbuja { opacity: 1; transform: none; transition-delay: .45s; }
.foco__pieza--centro .foco__burbuja--1 { transition-delay: .8s; }
.foco--arrastre .foco__burbuja { opacity: 0; transition-delay: 0s; }
.foco__hueso { display: block; width: min(68%, 320px); min-width: 0; margin: 0 auto; }


@media (prefers-reduced-motion: reduce) {
  .foco__pieza { transition: opacity .2s ease; }
}

/* --------------------------------------------------------------------------
   7. Landing
   -------------------------------------------------------------------------- */
.landing__volver { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.landing__flecha {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--fuente);
  color: var(--tit-banda);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.landing__marca {
  font: 700 12px/1 var(--fuente);
  letter-spacing: .14em;
  color: var(--sub-banda);
  text-transform: uppercase;
}

/* Un solo cuadro con toda la oferta: tabla, capturas y demos. */
.precio { margin-top: 0; background: var(--sup); border-radius: var(--r-glass); border: 1px solid var(--borde-sup); padding: 20px 16px; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .55); }
.precio__rotulo { font: 700 12px/1 var(--fuente); letter-spacing: .10em; color: var(--ink2); text-transform: uppercase; }
.precio__valor  { margin-top: 8px; font: 700 40px/1 var(--fuente); letter-spacing: -.02em; color: var(--ink); }
.precio__nota   { margin-top: 16px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); text-align: center; text-wrap: pretty; }

/* Comparativo de planes: funciones a la izquierda y una columna por plan.
   La escalera se lee por peso, no por variedad de color: el Básico en gris,
   el Estándar —el recomendado— en el amarillo de marca, y el Pro en negro.
   --plan-estandar es la versión legible del amarillo, para texto sobre blanco;
   --plan-estandar-vivo es el amarillo puro, solo para fondos y brillos. */
.precio, .plan-lado {
  --plan-basico: #4D5358; --plan-basico-suave: #F2F4F8;
  --plan-estandar: #0063B1; --plan-estandar-suave: #E5F1FB; --plan-estandar-vivo: #0063B1;
  --plan-oro: #4AA3EC; --plan-oro-claro: #99CBEF; --plan-pro-fondo: #003E70;
}
[data-tema="oscuro"] .precio, [data-tema="oscuro"] .plan-lado {
  --plan-basico: #B0B4BA; --plan-basico-suave: rgba(255, 255, 255, .06);
  --plan-estandar: #4AA3EC; --plan-estandar-suave: rgba(53, 151, 227, .14);
  --plan-oro: #99CBEF; --plan-pro-fondo: #003E70;
}
/* La tabla vive en una caja con la burbuja de "toque un plan" encima. */
.comp__caja { position: relative; }
.comp { margin: 4px -16px 0; }
.comp__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 66px);
  align-items: stretch;
}
.comp__fila:nth-child(odd):not(.comp__fila--cab) > .comp__funcion { background: color-mix(in srgb, var(--suave) 55%, transparent); }
/* Todas las celdas con el mismo espaciado y el mismo alto mínimo. */
.comp__fila > * { box-sizing: border-box; min-height: 48px; padding: 10px 6px; display: flex; align-items: center; }
.comp__fila > .comp__funcion { padding-left: 16px; padding-right: 8px; }
.comp__fila--cab {
  position: sticky; top: 0; z-index: 2;
  background: var(--sup);
  padding-top: 18px;
}
/* 12 px en celular, no 13: la columna de funciones es angosta y con la letra
   nueva varias filas se iban a un renglón de más. En escritorio hay sitio y
   la regla de abajo la devuelve a 14. */
.comp__funcion { font: 500 12px/1.3 var(--fuente); color: var(--ink); text-wrap: pretty; }
.comp__fila > .comp__funcion--cab { align-items: flex-end; font: 700 11px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
/* Cabecera de cada plan: una tarjeta con su color, la de arriba de su columna. */
.comp__fila > .comp__plan {
  position: relative;
  min-width: 0;
  margin: 0 2px;
  padding: 14px 2px 10px;
  flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px;
  border: 0; cursor: pointer;
  border-radius: 16px 16px 0 0;
  transition: transform .15s ease, filter .15s ease;
}
.comp__plan:hover { filter: brightness(1.06); }
.comp__plan:active { transform: scale(.97); }
.comp__plan-nombre { font: 800 11px/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase; }
.comp__plan-valor { font: 800 13px/1.1 var(--fuente); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp__plan-mes { font: 500 10px/1 var(--fuente); opacity: .75; }
.comp__plan-ver {
  margin-top: 4px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 var(--fuente); background: color-mix(in srgb, currentColor 16%, transparent);
}
.comp__plan-sello {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  font: 800 8px/1 var(--fuente); letter-spacing: .04em; text-transform: uppercase;
  background: var(--ambar); color: var(--sobre-ambar);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6);
}
.comp__fila > .comp__plan--basico { color: var(--ink); background: var(--suave); }
.comp__fila > .comp__plan--estandar {
  z-index: 1; color: #FFFFFF;
  background: linear-gradient(160deg, #3597E3 0%, #0063B1 100%);
  box-shadow: 0 -10px 24px -10px rgba(0, 99, 177, .75);
}
.comp__fila > .comp__plan--pro { color: #FFFFFF; background: linear-gradient(160deg, #004F8E 0%, #002A4D 100%); }
.comp__tema {
  margin: 10px 12px 2px;
  padding: 9px 12px;
  border-radius: 12px;
  font: 800 11px/1 var(--fuente); letter-spacing: .10em; text-transform: uppercase;
  color: var(--marca-ink);
  background: var(--acento-suave);
}
.comp__fila > .comp__celda { justify-content: center; text-align: center; margin: 0 2px; }
.comp__celda--basico { background: color-mix(in srgb, var(--suave) 70%, transparent); }
.comp__celda--estandar { background: color-mix(in srgb, #0063B1 9%, transparent); }
.comp__celda--pro { background: color-mix(in srgb, #004F8E 14%, transparent); }
[data-tema="oscuro"] .comp__celda--estandar { background: rgba(53, 151, 227, .14); }
[data-tema="oscuro"] .comp__celda--pro { background: rgba(0, 99, 177, .30); }
/* El sí es una bolita llena con el color del plan: se ve de lejos. */
.comp__si {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
}
.comp__celda--basico .comp__si { background: var(--ink2); }
.comp__celda--estandar .comp__si { background: #0063B1; }
.comp__celda--pro .comp__si { background: linear-gradient(160deg, #004F8E, #002A4D); }
[data-tema="oscuro"] .comp__celda--pro .comp__si { background: #3597E3; }
.comp__no { font: 400 14px/1 var(--fuente); color: var(--ink3); opacity: .6; }
/* Igual que .comp__funcion: la celda mide 66 px y "Hasta 100" no cabía. */
.comp__texto { font: 800 10px/1.15 var(--fuente); color: var(--ink); }
.comp__celda--estandar .comp__texto { color: var(--marca-ink); }
/* Recogida: la cabecera y un poco de lista, que se desvanece hacia el botón. */
.comp { position: relative; }
.comp--recogida { max-height: 360px; overflow: hidden; }
.comp--recogida::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sup) 80%, transparent) 55%, var(--sup));
}
/* "Ver más...": sin marco, montado sobre el difuminado de la tabla. */
.comp__extender {
  position: relative; z-index: 4;
  margin: -34px auto 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  border: 0; background: none; color: var(--marca-ink);
  font: 700 15px/1 var(--fuente); cursor: pointer;
}
.comp__extender-flecha { display: flex; transition: transform .25s ease; }
.comp__extender--abierto { margin-top: 8px; }
.comp__extender--abierto .comp__extender-flecha { transform: rotate(180deg); }
.comp__extender:hover { color: var(--ink); }

/* Burbuja de "toque un plan": aparece sobre las cabeceras, flota un rato y se va. */
.comp__globo {
  position: absolute; z-index: 5; top: 132px; right: 8px;
  display: flex; align-items: center; gap: 8px;
  max-width: 240px; min-height: 0; padding: 9px 14px 9px 10px;
  border: 0; border-radius: 14px;
  background: var(--ink); color: var(--bg);
  font: 600 13px/1.25 var(--fuente); text-align: left;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(-8px) scale(.94); transform-origin: 60% 0%;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.comp__globo::after {
  content: ""; position: absolute; top: -5px; left: 58%;
  width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px;
}
.comp__globo--visible { opacity: 1; transform: none; pointer-events: auto; animation: globoFlota 2.6s ease-in-out .4s infinite; }
@keyframes globoFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.comp__globo-punto {
  flex: none; position: relative; width: 10px; height: 10px; border-radius: 50%; background: #3597E3;
}
.comp__globo-punto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3597E3;
  animation: globoPulso 1.4s ease-out infinite;
}
@keyframes globoPulso { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
/* El amago: la columna del medio se corre como si se fuera y vuelve. */
.comp--amago .comp__plan--estandar,
.comp--amago .comp__celda--estandar { animation: amago 1.4s cubic-bezier(.3, .7, .2, 1); }
@keyframes amago {
  0% { transform: translateX(0); }
  30% { transform: translateX(26px); opacity: .55; }
  55% { transform: translateX(-6px); opacity: 1; }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .comp__globo--visible { animation: none; }
}
/* Las capturas viven dentro del cuadro de planes, y el carrusel sale hasta el
   borde del cuadro, no hasta el del marco. */
.precio .landing__comose {
  margin: 12px -16px 0;
  padding: 12px 16px 0;
}
.precio .landing__comose .foco { margin-left: 0; margin-right: 0; }
/* Aqui las capturas SON el argumento, no un acompanamiento: van mas grandes
   que en la portada, donde comparten sitio con el logo y los dos botones. */
.precio .landing__comose .foco__pista { width: min(90%, 430px); }
/* Sobre el cuadro los puntos van en la tinta del tema. */
.precio .punto { background: var(--borde-input); }
.precio .punto--activo { background: var(--acento); }

/* Registro · el cupo de mensualidades está lleno: se explica por qué el
   operador ya no puede escoger, antes de la tarjeta de Por horas. */
.cupo-lleno {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  background: var(--amb-suave);
  border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
}
.cupo-lleno__ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--sobre-ambar);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 16px/1 var(--fuente);
}
.cupo-lleno__textos { min-width: 0; }
.cupo-lleno__titulo { font: 700 16px/1.25 var(--fuente); color: var(--ink); text-wrap: pretty; }
.cupo-lleno__texto { margin-top: 4px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); text-wrap: pretty; }

/* Invitación al demo: una línea y un solo botón, sin titular. El fondo era dos
   degradados radiales —uno azul y uno morado que no sale de ningún token—, y
   con el titular fuera se leían como un banner pegado. Queda la superficie del
   tema con una línea, como cualquier otra tarjeta del sistema. */
.comp__probar {
  margin: 20px -4px 0; padding: 22px 18px 20px;
  border-radius: 22px; text-align: center;
  background: var(--suave);
  border: 1px solid var(--borde-sup);
}
.comp__probar-txt { font: 500 15px/1.4 var(--fuente); color: var(--ink2); text-wrap: balance; }

/* ---- Los dos botones de "ver demo" --------------------------------------
   El de aquí y el del panel del plan son el mismo botón: misma caja, mismo
   triángulo, mismo peso de letra. Es el botón de al lado del de crear, así que
   tiene su misma estatura y sus mismas esquinas (56px, radio 16), no la
   píldora redonda de antes, que al pie del botón principal se veía de otra
   familia. El contorno flaco sobre fondo transparente lo hacía desaparecer:
   ahora lleva un fondo tenue de su propia tinta y el triángulo va dentro de un
   disco lleno, la tecla de play de cualquier video.
   `--demo-tinta` la pone cada uno: la marca aquí, el color del plan allá. */
.comp__probar-boton, .plan-lado .plan-lado__demo {
  --demo-tinta: var(--marca-ink);
  min-height: 56px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px solid color-mix(in srgb, var(--demo-tinta) 38%, transparent);
  border-radius: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--demo-tinta) 9%, var(--sup));
  color: var(--demo-tinta);
  font: 800 16px/1 var(--fuente); letter-spacing: -.01em;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.comp__probar-boton { margin: 16px auto 0; }
.comp__probar-boton:hover, .plan-lado .plan-lado__demo:hover {
  background: color-mix(in srgb, var(--demo-tinta) 16%, var(--sup));
  border-color: var(--demo-tinta);
}
.comp__probar-boton:active, .plan-lado .plan-lado__demo:active {
  background: var(--demo-tinta); color: var(--sup); border-color: var(--demo-tinta);
}
/* El disco del play: el relleno asimétrico centra el triángulo a ojo, que por
   su forma pesa hacia la derecha. */
.demo-play {
  flex: none; box-sizing: content-box;
  padding: 8px 9px 8px 7px; border-radius: 50%;
  background: var(--demo-tinta); color: var(--sup);
  transition: background-color .18s ease, color .18s ease;
}
.comp__probar-boton:active .demo-play, .plan-lado .plan-lado__demo:active .demo-play {
  background: var(--sup); color: var(--demo-tinta);
}

/* Ventana del demo: dos preguntas, con tarjetas grandes. */
.modal--demo { max-width: 500px; }
.demo-v__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.demo-v__ico { width: 44px; height: 44px; border-radius: 14px; background: var(--marca); color: var(--sobre-marca); }
.demo-v__ico svg { margin-left: 2px; }
.demo-v__paso { font: 700 12px/1 var(--fuente); letter-spacing: .10em; text-transform: uppercase; color: var(--ink3); }
.demo-v__titulo { font-size: 26px; letter-spacing: -.02em; }
.demo-v__planes, .demo-v__roles { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

.demo-plan {
  width: 100%; padding: 14px; border-radius: 20px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--borde-sup); background: var(--sup);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.demo-plan:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .55); }
.demo-plan:active { transform: scale(.99); }
.demo-plan__cab { display: flex; align-items: center; gap: 8px; }
.demo-plan__nombre { font: 800 18px/1 var(--fuente); color: var(--ink); }
.demo-plan__sello { padding: 4px 8px; border-radius: 999px; font: 800 10px/1 var(--fuente); letter-spacing: .04em; text-transform: uppercase; background: var(--ambar); color: var(--sobre-ambar); }
.demo-plan__valor { margin-left: auto; font: 800 15px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink2); }
.demo-plan__cuerpo { display: flex; align-items: center; gap: 12px; }
.demo-plan__iconos { flex: none; display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.demo-plan__icono { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
/* La pregunta al cliente, en una burbuja al lado de los íconos. */
.demo-plan__pregunta {
  position: relative; flex: 1; min-width: 0;
  padding: 10px 12px; border-radius: 14px;
  font: 600 14px/1.35 var(--fuente); color: var(--ink); text-wrap: pretty;
}
.demo-plan__pregunta::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px;
  background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
.demo-plan--basico .demo-plan__icono { background: var(--suave); color: var(--ink2); }
.demo-plan--basico .demo-plan__pregunta { background: var(--suave); }
.demo-plan--estandar { border-color: color-mix(in srgb, #0063B1 45%, transparent); }
.demo-plan--estandar .demo-plan__nombre { color: var(--marca-ink); }
.demo-plan--estandar .demo-plan__icono { background: var(--acento-suave); color: var(--marca-ink); }
.demo-plan--estandar .demo-plan__pregunta { background: var(--acento-suave); }
.demo-plan--pro { border-color: transparent; background: linear-gradient(160deg, #004F8E 0%, #002A4D 100%); }
.demo-plan--pro .demo-plan__nombre, .demo-plan--pro .demo-plan__valor { color: #FFFFFF; }
.demo-plan--pro .demo-plan__icono { background: rgba(255, 255, 255, .14); color: #99CBEF; }
.demo-plan--pro .demo-plan__pregunta { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

.demo-v__elegido {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 14px; background: var(--suave);
}
.demo-v__elegido-nombre { font: 700 14px/1.2 var(--fuente); color: var(--ink); }
.demo-v__elegido.demo-plan--pro { background: linear-gradient(160deg, #004F8E 0%, #002A4D 100%); }
.demo-v__elegido.demo-plan--pro .demo-v__elegido-nombre, .demo-v__elegido.demo-plan--pro .enlace-texto { color: #FFFFFF; }
.demo-v__elegido.demo-plan--estandar { background: var(--acento-suave); }

/* Los dos botones de entrar: tarjetas llenas, con ícono, texto y flecha. */
.demo-rol {
  width: 100%; min-height: 92px; padding: 16px; border: 0; border-radius: 22px; cursor: pointer;
  display: flex; align-items: center; gap: 14px; text-align: left; color: #FFFFFF;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.demo-rol:hover { transform: translateY(-2px); filter: brightness(1.06); }
.demo-rol:active { transform: scale(.985); }
.demo-rol--operador {
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(150deg, #3597E3 0%, #0063B1 60%, #004F8E 100%);
  box-shadow: 0 18px 34px -18px rgba(0, 99, 177, .95);
}
.demo-rol--admin {
  background: radial-gradient(120% 140% at 100% 0%, rgba(53, 151, 227, .35), transparent 55%), linear-gradient(150deg, #003E70 0%, #002A4D 100%);
  box-shadow: 0 18px 34px -18px rgba(0, 29, 108, .95);
}
.demo-rol__ico {
  flex: none; width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: #FFFFFF;
}
.demo-rol__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.demo-rol__titulo { font: 800 18px/1.15 var(--fuente); }
.demo-rol__pie { font: 500 14px/1.3 var(--fuente); opacity: .86; }
.demo-rol__flecha {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  transition: transform .2s ease;
}
.demo-rol:hover .demo-rol__flecha { transform: translateX(3px); }
@media (min-width: 1000px) {
  .comp__fila { grid-template-columns: minmax(0, 1fr) repeat(3, 150px); }
  .comp--recogida { max-height: 400px; }
  .comp__funcion { font-size: 14px; }
  .comp__plan-nombre { font-size: 13px; }
  .comp__plan-valor { font-size: 18px; }
  .comp__plan-mes { font-size: 12px; }
  .comp__plan-sello { font-size: 10px; }
  .comp__texto { font-size: 13px; }
}

/* Detalle de un plan, entrando por la derecha. */
/* Doble clase: las reglas base de .velo y .modal vienen más abajo en el archivo. */
.velo.velo--lateral { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal.modal--lateral {
  width: min(88%, 440px); max-width: none; height: 100%;
  border-radius: 24px 0 0 24px; border-right: 0;
  overflow-y: auto; padding: 24px 20px 24px;
  animation: planLado .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes planLado { from { transform: translateX(100%); } to { transform: translateX(0); } }
.plan-lado__nombre { font: 800 13px/1 var(--fuente); letter-spacing: .10em; text-transform: uppercase; }
.plan-lado__precio { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.plan-lado__valor { font: 800 34px/1 var(--fuente); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-lado__mes { font: 400 14px/1 var(--fuente); color: var(--ink2); }
/* La línea que resume el plan ("Operadores sin límite, todos los vehículos…")
   acompaña al precio, no compite con él: en tamaño de texto corriente y en la
   tinta de apoyo. Lo que trae el plan se lee completo más abajo, en su lista. */
.plan-lado__detalle {
  margin-top: 12px;
  font: 500 14px/1.5 var(--fuente);
  color: var(--ink2);
  text-align: justify;
  hyphens: auto;
}

/* Cada bloque del panel abre con su título y una línea que dice de qué va. */
.plan-lado__bloque { margin-top: 30px; }
.plan-lado__titulo {
  margin: 0;
  font: 800 24px/1.15 var(--fuente);
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.plan-lado__titulo--no { color: var(--ink2); }
.plan-lado__titulo-sub { margin-top: 5px; font: 500 14px/1.4 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.plan-lado__bloque + .como-pasos--lado, .plan-lado__bloque + .plan-lado__grupo { margin-top: 14px; }
.plan-lado__bloque + .plan-lado__lista { margin-top: 12px; }
/* La forma y el color del botón de demo salen de la regla que comparte con el
   del carrusel (--demo-tinta). Aquí solo queda el ancho. */
.plan-lado__demo { width: 100%; }
.plan-lado__rotulo { margin-top: 22px; font: 700 12px/1 var(--fuente); letter-spacing: .10em; text-transform: uppercase; color: var(--ink2); }
.plan-lado__grupo { margin-top: 12px; }
.plan-lado__tema { font: 700 14px/1.2 var(--fuente); color: var(--ink); }
.plan-lado__lista { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.plan-lado__item { position: relative; padding-left: 22px; font: 400 14px/1.35 var(--fuente); color: var(--ink); text-wrap: pretty; }
.plan-lado__item::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 10px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.plan-lado__lista--no .plan-lado__item { color: var(--ink3); }
.plan-lado__lista--no .plan-lado__item::before { transform: none; width: 8px; height: 0; top: 9px; border-width: 0 0 2px 0; }
.plan-lado__crear { margin-top: 24px; }
.plan-lado--basico .plan-lado__nombre, .plan-lado--basico .plan-lado__valor { color: var(--plan-basico); }
.plan-lado--basico .plan-lado__lista:not(.plan-lado__lista--no) .plan-lado__item::before { color: var(--plan-basico); }
.plan-lado--estandar .plan-lado__nombre, .plan-lado--estandar .plan-lado__valor { color: var(--plan-estandar); }
.plan-lado--estandar .plan-lado__lista:not(.plan-lado__lista--no) .plan-lado__item::before { color: var(--plan-estandar); }
.plan-lado--pro .plan-lado__nombre, .plan-lado--pro .plan-lado__valor { color: var(--plan-oro); }
.plan-lado--pro .plan-lado__lista .plan-lado__item::before { color: var(--plan-oro); }
.plan-lado__lista .plan-lado__item { color: var(--ink); }
.plan-lado__lista--no .plan-lado__item { color: var(--ink3); }

/* ¿Cómo crear mi parqueadero? */
.como-pasos { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.como-paso { display: flex; gap: 12px; align-items: flex-start; }
.como-paso__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--sobre-marca); font: 700 14px/1 var(--fuente);
}
.como-paso__textos { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.como-paso__titulo { font: 700 16px/1.2 var(--fuente); color: var(--ink); }
.como-paso__texto { font: 400 14px/1.4 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.como-ayuda { margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); text-align: center; }
.enlace-boton.como-wa { margin-top: 0; }
.landing__como { margin-top: 12px; width: 100%; }

.boton--demo {
  margin-top: 20px;
  min-height: 56px;
  height: auto;
  border-radius: 16px;
  background: var(--marca);
  color: var(--sobre-marca);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 18px/1.2 var(--fuente);
  letter-spacing: .02em;
  box-sizing: border-box;
  padding: 0 16px;
  cursor: pointer;
  width: 100%;
  border: 0;
}
.landing__comose { margin-top: 20px; }

.enlace-boton {
  margin-top: 20px;
  min-height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 18px/1.2 var(--fuente);
  text-decoration: none;
  box-sizing: border-box;
  padding: 0 16px;
}
.enlace-boton--wa { background: var(--verde); color: #FFFFFF; }
.enlace-boton--wa:hover { color: #FFFFFF; }

/* Crear mi parqueadero: el primero después del carrusel, blanco sólido como Entrar. */
.landing__crear { margin-top: 24px; width: 100%; font-size: 18px; }

/* --------------------------------------------------------------------------
   8. Cuenta cerrada
   -------------------------------------------------------------------------- */
.pildora-fila { display: flex; }
.pildora {
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 8px 12px;
  font: 700 13px/1 var(--fuente);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: var(--suave);
  color: var(--ink2);
}
.pildora--mal { background: var(--rojo); color: #fff; }

.cerrada__texto { margin-top: 16px; font: 400 16px/1.45 var(--fuente); color: var(--ink); text-wrap: pretty; }
.cerrada__aviso {
  margin-top: 16px;
  border-radius: 16px;
  background: var(--ambar);
  padding: 14px;
  font: 700 15px/1.4 var(--fuente);
  color: var(--sobre-ambar);
  text-wrap: pretty;
}
.cerrada__descargar { margin-top: 20px; }
.cerrada__nota { margin-top: 8px; font: 400 14px/1.45 var(--fuente); color: var(--ink3); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   9. Ventanas flotantes — viven DENTRO del marco (position:absolute), como
      en el prototipo, no pegadas al viewport.
   -------------------------------------------------------------------------- */
.velo {
  position: absolute;
  inset: 0;
  background: var(--velo);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: psfade .15s ease-out;
  z-index: 6;
}
.modal {
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
  background: var(--sup-modal);
  border: 1px solid var(--borde-glass);
  border-radius: 24px;
  padding: 24px 16px 16px;
}
.modal--alto  { max-height: 100%; overflow: auto; }
/* Ventana con X arriba a la derecha (demo desde el carrusel). */
.modal--x { position: relative; }
.modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
}
.modal__x:hover  { background: var(--suave); }
.modal__x:active { background: var(--press-ghost); }
.modal__titulo--x { padding-right: 44px; }
.modal__titulo { font: 700 24px/1.2 var(--fuente); color: var(--ink); }
.modal__texto  { margin-top: 12px; font: 400 16px/1.45 var(--fuente); color: var(--ink2); }
.modal__acciones { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.modal__acciones--juntas { margin-top: 20px; }

/* Ventana flotante centrada: más grande que la hoja de abajo, con el fondo
   desenfocado detrás. La usan el demo y el soporte. */
.velo.velo--centro {
  align-items: center;
  background: color-mix(in srgb, var(--velo) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.modal.modal--centro {
  max-width: 480px;
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 20px 20px;
  border-radius: 28px;
  background: var(--sup-modal);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px var(--borde-sup);
  animation: modalEntra .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes modalEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Soporte: cabeza en un renglón (ícono, título con su línea de apoyo y la X). */
.soporte__cabeza { display: flex; align-items: center; gap: 12px; margin: -8px -6px 0 0; }
.soporte__cabeza .modal__x { position: static; flex: none; align-self: flex-start; }
.soporte__cabeza--sola { justify-content: flex-end; }
.soporte__titulos { flex: 1; min-width: 0; }
.soporte__titulo { font: 800 21px/1.15 var(--fuente); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soporte__sub { margin-top: 4px; font: 500 14px/1.3 var(--fuente); color: var(--ink2); }
.soporte__ico, .demo-v__ico {
  flex: none; width: 48px; height: 48px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--marca-ink);
}
.soporte__tabs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--suave); }
.soporte__tab { min-height: 44px; border: 0; border-radius: 12px; font: 700 15px/1.1 var(--fuente); color: var(--ink2); background: transparent; cursor: pointer; }
.soporte__tab--activa { background: var(--sup); color: var(--ink); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .5); }
.soporte__faq { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.faq { border-radius: 16px; background: var(--suave); transition: background-color .2s ease; }
.faq--abierta { background: var(--acento-suave); }
.faq__p {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  font: 700 15px/1.3 var(--fuente); color: var(--ink);
}
.faq__signo { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sup); color: var(--marca-ink); font: 700 18px/1 var(--fuente); }
.faq__r { padding: 0 14px 14px; font: 400 15px/1.75 var(--fuente); color: var(--ink2); text-wrap: pretty; animation: psfade .2s ease-out; }
/* El botón del que habla la respuesta, tal como se ve en la app. */
.faq__boton {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin: 0 1px; padding: 3px 9px 3px 4px; border-radius: 999px;
  background: var(--sup); border: 1px solid var(--borde-sup);
  font: 700 13px/1.2 var(--fuente); color: var(--ink); white-space: nowrap;
}
.faq__ruta { white-space: nowrap; }
.faq__ruta-flecha { margin: 0 3px; font-weight: 700; color: var(--ink3); }
.faq__boton-ico {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--sobre-marca);
}
.soporte__form { margin-top: 16px; }
.soporte__parq {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 16px; background: var(--suave);
}
.soporte__parq-nombre { font: 700 16px/1.25 var(--fuente); color: var(--ink); }
.soporte__parq-dato { font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.soporte__campo { margin-top: 16px; }
.soporte__entrada { font: 400 17px/1.35 var(--fuente); }
textarea.soporte__entrada { resize: vertical; min-height: 88px; padding: 6px 0; }
.linea--alta { align-items: flex-start; }
.soporte__linea-select { position: relative; padding-right: 36px; }
.soporte__select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 40px; border: 0; outline: 0; background: transparent; cursor: pointer;
  font: 400 17px/1.35 var(--fuente); color: var(--ink);
}
.soporte__select--vacio { color: var(--ink3); }
.soporte__select option { color: var(--ink); background: var(--sup); }
.soporte__select-flecha { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--marca-ink); pointer-events: none; }
.soporte__autoriza { margin-top: 18px; display: flex; align-items: flex-start; gap: 10px; }
.soporte__casilla { flex: none; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
.soporte__autoriza-txt { padding-top: 10px; font: 400 14px/1.45 var(--fuente); color: var(--ink2); }
.enlace-texto { display: inline; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; font: 700 14px/1.45 var(--fuente); color: var(--marca-ink); cursor: pointer; }
.soporte__enviar { margin-top: 20px; }
.soporte__hecho { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.soporte__hecho .modal__titulo { margin-top: 16px; }
.soporte__hecho-ico { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--verde); color: var(--sobre-verde); font: 800 30px/1 var(--fuente); }
.soporte__radicado { margin-top: 14px; padding: 12px 20px; border-radius: 14px; background: var(--suave); font: 700 22px/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
.soporte__wa { margin-top: 0; }
.politica__vigencia { margin-top: 6px; font: 400 13px/1.3 var(--fuente); color: var(--ink3); }
.politica__sec { margin-top: 16px; }
.politica__t { font: 700 15px/1.3 var(--fuente); color: var(--ink); }
.politica__p { margin-top: 6px; font: 400 14px/1.55 var(--fuente); color: var(--ink2); text-wrap: pretty; }


/* Renovar el servicio: lista de planes, QR y Nequi de respaldo. */
.planes { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan {
  border-radius: 18px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--borde-sup);
  background: transparent;
  width: 100%;
  text-align: left;
  height: auto;
}
.plan[aria-pressed="true"] { border: 2px solid var(--marca); background: var(--suave); }
.plan:active { background: var(--press-ghost); }
.plan__cabeza  { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan__nombre  { font: 700 18px/1.2 var(--fuente); color: var(--ink); }
.plan__valor   { font: 700 16px/1 var(--fuente); color: var(--ink2); }
.plan__detalle { margin-top: 6px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); text-wrap: pretty; }

.qr-bloque { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.qr-centro { margin-top: 12px; display: flex; justify-content: center; }
.qr {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: 16px;
  background: #FFFFFF;
  image-rendering: pixelated;
}
.nequi { margin-top: 12px; border-radius: 16px; background: var(--suave); padding: 14px; }
.nequi__numero { margin-top: 6px; font: 700 24px/1.2 var(--mono); letter-spacing: .06em; color: var(--ink); }
.qr-no { margin-top: 20px; padding: 20px 12px; text-align: center; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }

.boton--renovar-ok { min-height: 56px; background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.boton--renovar-ok:active { background: var(--marca-osc); }

/* Aviso flotante corto (prototipo: estToast). */
.toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 96px;
  max-width: 500px;
  margin: 0 auto;
  min-height: 64px;
  box-sizing: border-box;
  background: var(--verde);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  animation: pstoast .22s ease-out;
  cursor: pointer;
  /* En el prototipo el aviso va después de toda ventana en el DOM, con el
     mismo z-index 6 (3338): siempre queda encima. Aquí la ventana de abrir
     turno se monta después del aviso, así que se sube un punto. */
  z-index: 7;
  border: 0;
  width: auto;
}
.toast--warn { background: var(--ambar); }
.toast--err  { background: var(--rojo); }
.toast__texto { font: 700 17px/1.3 var(--fuente); color: #fff; }
.toast--warn .toast__texto { color: #fff; } /* prototipo 3339: la letra del aviso es blanca en los tres tonos */

/* --------------------------------------------------------------------------
   10. Los cuatro estados de pantalla (CONTEXTO §19)
       NO DETERMINADO: el prototipo arma la lista de planes desde una constante
       y nunca la carga; no trae ni "cargando", ni "vacio", ni "error" para
       esa lista. Las tres piezas se construyen con las medidas que el
       prototipo si define: el hueso gris de skeleton, la linea de texto en
       --ink3 y la banda var(--rojo) con tinta blanca.
   -------------------------------------------------------------------------- */
.estado-cargando { display: flex; flex-direction: column; gap: 8px; }
.hueso {
  height: 96px;
  border-radius: 18px;
  background: var(--skel);
  animation: psskel 1.2s ease-in-out infinite;
}
.hueso:nth-child(2) { background: var(--skel-2); animation-delay: .15s; }
.hueso:nth-child(3) { animation-delay: .30s; }

.estado-vacio {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font: 400 16px/1.4 var(--fuente);
  color: var(--ink3);
  text-align: center;
}
.banda-error {
  border-radius: 16px;
  background: var(--rojo);
  padding: 16px;
  font: 700 17px/1.35 var(--fuente);
  color: #fff;
}
.estado-error__ultima {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font: 400 16px/1.4 var(--fuente);
  color: var(--ink3);
  text-align: center;
}
.boton--peligro { border: 2px solid var(--rojo); color: var(--rojo); background: var(--sup-glass-2); cursor: pointer; }

/* --------------------------------------------------------------------------
   11. Utilidades cortas que el prototipo usa como estilo suelto
   -------------------------------------------------------------------------- */
.arriba-12 { margin-top: 12px; }

/* --------------------------------------------------------------------------
   12. Las seis primitivas del operador — REHECHAS contra el prototipo.
   Salieron del arbol en la correccion anterior porque sus medidas venian de
   ESPECIFICACION.md. Ninguna medida de aqui sale de ESPECIFICACION ni de
   CONTEXTO: cada una lleva al lado la linea del prototipo de donde se leyo.
   -------------------------------------------------------------------------- */

/* .fila — prototipo esInicio, linea 1985. min-height 88 (antes 64).
   La fila NO trae fondo propio: lo pone el contenedor .lista-sup. */
.fila {
  min-height: var(--h-fila);
  box-sizing: border-box;
  width: 100%;
  padding: 14px var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  border-bottom: 1px solid var(--linea);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.fila:active { background: var(--press-row); }
.fila__izq { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e3); }
.fila__ico { flex: none; display: flex; align-items: center; }
.fila__cuerpo { flex: 1; min-width: 0; }
/* Un px menos que antes: en un celular de 360 "Carro · Mazda" se iba a dos
   renglones y empujaba la hora de ingreso fuera de la fila. */
.fila__sub { margin-top: var(--e1); font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.fila__ingreso,
.fila__tiempo { margin-top: 2px; font: 400 13px/1.3 var(--fuente); color: var(--ink3); white-space: nowrap; }
.fila__der { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--e2); }
.fila__marcas { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: var(--e2); }

/* El boton de la fila: 118x44 exactos, verde de marca. Prototipo 5615-5620.
   min-height cancela aqui el piso de base.css:45, que se comia el token: sin
   esta linea --h-boton-fila queda escrito y anulado a la vez, y el boton sale
   a 48. Con ella, el token llega al pixel. */
.fila__boton {
  flex: none;
  width: var(--a-boton-fila);
  height: var(--h-boton-fila);
  min-height: var(--h-boton-fila);
  box-sizing: border-box;
  border-radius: 14px;
  padding: 0 10px;
  background: var(--marca);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 0;
}
/* Cobrar es la acción de la fila, así que va en el azul de marca. Antes era
   verde y, repetido en treinta filas, el verde dejaba de significar "al día"
   y se volvía el color de la pantalla. El verde vuelve a ser estado: se queda
   en la franja del mensual al día y en el pago confirmado. */
.fila__valor { font: 700 18px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--sobre-marca); white-space: nowrap; }
.fila__flecha { flex: none; display: block; font: 700 20px/1 var(--fuente); color: var(--sobre-marca); transform: translateY(-1px); }
.fila__boton--amb { background: var(--ambar); }
.fila__boton--amb .fila__valor,
.fila__boton--amb .fila__flecha { color: var(--sobre-ambar); }
.fila__boton--mal { background: var(--rojo); }
.fila__boton--mal .fila__valor,
.fila__boton--mal .fila__flecha { color: var(--sobre-rojo); }

/* .barra-turno — prototipo esInicio, linea 1941. Es una tarjeta de vidrio
   sobre la banda, no una barra solida de 72 px de alto. */
.barra-turno {
  background: var(--glass-hd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--borde-glass-2);
  border-radius: var(--r-glass);
  padding: var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
/* Un píxel menos que --t-rotulo y que --t-dato-banda: son los dos textos de la
   misma fila, y con la letra nueva "TURNO ABIERTO · 6:00 A.M." se partía en dos
   renglones. Solo aquí; los tokens siguen igual para el resto de la app. */
.barra-turno__izq { min-width: 0; }
.barra-turno__rotulo {
  font: 700 calc(var(--t-rotulo) - 1px)/1.25 var(--fuente);
  letter-spacing: var(--letra-rotulo);
  color: var(--sub-banda);
  text-transform: uppercase;
}
.barra-turno__base { margin-top: var(--e2); font: 400 15px/1 var(--fuente); color: var(--ink2); white-space: nowrap; }
.barra-turno__der { text-align: right; flex: none; }
.barra-turno__der .barra-turno__rotulo { color: var(--sub-banda); }
/* El recaudado nunca se parte: sin nowrap el "$" se quedaba solo en un renglón
   y el número caía debajo. Si falta sitio, el que cede es el rótulo de la
   izquierda, que sí puede ocupar dos líneas. */
.barra-turno__dato { margin-top: var(--e2); font: 700 calc(var(--t-dato-banda) - 1px)/1 var(--fuente); color: var(--tit-banda); white-space: nowrap; }

/* .interruptor — prototipo 5470. 56x32 con bola de 26. La medida coincidia
   con ESPECIFICACION; lo que cambia es el color de encendido y el reparto. */
.interruptor {
  flex: none;
  width: var(--sw-ancho);
  min-width: var(--sw-ancho);
  height: var(--sw-alto);
  min-height: var(--sw-alto);
  border-radius: calc(var(--sw-alto) / 2);
  padding: 3px;
  box-sizing: border-box;
  background: var(--borde-input);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  border: 0;
}
.interruptor[aria-checked="true"] { background: var(--marca); justify-content: flex-end; }
.interruptor__bola {
  width: var(--sw-bola);
  height: var(--sw-bola);
  border-radius: calc(var(--sw-bola) / 2);
  background: var(--sup);
}

/* .chip — prototipo 5478. Alto 56, borde de 2, letra 17. Antes era una
   pildora de 14 px con fondo suave: no es la misma pieza. */
.chip {
  min-height: var(--h-chip);
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font: 700 17px/1.15 var(--fuente);
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--borde-input);
}
.chip[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
/* Apagado por monto minimo digital: prototipo botonesPago(), 3939-3942. */
.chip[disabled] { background: var(--suave); color: var(--ink3); border: 2px solid var(--linea); cursor: default; }

/* .chip--fila — ADENDA B2. El mismo chip, quieto, en el hueco exacto que deja el
   boton de la fila cuando el interruptor de mensualidades esta prendido.
   No tiene linea de prototipo propia: es pieza de la adenda, y su medida es la
   del boton al que sustituye. Por eso mide 118x44, lo mismo que .fila__boton
   (prototipo 5615): acompana al boton y va con el. Asi la fila sigue en 88.
   El chip suelto mide 56 de alto y ahi no cabe. No es pulsable: sin cursor de
   mano, sin role y sin aria-pressed. */
.chip--fila {
  min-height: var(--h-boton-fila);
  width: var(--a-boton-fila);
  cursor: default;
}

/* .placa — prototipo esInicio 5608. 20/700 mono con letra +10%.
   El 32 px de ESPECIFICACION no aparece en ninguna pantalla del operador. */
.placa {
  flex: none;
  font: 700 var(--t-placa)/1 var(--mono);
  letter-spacing: var(--letra-placa);
  color: var(--ink);
}
[data-letra="grande"] .placa { font-size: var(--t-placa-grande); }
.placa--campo { font: 700 var(--t-placa-campo)/1 var(--mono); letter-spacing: var(--letra-placa-campo); }
.placa--recibo {
  min-height: var(--h-toque);
  box-sizing: border-box;
  padding: var(--e2) var(--e4);
  border-radius: 14px;
  background: #EDF0F4;
  display: flex;
  align-items: center;
  font: 700 var(--t-placa-recibo)/1.1 var(--mono);
  letter-spacing: var(--letra-placa);
  color: #101314;
}

/* .dato-grande — prototipo esSalida 2644 y esQr 2709: 44/700 con letra -2%.
   ESPECIFICACION traia 40, que en el prototipo es solo el de la caja del cierre. */
.dato-grande {
  font: 700 var(--t-dato)/1 var(--fuente);
  letter-spacing: var(--letra-dato);
  color: var(--ink);
  white-space: nowrap;
}
.dato-grande--caja { font-size: var(--t-dato-caja); }
.dato-grande--turno { font-size: var(--t-dato-turno); letter-spacing: normal; }

/* --------------------------------------------------------------------------
   13. Pantallas del operador (bloque 2). Cada regla lleva la línea del
   prototipo de la que se midió. Sin criterio propio.
   -------------------------------------------------------------------------- */

/* Cabeza de pantalla con flecha: prototipo 2617, 2701, 3080, 2368. */
.cab-pantalla {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 4px 4px 20px;
}
.cab-pantalla--perfil { align-items: flex-start; gap: var(--e2); padding: 4px 0 16px; }
.cab-pantalla__atras {
  min-width: var(--h-toque);
  min-height: var(--h-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--fuente);
  color: var(--tit-banda);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.cab-pantalla__titulo { font: 700 var(--t-pantalla)/1.2 var(--fuente); color: var(--tit-banda); }
/* Celular angosto: títulos como "Renovar mensualidad" se partían en dos. */
@media (max-width: 400px) {
  .cab-pantalla__titulo { font-size: calc(var(--t-pantalla) - 1px); }
}
.cab-pantalla__cuerpo { flex: 1; min-width: 0; }
.cab-pantalla__sub {
  margin-top: var(--e1);
  font: 700 var(--t-rotulo)/1 var(--fuente);
  letter-spacing: var(--letra-rotulo);
  color: var(--sub-banda);
  text-transform: uppercase;
}

/* Tarjeta de vidrio: prototipo 2630, 1957, 3084. */
.vidrio-tarjeta {
  background: var(--sup-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde-glass);
  border-radius: var(--r-glass);
  padding: 20px var(--e4);
}
.vidrio-tarjeta--busca { padding: var(--e2) var(--e4); display: flex; align-items: center; gap: var(--e3); min-height: 56px; box-sizing: border-box; }

/* Superficie opaca con borde: prototipo 2691, 2707, 2793. */
.sup-tarjeta {
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  border-radius: var(--r-glass);
  padding: 20px var(--e4);
}

/* Contenedor de la lista de Adentro: prototipo 1966. */
.lista-sup {
  background: var(--sup);
  border-radius: var(--r-glass);
  overflow: hidden;
  border: 1px solid var(--borde-sup);
}
/* Rótulo de grupo dentro de la lista: Por horas y Mensuales. */
.lista-sup__grupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--suave);
  border-bottom: 1px solid var(--linea);
  font: 700 12px/1 var(--fuente);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink2);
}
.lista-sup__grupo + * { border-top: 0; }
.lista-sup__grupo-n { font-variant-numeric: tabular-nums; color: var(--ink3); }

/* Buscador de la lista: prototipo 1958-1962. */
.buscador__lupa { font: 700 18px/1 var(--fuente); color: var(--ink2); }
/* Sin altura impuesta: el prototipo (1959) lo deja a la altura de su letra y
   la caja que lo lleva es la que mide 56 (prototipo 1957). Se cancela aqui el
   min-height de base.css:62. */
.buscador__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  min-height: 0;
  font: 700 20px/1.2 var(--mono);
  letter-spacing: .08em;
  color: var(--ink);
  text-transform: uppercase;
}
.buscador__equis {
  min-width: var(--h-toque);
  min-height: var(--h-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 var(--fuente);
  color: var(--ink2);
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* Fila que ofrece abrir el perfil de lo buscado: prototipo 1980. */
.fila-enlace {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px/1 var(--fuente);
  color: var(--marca-ink);
  cursor: pointer;
  border: 0;
  border-top: 1px solid var(--linea);
  background: transparent;
}
.fila-enlace:active { background: var(--press-row); }
.fila-enlace--sin-borde { border-top: 0; }

/* Título de sección sobre la banda: prototipo 1954, 2537, 2562. */
.titulo-seccion { font: 700 22px/1.2 var(--fuente); color: var(--tit-banda); }
.titulo-seccion--chico { font: 700 var(--t-seccion)/1.2 var(--fuente); padding: 0 4px; }

/* Rejillas: prototipo 2024 (2 columnas), 2252 (3 columnas). */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.rejilla-2--junta { gap: var(--e2); }

/* Cuadro de tipo de vehículo del paso 1: prototipo 2026-2029. */
.cuadro-tipo {
  min-height: 132px;
  box-sizing: border-box;
  border-radius: var(--r-glass);
  border: 2px solid var(--borde-input);
  background: transparent;
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cuadro-tipo:active { background: var(--press-row); }
.cuadro-tipo__nombre { margin-top: var(--e4); font: 700 20px/1.2 var(--fuente); color: var(--ink); text-align: center; }

/* Cuadro grande de dos opciones: prototipo 2065-2072 y 2174-2181. */
.cuadro-opcion {
  box-sizing: border-box;
  border-radius: var(--r-glass);
  border: 2px solid var(--borde-input);
  background: transparent;
  padding: var(--e4);
  text-align: left;
  cursor: pointer;
}
.cuadro-opcion:active { background: var(--press-row); }
.cuadro-opcion[aria-pressed="true"] { border-color: var(--marca); }
.cuadro-opcion[disabled] { opacity: .5; cursor: default; }
.cuadro-opcion__titulo { font: 700 20px/1.2 var(--fuente); color: var(--ink); }
.cuadro-opcion__pie { margin-top: var(--e2); font: 400 15px/1.35 var(--fuente); color: var(--ink2); }
.cuadro-opcion__valor { margin-top: var(--e2); font: 700 18px/1.25 var(--fuente); color: var(--ink); }

/* Muestra de color del paso 5: prototipo 2255. */
.cuadro-color { display: flex; flex-direction: column; align-items: center; }
.cuadro-color__muestra { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--borde-sup); }
.cuadro-color__nombre { margin-top: var(--e2); font: 700 14px/1.2 var(--fuente); color: var(--ink); text-align: center; }

/* Avisos de bloque: prototipo 2098 (verde), 2192 (ámbar), 2624 (verde). */
.aviso-bloque {
  border-radius: var(--r-boton);
  padding: var(--e4);
  font: 700 16px/1.35 var(--fuente);
}
.aviso-bloque--ok { background: var(--verde); color: #fff; }
.aviso-bloque--amb { background: var(--ambar); color: var(--sobre-ambar); text-align: center; font: 700 19px/1.3 var(--fuente); padding: 14px 18px; }
.aviso-bloque--grande { border-radius: var(--r-glass); padding: 20px var(--e4); }
.aviso-bloque__rotulo {
  font: 700 var(--t-rotulo)/1 var(--fuente);
  letter-spacing: var(--letra-rotulo);
  color: #fff;
  text-transform: uppercase;
}
.aviso-bloque__titulo { margin-top: var(--e2); font: 700 28px/1.15 var(--fuente); color: #fff; }
.aviso-bloque__texto { margin-top: var(--e2); font: 400 16px/1.4 var(--fuente); color: #fff; }

/* Aviso del datáfono: prototipo 2676-2682. */
.aviso-datafono {
  margin-top: 20px;
  border-radius: 18px;
  background: var(--ambar);
  padding: 20px var(--e4);
  display: flex;
  align-items: center;
  gap: 14px;
}
.aviso-datafono__titulo { font: 700 19px/1.25 var(--fuente); color: var(--sobre-ambar); }
.aviso-datafono__pie { margin-top: 6px; font: 400 15px/1.4 var(--fuente); color: var(--sobre-ambar); text-wrap: pretty; }

/* Renglón de desglose: prototipo 2636-2639. */
.desglose { display: flex; flex-direction: column; gap: var(--e3); }
.desglose__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.desglose__concepto { flex: 1; min-width: 0; font: 400 16px/1.35 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.desglose__valor { flex: none; font: 700 18px/1.2 var(--fuente); color: var(--ink); white-space: nowrap; }
.separador { height: 1px; background: var(--linea); margin: 20px 0; }

/* Caja de efectivo y vuelto: prototipo 2660 y 2668. */
.caja-pago {
  margin-top: var(--e3);
  border-radius: var(--r-boton);
  background: var(--suave);
  padding: 14px var(--e4);
  display: flex;
  flex-direction: column;
}
.caja-pago--fila { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.caja-pago__rotulo {
  font: 700 var(--t-rotulo)/1 var(--fuente);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--ink2);
}
.caja-pago__linea { margin-top: 6px; display: flex; align-items: center; gap: var(--e2); }
.caja-pago__peso { font: 700 28px/1 var(--fuente); color: var(--ink); }
/* Sin altura impuesta: prototipo 2664, a la altura de su letra. Cancela el
   min-height de base.css:62. */
.caja-pago__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  min-height: 0;
  font: 700 28px/1.1 var(--fuente);
  color: var(--ink);
  padding: 0;
}
.caja-pago__dato { font: 700 28px/1 var(--fuente); color: var(--ink); }

/* Área de texto de novedades y notas: prototipo 2693, 2274, 2549. */
.area {
  margin-top: var(--e3);
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  border: 2px solid var(--borde-input);
  border-radius: var(--r-boton);
  padding: var(--e3);
  background: transparent;
  font: 400 var(--t-min-campo)/1.45 var(--fuente);
  color: var(--ink);
  resize: none;
  outline: 0;
}
.area--media { min-height: 104px; }   /* prototipo 2548, notaNueva del perfil */
.area--alta { min-height: 120px; }   /* prototipo 2274, nota de esta entrada */

/* Línea de conteo del cierre: prototipo 3119-3122. */
/* La misma caja que el resto de los campos: contar la caja es el dato más
   delicado del turno y era el único que seguía siendo un renglón subrayado. */
.linea-conteo {
  margin-top: var(--e2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 72px;
  padding: 10px 14px;
  border: 1.5px solid var(--borde-input);
  border-radius: 16px;
  background: var(--suave);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.linea-conteo:focus-within {
  border-color: var(--marca);
  background: var(--sup);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.linea-conteo__campo:focus-visible { outline: none; }
.linea-conteo__peso { font: 700 32px/1 var(--fuente); color: var(--ink); }
/* Sin altura impuesta: prototipo 3119, a la altura de su letra. Cancela el
   min-height de base.css:62. */
.linea-conteo__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  min-height: 0;
  font: 700 32px/1.1 var(--fuente);
  color: var(--ink);
  padding: 0;
}

/* Bloque de lo que registró el admin: prototipo 3095-3106. */
.mov-admin {
  margin-top: 20px;
  border-radius: var(--r-boton);
  border: 1px solid var(--borde-sup);
  background: var(--suave);
  padding: var(--e4);
}
.mov-admin__fila { display: flex; align-items: center; gap: var(--e3); }
.mov-admin__titulo { font: 700 16px/1.2 var(--fuente); color: var(--ink); }
.mov-admin__detalle { margin-top: 2px; font: 400 13px/1.35 var(--fuente); color: var(--ink2); text-wrap: pretty; }

/* Caja del saldo en caja: prototipo 3112-3116. */
.caja-saldo { margin-top: 20px; background: var(--suave); border-radius: var(--r-boton); padding: var(--e4); }
.caja-saldo__nota { margin-top: var(--e2); font: 400 15px/1.4 var(--fuente); color: var(--ink2); }

/* ---- El tiquete: hoja blanca en los dos temas (CONTEXTO §14) --------------
   Los colores van escritos, no en token: el recibo es papel y no cambia con
   el tema. Prototipo 2732-2791. */
.recibo {
  max-width: 400px;
  margin: 0 auto;
}
.recibo__hoja {
  background: #FFFFFF;
  border-radius: var(--r-glass);
  padding: var(--e5) 20px 20px;
  box-sizing: border-box;
}
.recibo__cabeza { display: flex; flex-direction: column; align-items: center; }
.recibo__monograma {
  width: var(--h-toque);
  height: var(--h-toque);
  border-radius: 14px;
  background: #0063B1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 var(--fuente);
  color: #FFFFFF;
}
.recibo__razon { margin-top: var(--e3); font: 700 19px/1.25 var(--fuente); color: #101314; text-align: center; text-wrap: pretty; }
.recibo__pie-linea { font: 400 13px/1.45 var(--fuente); color: #5A6165; text-align: center; text-wrap: pretty; }
.recibo__raya { border-top: 1px dashed #B4BABE; margin: 20px 0; }
.recibo__rotulo {
  font: 700 var(--t-rotulo)/1 var(--fuente);
  letter-spacing: var(--letra-placa-campo);
  color: #5A6165;
  text-transform: uppercase;
}
.recibo__total { margin-top: var(--e2); font: 700 44px/1 var(--mono); color: #101314; }
.recibo__metodo { margin-top: var(--e2); font: 400 14px/1.4 var(--fuente); color: #5A6165; }
.recibo__centro { display: flex; flex-direction: column; align-items: center; }
.recibo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.recibo__fila-rot { flex: 1; min-width: 0; font: 400 14px/1.4 var(--fuente); color: #5A6165; text-wrap: pretty; }
.recibo__fila-val { flex: none; max-width: 58%; font: 700 15px/1.4 var(--fuente); color: #101314; text-align: right; text-wrap: pretty; }
.recibo__qr-no {
  width: 148px;
  height: 148px;
  border-radius: var(--e3);
  border: 2px dashed #B4BABE;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 13px/1.4 var(--fuente);
  color: #5A6165;
  padding: var(--e3);
  box-sizing: border-box;
}
.recibo__escanee { margin-top: 10px; font: 400 13px/1.45 var(--fuente); color: #5A6165; text-align: center; }
.recibo__wa { margin-top: 4px; font: 700 15px/1.3 var(--fuente); color: #101314; }
.recibo__reclamo { font: 400 13px/1.5 var(--fuente); color: #5A6165; text-wrap: pretty; }
.recibo__conserve { margin-top: var(--e4); font: 700 14px/1.3 var(--fuente); color: #101314; text-align: center; }

/* Cronómetro del perfil: prototipo 2444-2456. */
.crono { display: flex; gap: var(--e3); }
.crono__caja {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  min-height: 96px;
  padding: var(--e4);
  border-radius: var(--r-glass);
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e3);
}
.crono__dato { font: 700 var(--t-pantalla)/1 var(--fuente); color: var(--ink); }

/* Placa grande de la cabecera del perfil: prototipo 2370. */
.placa--perfil {
  font: 700 40px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--tit-banda);
  text-transform: uppercase;
}
.perfil__linea { margin-top: var(--e2); font: 400 16px/1.35 var(--fuente); color: var(--sub-banda); }
.perfil__custodia { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }

/* Fila de nota y de visita: prototipo 2543 y 2569. */
.fila-nota { padding: 14px var(--e4); border-bottom: 1px solid var(--linea); }
.fila-nota__texto { font: 400 16px/1.45 var(--fuente); color: var(--ink); }
.fila-nota__pie {
  margin-top: 6px;
  font: 700 var(--t-rotulo)/1 var(--fuente);
  letter-spacing: .06em;
  color: var(--ink3);
  text-transform: uppercase;
}
.fila-visita {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  padding: var(--e3) var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: transparent;
  text-align: left;
}
.fila-visita__fecha { font: 700 16px/1.2 var(--fuente); color: var(--ink); }
.fila-visita__horas { margin-top: 4px; font: 400 14px/1.3 var(--mono); color: var(--ink2); }
.fila-visita__valor { font: 700 16px/1.2 var(--fuente); color: var(--ink); text-align: right; }
.fila-visita__tiempo { margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }

/* Contador de cascos: prototipo 2195-2199. */
.contador { display: flex; align-items: center; gap: var(--e3); }
.contador__boton {
  width: var(--h-paso);
  height: var(--h-paso);
  flex: none;
  border-radius: var(--r-boton);
  border: 2px solid var(--borde-input);
  background: transparent;
  color: var(--ink);
  font: 700 26px/1 var(--fuente);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.contador__boton[disabled] { opacity: .4; cursor: default; }
.contador__dato {
  flex: 1;
  text-align: center;
  font: 700 44px/1 var(--fuente);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.contador__pie { margin-top: var(--e4); font: 400 15px/1.4 var(--fuente); color: var(--ink2); text-align: center; }

/* Fila de interruptor: prototipo 1062, 2141. */
.fila-switch {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}
.fila-switch__texto { flex: 1; min-width: 0; font: 400 var(--t-min-campo)/1.3 var(--fuente); color: var(--ink); }

/* Campo de línea inferior de 3 px, el del prototipo: 2127, 2801. */
.campo-linea { margin-top: var(--e3); padding-bottom: var(--e2); border-bottom: 3px solid var(--borde-input); }
/* Sin altura impuesta: prototipo 2800, a la altura de su letra. Cancela el
   min-height de base.css:62. Es el campo de linea de todo el registro y se
   pinta seis veces: placa, cedula, nombre, WhatsApp, emergencia. */
.campo-linea__campo {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  min-height: 0;
  font: 400 18px/1.3 var(--fuente);
  color: var(--ink);
  padding: 0;
}
.campo-linea__campo--placa {
  font: 700 var(--t-placa-campo)/1.1 var(--mono);
  letter-spacing: var(--letra-placa-campo);
  text-transform: uppercase;
}
.campo-linea__campo--cedula { font: 700 28px/1.1 var(--mono); letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   14. El tablero del admin — BLOQUE 3 · ENTREGA 1.
   Bloque `esAdmin` del prototipo, lineas 382-527. Cada regla lleva al lado la
   linea de la que sale. Nada aqui se eligio.

   DOS COSAS QUE HAY QUE SABER ANTES DE LEER ESTA SECCION:

   1. EL TABLERO SIGUE EL TEMA, como todas las demas pantallas. Antes pintaba
      siempre oscuro, porque el prototipo le daba su propio fondo radial
      (`:383`) pasara lo que pasara con el tema. Eso dejaba el inicio del
      administrador en negro mientras el resto de la app estaba en blanco, asi
      que se cambio a proposito y el prototipo ya no manda en este punto.

      Sus superficies no se escriben a mano: salen de los tokens --tab-* que
      `.tablero` define abajo, y que se dan vuelta con el tema. En oscuro son
      veladuras blancas sobre el fondo oscuro; en claro, gris sobre blanco.
      Las tintas (--ink, --ink2, --ink3) solo se redefinen en el tema oscuro.

   2. EL MARCO DE ESTA PANTALLA ES 1100, NO 1180. El prototipo lo pinta dos
      veces (`:384` el titulo y `:386` el cuerpo). Es una EXCEPCION ACOTADA a
      esta pantalla: el 1180 general de base.css:115 y tokens.css:160 NO se
      toca, por eso vive aqui y no alli. Ver D-11 y E-10 del reporte.

   El acento de esta seccion sale de los tokens --tab-* y del azul de marca;
   no se escribe ningun color a mano. El comentario viejo hablaba del
   prototipo. Se pinta a sabiendas y por regla escrita. Ver C-4 del reporte.
   -------------------------------------------------------------------------- */

.tablero {                                     /* prototipo 383 */
  margin: 0 -16px;
  padding: 16px 16px 32px;
  box-sizing: border-box;
  min-height: 100%;
  /* Sin panel propio: el tablero ya no es una lámina opaca encima de la
     pantalla —eso era lo que cortaba en seco debajo de la tarjeta del
     usuario—, sino tarjetas sueltas sobre el fondo de la app, como en todas
     las demás pantallas. */
  background: transparent;
  animation: psfade .18s ease-out;
  --tab-sup: var(--sup);
  --tab-sup-2: rgba(18, 19, 22, .07);
  --tab-linea: rgba(18, 19, 22, .09);
  --tab-borde: rgba(18, 19, 22, .12);
  --tab-borde-fuerte: rgba(18, 19, 22, .20);
  --tab-pista: rgba(18, 19, 22, .08);
  --tab-lleno: var(--ink);
  /* Verde, ambar y rojo del tablero. En claro son tinta oscura sobre un tinte
     suave; en oscuro, tinta palida sobre un tinte denso. */
  --tab-tabs: rgba(18, 19, 22, .06);
  --tab-acento-ink: #0063B1;
  --tab-acento-fondo: rgba(0, 99, 177, .10);
  --tab-acento-borde: rgba(0, 99, 177, .35);
  --tab-ok-ink: #0B5C27;   --tab-ok-fondo: rgba(18, 128, 58, .13);  --tab-ok-borde: rgba(18, 128, 58, .38);
  --tab-amb-ink: #6E5000;  --tab-amb-fondo: rgba(255, 212, 0, .22); --tab-amb-borde: rgba(255, 212, 0, .55);
  --tab-mal-ink: #A31F1F;  --tab-mal-fondo: rgba(198, 40, 40, .11); --tab-mal-borde: rgba(198, 40, 40, .34);
}
[data-tema="oscuro"] .tablero {
  background: transparent;
  --tab-sup: var(--sup);
  --tab-sup-2: rgba(255, 255, 255, .08);
  --tab-linea: rgba(255, 255, 255, .10);
  --tab-borde: rgba(255, 255, 255, .12);
  --tab-borde-fuerte: rgba(255, 255, 255, .22);
  --tab-pista: rgba(255, 255, 255, .08);
  --tab-lleno: #FFFFFF;
  --tab-tabs: rgba(13, 19, 26, .92);
  --tab-acento-ink: #4AA3EC;
  --tab-acento-fondo: rgba(53, 151, 227, .16);
  --tab-acento-borde: rgba(74, 163, 236, .40);
  --tab-ok-ink: #A7EDC1;   --tab-ok-fondo: rgba(14, 122, 52, .26);  --tab-ok-borde: rgba(46, 190, 100, .55);
  --tab-amb-ink: #FDDC69;  --tab-amb-fondo: rgba(255, 212, 0, .20); --tab-amb-borde: rgba(255, 212, 0, .48);
  --tab-mal-ink: #FFC9C9;  --tab-mal-fondo: rgba(198, 40, 40, .26);  --tab-mal-borde: rgba(255, 107, 107, .55);
  --ink: #F3F6F8;
  --ink2: #A9B2BA;
  --ink3: #8A949C;
  --skel: #242C35;
  --skel-2: #1E252D;
}
.tablero__titulo {                             /* prototipo 384 — max-width 1100 */
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 20px;
  font: 800 28px/1.1 var(--fuente);
  letter-spacing: -1px;
  color: var(--ink);
}
.tablero__cuerpo { max-width: 1100px; margin: 0 auto; }  /* prototipo 386 */

/* LA EXCEPCION, Y SOLO PARA ESTA PANTALLA. En escritorio, base.css:148 topa
   TODO el contenido en 760 y le mete 20 arriba. El tablero del prototipo no
   vive dentro de ese tope: pinta su propio marco de 1100 (`:384` y `:386`) y su
   propio relleno de 16 (`:383`). Se cancela AQUI, colgado de
   [data-pantalla="admin"], para no tocar ni una linea de base.css: el 1180
   general y el 760 de las demas pantallas quedan intactos. Ver D-11 y E-10. */
@media (min-width: 1000px) {
  [data-ps="contenido"][data-pantalla="admin"] { max-width: none; padding-top: 0; }
}

/* Los cuatro estados. cargando y error los pone zonaDeDatos; el vacio y el
   con-resultados los pinta verAdmin. */
.tablero__vacio {                              /* prototipo 400 — 96 de alto */
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  font: 400 16px/1.4 var(--fuente);
  color: var(--ink2);
  text-align: center;
}
/* Prototipo 395: 44 de alto, NO los 48 del piso tactil. El Reintentar general
   de las demas pantallas (.boton--peligro) se queda como esta: esto es solo
   del tablero, y por eso pintarError() admite la clase por parametro. */
.tablero__reintentar {
  min-height: 44px;
  padding: 0 20px;
  margin-top: var(--e3);
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--tab-borde-fuerte);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
}

/* La tarjeta de vidrio, repetida en todo el bloque: 407, 428, 434, 445, 464. */
.tablero-caja {
  box-sizing: border-box;
  border-radius: 20px;
  padding: 20px;
  border-top: 1px solid var(--tab-linea);
  background: var(--tab-sup);
}
.tablero-caja__cab {                           /* prototipo 408 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tablero-caja__rotulo {                        /* prototipo 409, 435, 446, 470, 491 */
  font: 600 12px/1.2 var(--fuente);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink2);
}
.tablero-caja__centro { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* 26 y no 48: con las tarjetas ya agrupadas, 48 dejaba huecos que parecían
   secciones rotas y obligaban a desplazar de más. */
.tablero-bento--separado { margin-top: 26px; }

/* Prototipo 410: <span onClick>, letra de 12 y NINGUNA altura declarada. Se
   construye como span con role="button" para que el teclado lo alcance, y por
   eso hay que CANCELARLE el piso de base.css:45-54 en su propio selector: con
   48x48 descuadra la cabecera de la tarjeta. Es la trampa n.º 2 del §1.3. */
.tablero__actualizado {
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/1.2 var(--fuente);
  color: var(--ink2);
  text-align: right;
  cursor: pointer;
}
.tablero-caja--ocupacion {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(0, 99, 177, .10) 0%, rgba(0, 99, 177, 0) 62%),
    var(--tab-sup);
}

/* Ocupación: el anillo a la izquierda y su lectura al lado, en la misma
   tarjeta. Antes el anillo ocupaba una tarjeta de 220 px de alto y el cupo
   libre otra entera debajo, cada una con un solo número. */
.tablero-hoy {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.tablero-hoy__anillo { flex: none; }
.tablero-hoy__datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tablero-hoy__fila { display: flex; align-items: center; gap: 10px; }
.tablero-hoy__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; display: block; }
.tablero-hoy__rot {
  flex: 1;
  min-width: 0;
  font: 400 14px/1.2 var(--fuente);
  color: var(--ink2);
}
.tablero-hoy__valor {
  flex: none;
  font: 700 20px/1 var(--fuente);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tablero-hoy__valor--ok  { color: var(--tab-ok-ink); }
.tablero-hoy__valor--amb { color: var(--tab-amb-ink); }
.tablero-hoy__valor--mal { color: var(--tab-mal-ink); }
/* Los puntos de la lectura: el ocupado es el amarillo del arco, el libre toma
   el tono del cupo y la capacidad es la pista de atrás. */
.tablero { --tab-ocupado: #0063B1; --tab-pista-solida: rgba(18, 22, 25, .16);
  --tab-libre-ok: var(--tab-ok-ink); --tab-libre-amb: var(--tab-amb-ink); --tab-libre-mal: var(--tab-mal-ink);
  /* Tipos de vehículo: el azul de marca para el carro, que es lo que más
     entra, y los complementos (violeta, naranja, turquesa, cian, magenta)
     para el resto, para que cada tipo se reconozca en la barra sin leer.
     El rojo y el verde quedan para el semáforo de las mensualidades. */
  --tipo-carro: #0063B1; --tipo-camioneta: #8B3DFF; --tipo-camion: #007D79;
  --tipo-mula: #4D5358; --tipo-van: #E6187A; --tipo-bus: #009FE0;
  --tipo-moto: #FF6A00; --tipo-motocarro: #B28600; --tipo-bici: #00B3A4;
  --tipo-electrica: #2EC8FF; }
[data-tema="oscuro"] .tablero { --tab-ocupado: #3597E3; --tab-pista-solida: rgba(255, 255, 255, .22);
  /* La misma escalera corrida hacia la luz: el extremo azul oscuro se perdería
     contra el fondo. */
  --tipo-carro: #3597E3; --tipo-camioneta: #A970FF; --tipo-camion: #12D6C6;
  --tipo-mula: #B0B4BA; --tipo-van: #FF66AA; --tipo-bus: #2EC8FF;
  --tipo-moto: #FF8A2E; --tipo-motocarro: #FFC20E; --tipo-bici: #3DDBD9;
  --tipo-electrica: #82CFFF; }
@media (max-width: 360px) {
  .tablero-hoy { gap: 14px; }
}
.tablero__sin-capacidad {                      /* prototipo 416 */
  font: 400 15px/1.4 var(--fuente);
  color: var(--ink2);
  text-align: center;
}

/* El anillo de ocupacion — prototipo 5998-6013. */
/* 132 y no 160: el anillo ya no va solo en la tarjeta, comparte el ancho con
   su lectura. El SVG sigue dibujado en 160 y se escala. */
.tablero-anillo { position: relative; width: 132px; height: 132px; }
.tablero-anillo svg { display: block; width: 100%; height: 100%; }
.tablero-anillo__pista { stroke: rgba(0, 99, 177, .12); }
.tablero-anillo__arco--ok { stroke: var(--acento); }
.tablero-anillo__arco--amb { stroke: var(--ambar); }
.tablero-anillo__arco--mal { stroke: var(--rojo); }
.tablero-anillo__centro {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tablero-anillo__pct {
  font: 800 32px/1 var(--fuente);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tablero-anillo__rotulo {                      /* prototipo 6011 */
  font: 600 10px/1.2 var(--fuente);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink2);
}


/* Total ingresado — prototipo 428-433. */
.tablero-caja--total { display: flex; flex-direction: column; gap: 14px; }
.tablero-total__rotulo {                       /* prototipo 429 */
  font: 700 14px/1.2 var(--fuente);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink2);
  text-align: center;
}
.tablero-total__cifra {                        /* prototipo 430 — fuente 46 */
  max-width: 100%;
  font: 800 46px/1.1 var(--fuente);
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tablero-total__base {                         /* prototipo 430, la pildora verde */
  align-self: center;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tab-ok-fondo);
  border: 1px solid var(--tab-ok-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 700 12px/1.4 var(--fuente);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tab-ok-ink);
}
/* Los tres medios de pago, en una fila de tres. Cada uno con su parte del
   total: lo que el dueño mira no es cuánto entró en efectivo, sino cuánto de
   lo de hoy fue en efectivo. Antes eran tres tarjetas en una rejilla de dos,
   con la tercera sola en la fila de abajo. */
.tablero-medios {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tablero-medio {
  box-sizing: border-box;
  min-width: 0;
  padding: 14px 12px;
  border-radius: 18px;
  border-top: 1px solid var(--tab-linea);
  background: var(--tab-sup);
}
.tablero-medio__rotulo {
  display: block;
  font: 600 11px/1.2 var(--fuente);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tablero-medio__valor {
  display: block;
  margin-top: 8px;
  font: 700 16px/1.15 var(--fuente);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tablero-medio__pista {
  margin-top: 10px;
  height: 5px;
  border-radius: 999px;
  background: var(--tab-pista);
  overflow: hidden;
}
.tablero-medio__barra { height: 100%; border-radius: 999px; min-width: 3px; }
.tablero-medio__pct {
  display: block;
  margin-top: 6px;
  font: 400 11px/1.2 var(--fuente);
  font-variant-numeric: tabular-nums;
  color: var(--ink3);
}
/* Efectivo, tarjeta y Bre-B, cada uno con su color: verde para el billete,
   violeta para la tarjeta y cian para el pago digital. El color sale en la
   barra, en un punto junto al rótulo y en un fondo muy suave. */
.tablero-medio--uno  { --medio: var(--verde); }
.tablero-medio--dos  { --medio: var(--c-violeta); }
.tablero-medio--tres { --medio: var(--c-cian); }
[data-tema="oscuro"] .tablero-medio--uno { --medio: #2FD06B; }
.tablero-medio { background: color-mix(in srgb, var(--medio, var(--ink2)) 7%, var(--tab-sup)); }
.tablero-medio__barra { background: var(--medio, var(--ink2)); }
.tablero-medio__rotulo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  vertical-align: 1px; background: var(--medio, var(--ink2));
}
@media (max-width: 360px) {
  .tablero-medio { padding: 12px 9px; }
  .tablero-medio__valor { font-size: 15px; }
}


/* Control de vehiculos — prototipo 444-462. */
.tablero-mezcla__barra { margin-top: 16px; display: flex; gap: 3px; height: 10px; }  /* prototipo 448 */
.tablero-mezcla__seg { flex-basis: 0; min-width: 6px; border-radius: 999px; }        /* prototipo 5300 */
.tablero-mezcla__lista { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.tablero-mezcla__fila { display: flex; align-items: center; gap: 12px; }             /* prototipo 456 */
.tablero-mezcla__ico { flex: none; display: flex; align-items: center; }
/* El punto de color de cada tipo en Cuentas. No tenia regla: era un <span> sin
   medidas, con el color puesto en linea, asi que no se pintaba nada y la lista
   quedaba sin la marca que amarra la fila con su tramo de la barra de arriba. */
.tablero-mezcla__punto { flex: none; width: 10px; height: 10px; border-radius: 999px; }
/* Cada tipo con su barra: se ve cuál se está llenando, no solo cuántos hay. */
.tablero-mezcla__cuerpo { flex: 1; min-width: 0; }
.tablero-mezcla__linea { display: flex; align-items: baseline; gap: 10px; }
.tablero-mezcla__pista {
  margin-top: 7px;
  height: 6px;
  border-radius: 999px;
  background: var(--tab-pista);
  overflow: hidden;
}
.tablero-mezcla__lleno { height: 100%; border-radius: 999px; min-width: 3px; }
.tablero-mezcla__nombre {
  flex: 1; min-width: 0;
  font: 400 15px/1.2 var(--fuente);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tablero-mezcla__cantidad { flex: none; font: 600 15px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.tablero-mezcla__pct { flex: none; min-width: 64px; text-align: right; font: 400 13px/1.2 var(--fuente); color: var(--ink2); }  /* prototipo 456 */

/* En turno — prototipo 465-483. */
.tablero-turnos { display: flex; flex-direction: column; }
.tablero-turno { height: 64px; display: flex; align-items: center; gap: 12px; }      /* prototipo 466 */
.tablero-turno__avatar {                       /* prototipo 467 — 40x40 */
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tab-sup-2);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--fuente);
  color: var(--ink2);
}
.tablero-turno__datos { flex: 1; min-width: 0; }
.tablero-turno__nombre {
  font: 600 16px/1.2 var(--fuente);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tablero-turno__desde { margin-top: 4px; font: 400 12px/1.2 var(--fuente); color: var(--ink2); }
.tablero-turno__cifra { flex: none; text-align: right; }
.tablero-turno__registros { font: 700 22px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.tablero-turno__pie {
  margin-top: 4px;
  font: 600 12px/1 var(--fuente);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink2);
}
.tablero__sin-turnos {                         /* prototipo 481 — 64 de alto */
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  font: 400 15px/1.4 var(--fuente);
  color: var(--ink2);
}

/* Las tres cifras de mensualidades. Van en una fila de tres iguales: antes
   eran dos arriba y "Vencidas" sola a lo ancho, como si pesara más que las
   otras dos. El número manda y el rótulo va debajo, no al revés. */
.tablero-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Semáforo. El color va en el recuadro donde está el número, no en un punto
   aparte: verde, amarillo y rojo en su versión CLARA, con el número y el
   rótulo en la tinta oscura de ese mismo tono. Son tres botones de verdad
   —fondo macizo, contorno, sombra corta y hundida al tocar—, no tres casillas
   pintadas. Nada translúcido: los tres tintes son color opaco.
   En cero el recuadro se queda neutro y el número en gris: cero vencidas no es
   una alarma apagada por decoración, es que no hay nada rojo que mostrar. */
.tablero-men {
  min-height: 96px;
  border: 1.5px solid var(--tab-borde);
  border-radius: 18px;
  background: var(--tab-sup);
  padding: 16px 10px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .55);
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .2s ease, border-color .2s ease;
}
.tablero-men:active {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 2px 5px -4px rgba(0, 0, 0, .5);
}
/* Cada tono trae su color, el mismo del semáforo del resto de la app. El
   relleno es el color pleno, opaco de punta a punta: ni tinte, ni mezcla con
   la tarjeta, ni nada que deje ver lo de atrás. El número y el rótulo van en
   blanco encima. */
.tablero-men--ok  { --men-fuerte: var(--verde); }
.tablero-men--amb { --men-fuerte: var(--ambar); }
.tablero-men--mal { --men-fuerte: var(--rojo); }
.tablero-men--viva {
  background: var(--men-fuerte);
  border-color: var(--men-fuerte);
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--men-fuerte) 80%, transparent);
}
.tablero-men--viva .tablero-men__valor { color: #FFFFFF; }
.tablero-men--viva .tablero-men__rotulo { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) {
  .tablero-men:active { transform: none; }
}
.tablero-men__rotulo {
  font: 600 11px/1.2 var(--fuente);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
  text-align: center;
}
.tablero-men__valor {
  text-align: center;
  color: var(--ink3);
  font: 800 36px/1 var(--fuente);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
/* Sin luz encendida el número es gris: no hay nada que mirar en esa columna. */

/* Proximas a vencer. Ya no va pegada a las tres cifras: ahora son una fila de
   tarjetas sueltas, asi que esta es una tarjeta mas, con sus cuatro esquinas. */
.tablero-prox {
  margin-top: 10px;
  padding: 20px;
}
.tablero-prox__lista { margin-top: 8px; display: flex; flex-direction: column; }
.tablero-prox__fila {                          /* prototipo 497 — 88 de alto */
  min-height: 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.tablero-prox__izq { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 12px; }
.tablero-prox__ico {                           /* prototipo 499 — 44x44 */
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tab-sup-2);
  display: flex; align-items: center; justify-content: center;
}
.tablero-prox__datos { flex: 1; min-width: 0; }
.tablero-prox__linea { display: flex; align-items: center; gap: 8px; }   /* prototipo 501 */
.tablero-prox__linea .placa {                  /* prototipo 5292 — 22/700 mono, letra .12em */
  font: 700 22px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--ink);
  white-space: nowrap;
}
.tablero-prox__nota { flex: none; display: flex; }                        /* prototipo 503 */
/* Prototipo 505: <span onClick> con un icono de 16 y NINGUNA altura. Aqui es
   un <a href> real —el numero existe y se abre— y por eso hay que cancelarle
   el piso de 48 en su propio selector: con 48x48 rompe la fila de la placa.
   Es la trampa n.º 3 del §1.3. */
.tablero-prox__wa {
  flex: none;
  display: flex;
  min-height: 0;
  min-width: 0;
  cursor: pointer;
}
.tablero-prox__dueno {                         /* prototipo 508 */
  margin-top: 4px;
  font: 400 15px/1.25 var(--fuente);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tablero-prox__hasta { margin-top: 2px; font: 400 13px/1.2 var(--fuente); color: var(--ink2); white-space: nowrap; }
.tablero-prox__estado { flex: none; width: 108px; display: flex; }        /* prototipo 512 */
.tablero-prox__pie { margin-top: 16px; display: flex; justify-content: center; }
.tablero__ver-todas {                          /* prototipo 517 — 48, el piso exacto */
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 16px;
  border: 1px solid var(--tab-acento-borde);
  background: var(--tab-acento-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--fuente);
  color: var(--tab-acento-ink);
  cursor: pointer;
}

/* Las dos variantes de .pildora que faltaban y la forma fija de la fila.
   Literal de pildora() y pildoraFija() del prototipo, 5492-5498 y 5275-5277.
   .pildora y .pildora--mal ya existian arriba (seccion 8). */
.pildora--ok { background: var(--verde); color: #fff; }
.pildora--amb { background: var(--ambar); color: var(--sobre-ambar); }
.pildora--fija {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
}

/* --------------------------------------------------------------------------
   15. Las nueve pantallas del admin — BLOQUE 3 · ENTREGA 2.
   rapido, mensuales, finanzas (Cuentas), config completa, equipo,
   entregaAdmin, plan, menNueva y menRenovar. Cada regla lleva la linea del
   prototipo de la que se leyo. Donde una pieza reusa una clase que ya existia
   (.chip, .contador__boton, .sup-tarjeta, .campo-linea, .caja-pago,
   .tablero-caja, .tablero-prox__*, .plan__*, .nequi, .qr...) no se repite aqui.

   LAS PIEZAS QUE EL PROTOTIPO PINTA POR DEBAJO DE 48 cancelan el piso de
   base.css:45 en su propio selector y estan en la lista MEDIDA_PROPIA de R10
   (dp-verificar-b2.js) y de A46 (dp-adenda-b2-pantalla.js), con su linea:
   .cal-celda (48 de alto, 6763), .rp-celda (48, 6396), .cuentas-celda (56,
   6231), .cuentas-chip (36, 6281), .men-fila__renovar (32, 5298),
   .men-fila__wa (sin altura, 853), .exportar__cerrar (44, 3205) y
   .interruptor--suelto (56x32, 996 y 1114).
   -------------------------------------------------------------------------- */

/* Utilidades de margen que el prototipo escribe sueltas. */
.arriba-8  { margin-top: 8px; }
.arriba-16 { margin-top: 16px; }
.rotulo--8  { margin-top: 8px; }    /* prototipo 1367 */
.rotulo--16 { margin-top: 16px; }   /* prototipo 3208 */
.rotulo--20 { margin-top: 20px; }   /* prototipo 899, 1412, 2863 */
.rotulo--24 { margin-top: 24px; }   /* prototipo 903, 1286, 2933 */
.separador--16 { margin: 16px 0; }  /* prototipo 1064 */
.rejilla-3--junta { gap: 8px; }     /* prototipo 961 */
.chip--64 { min-height: 64px; }     /* prototipo chip(..., 64): 2883, 7959 */
.boton--rojo { background: var(--rojo); color: #FFFFFF; cursor: pointer; }  /* prototipo 5776, okColor */
.modal__texto--tinta { color: var(--ink); }                                  /* prototipo 3326 */

/* Cabeza de pantalla sobre la banda: 1270-1273, 1815-1819, 3049-3052. */
.pantalla-cab { padding: 8px 4px 20px; }
.pantalla-cab__rotulo {
  font: 700 12px/1 var(--fuente);
  letter-spacing: .10em;
  color: var(--sub-banda);
  text-transform: uppercase;
}
.pantalla-cab__titulo { font: 700 24px/1.2 var(--fuente); color: var(--tit-banda); }
.pantalla-cab__titulo--abajo { margin-top: 8px; }
.pantalla-cab__sub { margin-top: 8px; font: 400 16px/1.35 var(--fuente); color: var(--sub-banda); }

/* Titulo suelto de Configuracion y Operadores: 925, 884. */
.pantalla-titulo { padding: 8px 4px 16px; font: 700 24px/1.2 var(--fuente); color: var(--tit-banda); }

/* La caja de fecha verde o roja: 1344, 1353, 2915, 2993. */
.caja-fecha {
  margin-top: 16px;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.caja-fecha--ok { background: var(--verde); }
.caja-fecha--mal { background: var(--rojo); }
.caja-fecha__rotulo { font: 700 12px/1 var(--fuente); letter-spacing: .10em; color: #FFFFFF; text-transform: uppercase; }
.caja-fecha__fecha { font: 700 17px/1.2 var(--fuente); color: #FFFFFF; }

/* Paso con su caja en el centro: 2904-2908, 1337-1341. */
.men-paso { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.men-paso__caja {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border-radius: 16px;
  background: var(--suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 19px/1.2 var(--fuente);
  color: var(--ink);
}

/* ---- mensuales: el Calendario (781-876) ---------------------------------- */
.men-cab { padding: 8px 4px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }  /* 783 */
.men-cab__titulo { font: 700 24px/1.2 var(--fuente); color: var(--tit-banda); }
.men-cab__cuenta { font: 700 13px/1 var(--fuente); letter-spacing: .08em; color: var(--sub-banda); text-transform: uppercase; }
.men-nueva {                                                     /* 788 */
  width: 100%;
  margin-bottom: 16px;
  min-height: 56px;
  border-radius: 16px;
  background: var(--sup-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borde-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
}
.men-nueva:active { background: var(--press-ghost); }

.cal-tarjeta { background: var(--sup); border: 1px solid var(--borde-sup); border-radius: 20px; padding: 16px; }  /* 790 */
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }                     /* 791 */
.cal-cab__titulo { font: 700 18px/1.2 var(--fuente); color: var(--ink); text-align: center; }
.cal-rejilla { margin-top: 16px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }    /* 796 */
.cal-dow {                                                       /* 798 */
  text-align: center;
  font: 700 12px/1 var(--fuente);
  letter-spacing: .06em;
  color: var(--ink3);
  text-transform: uppercase;
  padding-bottom: 6px;
}
/* Prototipo 6763: 48 de ALTO y el ancho que da la rejilla de siete. Se cancela
   aqui el min-width de 48 del piso: siete de 48 no caben en 390. */
.cal-celda {
  min-height: 48px;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid transparent;
}
.cal-celda--hueco { cursor: default; border: 0; }
.cal-celda--hoy { background: var(--suave); border-color: var(--borde-input); }
.cal-celda[aria-pressed="true"] { background: var(--marca); }
.cal-celda__num { font: 700 16px/1 var(--fuente); color: var(--ink); }
.cal-celda[aria-pressed="true"] .cal-celda__num { color: var(--sobre-marca); }
.cal-celda__punto { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.cal-celda__punto--ok { background: var(--verde); }
.cal-celda__punto--amb { background: var(--ambar); }
.cal-celda__punto--mal { background: var(--rojo); }
.cal-leyenda { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }       /* 807 */
.cal-leyenda__item { display: flex; align-items: center; gap: 6px; }
.cal-leyenda__punto { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cal-leyenda__punto--ok { background: var(--verde); }
.cal-leyenda__punto--amb { background: var(--ambar); }
.cal-leyenda__punto--mal { background: var(--rojo); }
.cal-leyenda__texto { font: 400 13px/1 var(--fuente); color: var(--ink2); }

/* Las dos ruedas: 814-836. */
.men-rueda {
  margin-top: 16px;
  margin-bottom: 12px;
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.men-rueda--tipo { margin-top: 0; margin-bottom: 16px; }
.men-rueda__centro { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.men-rueda__marca { height: 40px; display: flex; align-items: center; justify-content: center; }
.men-rueda__punto { width: 22px; height: 22px; border-radius: 11px; display: block; }   /* 7338 */
.men-rueda__punto--todas { background: var(--ink3); }
.men-rueda__punto--aldia { background: var(--verde); }
.men-rueda__punto--porvencer { background: var(--ambar); }
.men-rueda__punto--vencidas { background: var(--rojo); }
.men-rueda__punto--suspendidas { background: var(--ink2); }
.men-rueda__punto--cerradas { background: var(--ink3); }
.men-rueda__iconos { display: flex; align-items: center; gap: 6px; height: 40px; }      /* 7345 */
.men-rueda__icono { display: flex; }
.men-rueda__nombre { font: 700 12px/1 var(--fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-align: center; }
.men-rueda__cuenta { font: 400 13px/1 var(--fuente); color: var(--ink3); text-align: center; }

/* La lista: 839-874 y filaMensual, 5279-5306. */
.men-lista { margin-top: 16px; background: var(--sup); border: 1px solid var(--borde-sup); border-radius: 20px; overflow: hidden; }
.men-lista__titulo { padding: 16px 16px 12px; font: 700 18px/1.25 var(--fuente); color: var(--ink); }
.men-lista__vacio { min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.men-lista__vacio span { font: 400 16px/1.4 var(--fuente); color: var(--ink3); text-align: center; }
.men-fila {
  height: 88px;
  box-sizing: border-box;
  padding: 0 16px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.men-fila:active { background: var(--press-row); }
.men-fila__izq { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 12px; }
.men-fila__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--suave); display: flex; align-items: center; justify-content: center; }
.men-fila__datos { flex: 1; min-width: 0; display: block; }
.men-fila__linea { display: flex; align-items: center; gap: 8px; }
.placa--men { font: 700 22px/1 var(--mono); letter-spacing: .12em; color: var(--ink); white-space: nowrap; }   /* 5292 */
[data-letra="grande"] .placa--men { font-size: 26px; }
.men-fila__nota { flex: none; display: flex; }
/* Prototipo 853: <span onClick> con un icono de 16 y NINGUNA altura. Aqui es un
   <a href> real, y por eso se le cancela el piso en su propio selector. */
.men-fila__wa { flex: none; display: flex; min-height: 0; min-width: 0; cursor: pointer; }
.men-fila__dueno { display: block; margin-top: 4px; font: 400 15px/1.25 var(--fuente); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.men-fila__hasta { display: block; margin-top: 2px; font: 400 13px/1.2 var(--fuente); color: var(--ink3); white-space: nowrap; }
.men-fila__der { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 108px; }  /* 860 */
/* Prototipo 5298: 32 de alto. Se cancela el piso de 48 aqui mismo. */
.men-fila__renovar {
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--borde-input);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--fuente);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.men-fila__renovar:active { background: var(--press-ghost); }
.men-fila__ciclo {                                               /* 5299 */
  height: 32px;
  border-radius: 999px;
  background: var(--suave);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--fuente);
  color: var(--ink3);
}
.men-mas {                                                       /* 872 */
  width: 100%;
  min-height: 56px;
  border: 0;
  border-top: 1px solid var(--linea);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fuente);
  color: var(--marca-ink);
  cursor: pointer;
}
.men-mas:active { background: var(--press-row); }

/* ---- finanzas: Cuentas (529-779, 6160-6349) ------------------------------
   Pinta oscuro como el tablero: .tablero ya trae el fondo (:530 = :383) y las
   tintas. Su marco es el mismo 1100 del tablero (:531, :533, :539), la segunda
   pantalla que lo usa; y como el tablero, en escritorio no vive dentro del
   tope de 760 de base.css:148. Se cancela AQUI, colgado de su data-pantalla. */
@media (min-width: 1000px) {
  [data-ps="contenido"][data-pantalla="finanzas"] { max-width: none; padding-top: 0; }
}
.cuentas__titulo {                                               /* 531 */
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 16px;
  font: 800 28px/1.1 var(--fuente);
  letter-spacing: -1px;
  color: var(--ink);
}
/* La barra de Hoy · Semana · Mes se para justo debajo de la barra de arriba y
   ahí se queda.
   El truco está en de dónde se cuenta ese `top`: NO del borde de la pantalla,
   sino del borde de adentro de la zona que se desplaza, que trae un relleno de
   arriba del tamaño del cabezal (--relleno-arriba) para que el contenido no
   nazca debajo del vidrio. Con top:0 la barra se paraba 144px abajo —el
   cabezal ya recogido mide 50—, y eso era lo que se veía como que la barra se
   bajaba sola al desplazar. Así que el relleno se descuenta: lo que queda es
   el alto de la barra de arriba, que es la única parte del cabezal que no se
   recoge, más un respiro de 10.
   Y su fondo es macizo: pegada, lo que pasa por detrás no puede leerse a
   través de ella. */
.cuentas__tabs {                                                 /* 533 */
  position: sticky;
  top: calc(var(--alto-topbar, 48px) + 10px - var(--relleno-arriba, 0px));
  z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--tab-sup);
  border: 1px solid var(--tab-borde);
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .7);
  border-radius: 16px;
  padding: 4px;
  gap: 4px;
  display: flex;
}
.cuentas__tab {                                                  /* 6163 */
  flex: 1;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--fuente);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink2);
  background: none;
  border: 0;
  border-radius: 12px;
  padding: 0;
  transition: background-color .2s ease, color .2s ease;
}
/* La pestaña activa se llena; sin raya debajo. */
.cuentas__tab[aria-pressed="true"] { color: var(--sobre-marca); background: var(--marca); }
.cuentas__cuerpo { max-width: 1100px; margin: 16px auto 0; }     /* 539 */
.cuentas__etiqueta { font: 400 12px/1.2 var(--fuente); color: var(--ink2); text-align: right; }   /* 559 */
.cuentas__vacio { min-height: 96px; display: flex; align-items: center; justify-content: center; }  /* 707, 767 */
.cuentas__vacio span { font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.cuentas__exportar { margin-top: 48px; background: var(--marca); color: var(--sobre-marca); }    /* 7298 */
.cuentas__exportar--plan { background: var(--tab-sup-2); border: 1px dashed var(--tab-borde-fuerte); color: var(--ink2); font-size: 16px; cursor: pointer; }

.cuentas-saldo__centro { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }  /* 565 */
.cuentas-saldo__total { font: 800 56px/1 var(--fuente); letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--ink); }            /* 566 */
.cuentas-saldo__var { font: 600 13px/1.3 var(--fuente); color: var(--tab-ok-ink); }                                                                            /* 7278 */
.cuentas-saldo__var--baja { color: var(--tab-mal-ink); }

.cuentas-cifra {                                                 /* 6179 */
  min-height: 148px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--tab-linea);
  background: var(--tab-sup);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.cuentas-cifra--total { border-color: var(--tab-acento-borde); background: var(--tab-acento-fondo); }
.cuentas-cifra__cab { display: flex; align-items: center; gap: 8px; }
.cuentas-cifra__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; display: block; }
.cuentas-cifra__punto--horas, .cuentas-cifra__barra--horas { background: var(--tab-acento-ink); }
.cuentas-cifra__punto--mensual, .cuentas-cifra__barra--mensual { background: var(--verde); }
.cuentas-cifra__punto--total, .cuentas-cifra__barra--total { background: var(--tab-acento-ink); }
.cuentas-cifra__rotulo { flex: 1; min-width: 0; font: 700 12px/1.3 var(--fuente); letter-spacing: 1px; text-transform: uppercase; color: var(--ink2); text-wrap: pretty; }
.cuentas-cifra__valor { font: 700 22px/1.1 var(--fuente); letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-cifra--total .cuentas-cifra__valor { font-size: 30px; }
.cuentas-cifra__pista { height: 6px; border-radius: 999px; background: var(--tab-sup-2); overflow: hidden; }
.cuentas-cifra__barra { height: 100%; border-radius: 999px; }
.cuentas-cifra__pie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cuentas-cifra__nota { flex: 1; min-width: 0; font: 400 12px/1.3 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.cuentas-cifra__pct { flex: none; font: 700 12px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink2); }
.cuentas-cifra--total .cuentas-cifra__pct { color: var(--tab-acento-ink); }

/* Ingreso dia por dia: 591-621 y 6213-6246. */
.cuentas-mes { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cuentas-paso {                                                  /* 6243 */
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--tab-borde-fuerte);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  padding: 0;
}
.cuentas-paso:disabled { color: rgba(243, 246, 248, .28); cursor: default; }
.cuentas-mes__centro { flex: 1; min-width: 0; text-align: center; }
.cuentas-mes__titulo { font: 700 18px/1.2 var(--fuente); color: var(--ink); }
.cuentas-mes__resumen { margin-top: 4px; font: 600 12px/1 var(--fuente); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2); }
.cuentas-rejilla { margin-top: 16px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cuentas-dow { text-align: center; font: 700 12px/1 var(--fuente); letter-spacing: .06em; color: var(--ink2); text-transform: uppercase; padding-bottom: 6px; }
/* Prototipo 6231: 56 de alto; el ancho lo da la rejilla de siete. */
.cuentas-celda {
  min-height: 56px;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
}
.cuentas-celda--hueco { cursor: default; }
.cuentas-celda--hoy { background: var(--tab-sup-2); border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.cuentas-celda[aria-pressed="true"] { background: var(--marca); }
.cuentas-celda__num { font: 700 15px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-celda--futuro .cuentas-celda__num { color: var(--ink3); }
.cuentas-celda[aria-pressed="true"] .cuentas-celda__num { color: var(--sobre-marca); }
.cuentas-celda__barra { flex: none; width: 20px; height: 6px; border-radius: 999px; }
.cuentas-celda__barra--nada { background: var(--tab-borde); }
.cuentas-celda__barra--mal { background: var(--rojo); }
.cuentas-celda__barra--amb { background: var(--ambar); }
.cuentas-celda__barra--ok { background: var(--verde); }
.cuentas-celda__barra--sel { background: var(--tab-lleno); }
.cuentas-mes__pie { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tab-linea); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cuentas-mes__pie-izq { flex: 1; min-width: 0; }
.cuentas-mes__pie-titulo { font: 600 12px/1.2 var(--fuente); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2); }
.cuentas-mes__pie-nota { margin-top: 6px; font: 400 13px/1.3 var(--fuente); color: var(--ink2); }
.cuentas-mes__pie-valor { flex: none; font: 700 28px/1 var(--fuente); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Por tipo y metodos de pago: 623-663. La barra y el punto reusan los del
   tablero (.tablero-mezcla__*), que el prototipo pinta igual (448 = 626). */
.cuentas-tipos { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.cuentas-tipo { display: flex; align-items: center; gap: 10px; }
.cuentas-tipo__datos { flex: 1; min-width: 0; }
.cuentas-tipo__nombre { font: 400 15px/1.2 var(--fuente); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuentas-tipo__registros { margin-top: 4px; font: 400 12px/1.2 var(--fuente); color: var(--ink2); }
.cuentas-tipo__monto { flex: none; font: 600 15px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-tipo__pct { flex: none; min-width: 46px; text-align: right; font: 400 13px/1.2 var(--fuente); color: var(--ink2); }
.cuentas-metodos { margin-top: 16px; display: flex; flex-direction: column; gap: 20px; }
.cuentas-metodo__linea { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cuentas-metodo__nombre { flex: 1; min-width: 0; font: 400 15px/1.2 var(--fuente); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuentas-metodo__monto { flex: none; font: 600 16px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-metodo__pista { margin-top: 8px; height: 8px; background: var(--tab-sup-2); border-radius: 999px; overflow: hidden; }
.cuentas-metodo__barra { height: 100%; background: var(--medio, var(--tab-acento-ink)); border-radius: 999px; }
.cuentas-metodo--efectivo { --medio: var(--verde); }
.cuentas-metodo--tarjeta { --medio: var(--c-violeta); }
.cuentas-metodo--breb { --medio: var(--c-cian); }
[data-tema="oscuro"] .cuentas-metodo--efectivo { --medio: #2FD06B; }
.cuentas-metodo__tx { margin-top: 6px; font: 400 12px/1.2 var(--fuente); color: var(--ink2); text-align: right; }

/* Cartera: 665-710. Las filas reusan .tablero-prox__*: 684 = 497. */
.cuentas-cartera { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.cuentas-cartera__caja {
  flex: 1 1 160px;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 16px 12px;
  background: var(--tab-sup);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
}
.cuentas-cartera__caja--ancha { flex: 1 1 200px; }
.cuentas-cartera__rotulo { min-height: 28px; display: flex; align-items: center; justify-content: center; font: 600 12px/1.2 var(--fuente); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2); }
.cuentas-cartera__valor { font: 700 44px/1 var(--fuente); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-cartera__valor--mal { font-weight: 800; letter-spacing: -1.5px; color: var(--tab-mal-ink); }
.cuentas-cartera__lista { margin-top: 16px; display: flex; flex-direction: column; }
.cuentas-cartera__monto { flex: none; width: 106px; text-align: right; font: 600 17px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-cartera__ver {                                          /* 703 */
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font: 600 14px/1 var(--fuente);
  color: var(--tab-acento-ink);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* Turnos: 712-770, 6278-6333. */
.cuentas-turnos__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cuentas-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Prototipo 6281: 36 de alto. Se cancela el piso de 48 aqui. */
.cuentas-chip {
  min-height: 36px;
  min-width: 0;
  border-radius: 999px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font: 600 13px/1 var(--fuente);
  box-sizing: border-box;
  background: var(--tab-sup);
  color: var(--ink2);
  border: 1px solid var(--tab-borde);
}
.cuentas-chip[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.cuentas-totales { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cuentas-total { box-sizing: border-box; border-radius: 16px; padding: 14px; background: var(--tab-sup); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.cuentas-total__rotulo { font: 600 12px/1.2 var(--fuente); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink2); }
.cuentas-total__valor { font: 700 19px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); text-align: center; text-wrap: balance; }
.cuentas-total__valor--cuadra { color: var(--tab-ok-ink); }
.cuentas-total__valor--falta { color: var(--tab-mal-ink); }
.cuentas-total__valor--sobra { color: var(--ambar); }
.cuentas-turnos { display: flex; flex-direction: column; }
.cuentas-turno {                                                 /* 739 */
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
}
.cuentas-turno__datos { flex: 1; min-width: 0; display: block; }
.cuentas-turno__linea { display: flex; align-items: center; gap: 8px; }
.cuentas-turno__nombre { font: 600 16px/1.2 var(--fuente); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuentas-turno__abierto { flex: none; height: 24px; border-radius: 999px; padding: 0 10px; display: flex; align-items: center; font: 600 12px/1 var(--fuente); letter-spacing: 1.5px; text-transform: uppercase; background: var(--verde); color: #FFFFFF; }  /* 6322 */
.cuentas-turno__detalle { display: block; margin-top: 4px; font: 400 12px/1.3 var(--fuente); color: var(--ink2); }
.cuentas-turno__monto { flex: none; width: 106px; text-align: right; font: 600 17px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.cuentas-turno__mas { padding: 4px 0 16px 52px; display: flex; flex-direction: column; gap: 10px; }   /* 753 */
.cuentas-turno__dato { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cuentas-turno__dato-rot { font: 400 13px/1.2 var(--fuente); color: var(--ink2); }
.cuentas-turno__dato-val { font: 600 15px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }

/* La ventana "Descargar informe": 3200-3257. Vive fuera del tablero: usa las
   tintas del tema, como el prototipo. */
.modal--exportar { max-width: 520px; overflow-y: auto; }
.exportar__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Prototipo 3205: 44 de alto. */
.exportar__cerrar {
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  font: 700 15px/1 var(--fuente);
  color: var(--ink2);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.exportar__opciones { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.exportar__opcion { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.exportar__opcion-texto { flex: 1; min-width: 0; font: 400 16px/1.3 var(--fuente); color: var(--ink); }
.exportar__periodo { margin-top: 16px; font: 400 13px/1.4 var(--fuente); color: var(--ink3); }
.exportar__previa { margin-top: 24px; }
.exportar__tabla { margin-top: 12px; overflow-x: auto; }
.exportar__tabla-dentro { min-width: max-content; }
.exportar__fila { height: 48px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--linea); }
.exportar__col { flex: none; min-width: 96px; font: 700 12px/1.2 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.exportar__celda { flex: none; min-width: 96px; font: 400 14px/1.2 var(--fuente); color: var(--ink); white-space: nowrap; }
.exportar__conteo { margin-top: 12px; font: 400 13px/1.4 var(--fuente); color: var(--ink3); }
.exportar__sin { margin-top: 24px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
.exportar__sin span { font: 400 16px/1.4 var(--fuente); color: var(--ink3); }
.exportar__boton { margin-top: 24px; }
.exportar__hecho { margin-top: 16px; }
.exportar__hecho-titulo { font: 700 16px/1.4 var(--fuente); color: var(--ink); }
.exportar__hecho-pie { margin-top: 8px; font: 400 13px/1.4 var(--fuente); color: var(--ink3); }

/* ---- equipo: Operadores (878-920) --------------------------------------- */
.equipo-fila { min-height: 64px; box-sizing: border-box; padding: 12px 16px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 12px; }  /* 887 */
.equipo-fila__nombre { font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.equipo-fila__detalle { margin-top: 4px; font: 400 15px/1.3 var(--fuente); color: var(--ink2); }
.equipo__form { margin-top: 16px; }
.equipo__form-titulo { font: 700 18px/1.25 var(--fuente); color: var(--ink); }
.campo-linea--fina { border-bottom-width: 2px; }                            /* 900, 904, 908 */
/* La línea se marca sola con el dato: azul cuando ya sirve, roja cuando hay
   algo escrito que todavía no. Vacío no se marca: nadie ha hecho nada mal. */
.campo-linea--ok  { border-bottom-color: var(--marca); }
.campo-linea--mal { border-bottom-color: var(--rojo); }
.campo-dato + .campo-dato { margin-top: var(--e4); }
.rotulo__opcional { margin-left: 6px; font-weight: 400; color: var(--ink3); text-transform: none; letter-spacing: 0; }
/* Campo de contraseña: el texto ocupa la línea y el ojo va al final, sin
   empujar el borde inferior. El ojo solo existe con algo escrito. */
.campo-linea--ojo { display: flex; align-items: center; gap: var(--e2); }
.campo-linea--ojo .campo-linea__campo { flex: 1; min-width: 0; }
.campo-linea--ojo .ojo { flex: none; min-height: 32px; margin-bottom: -4px; }
.campo-linea__campo--fuerte { font: 700 20px/1.3 var(--fuente); }            /* 901 */
.campo-linea__campo--medio { font: 400 20px/1.3 var(--fuente); }             /* 905, 1365 */
.campo-linea__campo--clave { font: 700 22px/1.2 var(--mono); }               /* 909 */
.campo-linea__campo--inventario { font: 700 32px/1.1 var(--mono); letter-spacing: .12em; }  /* 1375 */
.equipo__ayuda { margin-top: 8px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); }
.equipo__crear { margin-top: 24px; }

/* ---- config: Configuracion completa (922-1266) --------------------------- */
.cfg-menu { background: var(--sup); border: 1px solid var(--borde-sup); border-radius: 20px; padding: 8px; }   /* 930 */
.cfg-opcion {                                                    /* 932 */
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
}
.cfg-opcion:active { background: var(--press-row); }
.cfg-opcion__ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--suave); display: flex; align-items: center; justify-content: center; }
.cfg-opcion__textos { flex: 1; min-width: 0; display: block; }
.cfg-opcion__nombre { display: block; font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.cfg-opcion__detalle { display: block; margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.cfg-opcion__flecha { flex: none; font: 700 22px/1 var(--fuente); color: var(--ink3); }
.cfg-salir {                                                     /* 942 */
  width: 100%;
  margin-top: 16px;
  height: 56px;
  border: 2px solid var(--rojo);
  border-radius: 16px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 18px/1 var(--fuente);
  color: var(--rojo);
  cursor: pointer;
}
.cfg-salir:active { background: var(--press-ghost); }
.cfg-volver {                                                    /* 948, 880 */
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 15px/1 var(--fuente);
  color: var(--tit-banda);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.cfg-volver:active { background: var(--press-ghost); }
.cfg-volver__flecha { font: 700 22px/1 var(--fuente); }
.cfg-seccion { margin-top: 8px; }                                /* 953 */
.cfg-seccion__titulo { font: 700 18px/1.25 var(--fuente); color: var(--ink); }
.cfg-seccion__nota { margin-top: 8px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.cfg-nota { margin-top: 8px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); }   /* 966 */

/* Fila con titulo, pie y el interruptor a la derecha: 968, 1057, 1065, 1253. */
.cfg-fila {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.cfg-fila__textos { flex: 1; min-width: 0; display: block; }
.cfg-fila__titulo { display: block; font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.cfg-fila__pie { display: block; margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.cfg-fila__texto { flex: 1; min-width: 0; font: 400 16px/1.35 var(--fuente); color: var(--ink); }   /* 1126, 1184 */

/* Tarifas: 982-1014 y filaTipos, 5536-5576. */
.tarifa-rejilla { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tarifa-tile {
  min-height: 128px;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--borde-sup);
}
.tarifa-tile:active { background: var(--press-ghost); }
.tarifa-tile[aria-pressed="true"] { background: var(--suave); border: 2px solid var(--marca); }
.tarifa-tile--apagado { opacity: .55; }
/* Fuera del plan: se ve, con borde punteado y el plan en que viene. */
.tarifa-tile--plan { opacity: .7; border-style: dashed; }
.tarifa-tile--plan .tarifa-tile__estado { color: var(--marca-ink); }
.tarifa-tile__nombre { font: 700 14px/1.15 var(--fuente); color: var(--ink); text-align: center; }
.tarifa-tile__estado { font: 700 12px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.tarifa-tile__estado--activo { color: var(--verde); }
.tarifa-panel { margin-top: 16px; border-radius: 18px; border: 1px solid var(--borde-sup); background: var(--suave); padding: 16px; }   /* 993 */
.tarifa-panel__cab { display: flex; align-items: center; gap: 12px; }
.tarifa-panel__nombre { flex: 1; min-width: 0; font: 700 18px/1.2 var(--fuente); color: var(--ink); }
.tarifa-panel__nota { margin-top: 8px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.tarifa-campos { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }   /* 1000, 1073 */
/* Ventana de un vehículo en Configuración de tarifas. */
.modal--tarifa { max-height: 100%; overflow-y: auto; }
.tarifa-ventana__cab { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.tarifa-ventana__ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--suave); display: flex; align-items: center; justify-content: center; }
.tarifa-ventana__nombre { flex: 1; min-width: 0; font: 700 22px/1.2 var(--fuente); color: var(--ink); }
.tarifa-ventana__listo { margin-top: 20px; }
.tarifa-panel__nota--plan { color: var(--marca-ink); font-weight: 600; }
.cfg-paso__rotulo { font: 700 12px/1 var(--fuente); letter-spacing: .10em; color: var(--ink3); text-transform: uppercase; text-align: center; }
.cfg-paso__fila { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.cfg-paso__fila--12 { margin-top: 12px; }                        /* 1040, 1150 */
.cfg-paso__valor { flex: 1; text-align: center; font: 700 22px/1.2 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }   /* 5545, 6591 */
.cfg-paso__valor--vacio { font: 400 15px/1.3 var(--fuente); color: var(--ink3); }

/* Cupos: 1027-1050, 6581-6599. */
.cupos-lista { display: flex; flex-direction: column; gap: 20px; }
.cupos-fila { display: flex; align-items: center; gap: 12px; }
.cupos-fila__ico { flex: none; display: flex; }
.cupos-fila__textos { flex: 1; min-width: 0; }
.cupos-fila__nombre { font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.cupos-fila__detalle { margin-top: 2px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.cupos-total { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cupos-total__rotulo { font: 400 16px/1.3 var(--fuente); color: var(--ink); }
.cupos-total__valor { font: 700 22px/1 var(--fuente); color: var(--ink); }

/* Cobro con QR: 1101-1163. */
.cfg-qr { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; }
.cfg-qr__mini { flex: none; display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--suave); border: 1px solid var(--borde-input); box-sizing: border-box; }   /* 7056 */
.cfg-qr__caja { flex: none; width: 56px; height: 56px; box-sizing: border-box; border-radius: 14px; background: var(--suave); border: 2px dashed var(--borde-input); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--fuente); color: var(--ink3); }  /* 1108 */
.cfg-qr__textos { flex: 1; min-width: 0; }
.cfg-qr__nombre { font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.cfg-qr__ruta { margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); word-break: break-all; }
.cfg-cargar {                                                    /* 1116, 1223 */
  margin-top: 16px;
  min-height: 56px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 2px solid var(--borde-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
}
.cfg-cargar--12 { margin-top: 12px; }
.cfg-archivo { display: none; }
.cfg-error { margin-top: 8px; font: 400 14px/1.4 var(--fuente); color: var(--rojo); }   /* 7080 */
.cfg-ayuda-gris { margin-top: 12px; font: 400 14px/1.4 var(--fuente); color: var(--ink3); text-wrap: pretty; }   /* 1121 */
.cfg-ayuda-gris--pegada { margin-top: 0; line-height: 1.45; }    /* 1133 */
/* Cupo de mensualidades lleno: el dato deja de ser gris y se lee como aviso. */
.cfg-ayuda-gris--aviso { color: var(--amb-ink); font-weight: 700; background: var(--amb-suave); border-radius: 12px; padding: 10px 12px; }
.cfg-ayuda-gris--145 { line-height: 1.45; }                      /* 1155, 1159 */
.cfg-ayuda { margin-top: 8px; font: 400 14px/1.4 var(--fuente); color: var(--ink3); }  /* 7099, 7110, 7623 */
.cfg-ayuda--mal { color: var(--rojo); }
.cfg-bloque { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linea); }   /* 1123, 1136, 1143, 1179 */
.cfg-bloque--24 { margin-top: 24px; }                            /* 1213, 1232, 1239 */
.cfg-bloque__titulo { font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.cfg-bloque__texto { margin-top: 8px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); }
.cfg-monto { flex: 1; min-width: 0; min-height: 56px; border-radius: 16px; background: var(--suave); display: flex; align-items: center; justify-content: center; font: 700 22px/1.2 var(--fuente); color: var(--ink); }  /* 1152 */

/* WhatsApp y Datos del recibo: 1165-1248. */
.cfg-campo { margin-top: 20px; }                                 /* 1168 */
.cfg-area { margin-top: 12px; border-radius: 16px; border: 2px solid var(--borde-input); padding: 12px; }   /* 1176, 1202 */
.cfg-area__campo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  resize: vertical;
  font: 400 16px/1.4 var(--fuente);
  color: var(--ink);
  padding: 0;
}
.cfg-area__campo--145 { line-height: 1.45; }                     /* 1177 */
.cfg-guardar { margin-top: 24px; }                               /* 7113 */
.cfg-marco-qr { margin-top: 16px; border-radius: 18px; border: 1px solid var(--borde-sup); padding: 16px; }   /* 1216 */
.cfg-marco-qr__centro { display: flex; justify-content: center; }
.cfg-marco-qr__img { display: block; width: 100%; max-width: 280px; border-radius: 12px; background: #FFFFFF; }   /* 7732 */
.cfg-marco-qr__sin { padding: 24px 12px; text-align: center; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }
.cfg-enlace { margin-top: 12px; border-radius: 16px; background: var(--suave); padding: 12px; font: 400 14px/1.5 var(--mono); color: var(--ink); word-break: break-all; }   /* 1235 */
.cfg-copiar {                                                    /* 1236 */
  width: 100%;
  margin-top: 12px;
  min-height: 56px;
  border-radius: 16px;
  border: 2px solid var(--borde-input);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
}
.cfg-copiar:active { background: var(--press-ghost); }
.cfg-pendientes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cfg-pendientes__linea { font: 400 15px/1.4 var(--fuente); color: var(--ink3); }
.cfg-interruptores { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }   /* 1181 */

/* ---- Paso de custodia del registro: llave o cascos ------------------------
   Una sola pregunta por pantalla. El bloque se centra en el alto libre en vez
   de quedarse arriba con media pantalla vacía debajo, y el ícono es grande
   porque es lo que el cajero mira mientras habla con el cliente. */
.custodia {
  min-height: min(56vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.custodia__cab { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.custodia__ico { display: flex; }
.custodia__texto { font: 400 17px/1.4 var(--fuente); color: var(--ink2); text-align: center; text-wrap: balance; max-width: 28ch; }
.custodia__aviso {
  border-radius: 16px; background: var(--ambar); padding: 14px 18px;
  font: 700 18px/1.3 var(--fuente); color: var(--sobre-ambar); text-align: center; text-wrap: balance;
}
.custodia__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.custodia__opcion {
  min-height: 132px; box-sizing: border-box; width: 100%;
  border-radius: 20px; background: var(--sup); border: 1px solid var(--borde-sup);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 14px; cursor: pointer; text-align: center;
}
.custodia__opcion--activa { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.custodia__opcion-titulo { font: 700 20px/1.2 var(--fuente); color: var(--ink); }
.custodia__opcion-pie { font: 400 15px/1.35 var(--fuente); color: var(--ink2); text-wrap: balance; }
.custodia__contador { display: flex; align-items: center; justify-content: center; gap: 20px; }
.custodia__paso {
  flex: none; width: 64px; height: 64px; box-sizing: border-box;
  border-radius: 18px; border: 2px solid var(--borde-input); background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.custodia__paso:active { background: var(--press-ghost); }
.custodia__n { min-width: 88px; text-align: center; font: 700 52px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.custodia__pie { font: 400 16px/1.4 var(--fuente); color: var(--ink2); text-align: center; text-wrap: balance; }

/* ---- rapido: Registro de inventario (1268-1470) -------------------------- */
.rp-tarjeta { padding: 16px; }                                   /* 1275 */
.rp-tipo { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.rp-tipo__caja { flex: 1; min-width: 0; min-height: 72px; box-sizing: border-box; border-radius: 16px; background: var(--suave); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; }
.rp-tipo__nombre { font: 700 19px/1.2 var(--fuente); color: var(--ink); }
.rp-flecha {                                                     /* 7846, 7951 */
  flex: none;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 16px;
  border: 2px solid var(--borde-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 22px/1 var(--fuente);
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  padding: 0;
}
.rp-flecha:active { background: var(--press-ghost); }
.rp-flecha--24 { font-size: 24px; }                              /* 7957 */
/* La punta del chevrón va dibujada y centrada por el flex del botón: sin
   rotaciones, que era lo que descuadraba subir contra bajar. */
.rp-flecha__punta { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.rp-flecha__punta svg { display: block; }
.rp-modalidad { margin-top: 12px; display: flex; gap: 8px; }     /* 1287 */
.rp-modalidad .chip { flex: 1; min-width: 0; line-height: 1.2; }  /* 7959 */
.rp-hora { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-hora__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* La columna del meridiano no tiene flechas: se empuja hacia abajo lo que mide
   una flecha mas su espacio (56+8) para que el AM/PM quede a la altura del
   numero de las horas, no flotando en la mitad de la columna. */
.rp-hora__col--centro { justify-content: flex-start; padding-top: 64px; }
.rp-dato { min-width: 0; min-height: 32px; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 32px/1 var(--mono); color: var(--ink); }   /* 7958 */
.rp-meridiano {                                                  /* 7950 */
  min-width: 0;
  min-height: 56px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 16px;
  border: 2px solid var(--borde-input);
  background: var(--suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 var(--mono);
  color: var(--ink);
  cursor: pointer;
}
.rp-meridiano:active { background: var(--press-ghost); }
.rp-entro { margin-top: 12px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.rp-calendario { margin-top: 12px; border-radius: 18px; border: 1px solid var(--borde-sup); padding: 12px; }   /* 1319 */
.rp-calendario__titulo { flex: 1; min-width: 0; }
.rp-rejilla { margin-top: 12px; }
/* Prototipo 6396: 48 de alto; el ancho lo da la rejilla de siete. */
.rp-celda {
  min-height: 48px;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  background: transparent;
  border-radius: 12px;
  border: 2px solid transparent;
}
.rp-celda--hueco { cursor: default; border: 0; }
.rp-celda--hoy { background: var(--suave); border-color: var(--borde-input); }
.rp-celda--ini { background: var(--verde); border-radius: 12px 4px 4px 12px; }
.rp-celda--fin { background: var(--rojo); border-radius: 4px 12px 12px 4px; }
.rp-celda--rango { background: var(--suave); border-radius: 4px; }
.rp-celda__num { font: 700 16px/1 var(--fuente); color: var(--ink); }
.rp-celda--ini .rp-celda__num,
.rp-celda--fin .rp-celda__num { color: #FFFFFF; }
.rp-celda--rango .rp-celda__num { color: var(--marca-ink); }
.rp-fechas { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }   /* 1343 */
.rp-fechas .caja-fecha { margin-top: 0; }
.rp-fechas__puntos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; }
.rp-fechas__puntos span { width: 5px; height: 5px; border-radius: 3px; background: var(--ink3); }
.rp-codigo { margin-top: 8px; font: 700 32px/1.1 var(--mono); letter-spacing: .12em; color: var(--ink); }   /* 1368 */
.rp-cascos { margin-top: 12px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }   /* 1392 */
.rp-pie { margin-top: 12px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.rp-cliente { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); }   /* 1402 */
.rp-cliente__titulo { font: 700 18px/1.2 var(--fuente); color: var(--ink); }
.rp-cliente__ayuda { font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.rp-pendiente { margin-top: 16px; background: var(--sup); border: 2px solid var(--ambar); border-radius: 20px; padding: 16px; display: flex; align-items: center; gap: 12px; }   /* 1445 */
.rp-pendiente__textos { flex: 1; min-width: 0; }
.rp-pendiente__texto { margin-top: 8px; font: 400 16px/1.4 var(--fuente); color: var(--ink); }
.rp-pendiente__ir {                                              /* 1450 */
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--marca);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 var(--fuente);
  color: #FFFFFF;
  cursor: pointer;
}
.rp-pendiente__ir:active { background: var(--marca-osc); }
.rp-vacio { padding: 24px 16px; text-align: center; font: 400 16px/1.4 var(--fuente); color: var(--ink3); }   /* 1455 */
.rp-lista { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rp-fila {                                                       /* 1460 */
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.rp-fila:active { background: var(--press-row); }
.rp-fila__placa { flex: 1; min-width: 0; font: 700 20px/1 var(--mono); letter-spacing: .10em; color: var(--ink); }
.rp-fila__punto { flex: none; width: 10px; height: 10px; border-radius: 5px; background: var(--ambar); }
.rp-fila__flecha { flex: none; font: 700 22px/1 var(--fuente); color: var(--ink3); }

/* ---- plan: Su plan Don Parqueo (1813-1876) ------------------------------- */
.plan__qr { margin-top: 20px; }
.qr--plan { max-width: 280px; }                                  /* 8163 */
.plan__ayuda { margin-top: 12px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.plan__botones { margin-top: 16px; }
.plan__sin-qr { margin-top: 20px; padding: 24px 12px; text-align: center; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }
.plan__sin-cobro { margin-top: 20px; font: 400 16px/1.45 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.plan__subir { margin-top: 20px; }                               /* 8138 */
.plan__bloque { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.plan__novedad { margin-top: 8px; font: 400 16px/1.45 var(--fuente); color: var(--ink); text-wrap: pretty; }
.plan__lista { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.plan-item { border-radius: 18px; padding: 16px; box-sizing: border-box; border: 1px solid var(--borde-sup); background: transparent; }   /* 8171 */
.plan-item--suyo { border: 2px solid var(--marca); background: var(--suave); }
.plan__marca { margin-top: 6px; font: 700 13px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-ink); }

/* ---- menNueva y menRenovar (2819-3045) ---------------------------------- */
.men-tipo {                                                      /* 7601 */
  min-height: 140px;
  box-sizing: border-box;
  border-radius: 20px;
  background: var(--sup);
  border: 2px solid var(--borde-sup);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  cursor: pointer;
}
.men-tipo:active { background: var(--press-row); }
.men-tipo[aria-pressed="true"] { border-color: var(--marca); }
.men-tipo--sin { opacity: .45; cursor: default; }
.men-tipo__nombre { font: 700 17px/1.2 var(--fuente); color: var(--ink); text-align: center; }
.men-tipo__nota { font: 400 13px/1.25 var(--fuente); color: var(--ink2); text-align: center; }
.men-tipo--sin .men-tipo__nota { color: var(--ink3); }
.men-vigente { margin-top: 16px; background: var(--verde); border-radius: 16px; padding: 16px; }   /* 2849 */
.men-vigente__texto { font: 700 16px/1.35 var(--fuente); color: #FFFFFF; }
.men-vigente__boton {                                            /* 2851 */
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--fuente);
  color: var(--verde);
  cursor: pointer;
}
.men-vigente__boton:active { background: var(--press-ghost); }
.men-cascos { padding: 24px 16px; }                              /* 2888 */
.caja-pago--men {                                                /* 6574, cajaPago */
  margin-top: 20px;
  min-height: 76px;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 12px 16px;
  justify-content: center;
  gap: 4px;
}
.men-pago__texto { margin-top: 20px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }   /* 2955 */
.men-pago__qr { margin-top: 20px; display: flex; justify-content: center; }
.men-pago__qr-img { display: block; width: 100%; max-width: 280px; border-radius: 16px; background: var(--suave); }   /* 5697 */
.men-pago__sin-qr { margin-top: 20px; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }
.ren-titular { margin-top: 8px; font: 400 16px/1.4 var(--fuente); color: var(--ink2); }   /* 2982 */
.ren-estado { margin-top: 8px; font: 700 20px/1.3 var(--fuente); }                        /* 7653 */
.ren-estado--mal { color: var(--rojo); }
.ren-estado--amb { color: var(--ambar); }
.ren-estado--ok { color: var(--verde); }

/* ---- entregaAdmin: Entregar al turno (3047-3074) ------------------------- */
.entrega-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.entrega-fila { min-height: 64px; box-sizing: border-box; border-radius: 16px; background: var(--suave); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.entrega-fila__textos { flex: 1; min-width: 0; }
.entrega-fila__titulo { font: 700 17px/1.2 var(--fuente); color: var(--ink); }
.entrega-fila__detalle { margin-top: 4px; font: 400 14px/1.35 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.entrega-fila__valor { flex: none; font: 700 17px/1 var(--fuente); color: var(--ink); }
.entrega-vacia { margin-top: 12px; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }
.entrega-suma { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.entrega-suma__rotulo { font: 400 16px/1.3 var(--fuente); color: var(--ink); }
.entrega-suma__valor { font: 700 22px/1 var(--fuente); color: var(--ink); }
.entrega-aviso { margin-top: 20px; border-radius: 16px; background: var(--ambar); padding: 16px; font: 700 15px/1.4 var(--fuente); color: var(--sobre-ambar); text-wrap: pretty; }

/* Fase 3 · la casilla "Recordar en este celular" del prototipo (estCasilla,
   6989) no lleva box-sizing: mide 28 de contenido + 2 de borde por lado = 32. */
.casilla--login { box-sizing: content-box; }

/* --------------------------------------------------------------------------
   Demo: cambiar de panel (barra de arriba) y su globo de instrucciones
   -------------------------------------------------------------------------- */
.demo-cambio { position: relative; flex: none; display: inline-flex; }
.demo-cambio__boton { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--tit-banda); }
.demo-cambio__pildora {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: 999px; box-sizing: border-box;
  background: var(--glass-hd); border: 1px solid var(--borde-glass-2);
  font: 700 13px/1 var(--fuente); white-space: nowrap;
}
.demo-cambio__boton:active .demo-cambio__pildora { opacity: .8; }
.demo-cambio__texto { display: inline-block; max-width: 220px; overflow: hidden; white-space: nowrap; }
/* Recogido: solo el ícono, fuera del grupo centrado para que el nombre quede al centro. */
.demo-cambio--compacto { position: absolute; top: 0; bottom: 0; right: 8px; align-items: center; }
.demo-cambio--compacto.demo-cambio--con-salir { right: 60px; }
.demo-cambio--compacto .demo-cambio__pildora { gap: 0; padding: 0 8px; min-width: 34px; justify-content: center; }
.demo-cambio--compacto .demo-cambio__texto { max-width: 0; opacity: 0; }
.demo-globo {
  position: absolute; z-index: 40; top: calc(100% + 4px); right: -4px;
  width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 16px; border-radius: 18px;
  background: var(--sup); border: 2px solid var(--marca); color: var(--ink);
  text-align: left; animation: psfade .18s ease-out;
}
.demo-globo::before {
  content: ""; position: absolute; top: -7px; right: 36px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--sup); border-left: 2px solid var(--marca); border-top: 2px solid var(--marca);
}
.demo-globo__titulo { font: 700 17px/1.25 var(--fuente); color: var(--ink); }
.demo-globo__texto { margin-top: 8px; font: 400 15px/1.45 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.demo-globo__ok { margin-top: 16px; width: 100%; }

/* Guía del demo: capa que oscurece todo menos lo resaltado, y el globo del paso.
   El oscuro es la sombra enorme del foco, así el hueco sigue la forma de lo que
   se explica. La capa ataja los toques: mientras dura la guía solo se usa el globo. */
.guia { position: absolute; inset: 0; z-index: 9; }
.guia__foco {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 200vmax rgba(4, 8, 16, .64);
  outline: 2px solid rgba(255, 255, 255, .92);
  outline-offset: 0;
  pointer-events: none;
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
}
.guia__globo {
  position: absolute;
  width: min(340px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  color: var(--ink);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .6);
  animation: psfade .2s ease-out;
}
.guia--buscando .guia__globo, .guia--buscando .guia__foco { visibility: hidden; }
.guia__flecha {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--sup);
  transform: rotate(45deg);
}
.guia__flecha--arriba { top: -7px; border-left: 1px solid var(--borde-sup); border-top: 1px solid var(--borde-sup); }
.guia__flecha--abajo  { bottom: -7px; border-right: 1px solid var(--borde-sup); border-bottom: 1px solid var(--borde-sup); }
.guia__flecha--izq    { left: -7px; border-left: 1px solid var(--borde-sup); border-bottom: 1px solid var(--borde-sup); }
.guia__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guia__paso { font: 700 12px/1 var(--fuente); letter-spacing: .10em; text-transform: uppercase; color: var(--ink3); }
.guia__saltar {
  min-height: 40px; min-width: 0; margin-right: -6px; padding: 0 6px;
  font: 600 14px/1 var(--fuente); color: var(--ink2); background: none; border: 0; cursor: pointer;
}
.guia__titulo { margin-top: 2px; font: 700 19px/1.25 var(--fuente); color: var(--ink); }
.guia__texto { margin-top: 6px; font: 400 15px/1.45 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.guia__acciones { margin-top: 16px; display: flex; gap: 10px; }
.guia__acciones .boton { height: 48px; font-size: 16px; }
.guia__atras { flex: none; width: auto; padding: 0 18px; }
.guia__sig { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .guia__foco { transition: none; }
}
@media (min-width: 1000px) {
  .demo-cambio--compacto { right: 20px; }
  .demo-cambio--compacto.demo-cambio--con-salir { right: 60px; }
  .demo-cambio__boton { color: #fff; }
  .demo-cambio__pildora { background: var(--marca); border-color: var(--marca); }
}

/* --------------------------------------------------------------------------
   menEntrada: torta de cupos, recuadro de la placa e historial
   -------------------------------------------------------------------------- */
.men-cupos__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.men-cupos__pct { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--suave); font: 700 13px/1.2 var(--fuente); color: var(--ink2); font-variant-numeric: tabular-nums; }
.men-cupos__cuerpo { margin-top: 16px; display: flex; align-items: center; gap: 24px; }
.men-cupos__grafica { position: relative; flex: none; width: 136px; height: 136px; }
.men-cupos__anillo { width: 136px; height: 136px; }
.men-cupos__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.men-cupos__grande { font: 700 38px/1 var(--fuente); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.men-cupos__centro-rot { margin-top: 4px; font: 700 10px/1 var(--fuente); letter-spacing: .03em; text-transform: uppercase; color: var(--ink2); }
.men-cupos__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.men-cupos__dato { display: flex; align-items: stretch; gap: 10px; }
.men-cupos__barra { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.men-cupos__dato { align-items: center; }
.men-cupos__dato-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.men-cupos__dato-n { font: 700 20px/1.1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.men-cupos__dato-rot { font: 400 14px/1.2 var(--fuente); color: var(--ink2); white-space: nowrap; }
.men-cupos__sin { margin-top: 12px; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }

/* Recuadro de la placa. Marco en degradado: verde claro si es un mensual
   registrado, rojo si no. El borde es fijo de 2px para que no salte nada. */
.men-placa { border: 2px solid var(--borde-sup); }
.men-placa--ok {
  border-color: transparent;
  background: linear-gradient(var(--sup), var(--sup)) padding-box,
              linear-gradient(135deg, #4ADE80 0%, rgba(74, 222, 128, .55) 50%, rgba(74, 222, 128, .15) 100%) border-box;
}
.men-placa--mal {
  border-color: transparent;
  background: linear-gradient(var(--sup), var(--sup)) padding-box,
              linear-gradient(135deg, #EF4444 0%, rgba(239, 68, 68, .55) 50%, rgba(239, 68, 68, .15) 100%) border-box;
}
.men-placa__cab { display: flex; align-items: center; justify-content: center; }
.men-placa__linea { margin-top: 8px; }
.men-placa__campo { text-align: center; text-indent: var(--letra-placa-campo); }
/* Selector de forma de escribir: tres íconos quietos; solo el elegido se tiñe. */
.men-modo { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 14px; background: var(--suave); }
.men-modo__boton {
  min-width: 58px; min-height: 48px; border-radius: 12px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink3); background: transparent; transition: background .15s ease, color .15s ease;
}
.men-modo__boton[aria-pressed=true] { background: var(--sup); color: var(--marca-ink); }
.men-placa__acciones:empty { display: none; }
.men-placa__acciones { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; animation: psfade .18s ease-out; }
.men-placa__datos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; }
.men-placa__titular { font: 700 16px/1.3 var(--fuente); color: var(--ink); }
.men-placa__vence { font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.men-placa__estado { padding: 2px 8px; border-radius: 999px; background: var(--amb-suave); color: var(--amb-ink); font: 700 12px/1.3 var(--fuente); }
.men-placa__aviso { font: 400 14px/1.4 var(--fuente); color: var(--ink2); text-align: center; text-wrap: pretty; }
.men-placa__no { min-height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--mal-suave); color: var(--rojo); font: 700 17px/1.2 var(--fuente); }
.men-placa__boton { width: 100%; }
.men-marcar { display: flex; gap: 12px; }
.men-marcar__boton { flex: 1; min-width: 0; min-height: 56px; border-radius: 16px; font: 700 17px/1.15 var(--fuente); border: 0; }
.men-marcar__boton--ingreso { background: var(--marca); color: var(--sobre-marca); }
.men-marcar__boton--salida { background: #D92D2D; color: #fff; }
.men-marcar__boton[disabled] { background: var(--suave); color: var(--ink3); cursor: default; }
.men-marcar__boton.boton--cargando { opacity: .7; }

/* Historial: ingresos en rojo, salidas en verde claro, en degradado. Sin
   nombre: placa y hora, con la hora centrada en una columna de ancho fijo. */
.men-hist__cols { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.men-hist__col { min-width: 0; }
.men-hist__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 12px; font: 700 14px/1.2 var(--fuente); color: #fff; }
/* Cabeceras en color fijo; el degradado queda solo en las filas. */
.men-hist__col--ingreso .men-hist__cab { background: #DC2626; color: #fff; }
.men-hist__col--salida .men-hist__cab { background: #22C55E; color: #052E16; }
.men-hist__total { font-variant-numeric: tabular-nums; }
.men-hist__lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.men-hist__fila {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 10px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 8px; text-align: left;
  padding-top: 6px; padding-bottom: 6px;
}
.men-hist__col--ingreso .men-hist__fila { background: linear-gradient(90deg, rgba(239, 68, 68, .24) 0%, rgba(239, 68, 68, .05) 100%); }
.men-hist__col--salida .men-hist__fila { background: linear-gradient(90deg, rgba(74, 222, 128, .28) 0%, rgba(74, 222, 128, .05) 100%); }
.men-hist__fila:active { filter: brightness(.95); }
.men-hist__placa { font: 700 14px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.men-hist__ico { display: flex; align-items: center; justify-content: center; }
.men-hist__txt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.men-hist__hora { font: 400 13px/1.3 var(--fuente); color: var(--ink2); white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.men-hist__vacio { margin-top: 12px; font: 400 14px/1.4 var(--fuente); color: var(--ink3); text-align: center; }
@media (max-width: 380px) {
  .men-hist__fila { grid-template-columns: 28px minmax(0, 1fr); column-gap: 6px; padding: 6px 8px; }
}

/* --------------------------------------------------------------------------
   Crear mi parqueadero (wizard): cabeza con volver al inicio, progreso en
   cuatro tramos y el resumen del paso 4.
   -------------------------------------------------------------------------- */
.wiz-cabeza { padding: 4px 4px 18px; }
.wiz-cabeza__paso { margin-top: 4px; font: 700 12px/1 var(--fuente); letter-spacing: .10em; color: var(--sub-banda); text-transform: uppercase; }
.wiz-cabeza__titulo { margin-top: 8px; font: 700 26px/1.15 var(--fuente); color: var(--tit-banda); }
.wiz-progreso { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wiz-progreso__tramo { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.wiz-progreso__tramo--hecho { background: var(--marca); }
.wiz-cabeza__sub { margin-top: 6px; font: 400 15px/1.4 var(--fuente); color: var(--sub-banda); }

/* El plan de la prueba: tres tarjetas en fila, la elegida en azul lleno. */
.wiz-plan-caja { padding: 18px 16px; margin-bottom: 12px; }
.wiz-planes { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wiz-plan {
  position: relative; min-width: 0; padding: 16px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 18px; border: 1.5px solid var(--borde-input); background: var(--sup);
  color: var(--ink); cursor: pointer; text-align: center;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wiz-plan:active { transform: scale(.97); }
.wiz-plan__marca {
  width: 22px; height: 22px; border-radius: 50%; margin-bottom: 4px;
  border: 2px solid var(--borde-input); background: var(--sup);
  display: flex; align-items: center; justify-content: center;
}
.wiz-plan__nombre { font: 800 15px/1.1 var(--fuente); }
.wiz-plan__valor { font: 800 14px/1.1 var(--fuente); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wiz-plan__mes { font: 500 11px/1 var(--fuente); color: var(--ink3); }
.wiz-plan__sello {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  font: 800 8px/1 var(--fuente); letter-spacing: .04em; text-transform: uppercase;
  background: var(--ambar); color: var(--sobre-ambar);
}
.wiz-plan--activo {
  border-color: transparent; color: #FFFFFF;
  background: linear-gradient(160deg, #3597E3 0%, #0063B1 100%);
  box-shadow: 0 14px 26px -16px rgba(0, 99, 177, .95);
}
.wiz-plan--pro.wiz-plan--activo { background: linear-gradient(160deg, #004F8E 0%, #002A4D 100%); }
.wiz-plan--activo .wiz-plan__mes { color: rgba(255, 255, 255, .75); }
.wiz-plan--activo .wiz-plan__marca { border-color: #FFFFFF; background: #FFFFFF; }
.wiz-plan--activo .wiz-plan__marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #0063B1; }
.wiz-plan-ayuda { margin-top: 12px; font: 400 14px/1.45 var(--fuente); color: var(--ink2); text-wrap: pretty; }

.boton.wiz-empezar { background: var(--verde); }
.boton.wiz-empezar:active { filter: brightness(.92); }

.wiz-listo { display: flex; flex-direction: column; gap: 12px; }
.wiz-bloque {
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  border-radius: 20px;
  padding: 18px 16px;
  min-width: 0;
}
.wiz-bloque--ok { background: color-mix(in srgb, var(--verde) 7%, var(--sup)); border-color: color-mix(in srgb, var(--verde) 30%, transparent); }
.wiz-ok { display: flex; align-items: center; gap: 10px; }
.wiz-ok__marca {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde);
}
.wiz-ok__marca::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 6px;
  height: 12px;
  border: solid #FFFFFF;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.wiz-ok__texto { font: 700 14px/1.3 var(--fuente); color: var(--verde); }
[data-tema="oscuro"] .wiz-ok__texto { color: #6FD694; }
.wiz-nombre { margin-top: 14px; font: 700 22px/1.25 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.wiz-dir { margin-top: 4px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); overflow-wrap: anywhere; }
.wiz-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip { border-radius: 999px; padding: 8px 12px; background: var(--suave); font: 700 14px/1 var(--fuente); color: var(--ink); white-space: nowrap; }

.wiz-tarifas { margin-top: 8px; display: flex; flex-direction: column; }
.wiz-tarifa {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}
.wiz-tarifa:last-child { border-bottom: 0; padding-bottom: 0; }
.wiz-tarifa__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--suave); display: flex; align-items: center; justify-content: center; }
.wiz-tarifa__nombre { font: 700 16px/1.25 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.wiz-tarifa__valores { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.wiz-tarifa__hora { font: 700 18px/1.1 var(--fuente); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wiz-tarifa__hora small { font: 400 13px/1 var(--fuente); color: var(--ink2); }
.wiz-tarifa__dia { font: 400 14px/1.2 var(--fuente); color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.wiz-bloque--apunte { background: var(--amb-suave); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
.wiz-apunte__titulo { font: 700 16px/1.3 var(--fuente); color: var(--ink); }
.wiz-datos { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.wiz-dato { min-width: 0; border-radius: 14px; background: var(--sup); padding: 12px; }
.wiz-dato__rotulo { font: 700 11px/1 var(--fuente); letter-spacing: .08em; color: var(--ink2); text-transform: uppercase; }
.wiz-dato__valor { margin-top: 8px; font: 700 19px/1.15 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.wiz-apunte__pie { margin-top: 12px; font: 400 14px/1.4 var(--fuente); color: var(--ink2); }

/* Paso 2 del registro: la nota de que la clave la entrega Don Parqueo, la
   casilla de tratamiento de datos y la clave de un solo uso al terminar. */
.wiz-clave-nota {
  margin-top: 24px; padding: 14px 16px; border-radius: 16px;
  background: var(--acento-suave); color: var(--ink);
  font: 400 15px/1.45 var(--fuente); text-wrap: pretty;
}
.wiz-datos-ley { margin-top: 20px; }
.wiz-check {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.wiz-check__caja {
  flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde-input); background: transparent;
  color: #FFFFFF; font: 700 16px/1 var(--fuente);
}
.wiz-check--si .wiz-check__caja { background: var(--marca); border-color: var(--marca); }
.wiz-check__txt { flex: 1; min-width: 0; font: 400 15px/1.45 var(--fuente); color: var(--ink); text-wrap: pretty; }
.wiz-check__txt .enlace-texto { font: inherit; }
.wiz-clave {
  margin: 20px 0 4px; padding: 18px 16px; border-radius: 18px;
  background: var(--suave); text-align: center;
}
.wiz-clave__rotulo {
  font: 700 12px/1 var(--fuente); letter-spacing: .10em;
  text-transform: uppercase; color: var(--ink2);
}
.wiz-clave__valor {
  margin-top: 10px; font: 700 34px/1 var(--mono); letter-spacing: .14em; color: var(--ink);
}

/* --------------------------------------------------------------------------
   Panel del equipo: registros que llegan solos desde la app y novedades de
   soporte. Lo nuevo se distingue por fondo, no por una raya de color.
   -------------------------------------------------------------------------- */
.sa-registros {
  margin-bottom: 12px; padding: 16px; border-radius: 20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(53, 151, 227, .20), transparent 60%),
    var(--sup);
  border: 1px solid var(--borde-sup);
}
.sa-registros__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sa-registros__titulo { margin-top: 6px; font: 800 20px/1.2 var(--fuente); color: var(--ink); }
.sa-registros__visto { flex: none; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--marca-borde); background: transparent; color: var(--marca-ink); font: 700 13px/1 var(--fuente); cursor: pointer; }
.sa-registro {
  width: 100%; margin-top: 8px; padding: 12px; border-radius: 16px; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; background: var(--suave); color: var(--ink);
}
.sa-registro--nuevo { background: var(--acento-suave); }
.sa-registro__ini { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--marca); color: var(--sobre-marca); font: 800 18px/1 var(--fuente); }
.sa-registro__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-registro__nombre { font: 700 16px/1.25 var(--fuente); overflow-wrap: anywhere; }
.sa-registro__dato { font: 400 13px/1.3 var(--fuente); color: var(--ink2); }
.sa-registro__lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sa-registro__nuevo { padding: 4px 8px; border-radius: 999px; background: var(--verde); color: var(--sobre-verde); font: 800 10px/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase; }
.sa-registro__fecha { font: 700 13px/1 var(--fuente); color: var(--ink2); }
.sa-novedad { padding: 12px; border-radius: 14px; background: var(--amb-suave); }
.sa-novedad--hecha { background: var(--suave); opacity: .75; }
.sa-novedad__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-novedad__rad { font: 700 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink); }
.sa-novedad__tipo { padding: 4px 8px; border-radius: 999px; background: var(--sup); font: 700 12px/1 var(--fuente); color: var(--ink2); }
.sa-novedad__txt { margin-top: 8px; font: 400 15px/1.4 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.sa-novedad__quien { margin-top: 6px; font: 400 13px/1.3 var(--fuente); color: var(--ink2); }
.sa-novedad__ok { margin-top: 10px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--verde); color: var(--sobre-verde); font: 700 14px/1 var(--fuente); cursor: pointer; }

/* --------------------------------------------------------------------------
   Perfil de placa, como app: cabecera con la placa, casillas de tiempo,
   tarjeta del cliente para LEER (con llamar y WhatsApp a mano) y pestañas
   para notas, visitas y pagos.
   -------------------------------------------------------------------------- */
.pf-hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 16px;
  margin-bottom: 12px;
  border-radius: var(--r-tarjeta);
  background: var(--sup);
  border: 1px solid var(--borde-sup);
  text-align: center;
}
.pf-hero__volver {
  position: absolute; left: 8px; top: 8px;
  width: 48px; height: 48px; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; padding: 0;
  background: transparent; color: var(--ink); cursor: pointer;
}
.pf-hero__volver:active { background: var(--press-ghost); }
.pf-hero__ico {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave);
}
/* La placa se dibuja como placa: marco grueso, letra de placa. */
.pf-placa {
  margin-top: 12px;
  padding: 8px 18px 7px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font: 700 32px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sup);
}
.pf-hero__linea { margin-top: 10px; font: 400 16px/1.35 var(--fuente); color: var(--ink2); }
.pf-hero__chips { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; box-sizing: border-box;
  border-radius: var(--r-pastilla);
  font: 700 13px/1 var(--fuente);
  background: var(--suave); color: var(--ink2);
}
.pf-chip__punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pf-chip--ok { background: var(--ok-suave); color: var(--verde); }
.pf-chip--amb { background: var(--amb-suave); color: var(--amb-ink); }
.pf-chip--amb .pf-chip__punto { background: var(--ambar); }
.pf-chip--marca { background: var(--acento-suave); color: var(--marca-ink); }
[data-tema="oscuro"] .pf-chip--ok { color: #2FD06B; }
[data-tema="oscuro"] .pf-chip--amb { color: var(--ambar); }

.pf-tiles { display: flex; gap: 12px; margin-bottom: 12px; }
.pf-tile {
  flex: 1; min-width: 0; box-sizing: border-box; min-height: 96px;
  padding: 16px; border-radius: var(--r-tarjeta);
  background: var(--sup); border: 1px solid var(--borde-sup);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.pf-tile__valor { font: 700 20px/1.15 var(--fuente); color: var(--ink); }
.pf-tile__sub { font: 400 14px/1.3 var(--fuente); color: var(--ink2); }

.pf-card {
  margin-bottom: 12px; padding: 18px 16px;
  border-radius: var(--r-tarjeta);
  background: var(--sup); border: 1px solid var(--borde-sup);
}
.pf-card__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.pf-card__titulo { font: 700 18px/1.2 var(--fuente); color: var(--ink); }
.pf-card__nota { margin-top: 6px; font: 400 15px/1.4 var(--fuente); color: var(--ink2); }
.pf-card__nota--falta { color: var(--rojo); font-weight: 700; }
.pf-enlace {
  min-height: 40px; min-width: 0; padding: 0 12px;
  border: 0; border-radius: 12px; background: var(--acento-suave);
  font: 700 15px/1 var(--fuente); color: var(--marca-ink); cursor: pointer;
}
.pf-cliente { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; }
.pf-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--sobre-marca);
  font: 700 19px/1 var(--fuente);
}
.pf-cliente__txt { min-width: 0; }
.pf-cliente__nombre { font: 700 20px/1.2 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.pf-cliente__sub { margin-top: 4px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }

.pf-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 10px 0; box-sizing: border-box;
  border-top: 1px solid var(--linea);
}
.pf-fila__txt { min-width: 0; }
.pf-fila__rot { font: 700 12px/1.2 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.pf-fila__valor { margin-top: 5px; font: 700 17px/1.3 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.pf-fila__valor--num { font-variant-numeric: tabular-nums; }
.pf-fila__acciones { flex: none; display: flex; gap: 8px; }
.pf-accion {
  width: 48px; height: 48px; min-width: 0; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--acento-suave); color: var(--marca-ink);
  cursor: pointer; text-decoration: none;
}
.pf-accion--wa { background: var(--ok-suave); color: var(--verde); }
[data-tema="oscuro"] .pf-accion--wa { color: #2FD06B; }
.pf-accion:active { filter: brightness(.94); }

/* Los datos de la mensualidad van en UNA fila de cajas idénticas: mismo ancho
   (tres columnas iguales) y mismo alto (se estiran a la más alta, que es la
   que trae la fecha en dos renglones). En dos filas de a dos, cada fila medía
   distinto y las cuatro cajas se veían desparejas. */
.pf-kpis { margin: 14px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.pf-kpi {
  padding: 12px 10px; border-radius: 14px; background: var(--suave); min-width: 0;
  display: flex; flex-direction: column;
}
.pf-kpi__rot { font: 700 11px/1.2 var(--fuente); letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); text-wrap: balance; }
.pf-kpi__valor {
  margin-top: 6px;
  font: 700 clamp(13px, 3.6vw, 16px)/1.25 var(--fuente);
  color: var(--ink); overflow-wrap: anywhere; text-wrap: balance;
}

.pf-plegable {
  margin-top: 16px; width: 100%; min-height: 48px; padding: 0 4px;
  display: flex; align-items: center; justify-content: space-between;
  border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: none;
  font: 700 15px/1 var(--fuente); color: var(--ink2); cursor: pointer;
}
.pf-plegable svg { transition: transform .2s ease; }
.pf-plegable[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Pestañas: la activa se llena, sin raya debajo. */
.pf-tabs {
  margin-top: 8px; display: flex; gap: 4px; padding: 4px;
  border-radius: 16px; background: var(--sup); border: 1px solid var(--borde-sup);
}
.pf-tab {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; background: transparent;
  font: 700 15px/1 var(--fuente); color: var(--ink2); cursor: pointer;
}
.pf-tab[aria-selected="true"] { background: var(--marca); color: var(--sobre-marca); }
.pf-tab__n {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; font: 700 12px/1 var(--fuente);
  background: var(--suave); color: var(--ink2);
}
.pf-tab[aria-selected="true"] .pf-tab__n { background: rgba(255, 255, 255, .24); color: var(--sobre-marca); }

/* --------------------------------------------------------------------------
   Planes (2026-09-19). Los tres planes NO son tres colores distintos: son un
   solo azul que se va cargando. Básico gris —lo que trae la app y ya—,
   Estándar el azul de la señal, Pro el azul profundo. Una escalera se lee de
   un vistazo como "más" y "menos"; verde/azul/magenta se leía como tres
   productos sin relación entre sí, y el ojo no sabía cuál era el de arriba.
   Lo único que rompe la escalera a propósito es el sello "El más elegido",
   en naranja: es el único sitio de la pantalla que tiene que gritar.
   -------------------------------------------------------------------------- */
:root {
  --p-basico: #697077; --p-basico-osc: #4D5358; --p-basico-ink: #4D5358; --p-basico-suave: #F2F4F8;
  --p-estandar: #0063B1; --p-estandar-osc: #004F8E; --p-estandar-ink: #005CA5; --p-estandar-suave: #E5F1FB;
  --p-pro: #004F8E; --p-pro-osc: #002A4D; --p-pro-ink: #003E70; --p-pro-suave: #D6E6F5;
  --p-sello: #D83F00;
}
[data-tema="oscuro"] {
  --p-basico-ink: #A2A9B0; --p-basico-suave: rgba(105, 112, 119, .20);
  --p-estandar-ink: #4AA3EC; --p-estandar-suave: rgba(53, 151, 227, .16);
  --p-pro-ink: #99CBEF; --p-pro-suave: rgba(0, 99, 177, .28);
}
.precio, .plan-lado {
  --plan-basico: var(--p-basico-ink); --plan-estandar: var(--p-estandar-ink); --plan-oro: var(--p-pro-ink);
}

/* Cabeza de los planes: señal de parqueadero, nombre grande y periodos. */
.planes-cab { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 26px; }
.planes-cab__fila { display: flex; align-items: center; gap: 12px; }
.planes-cab__senal {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca); color: #FFFFFF;
  box-shadow: inset 0 0 0 3px var(--marca), inset 0 0 0 5px #FFFFFF;
  font: 800 28px/1 var(--fuente);
  transform: rotate(-6deg);
}
.planes-cab__titulo { font: 800 40px/1 var(--fuente); letter-spacing: -.04em; color: var(--ink); }
.planes-cab__sub { margin-top: 12px; font: 500 15px/1.35 var(--fuente); color: var(--ink2); text-wrap: balance; }
.planes-cab__sub-1, .planes-cab__sub-2 { display: block; }
.planes-cab__sub-1 { font-weight: 700; color: var(--ink); }
.comp__plan-nombre { font-size: 10px; letter-spacing: .02em; }
@media (min-width: 1000px) { .comp__plan-nombre { font-size: 13px; letter-spacing: .06em; } }
/* El "hasta 20 % menos" es un sello, no un botón: color lleno y de lado a
   lado, debajo de los tres periodos. El fondo translúcido lo hacía ver como
   algo que se podía tocar y en oscuro se veía a través de la tarjeta. */
.planes-cab__chip {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--verde); color: var(--sobre-verde);
  font: 700 13px/1.35 var(--fuente);
}
.plan-lado__chip { display: block; width: 100%; box-sizing: border-box; margin-top: 12px; text-align: left; text-wrap: balance; }
@media (min-width: 1000px) {
  .planes-cab__titulo { font-size: 52px; }
  .planes-cab__senal { width: 56px; height: 56px; font-size: 34px; }
}

/* La tabla con los colores de cada plan. */
.comp__plan-sello, .demo-plan__sello, .wiz-plan__sello { background: var(--p-sello); color: #FFFFFF; }
.comp__fila > .comp__plan--basico { color: #FFFFFF; background: linear-gradient(160deg, var(--p-basico) 0%, var(--p-basico-osc) 100%); }
.comp__fila > .comp__plan--estandar { color: #FFFFFF; background: linear-gradient(160deg, var(--p-estandar) 0%, var(--p-estandar-osc) 100%); }
.comp__fila > .comp__plan--pro { color: #FFFFFF; background: linear-gradient(160deg, var(--p-pro) 0%, var(--p-pro-osc) 100%); }
.comp__celda--basico { background: var(--p-basico-suave); }
.comp__celda--estandar, [data-tema="oscuro"] .comp__celda--estandar { background: var(--p-estandar-suave); }
.comp__celda--pro, [data-tema="oscuro"] .comp__celda--pro { background: var(--p-pro-suave); }
.comp__celda--basico .comp__si { background: var(--p-basico); }
.comp__celda--estandar .comp__si { background: var(--p-estandar); }
.comp__celda--pro .comp__si, [data-tema="oscuro"] .comp__celda--pro .comp__si { background: var(--p-pro); }
.comp__celda--basico .comp__texto { color: var(--p-basico-ink); }
.comp__celda--pro .comp__texto { color: var(--p-pro-ink); }
.comp__fila > .comp__funcion:not(.comp__funcion--cab) { flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; }
.comp__nota { display: block; font: 500 11px/1.3 var(--fuente); color: var(--ink3); }
.plan-lado__item .comp__nota { margin-top: 2px; font-size: 12px; }
/* "Operadores además del dueño  Sin límite": la cifra va en su pastilla, del
   color del plan, en vez de colgarse del texto con dos puntos. */
.plan-lado__item-valor {
  margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--p-activo) 14%, transparent);
  color: var(--p-activo); font: 700 12px/1.5 var(--fuente);
  white-space: nowrap; vertical-align: 1px;
}
.comp__probar { background: var(--suave); }

/* Panel del plan: el precio cambia con el periodo elegido. */
/* --sobre-p: la tinta que se lee encima del color del plan (la tarjeta del
   periodo elegido). En claro el color es oscuro y la letra va blanca; en
   oscuro el color es claro y la letra va oscura. */
.plan-lado { --sobre-p: #FFFFFF; }
[data-tema="oscuro"] .plan-lado { --sobre-p: #16191F; }
.plan-lado--basico { --p-activo: var(--p-basico-ink); }
.plan-lado--estandar { --p-activo: var(--p-estandar-ink); }
.plan-lado--pro { --p-activo: var(--p-pro-ink); }
/* El demo del panel toma el color del plan; la forma sale de la regla que
   comparte con el botón del carrusel (--demo-tinta). */
.plan-lado .plan-lado__demo { --demo-tinta: var(--p-activo); margin-top: 0; }
.plan-lado__crear { margin-top: 18px; }
/* Las dos salidas del plan: crear (que es la compra) y ver el demo. Sin línea
   de pie: lo que había que explicar lo cuentan los cuatro pasos de El pago. */
.plan-salidas { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.plan-salida__boton { width: 100%; margin-top: 0; }
/* Los cuatro pasos de cómo se paga, dentro del panel del plan: más juntos que
   en una ventana, porque aquí son una nota al pie del botón, no el tema. */
.como-pasos--lado { margin-top: 10px; gap: 10px; }
.como-pasos--lado .como-paso__texto { font-size: 13px; }
/* La pregunta va dentro del botón, no encima: es larga para un botón, así que
   baja un punto de tamaño y se le deja respirar a los lados. */
.plan-lado__wa { margin-top: 26px; font-size: 15px; padding: 0 16px; text-align: center; text-wrap: balance; }

/* El resumen del cobro: el precio primero, grande, y debajo lo que se hace. */
.pagar-resumen {
  margin: 4px 0 18px; padding: 16px; border-radius: 18px;
  background: var(--suave); text-align: center;
}
.pagar-resumen__plan { font: 700 13px/1.2 var(--fuente); letter-spacing: .04em; color: var(--ink2); text-transform: uppercase; }
.pagar-resumen__valor { margin-top: 8px; font: 800 34px/1 var(--fuente); letter-spacing: -.02em; color: var(--ink); }
.pagar-resumen__ahorro { margin-top: 6px; font: 700 14px/1.2 var(--fuente); color: var(--verde); }

/* Ventana del cobro al entrar: bajo el QR, la llave en los diez dígitos que
   piden Nequi y Bre-B, para copiar y pegar sin teclear. Va en cifra ancha,
   como una placa: se lee de un vistazo y se compara con lo que quedó pegado. */
.cobro__llave { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--suave); }
.cobro__llave-rot {
  font: 700 12px/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2);
}
.cobro__llave-fila { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.cobro__llave-valor {
  flex: 1; min-width: 0;
  font: 700 22px/1.1 var(--mono); letter-spacing: .06em; color: var(--ink);
  user-select: all; -webkit-user-select: all;
}
.cobro__copiar {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--marca-borde); background: transparent; color: var(--marca-ink);
  font: 700 14px/1 var(--fuente);
}
.cobro__copiar:active { background: var(--acento-suave); }
.cobro .qr--plan { margin-top: 4px; }

.plan-lado__bajo { margin-top: 6px; font: 600 14px/1.3 var(--fuente); color: var(--ink2); }
/* Las tres formas de pago van en fila, como tres botones del mismo tamaño: en
   columna cada una ocupaba un renglón entero y el panel se iba hacia abajo
   antes de llegar al botón de crear. Son botones macizos, con las esquinas del
   de ver demo (16): fondo del color de la superficie, contorno y sombra corta,
   que es lo que hace ver un botón levantado. Nada de tintes translúcidos, que
   se veían como vidrio puesto encima de la tarjeta. El elegido se llena del
   color del plan, se levanta un pelo y proyecta sombra de su mismo color; el
   bolillo de radio sobra cuando el color ya dice cuál está tomada.
   Debajo del precio grande siguen saliendo el equivalente al mes y el ahorro. */
.plan-lado__rotulo--periodo { margin-top: 18px; }
.plan-lado__periodos { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.plan-periodo {
  min-height: 88px; padding: 12px 5px; border-radius: 16px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--borde-input);
  background: var(--sup);
  color: var(--ink);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .55);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.plan-periodo:hover {
  border-color: var(--p-activo);
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5);
}
.plan-periodo:active { transform: scale(.96); }
.plan-periodo__nombre { font: 800 13px/1.1 var(--fuente); }
.plan-periodo__total {
  font: 800 clamp(12px, 3.7vw, 16px)/1.05 var(--fuente);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* El Mensual no descuenta nada, así que en vez de pastilla lleva un hueco del
   mismo alto: los tres totales quedan a la misma altura y no aparece ningún
   punto suelto cuando se elige. */
.plan-periodo__dcto {
  box-sizing: border-box; min-height: 18px; padding: 3px 7px; border-radius: 999px;
  display: flex; align-items: center;
  background: var(--verde); color: var(--sobre-verde); font: 800 11px/1 var(--fuente);
}
.plan-periodo__hueco { min-height: 18px; }
.plan-periodo--activo {
  border-color: var(--p-activo); background: var(--p-activo); color: var(--sobre-p);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--p-activo) 32%, transparent);
}
.plan-periodo--activo:hover { background: var(--p-activo); }
.plan-periodo--activo:active { transform: scale(.96); }
.plan-periodo--activo .plan-periodo__dcto { background: var(--sobre-p); color: var(--p-activo); }
@media (prefers-reduced-motion: reduce) {
  .plan-periodo, .plan-periodo--activo, .plan-periodo:active, .plan-periodo--activo:active { transform: none; }
}

/* Demo y asistente con los mismos colores de plan. */
.demo-plan--basico { border-color: color-mix(in srgb, var(--p-basico) 45%, transparent); }
.demo-plan--basico .demo-plan__nombre { color: var(--p-basico-ink); }
.demo-plan--basico .demo-plan__icono { background: var(--p-basico-suave); color: var(--p-basico-ink); }
.demo-plan--basico .demo-plan__pregunta { background: var(--p-basico-suave); color: var(--ink); }
.demo-plan--pro, .demo-v__elegido.demo-plan--pro { background: linear-gradient(160deg, var(--p-pro) 0%, var(--p-pro-osc) 100%); }
.demo-plan--pro .demo-plan__icono { color: #FFFFFF; }
.demo-v__elegido.demo-plan--basico { background: var(--p-basico-suave); }
.wiz-plan--basico.wiz-plan--activo { background: linear-gradient(160deg, var(--p-basico) 0%, var(--p-basico-osc) 100%); box-shadow: 0 14px 26px -16px rgba(0, 122, 61, .9); }
.wiz-plan--pro.wiz-plan--activo { background: linear-gradient(160deg, var(--p-pro) 0%, var(--p-pro-osc) 100%); box-shadow: 0 14px 26px -16px rgba(163, 0, 82, .9); }
.wiz-periodos { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wiz-periodo {
  position: relative; min-width: 0; min-height: 60px; padding: 10px 6px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid var(--borde-input); background: var(--sup); color: var(--ink);
}
.wiz-periodo__nombre { font: 800 14px/1 var(--fuente); }
.wiz-periodo__valor { font: 600 12px/1 var(--fuente); color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wiz-periodo__dcto { position: absolute; top: -8px; right: 6px; padding: 3px 6px; border-radius: 999px; background: var(--p-basico); color: #FFFFFF; font: 800 10px/1 var(--fuente); }
.wiz-periodo--activo { border-color: var(--marca); background: var(--acento-suave); }
.wiz-periodo--activo .wiz-periodo__nombre { color: var(--marca-ink); }
.wiz-bloque--apunte { background: var(--acento-suave); border-color: color-mix(in srgb, var(--marca) 35%, transparent); }

/* ==========================================================================
   Super admin v2: panel del equipo Don Parqueo (super.js, 2026-09-19).
   Menú propio (lateral en escritorio, fila deslizable en el celular), tarjetas
   opacas y colores llenos. Sin franjas de color en bordes ni rayas bajo
   títulos o pestañas: lo activo se marca con relleno.
   ========================================================================== */
.sa-pantalla { animation: psfade .18s ease-out; }
/* El panel lleva su propio menú: la barra de arriba del marco sobra. */
[data-ps="marco"][data-pantalla^="super"] [data-ps="topbar"] { display: none; }
.sa { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.sa-main { min-width: 0; display: flex; flex-direction: column; }

/* Menú: en el celular es una isla flotante pegada ABAJO, igual que el menú del
   operador y el del administrador. Antes iba arriba: competía con el título de
   la sección y en pantallas angostas se cortaba, dejando "Nuevo parqueadero"
   debajo del botón de salir. Abajo cae donde ya está el pulgar. */
.sa-menu {
  position: sticky; bottom: 14px; z-index: 5;
  margin: 18px 0 0; padding: 6px;
  display: flex; align-items: center; gap: 2px;
  border-radius: 26px; border: 1px solid var(--borde-sup);
  background: color-mix(in srgb, var(--sup) 82%, transparent);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .5), 0 2px 10px -6px rgba(0, 0, 0, .3);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
}
/* El contenido queda por encima del menú: el orden del DOM lo pone después. */
.sa-main { order: -1; }
.sa-menu__lista { overflow: visible; gap: 2px; }
.sa-menu__item, .sa-menu__salir { box-shadow: none; background: transparent; }
.sa-menu__item[aria-current="page"] { box-shadow: none; }
/* Cinco secciones más el salir no caben con su nombre en un celular: "Nuevo
   parqueadero" se salía y quedaba debajo del botón de salir. Así que en el
   celular manda el ícono y solo la sección abierta dice cómo se llama, que es
   como se comportan todas las barras de abajo de la app. */
.sa-menu__item { flex: 1; min-width: 0; justify-content: center; padding: 0 8px; }
.sa-menu__item .sa-menu__txt { display: none; }
.sa-menu__item[aria-current="page"] { flex: none; padding: 0 14px; }
.sa-menu__item[aria-current="page"] .sa-menu__txt { display: inline; }
.sa-menu__cuenta { position: absolute; margin: -22px 0 0 18px; }
.sa-menu__item { position: relative; }
.sa-menu__item[aria-current="page"] .sa-menu__cuenta { position: static; margin: 0 0 0 4px; }
.sa-menu__marca { display: none; }
.sa-menu__lista { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sa-menu__lista::-webkit-scrollbar { display: none; }
.sa-menu__item, .sa-menu__salir {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 14px; border: 0;
  background: var(--sup); color: var(--ink); cursor: pointer;
  font: 700 14px/1 var(--fuente); white-space: nowrap;
  box-shadow: 0 0 0 1px var(--borde-sup) inset;
}
.sa-menu__item[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.sa-menu__ico { display: inline-flex; }
.sa-menu__cuenta {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo); color: var(--sobre-rojo); font: 700 12px/1 var(--fuente);
}
.sa-menu__salir { padding: 0 12px; color: var(--ink2); }
.sa-menu__salir .sa-menu__txt { display: none; }

/* Cabeza de cada sección */
.sa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.sa-cab__txt { min-width: 0; }
.sa-cab__titulo { margin: 0; font: 800 26px/1.15 var(--fuente); color: var(--tit-banda); letter-spacing: -.01em; }
.sa-cab__sub { margin-top: 6px; font: 400 15px/1.35 var(--fuente); color: var(--sub-banda); }

.sa-rotulo { font: 700 12px/1.2 var(--fuente); letter-spacing: .10em; text-transform: uppercase; color: var(--ink2); }
.sa-nota { margin-top: 8px; font: 400 14px/1.45 var(--fuente); color: var(--ink2); text-wrap: pretty; }
.sa-nota--centro { text-align: center; }
.sa-nota--mal { color: var(--rojo); }
.sa-vacio { padding: 20px 8px; text-align: center; font: 400 15px/1.4 var(--fuente); color: var(--ink3); }

.sa-col { display: flex; flex-direction: column; gap: 12px; }
.sa-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sa-tarjeta {
  background: var(--sup); border: 1px solid var(--borde-sup); border-radius: 20px;
  padding: 16px; box-sizing: border-box; min-width: 0;
}
.sa-tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-cuenta {
  min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo); color: var(--sobre-rojo); font: 700 13px/1 var(--fuente);
}
.sa-cuenta--amb { background: var(--ambar); color: var(--sobre-ambar); }

/* Botones */
.sa-btn {
  min-height: 48px; padding: 0 18px; box-sizing: border-box; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1.15 var(--fuente); text-align: center; cursor: pointer; text-decoration: none;
  border: 2px solid transparent; background: transparent; color: var(--ink);
}
.sa-btn--principal { background: var(--marca); color: var(--sobre-marca); }
.sa-btn--principal:active { background: var(--marca-osc); }
.sa-btn--secundario { border-color: var(--marca-borde); color: var(--marca-ink); }
.sa-btn--neutro { border-color: var(--borde-input); color: var(--ink); }
.sa-btn--peligro { border-color: var(--rojo); color: var(--rojo); }
.sa-btn--ok { background: var(--verde); color: var(--sobre-verde); }
.sa-btn--wa { background: var(--verde); color: var(--sobre-verde); }
.sa-btn:disabled, .sa-btn[aria-disabled="true"] { background: var(--suave); border-color: var(--linea); color: var(--ink3); cursor: not-allowed; }
.sa-btn:active:not(:disabled) { transform: translateY(1px); }

/* Píldoras y puntos de estado */
.sa-pildora {
  flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 9px;
  font: 700 12px/1 var(--fuente); letter-spacing: .04em; white-space: nowrap;
  background: var(--suave); color: var(--ink2);
}
.sa-pildora--ok { background: var(--verde); color: var(--sobre-verde); }
.sa-pildora--amb { background: var(--ambar); color: var(--sobre-ambar); }
.sa-pildora--mal { background: var(--rojo); color: var(--sobre-rojo); }
.sa-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink3); }
.sa-punto--ink { background: var(--ink); }
.sa-punto--ok { background: var(--verde); }
.sa-punto--amb { background: var(--ambar); }
.sa-punto--mal, .sa-punto--rojo { background: var(--rojo); }
.sa-punto--marca { background: var(--marca); }
.sa-punto--gris { background: var(--ink3); }

/* Meta del mes */
.sa-meta__fila { margin-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-meta__valor { font: 800 34px/1.05 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.sa-meta__de { font: 700 15px/1.2 var(--fuente); color: var(--ink2); }
.sa-barra { margin-top: 12px; height: 12px; border-radius: 6px; background: var(--suave); overflow: hidden; }
.sa-barra__lleno { display: block; height: 100%; border-radius: 6px; background: var(--marca); }
.sa-barra__lleno--ok { background: var(--verde); }
.sa-meta__pie { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.3 var(--fuente); color: var(--ink2); }
.sa-meta__pie span:first-child { font-weight: 700; color: var(--ink); }

/* Contadores: se tocan y abren Clientes con ese filtro */
.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sa-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border-radius: 18px; border: 1px solid var(--borde-sup);
  background: var(--sup); cursor: pointer; text-align: left;
}
.sa-kpi__num { font: 800 28px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.sa-kpi__rot { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1.1 var(--fuente); letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.sa-kpi__rot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.sa-kpi--ok .sa-kpi__rot::before { background: var(--verde); }
.sa-kpi--amb .sa-kpi__rot::before { background: var(--ambar); }
.sa-kpi--mal .sa-kpi__rot::before { background: var(--rojo); }
.sa-kpi--gris .sa-kpi__rot::before { background: var(--ink3); }
.sa-kpi--ok .sa-kpi__num { color: var(--verde); }
.sa-kpi--mal .sa-kpi__num { color: var(--rojo); }

/* Listas de renglones */
.sa-lista { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.sa-fila {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 8px; border: 0; border-radius: 14px;
  background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.sa-fila:hover { background: var(--suave); }
.sa-fila:active { background: var(--press-ghost); }
.sa-fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-fila__rot { font: 700 11px/1.1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.sa-fila__titulo { font: 700 16px/1.25 var(--fuente); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-fila__dato { font: 400 14px/1.3 var(--fuente); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-fila__flecha { flex: none; display: inline-flex; color: var(--ink3); }
.sa-inicial {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--sobre-marca); font: 800 17px/1 var(--fuente);
}
.sa-inicial--amb { background: var(--ambar); color: var(--sobre-ambar); }
.sa-inicial--grande { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }

/* Búsqueda y filtros */
.sa .linea input, .sa .linea textarea {
  width: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent; padding: 0; min-height: 0;
  font: 400 17px/1.35 var(--fuente); color: var(--ink); resize: vertical;
}
.sa-busca { margin-top: 0; }
.sa-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sa-filtro {
  min-height: 38px; padding: 0 14px; border-radius: 19px; cursor: pointer;
  border: 1.5px solid var(--borde-input); background: var(--sup); color: var(--ink);
  font: 700 14px/1 var(--fuente);
}
.sa-filtro[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.sa-col > .sa-filtros { margin-top: 0; }

/* Barras del cobro por mes y cartera */
.sa-barras { margin-top: 16px; height: 170px; display: flex; align-items: flex-end; gap: 8px; }
.sa-barras__col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.sa-barras__num { font: 700 13px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.sa-barras__barra { display: block; width: 100%; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--marca) 22%, var(--suave)); }
.sa-barras__barra--hoy { background: var(--marca); }
.sa-barras__mes { font: 700 12px/1 var(--fuente); color: var(--ink2); }
.sa-cartera { margin-top: 16px; display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--suave); }
.sa-cartera__tramo { display: block; height: 100%; }
.sa-cartera__tramo--ok { background: var(--verde); }
.sa-cartera__tramo--amb { background: var(--ambar); }
.sa-cartera__tramo--mal { background: var(--rojo); }
.sa-cartera__tramo--gris { background: var(--ink3); }
.sa-leyenda { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sa-leyenda__fila { display: flex; align-items: center; gap: 10px; }
.sa-leyenda__rot { flex: 1; font: 400 15px/1.3 var(--fuente); color: var(--ink); }
.sa-leyenda__num { font: 700 16px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }

/* Ficha del cliente */
.sa-volver {
  align-self: flex-start; min-height: 40px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
  font: 700 15px/1 var(--fuente); color: var(--marca-ink);
}
.sa-volver--centro { align-self: center; }
.sa-ficha__cab { display: flex; align-items: center; gap: 14px; }
.sa-ficha__txt { flex: 1; min-width: 0; }
.sa-ficha__nombre { font: 800 21px/1.2 var(--fuente); color: var(--ink); }
.sa-ficha__nit { margin-top: 4px; font: 700 15px/1 var(--mono); letter-spacing: .04em; color: var(--ink2); }
.sa-aviso {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--ambar); color: var(--sobre-ambar); font: 700 15px/1.35 var(--fuente);
}
.sa-aviso--suave { background: var(--acento-suave); color: var(--ink); font-weight: 400; }
.sa-datos { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 16px; }
.sa-dato { min-width: 0; }
.sa-dato__rot { font: 700 11px/1.2 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.sa-dato__valor { margin-top: 4px; font: 600 16px/1.35 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.sa-wa-mini {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 10px;
  background: var(--verde); color: var(--sobre-verde); font: 700 13px/1 var(--fuente); text-decoration: none;
}
.sa-acciones { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sa-acciones > .sa-btn--principal { grid-column: 1 / -1; }
.sa-eliminar {
  margin-top: 12px; align-self: center; width: 100%; min-height: 40px; border: 0; background: transparent; cursor: pointer;
  font: 700 14px/1 var(--fuente); color: var(--rojo);
}
.sa-pagos { margin-top: 8px; display: flex; flex-direction: column; }
.sa-pago { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.sa-pago:first-child { border-top: 0; }
.sa-pago__fecha { font: 400 15px/1.3 var(--fuente); color: var(--ink); }
.sa-pago__medio { grid-row: 2; font: 400 13px/1.3 var(--fuente); color: var(--ink2); }
.sa-pago__monto { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 16px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }

/* Parqueadero nuevo: pasos, planes, periodos y forma de pago */
.sa-pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.sa-pasos__paso { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--fuente); color: var(--ink3); }
.sa-pasos__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sup); color: var(--ink2); font: 800 13px/1 var(--fuente); box-shadow: 0 0 0 1px var(--borde-sup) inset;
}
.sa-pasos__paso--actual { color: var(--ink); }
.sa-pasos__paso--actual .sa-pasos__n { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.sa-pasos__paso--hecho .sa-pasos__n { background: var(--verde); color: var(--sobre-verde); box-shadow: none; }
.sa-form__par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.sa-form__botones { display: flex; gap: 10px; }
.sa-form__botones > .sa-btn { flex: 1; }
.sa-form__botones--cobro { flex-wrap: wrap; }
.sa-form__botones--cobro > .sa-btn--ok { flex: 1 1 100%; min-height: 56px; font-size: 16px; }
.sa-planes, .sa-periodos, .sa-cobros { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sa-periodos { margin-top: 18px; }
.sa-plan, .sa-periodo, .sa-cobro {
  position: relative; min-height: 64px; padding: 12px 6px; box-sizing: border-box; border-radius: 16px;
  border: 2px solid var(--borde-input); background: transparent; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  font: 700 15px/1.2 var(--fuente);
}
.sa-plan[aria-checked="true"], .sa-periodo[aria-checked="true"], .sa-cobro[aria-checked="true"] {
  border-color: var(--marca); background: var(--marca); color: var(--sobre-marca);
}
.sa-plan__nombre, .sa-periodo__nombre { font: 800 16px/1.1 var(--fuente); }
.sa-plan__valor, .sa-periodo__total { font: 700 15px/1.1 var(--fuente); font-variant-numeric: tabular-nums; }
.sa-plan__mes, .sa-periodo__pie { font: 500 12px/1.2 var(--fuente); opacity: .85; }
.sa-periodo { padding-top: 16px; }
.sa-periodo__desc {
  position: absolute; top: -11px; right: 8px; padding: 4px 8px; border-radius: 8px;
  background: var(--verde); color: var(--sobre-verde); font: 800 12px/1 var(--fuente);
}
.sa-planes--bajo .sa-plan { min-height: 56px; }
.sa-resumen-venta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-resumen-venta__nombre { font: 800 19px/1.2 var(--fuente); color: var(--ink); }
.sa-resumen-venta__dato { margin-top: 4px; font: 400 14px/1.35 var(--fuente); color: var(--ink2); }
.sa-resumen-venta__precio { text-align: right; }
.sa-resumen-venta__valor { font: 800 24px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--marca-ink); }

/* Cobro en espera: QR grande para que el cliente lo escanee */
.sa-cobro-vista { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; }
.sa-cobro-vista__monto { margin-top: 14px; font: 800 40px/1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.sa-cobro-vista__concepto { margin-top: 8px; font: 600 15px/1.4 var(--fuente); color: var(--ink2); }
.sa-cobro-vista__ahorro { margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: var(--verde); color: var(--sobre-verde); font: 700 13px/1.2 var(--fuente); }
.sa-cobro-vista__qr { margin-top: 20px; padding: 14px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--borde-sup); }
.sa-cobro-vista__qr img { display: block; width: min(280px, 64vw); height: auto; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.sa-cobro-vista__nequi { margin-top: 14px; display: flex; gap: 8px; align-items: baseline; font: 400 15px/1.3 var(--fuente); color: var(--ink2); }
.sa-cobro-vista__nequi strong { font: 800 18px/1 var(--mono); color: var(--ink); letter-spacing: .04em; }
.sa-cobro-vista__efectivo { margin-top: 20px; padding: 18px 22px; border-radius: 18px; background: var(--suave); font: 700 17px/1.2 var(--fuente); color: var(--ink); }

/* Credenciales */
.sa-cred__cab { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sa-cred__empresa { font: 800 22px/1.2 var(--fuente); color: var(--ink); }
.sa-cred__dueno { font: 400 15px/1.3 var(--fuente); color: var(--ink2); }
.sa-cred__cuerpo { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sa-cred__datos { display: flex; flex-direction: column; gap: 12px; }
.sa-cred__fila { display: flex; flex-direction: column; gap: 4px; }
.sa-cred__rot { font: 700 11px/1.2 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.sa-cred__valor { font: 700 20px/1.25 var(--fuente); color: var(--ink); overflow-wrap: anywhere; }
.sa-cred__clave { font: 800 24px/1.2 var(--mono); letter-spacing: .05em; color: var(--marca-ink); }
.sa-cred__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-qr { display: block; background: #FFFFFF; border-radius: 14px; box-shadow: 0 0 0 1px var(--borde-sup); }
.sa-cred__url { font: 500 12px/1.35 var(--fuente); color: var(--ink2); text-align: center; word-break: break-all; max-width: 240px; }
.sa-acciones--envio > .sa-btn--wa { grid-column: 1 / -1; min-height: 54px; font-size: 16px; }

/* Soporte */
.sa-nov__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-nov__tipo { font: 800 17px/1.25 var(--fuente); color: var(--ink); }
.sa-nov__meta { margin-top: 4px; font: 500 13px/1.3 var(--fuente); color: var(--ink3); }
.sa-nov__txt { margin: 12px 0 0; font: 400 16px/1.45 var(--fuente); color: var(--ink); white-space: pre-wrap; }
.sa-nov--hecha .sa-nov__txt { color: var(--ink2); }
.sa-nov__botones { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sa-nov__botones > .sa-btn { flex: 1 1 160px; }

/* Ajustes */
.sa-paso { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.sa-paso__valor { flex: 1; text-align: center; font: 800 26px/1.1 var(--fuente); font-variant-numeric: tabular-nums; color: var(--ink); }
.sa-switch { margin: 12px 0; display: flex; align-items: center; gap: 12px; }
.sa-switch__txt { flex: 1; min-width: 0; }
.sa-switch__titulo { font: 700 16px/1.25 var(--fuente); color: var(--ink); }
.sa-switch__pie { margin-top: 4px; font: 400 14px/1.35 var(--fuente); color: var(--ink2); }
.sa-switch__qr { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: #FFFFFF; image-rendering: pixelated; }

@media (max-width: 480px) {
  .sa-fila--cliente .sa-pildora { display: none; }
  .sa-pasos__t { display: none; }
  .sa-pasos__paso--actual .sa-pasos__t { display: inline; }
}

/* Escritorio: menú lateral fijo y contenido en dos columnas. */
@media (min-width: 1000px) {
  [data-ps="contenido"][data-pantalla^="super"] { max-width: 1240px; }
  .sa { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
  /* En escritorio el menú vuelve a la columna izquierda. El DOM lo tiene de
     segundo (porque en el celular va abajo), así que aquí se le dice su celda. */
  .sa-menu { grid-column: 1; grid-row: 1; }
  .sa-main { grid-column: 2; grid-row: 1; order: 0; }
  .sa-menu {
    position: sticky; top: 16px; bottom: auto; margin: 0; padding: 16px 12px;
    flex-direction: column; align-items: stretch; gap: 16px;
    min-height: calc(100dvh - 120px); box-sizing: border-box;
    background: var(--sup); border: 1px solid var(--borde-sup); border-radius: 22px;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sa-menu__marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; color: var(--marca-ink); }
  .sa-menu__logo { display: inline-flex; }
  .sa-menu__nombre { display: flex; flex-direction: column; gap: 3px; font: 800 17px/1.1 var(--fuente); color: var(--ink); }
  .sa-menu__nombre small { font: 600 12px/1 var(--fuente); color: var(--ink3); letter-spacing: .04em; }
  .sa-menu__lista { flex: none; flex-direction: column; overflow: visible; gap: 4px; }
  .sa-menu__item { flex: none; justify-content: flex-start; padding: 0 14px; }
  .sa-menu__item .sa-menu__txt { display: inline; }
  .sa-menu__cuenta, .sa-menu__item[aria-current="page"] .sa-menu__cuenta { position: static; margin: 0 0 0 auto; }
  .sa-menu__item, .sa-menu__salir { width: 100%; box-shadow: none; background: transparent; min-height: 46px; font-size: 15px; }
  .sa-menu__item:hover { background: var(--suave); }
  .sa-menu__item[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }
  .sa-menu__item .sa-menu__cuenta { margin-left: auto; }
  .sa-menu__salir { margin-top: auto; }
  .sa-menu__salir .sa-menu__txt { display: inline; }
  .sa-menu__salir:hover { background: var(--suave); color: var(--ink); }
  .sa-cab { margin-top: 4px; }
  .sa-cab__titulo { font-size: 30px; }
  .sa-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-tarjeta--ancha { grid-column: 1 / -1; }
  .sa-tarjeta { padding: 20px; }
  .sa-form__par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-form__botones { justify-content: flex-end; }
  .sa-form__botones > .sa-btn { flex: 0 0 auto; min-width: 200px; }
  .sa-form__botones--cobro { flex-wrap: nowrap; }
  .sa-form__botones--cobro > .sa-btn--ok { flex: 0 0 auto; order: 3; }
  .sa-cred__cuerpo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .sa-acciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sa-acciones > .sa-btn--principal { grid-column: auto; }
  .sa-acciones--envio { grid-template-columns: 2fr 1fr 1fr; }
  .sa-acciones--envio > .sa-btn--wa { grid-column: auto; }
  .sa-eliminar { width: auto; align-self: flex-start; }
}