/* ==========================================================================
   Don Parqueo · base.css
   Reset propio + el marco, el fondo, el topbar, el escritorio,
   las animaciones y la rejilla bento, copiados del <helmet> de
   "ParkSystem Flujo v2.dc.html". Esas reglas NO se ajustaron: los numeros son
   los del prototipo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, p, a, img, ul, ol, li, form, label,
button, input, section, header, nav, main, footer, table, tr, td, th {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html {
  font-family: var(--fuente);
  font-size: var(--t-normal);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-normal)/1.45 var(--fuente);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }

a { color: var(--marca-ink); text-decoration: none; }
a:hover { color: var(--ink); }

/* Nada pulsable por debajo de 48x48 (ESPECIFICACION, area tactil minima). */
button, [role="button"] {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  min-height: var(--h-toque);
  min-width: var(--h-toque);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Minimo 16 px en cualquier campo de formulario: por debajo, iOS hace zoom. */
input, textarea, select {
  font-family: var(--fuente);
  font-size: var(--t-min-campo);
  color: var(--ink);
  background: transparent;
  min-height: var(--h-toque);
  width: 100%;
}
/* NO DETERMINADO: el prototipo no le pone color al texto de campo vacio.
   Se reusa --ink3, que si existe en los dos temas; no se compone un hex. */
input::placeholder, textarea::placeholder { color: var(--ink3); opacity: 1; }

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   PASO 2 — marco, fondo, columna, topbar.
   El marco ocupa toda la ventana en los tres formatos: celular, tablet y
   escritorio. Detrás de todo va la textura de humo; en oscuro la misma foto
   pasa a gris casi negro y con poco contraste, para no cansar la vista.
   -------------------------------------------------------------------------- */
[data-ps="marco"] {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  box-sizing: border-box;
  isolation: isolate;
}
/* El fondo es el mismo en toda la app: gris claro (#F2F2F2, no blanco puro) en
   el tema claro y gris oscuro, no negro, en el oscuro. Encima va la textura de
   humo, a la vista pero suave, y dos destellos de luz azul en las esquinas. */
[data-ps="fondo"] { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-ps="fondo"]::before,
[data-ps="fondo"]::after { content: ""; position: absolute; inset: 0; }
[data-ps="fondo"]::before {
  background: url("../img/fondo-humo.webp") 70% 0 / cover no-repeat;
  filter: grayscale(1) invert(1) contrast(.75) brightness(1.04);
  mix-blend-mode: multiply;
  opacity: .26;
}
[data-tema="oscuro"] [data-ps="fondo"]::before {
  filter: grayscale(1) brightness(.9) contrast(1.05);
  mix-blend-mode: screen;
  opacity: .42;
}
[data-ps="fondo"]::after {
  background:
    radial-gradient(60% 42% at 0% 0%, var(--destello-1), transparent 70%),
    radial-gradient(50% 36% at 100% 4%, var(--destello-2), transparent 70%),
    radial-gradient(64% 40% at 100% 100%, var(--destello-1), transparent 72%),
    radial-gradient(46% 30% at 0% 100%, var(--destello-2), transparent 70%);
}
/* Fuera de la sesion (portada, planes, login, registro) los textos que van
   directo sobre el fondo toman la tinta del tema. */
[data-ps="marco"][data-ses="0"] {
  --tit-banda: var(--ink);
  --sub-banda: var(--ink2);
}
/* --------------------------------------------------------------------------
   DENTRO DE LA SESION: UNA SOLA SUPERFICIE.
   Antes toda la app se pintaba sobre la textura de humo, y las pantallas con
   un panel opaco —el tablero del admin— cortaban en seco justo debajo de la
   tarjeta del usuario: parecian dos pantallas pegadas. Adentro, el marco pasa
   al fondo de la app y la textura baja de intensidad.

   No hay que reescribir ninguna pantalla: los titulos y las tarjetas de vidrio
   ya salian de estos cinco tokens, asi que basta darles el valor del lado
   claro.
   -------------------------------------------------------------------------- */
[data-ps="marco"][data-ses="1"] {
  background: var(--bg);
  --tit-banda: var(--ink);
  --sub-banda: var(--ink2);
  --glass-hd: var(--sup);
  --borde-glass: var(--borde-sup);
  --borde-glass-2: var(--borde-sup);
  --sup-glass: var(--sup);
  --sup-glass-2: var(--sup);
}
/* Adentro la textura baja: las tarjetas mandan, el fondo acompaña. */
[data-ps="marco"][data-ses="1"] [data-ps="fondo"]::before { opacity: .16; }
[data-tema="oscuro"] [data-ps="marco"][data-ses="1"] [data-ps="fondo"]::before,
[data-tema="oscuro"][data-ps="marco"][data-ses="1"] [data-ps="fondo"]::before { opacity: .22; }

/* --------------------------------------------------------------------------
   EL CABEZAL Y EL PIE FLOTAN; EL CONTENIDO SE DIFUMINA AL PASAR POR DEBAJO.
   La zona que se desplaza va de borde a borde del marco. Encima quedan el
   cabezal (barra y tarjeta del usuario) y el pie (boton de accion y menu), los
   dos translucidos.

   NO HAY LINEA DE CORTE. El desenfoque no vive en el cabezal sino en una capa
   suya que se estira mas alla del contenido y lleva una mascara en degradado:
   arriba tapa del todo y abajo se desvanece, asi que el desenfoque y el velo
   se apagan juntos y el contenido entra sin chocar contra ningun borde. El pie
   hace lo mismo al reves.

   Los altos salen medidos desde app.js (ajustarMarcoVivo): el pie cambia con
   la pantalla y el cabezal con el rol. Los valores de aqui son solo el arranque
   mientras llega la medida.
   -------------------------------------------------------------------------- */
[data-ps="marco"][data-ses="1"] {
  --alto-cabezal: 124px;
  --alto-pie: 76px;
  --difuminado: 34px;                                      /* cuanto dura el desvanecido */
  --cabezal-velo: color-mix(in srgb, var(--bg) 66%, transparent);
  /* El pie lleva menos velo que el cabezal: el menu flota con su propio vidrio
     y lo de atras tiene que dejarse ver, que para eso se difumina. */
  --pie-velo: color-mix(in srgb, var(--bg) 40%, transparent);
}
[data-ps="marco"][data-ses="1"][data-perfil="0"] { --alto-cabezal: 58px; }
[data-ps="marco"][data-ses="1"] [data-ps="columna"] { position: relative; }

[data-ps="marco"][data-ses="1"] [data-ps="cabezal"],
[data-ps="marco"][data-ses="1"] [data-ps="pie"] {
  position: absolute;
  left: 0;
  right: 0;
  background: none;
  pointer-events: none;                                    /* el hueco difuminado no tapa */
}
/* El cabezal por encima del pie: de el cuelga el globo de "cambiar de usuario",
   que es una pestana flotante y no puede quedar debajo de nada. Los dos viven
   dentro de la columna, que ya es su propia capa, asi que subir aqui no los
   pone por encima de una ventana ni de un aviso. */
[data-ps="marco"][data-ses="1"] [data-ps="cabezal"] { z-index: 8; }
[data-ps="marco"][data-ses="1"] [data-ps="pie"] { z-index: 6; }
[data-ps="marco"][data-ses="1"] [data-ps="cabezal"] > *,
[data-ps="marco"][data-ses="1"] [data-ps="pie"] > * { pointer-events: auto; }
[data-ps="marco"][data-ses="1"] [data-ps="cabezal"] { top: 0; }
[data-ps="marco"][data-ses="1"] [data-ps="pie"] { bottom: 0; }

/* La capa de vidrio: se estira --difuminado mas alla del contenido y se apaga
   con la mascara. Va debajo del contenido del cabezal, que lleva z-index 1. */
[data-ps="marco"][data-ses="1"] [data-ps="cabezal"]::before,
[data-ps="marco"][data-ses="1"] [data-ps="pie"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background: var(--cabezal-velo);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
[data-ps="marco"][data-ses="1"] [data-ps="cabezal"]::before {
  top: 0;
  bottom: calc(var(--difuminado) * -1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--difuminado)), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - var(--difuminado)), transparent 100%);
}
[data-ps="marco"][data-ses="1"] [data-ps="pie"]::before {
  bottom: 0;
  top: calc(var(--difuminado) * -1.4);
  background: var(--pie-velo);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 calc(100% - var(--difuminado)), transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 calc(100% - var(--difuminado)), transparent 100%);
}
[data-ps="marco"][data-ses="1"] [data-ps="topbar"],
[data-ps="marco"][data-ses="1"] [data-ps="perfilmovil"],
[data-ps="marco"][data-ses="1"] [data-ps="accion"],
[data-ps="marco"][data-ses="1"] [data-ps="navmovil"] { position: relative; z-index: 1; }
/* La barra va por encima de la tarjeta del usuario: con el mismo z-index
   mandaba el orden del DOM y la tarjeta se pintaba sobre el globo, que cuelga
   de la barra. Se veia el nombre calcado encima del texto del globo. */
[data-ps="marco"][data-ses="1"] [data-ps="topbar"] { z-index: 3; }

/* Al llegar al tope o al final, lo primero y lo ultimo quedan FUERA del
   desvanecido: se ve entero, no medio borroso. El relleno cubre el cabezal o
   el pie mas casi todo su degradado; lo que pasa por debajo al desplazarse sigue
   difuminandose igual. */
[data-ps="marco"][data-ses="1"] {
  /* Con nombre porque no lo usa solo el relleno: una barra pegajosa de adentro
     tiene que descontarlo para saber dónde pararse (ver .cuentas__tabs). */
  --relleno-arriba: calc(var(--alto-cabezal) + var(--difuminado) * .6);
}
[data-ps="marco"][data-ses="1"] .desplazable {
  padding-top: var(--relleno-arriba);
  padding-bottom: calc(var(--alto-pie) + var(--difuminado) * 1.4 + 8px);
}

/* --------------------------------------------------------------------------
   LA TARJETA DEL USUARIO SE VA AL BAJAR Y VUELVE AL SUBIR.
   Quien esta leyendo la lista no necesita su propio nombre en pantalla; quien
   sube es porque va al encabezado. La barra de arriba NO se mueve: es donde
   esta el salir y el cambio de usuario.
   -------------------------------------------------------------------------- */
[data-ps="marco"][data-ses="1"] [data-ps="perfilmovil"] {
  overflow: hidden;
  max-height: 96px;
  transform-origin: top center;
  transition: max-height .26s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease,
    transform .26s cubic-bezier(.4, 0, .2, 1),
    margin-bottom .26s cubic-bezier(.4, 0, .2, 1),
    padding-top .26s cubic-bezier(.4, 0, .2, 1),
    padding-bottom .26s cubic-bezier(.4, 0, .2, 1);
}
[data-ps="marco"][data-ses="1"][data-compacto="1"] [data-ps="perfilmovil"] {
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-ps="marco"][data-ses="1"] [data-ps="perfilmovil"] { transition: none; }
}

/* Los botones del encabezado quedan de vidrio, como la franja donde viven. */
[data-ps="marco"][data-ses="1"] .perfil__salir,
[data-ps="marco"][data-ses="1"] .topbar__salir {
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--borde-sup);
}
[data-ps="marco"][data-ses="1"] .perfil__salir:active,
[data-ps="marco"][data-ses="1"] .topbar__salir:active {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
/* La tarjeta del usuario ya no necesita fondo propio: vive dentro del vidrio. */
[data-ps="marco"][data-ses="1"] [data-ps="perfilmovil"] {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* El logo del encabezado es un <img>, asi que no hereda los tokens del
   documento: trae el blanco cocido adentro. Sobre la barra clara se invierte. */
[data-ps="marco"][data-ses="1"] [data-ps="titulotop"] img { filter: invert(1); }
[data-tema="oscuro"] [data-ps="marco"][data-ses="1"] [data-ps="titulotop"] img { filter: none; }

[data-ps="lateral"] { display: none; }
[data-ps="columna"] { position: relative; z-index: 1; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
[data-ps="topbar"] { position: relative; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; }
[data-ps="reloj"] { font: 700 13px/1 var(--fuente); color: var(--tit-banda); }
[data-ps="titulotop"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 14px/1.2 var(--fuente); letter-spacing: .02em; color: var(--tit-banda); max-width: 88%; min-width: 0; }
/* Celular angosto: el nombre y la píldora de cambio de usuario comparten la
   barra, y con la letra nueva ya no cabían los dos a 14 px. */
@media (max-width: 400px) {
  [data-ps="titulotop"] { font-size: 13px; }
}
[data-ps="titulotop"] .ps-esc { display: none; }
[data-ps="accion"] { flex: none; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
/* El menu de abajo: barra blanca separada del contenido por una sombra, no por
   una linea de 1 px. Sobre el gris de la app una linea sola no se ve, y la
   barra se confundia con la tarjeta de encima. */
[data-ps="navmovil"] {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 8px 8px 10px;
  background: var(--sup);
  border-top: 1px solid var(--borde-sup);
  box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Adentro el menu no es una barra pegada al borde sino una isla flotante: se
   despega de los lados y del piso, asi el contenido que sube se ve difuminado
   POR DETRAS y TAMBIEN por los costados, que es donde el efecto se nota. Lleva
   su propio vidrio, mas denso que el del pie, porque aqui hay controles que
   tocar y el contraste manda sobre el efecto. */
[data-ps="marco"][data-ses="1"] [data-ps="navmovil"] {
  margin: 0 14px 14px;
  padding: 6px;
  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);
}
/* Dentro de la isla los botones se redondean con ella. */
[data-ps="marco"][data-ses="1"] .nav-movil { border-radius: 20px; }
/* La barra de accion no tapa: el contenido se le ve por detras, difuminado. */
[data-ps="marco"][data-ses="1"] [data-ps="accion"] { background: none; }
[data-ps="rutaanillo"] { display: block; }

/* Ventana a media pantalla o tablet vertical: un celular de tamaño real
   (390 de ancho, hasta 844 de alto) centrado, como se ve y se navega en la mano.
   Alrededor, la misma textura más oscura y borrosa. En un celular de verdad
   (480 o menos) el marco ocupa toda la pantalla. */
@media (min-width: 481px) and (max-width: 999.98px) and (min-height: 560px) {
  html { background: #DCDCDF; }
  html[data-tema="oscuro"] { background: #0E0E10; }
  body { background: transparent; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 16px 0; }
  body::before {
    content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
    background: url("../img/fondo-humo.webp") 70% 0 / cover no-repeat;
    filter: blur(8px) grayscale(1) invert(1) brightness(.92);
    opacity: .6;
  }
  [data-tema="oscuro"] body::before { filter: blur(8px) grayscale(1) brightness(.26); opacity: 1; }
  #app { flex: none; }
  [data-ps="marco"] {
    width: 390px;
    height: min(844px, calc(100vh - 32px));
    height: min(844px, calc(100dvh - 32px));
    border-radius: 32px;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--borde-sup);
  }
}

/* --------------------------------------------------------------------------
   PASO 3 — tablet acostada y escritorio, 1000 px hacia arriba: barra lateral y columna
   de contenido. El marco sigue a todo el ancho; en escritorio grande la
   columna crece un poco.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  [data-tema][data-ps="marco"] {
    display: flex;
    --sup-glass: var(--sup);
    --sup-glass-2: var(--sup);
    --sup-modal: var(--sup);
    --borde-glass: var(--borde-sup);
    --borde-glass-2: var(--borde-sup);
  }
  [data-ps="navmovil"] { display: none; }
  [data-ps="rutaanillo"] { display: none; }
  [data-ps="perfilmovil"] { display: none !important; }
  [data-ps="lateral"][data-ses="1"] {
    position: relative;
    z-index: 2;
    display: flex;
    flex: none;
    width: 232px;
    flex-direction: column;
    padding: 24px 0 0;
    border-right: 1px solid var(--borde-sup);
    background: color-mix(in srgb, var(--sup) 90%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
  }
  [data-ps="topbar"] { height: auto; min-height: 64px; padding: 8px 20px; }
  /* Adentro la barra separa la columna del contenido con la línea del tema;
     afuera (portada, planes, login) la barra está vacía y no lleva línea. */
  [data-ps="marco"][data-ses="1"] [data-ps="topbar"] { border-bottom: 1px solid var(--borde-sup); }
  /* En escritorio la tarjeta de usuario no se pinta: el encabezado es la barra. */
  [data-ps="marco"][data-ses="1"],
  [data-ps="marco"][data-ses="1"][data-perfil="0"] { --alto-cabezal: 64px; }
  [data-ps="reloj"] { letter-spacing: .06em; color: var(--sub-banda); }
  [data-ps="titulotop"] { font: 700 18px/1.2 var(--fuente); letter-spacing: 0; color: var(--tit-banda); }
  [data-ps="titulotop"] .ps-mov { display: none; }
  [data-ps="titulotop"] .ps-esc { display: inline; }
  [data-ps="contenido"] { max-width: 760px; margin: 0 auto; padding-top: 20px; }
  [data-ps="accion"] { padding: 0 20px 20px; max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}
@media (min-width: 1280px) {
  [data-ps="contenido"], [data-ps="accion"] { max-width: 880px; }
}

/* --------------------------------------------------------------------------
   PASO 5 — rejilla bento. Se usa desde el bloque 3.
   -------------------------------------------------------------------------- */
[data-bento] { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-bento] > * { min-width: 0; }
[data-bento] > [data-colm="1"] { grid-column: span 1; }
[data-bento] > [data-colm="2"] { grid-column: span 2; }
@media (min-width: 1000px) {
  [data-bento] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-bento] > [data-col="1"] { grid-column: span 1; }
  [data-bento] > [data-col="2"] { grid-column: span 2; }
  [data-bento] > [data-col="4"] { grid-column: span 4; }
}

/* Dentro del marco no se ve barra de desplazamiento (prototipo). */
[data-ps="marco"] * { scrollbar-width: none; -ms-overflow-style: none; }
[data-ps="marco"] *::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* --------------------------------------------------------------------------
   PASO 4 — las ocho animaciones del prototipo, con sus nombres y sus valores.
   dp-girar y dp-latir salieron del arbol; sus usos pasaron a psspin y psskel.
   -------------------------------------------------------------------------- */
@keyframes psspin { to { transform: rotate(360deg); } }
@keyframes pstoast { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes psskel { 0% { opacity: .55; } 50% { opacity: .22; } 100% { opacity: .55; } }
@keyframes psbarrido { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes psfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psreloj { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes psrelojtono { 0%, 49.99% { stroke: var(--marca); } 50%, 100% { stroke: var(--marca-clara); } }
@keyframes psrelojtonobase { 0%, 49.99% { stroke: var(--marca-clara); } 50%, 100% { stroke: var(--marca); } }

/* Nadie con movimiento reducido tiene que ver latir los bloques de carga. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}