/* ==========================================================================
   Portal Garabito Comercial
   Un solo archivo de estilos, escrito a mano, sin frameworks.
   Fondo oscuro a proposito: es una pantalla de entrada, no una de trabajo.
   Detras va la foto de la bodega al atardecer, tapada por un velo oscuro para
   que el texto se lea. La foto se cambia reemplazando imagenes/fondo.jpg desde
   GitHub Desktop; acordarse de subirle el numero a VERSION en sw.js, si no los
   celulares ya instalados siguen viendo la foto anterior.
   ========================================================================== */

:root {
  /* Rojo sacado del logo real de Garabito (#E03D3F), no inventado */
  --rojo: #e03d3f;
  --rojo-claro: #f05a5c;

  --fondo: #101319;
  /* Las tarjetas ahora son translucidas para que se intuya la foto detras.
     El color de respaldo es opaco a proposito: si el navegador no entiende
     backdrop-filter (o la foto no carga), la tarjeta sigue teniendo un fondo
     propio y el texto no queda flotando sobre la nada. */
  --fondo-tarjeta: rgba(20, 24, 32, 0.72);
  --fondo-tarjeta-hover: rgba(30, 36, 48, 0.85);
  /* El panel de control no lleva foto detras, asi que usa un fondo opaco: un
     panel translucido encima de tarjetas translucidas se vuelve ilegible. */
  --fondo-panel-solido: #181c24;
  --borde: rgba(255, 255, 255, 0.09);
  --borde-solido: #262c38;

  --texto: #f2f4f8;
  --texto-suave: #98a1b3;
  --texto-apagado: #5c6577;

  --radio: 18px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sombra-tarjeta: 0 12px 28px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* env(safe-area-*) evita que el contenido quede debajo del notch del iPhone */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* La foto es mas ancha que alta; en un celular vertical el recorte se come
     los lados. position: fixed la deja quieta al desplazar en vez de estirarse
     con la pagina. */
  position: relative;
}

/* La foto va en una capa fija propia y no en background-attachment: fixed.
   Esa propiedad esta rota o da tirones en Safari de iPhone --la foto salta al
   desplazar-- y es justo donde mas se va a usar el portal.
   z-index negativo para que quede debajo de todo sin tapar ningun clic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--fondo);
  background-image:
    /* El velo va ARRIBA de la foto (en background-image el primero es el de
       encima). Sin el, el naranja del atardecer se come el texto blanco. Es un
       degradado y no un color plano para que abajo quede mas oscuro y las
       tarjetas se despeguen del piso. */
    linear-gradient(180deg, rgba(8, 10, 14, 0.82) 0%, rgba(8, 10, 14, 0.88) 45%, rgba(8, 10, 14, 0.95) 100%),
    url("imagenes/fondo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Resplandor rojizo tenue detras del logo. Da profundidad sin competir con el.
   Va en una segunda capa y no junto a la foto para poder pintarse ENCIMA del
   velo: mezclado con la foto, el velo se lo tragaba. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(900px 480px at 50% 12%, rgba(224, 61, 63, 0.18), transparent 70%);
}

.portal {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Encabezado ---------- */

/* Los dos margenes automaticos --este y el del pie-- se reparten el espacio
   que sobra: el bloque de logo + tarjetas queda centrado a lo alto y el pie
   pegado abajo, como en la pantalla que pidio Diego. Cuando no sobra espacio
   (celular pequeno, muchas apps) valen cero y todo vuelve al flujo normal. */
.encabezado {
  text-align: center;
  margin-top: auto;
  margin-bottom: 40px;
}

/* El logo es un boton (abre el panel con cinco toques) pero no debe verse como uno */
.logo {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 20px;
  /* Sin esto, en celular cada toque del logo pinta un recuadro azul */
  -webkit-tap-highlight-color: transparent;
}

.logo img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  display: block;
  box-shadow: 0 10px 30px rgba(224, 61, 63, 0.4);
}

.logo:focus-visible {
  outline: 2px solid var(--rojo-claro);
  outline-offset: 4px;
}

.encabezado h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 20px 0 6px;
  /* La sombra es el seguro de legibilidad: si algun dia se cambia la foto por
     una mas clara, el titulo sigue leyendose sin tener que tocar el velo. */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.subtitulo {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ---------- Rejilla de tarjetas ---------- */

/* Aviso de "no se pudo confirmar el estado". Discreto a proposito: informa sin
   alarmar a un chofer que solo quiere abrir su checklist. */
.aviso {
  margin: 0 auto 18px;
  max-width: 640px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(224, 61, 63, 0.14);
  border: 1px solid rgba(224, 61, 63, 0.32);
  color: #f5b6b7;
  font-size: 0.84rem;
  text-align: center;
}

.aviso[hidden] { display: none; }

/* Flex y no grid: con grid, la ultima fila incompleta queda pegada a la
   izquierda; aqui las dos ultimas tarjetas tienen que quedar centradas bajo
   las tres de arriba, como en el diseno. flex-wrap + justify-content: center
   lo hace solo, sin media queries. */
.rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cargando,
.error-carga {
  /* Ocupan la fila entera. Con grid esto era grid-column: 1 / -1; en flex el
     equivalente es una base del 100%. */
  flex: 1 1 100%;
  text-align: center;
  color: var(--texto-suave);
  padding: 32px 0;
}

.tarjeta {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Crece para repartirse la fila, pero con tope: sin max-width, dos tarjetas
     solas en una pantalla grande se estiran hasta quedar ridiculas. */
  flex: 1 1 300px;
  max-width: 360px;
  /* Altura minima de 96px: blanco de toque comodo para un chofer con guantes */
  min-height: 96px;
  padding: 18px 20px;
  background: var(--fondo-tarjeta);
  /* El desenfoque es adorno: donde no exista, la tarjeta se ve igual de solida
     gracias al color de respaldo. El prefijo -webkit- es para Safari, que
     todavia lo pide. */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  color: var(--texto);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tarjeta:hover {
  background: var(--fondo-tarjeta-hover);
  border-color: rgba(224, 61, 63, 0.55);
  transform: translateY(-2px);
}

.tarjeta:active { transform: translateY(0); }

.tarjeta:focus-visible {
  outline: 2px solid var(--rojo-claro);
  outline-offset: 3px;
}

.tarjeta-icono {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(224, 61, 63, 0.16);
  border: 1px solid rgba(224, 61, 63, 0.22);
  color: var(--rojo-claro);
}

.tarjeta-icono svg { width: 22px; height: 22px; }

/* min-width: 0 no es adorno: sin el, un hijo de flex no se deja encoger por
   debajo de su contenido y el recorte con puntos suspensivos de la descripcion
   nunca ocurre --la tarjeta se estira y rompe la fila. */
.tarjeta-texto {
  min-width: 0;
  flex: 1 1 auto;
}

.tarjeta-nombre {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 3px;
}

/* Una sola linea con puntos suspensivos. Las descripciones son de largo
   dispar y sin esto unas tarjetas quedaban de dos lineas y otras de una,
   desalineando la fila entera. */
.tarjeta-descripcion {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La flecha solo insinua "esto abre algo". aria-hidden en el HTML que la crea:
   para un lector de pantalla no aporta nada que el enlace no diga ya. */
.tarjeta-flecha {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--texto-apagado);
  transition: transform 0.15s ease, color 0.15s ease;
}

.tarjeta-flecha svg { width: 18px; height: 18px; }

.tarjeta:hover .tarjeta-flecha {
  color: var(--texto-suave);
  transform: translateX(3px);
}

/* ---------- Tarjeta congelada ---------- */

/* Se dibuja como <div> y no como <a>, asi que no hay enlace que abrir ni
   menu de "abrir en pestana nueva" con el que saltarse el congelado. */
.tarjeta.congelada {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.tarjeta.congelada:hover {
  background: var(--fondo-tarjeta);
  border-color: var(--borde);
  transform: none;
}

.tarjeta.congelada .tarjeta-icono {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--texto-apagado);
}

/* La flecha no se dibuja en una tarjeta congelada (ver portal.js), pero si
   alguna vez volviera, que al menos no se mueva al pasar el mouse. */
.tarjeta.congelada:hover .tarjeta-flecha { transform: none; }

.etiqueta-congelada {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto-suave);
}

/* ---------- Pie ---------- */

.pie {
  margin-top: auto;
  padding-top: 48px;
  text-align: center;
  color: var(--texto-apagado);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pie p { margin: 0; }

/* ---------- Panel de control ---------- */

.fondo-panel {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.78);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.fondo-panel[hidden] { display: none; }

.panel {
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--fondo-panel-solido);
  border: 1px solid var(--borde-solido);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px;
}

.panel-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-encabezado h2 {
  margin: 0;
  font-size: 1.15rem;
}

.cerrar {
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.cerrar:hover { color: var(--texto); }

.paso[hidden] { display: none; }

/* Ojo con el selector: tiene que ser HIJO DIRECTO del formulario. Un
   `.panel label` suelto tambien alcanzaria a los interruptores de la lista
   (que son <label>) y su `display: block` le ganaria por especificidad al
   `display: inline-block` de .interruptor, dejandolos desarmados. */
.panel > form > label {
  display: block;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.panel input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  /* 16px exactos: con menos, iOS hace zoom solo al tocar el campo */
  font-size: 16px;
  color: var(--texto);
  background: #0e1117;
  border: 1px solid var(--borde-solido);
  border-radius: 10px;
  margin-bottom: 14px;
}

.panel input[type="password"]:focus {
  outline: none;
  border-color: var(--rojo);
}

.boton-principal {
  width: 100%;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 650;
  color: #fff;
  background: var(--rojo);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.boton-principal:hover { background: var(--rojo-claro); }

.boton-principal:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ayuda {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--texto-suave);
  line-height: 1.4;
}

.fila-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borde-solido);
}

.fila-app:last-of-type { border-bottom: 0; }

.fila-app span {
  font-size: 0.95rem;
}

/* Interruptor hecho a mano sobre un checkbox real, para que siga siendo
   accesible con teclado y lectores de pantalla. */
.interruptor {
  position: relative;
  /* display explicito: si algun dia la fila deja de ser flex, un elemento
     inline ignoraria el alto y la pista se aplastaria a cero */
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  cursor: pointer;
}

/* La casilla invisible se estira 9px arriba y 9px abajo del dibujo. El
   interruptor mide 26px de alto, muy poco para un dedo; asi el blanco de toque
   queda en 44px sin mover ni un pixel de lo que se ve. Hace falta ahora que la
   fila dejo de ser <label>: antes se podia tocar el nombre de la app --y por
   eso mismo se congelaban apps sin querer al desplazar la lista. */
.interruptor input {
  position: absolute;
  opacity: 0;
  top: -9px;
  left: 0;
  width: 100%;
  height: calc(100% + 18px);
  margin: 0;
  cursor: pointer;
}

.pista {
  position: absolute;
  inset: 0;
  background: #2c3340;
  border-radius: 999px;
  transition: background 0.15s ease;
  pointer-events: none;
}

.pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

/* Marcado = app congelada, por eso se pinta rojo */
.interruptor input:checked + .pista { background: var(--rojo); }
.interruptor input:checked + .pista::after { transform: translateX(20px); }
/* La casilla de verdad es invisible (opacity: 0), asi que la marca del foco la
   tiene que pintar la pista. Va con :focus y no solo con :focus-visible porque
   al pasar al paso 2 el foco lo pone el codigo en el primer interruptor: sin
   marca visible, un Espacio distraido congela una app sin que la persona se de
   cuenta de donde estaba parada. */
.interruptor input:focus + .pista,
.interruptor input:focus-visible + .pista { outline: 2px solid var(--rojo-claro); outline-offset: 2px; }

.mensaje {
  margin: 12px 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.mensaje.error { color: #ff8a8c; }
.mensaje.bien { color: #63d68a; }

/* Respeta a quien pidio menos movimiento en los ajustes del sistema */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}