/* ============================================================
   apple.css — material + movimiento "tipo Apple" para BodegaRAC.

   NO rediseña: complementa lo que ya existe. Paleta, estructura,
   tipografía y componentes quedan intactos; solo se agregan tres
   capas que faltaban — material (vidrio), feedback de presión y una
   curva de easing coherente en los elementos interactivos.

   Por qué vive en un archivo aparte y no en styles.css:
   - se carga como el ÚLTIMO <link> de index.html, así que gana a
     styles.css/bodega.css en empates de especificidad sin editarlos;
   - borrar este archivo + su <link> revierte TODO el cambio de un
     plumazo. Ese es el punto de regreso.

   Reglas del proyecto que respeta:
   - sin build step ni dependencias → todo CSS puro, cero JS;
   - CSP script-src 'self' → nada de imports de CDN (el plan original
     proponía `import motion` desde jsdelivr; la CSP lo bloquea en
     silencio, el mismo incidente que editor-paleta.js);
   - styles.css:58 ya trae un @media (prefers-reduced-motion) global
     que deja animaciones y transiciones en 0.001ms, así que nada de
     esto añade movimiento a quien lo tiene desactivado;
   - el sidebar es position:fixed y el contenido lleva margin-left, o
     sea que NO hay nada detrás de él: el vidrio ahí sería puro costo
     de repaint sin efecto visible. Solo el topbar lleva material.
   ============================================================ */

:root {
  /* Curva de navegación de iOS: sale rápido, aterriza suave. Es la que
     usan sheets y transiciones de vista, y da la sensación "elástica"
     sin caer en un spring de verdad (que necesitaría JS). */
  --apple-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* El vidrio toma el color de paneles del tema activo. Era blanco fijo
     (rgba 255,255,255,.72): en Nocturno/Programación/Neón el topbar quedaba
     gris claro con el texto claro del tema encima, ilegible. */
  --apple-glass: color-mix(in srgb, var(--secondary) 72%, transparent);
  --apple-blur: blur(20px) saturate(180%);
}

/* ------------------------------------------------------------
   1. Material — la barra superior pasa a vidrio.

   El @supports es defensivo a propósito: sin backdrop-filter el
   fondo translúcido dejaría texto sobre contenido sin desenfocar,
   que es ilegible. Si el navegador no soporta blur, se queda con
   el topbar sólido original de styles.css.
   ------------------------------------------------------------ */

@supports (backdrop-filter: blur(1px)) {
  .topbar {
    background: var(--apple-glass);
    backdrop-filter: var(--apple-blur);
    -webkit-backdrop-filter: var(--apple-blur);
    /* Separación fina: sin esto, blanco sobre blanco se funde. La sombra
       vive en la sección 2 para que también aplique sin @supports. */
    border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent);
  }

  /* Scrim desenfocado bajo los modales — el equivalente al fondo
     borroso de los diálogos de macOS/iOS. Blur modesto a propósito:
     los modales se abren sobre tablas densas, un blur grande se nota
     en equipos integrados. */
  .modal-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ------------------------------------------------------------
   2. Elevación — sombras en capas en vez de una sola dura.

   Solo donde ya existía una sombra: no inventa profundidad donde el
   diseño original decidió no tenerla.
   ------------------------------------------------------------ */

.topbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 30px -18px rgba(15, 23, 42, 0.35);
}

.modal {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 24px 48px -24px rgba(15, 23, 42, 0.35);
}

/* ------------------------------------------------------------
   3. Feedback de presión — lo que más se nota al usar.

   .btn y .btn-icon ya tenían :active (styles.css:215 y :247); lo que
   faltaba era el resto de la navegación, que se sentía "muerta" al
   tocarla. Mismo criterio de escala que el que ya usa el códigobase.
   ------------------------------------------------------------ */

.sidebar-item {
  transition:
    background 0.25s var(--apple-ease),
    color 0.25s var(--apple-ease),
    transform 0.25s var(--apple-ease);
}

.sidebar-item:active {
  /* Se conserva translateX(4): si no, el ítem salta a la izquierda
     al apretarlo porque el hover lo había corrido. */
  transform: translateX(4px) scale(0.92);
  transition-duration: 0.08s;
}

.view-tab-item {
  transition:
    color 0.25s var(--apple-ease),
    background 0.25s var(--apple-ease),
    transform 0.2s var(--apple-ease);
}

.view-tab-item:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

.btn {
  transition:
    background 0.2s var(--apple-ease),
    transform 0.12s var(--apple-ease),
    box-shadow 0.2s var(--apple-ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn-icon,
.btn-icon-sm {
  transition:
    background 0.2s var(--apple-ease),
    color 0.2s var(--apple-ease),
    transform 0.12s var(--apple-ease);
}

.btn-icon:active,
.btn-icon-sm:active {
  transform: scale(0.94);
}

/* ------------------------------------------------------------
   4. Entradas — curva unificada.

   .modal y .toast ya tenían animación de entrada con
   cubic-bezier(0.19, 1, 0.22, 1) (muy parecida a la de Apple). No se
   reescriben: solo se alinean a la misma curva que el resto de la
   interacción, para que entrar y tocar se sientan del mismo idioma.
   ------------------------------------------------------------ */

.modal {
  animation: apple-sheet-in 0.32s var(--apple-ease);
}

/* .modal.closing NO se toca. components.js::dismiss hace
   setTimeout(() => overlay.remove(), 180) — el 0.18s de bodega.css está
   calado exactamente a ese timeout. Cualquier duración distinta (por más
   elegante que sea) haría que el nodo se borre a mitad de la animación y
   el modal "popeara" en vez de desvanecerse. */

@keyframes apple-sheet-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ------------------------------------------------------------
   5. Landing del login — degradé de transición, paneles y CTA final.

   Orden de la página (login.js::render):
     header → hero → transicion → card → descubre → cta → footer

   El CTA ("¿Listo para gestionar la bodega de tu obra?") quedó al FINAL,
   después de "Conocé BodegaRAC": primero se muestra para qué sirve el
   producto, recién después se pide la cuenta.
   ------------------------------------------------------------ */

/* Banda de difuminado: el azul del hero se extiende un poco más y cae
   hacia el fondo de la página en un solo degradé horizontal a todo lo
   ancho.

   Va como elemento HERMANO del hero, nunca dentro: `.ascii-lienzo`
   tiene `inset: 0` sobre el hero, así que dentro de la banda o lo
   taparía o quedaría recortado. Acá no se toca el mapa.

   Arranca en el navy base del hero (#0B1A48) para que no aparezca una
   costura en el borde; el último tramo llega a var(--bg), el mismo color
   que pinta `body`, así el degradé termina EXACTAMENTE en el fondo. */
.login-transicion {
  height: clamp(150px, 22vh, 260px);
  margin-top: -1px;
  /* Arranca en el navy plano exacto del pie del hero (#0B1A48: el hero ya no
     tiene un radial más oscuro abajo, que dejaba un escalón) y llega a
     var(--bg) con paradas escalonadas (curva suave), calculadas contra el
     fondo del tema activo en vez de un tramo lineal. */
  background: linear-gradient(
    to bottom,
    #0B1A48 0%,
    color-mix(in srgb, #0B1A48 95%, var(--bg)) 12%,
    color-mix(in srgb, #0B1A48 85%, var(--bg)) 26%,
    color-mix(in srgb, #0B1A48 68%, var(--bg)) 40%,
    color-mix(in srgb, #0B1A48 48%, var(--bg)) 55%,
    color-mix(in srgb, #0B1A48 28%, var(--bg)) 70%,
    color-mix(in srgb, #0B1A48 12%, var(--bg)) 85%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* La card de login sigue montándose sobre el borde inferior del hero,
   ahora sobre la banda de transición (z-index 2 ya lo pone styles.css). */
.login-card-host {
  margin-bottom: 0;
}

/* ---------- Sección "Conocé BodegaRAC" ---------- */

.login-descubre {
  max-width: 1120px;
  margin: 72px auto 0;
  padding: 0 24px;
}

.login-descubre-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 10px;
}

.login-descubre-titulo {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.login-descubre-intro {
  max-width: 640px;
  margin: 0 auto 34px;
  font-size: 1.02rem;
}

.login-descubre-paneles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.descubre-panel {
  gap: 0;
  border-radius: 24px;
  transition:
    transform 0.35s var(--apple-ease),
    box-shadow 0.35s var(--apple-ease);
}

.descubre-panel:hover {
  transform: translateY(-4px);
}

/* Panel ancho de entrada: ocupa la fila completa con cuerpo en 2 col. */
.descubre-panel--destacado {
  grid-column: 1 / -1;
}

.descubre-panel-arte {
  aspect-ratio: 320 / 200;
  background: #eef3fb;
}

.descubre-panel--destacado .descubre-panel-arte {
  aspect-ratio: 640 / 200;
}

/* El tema base reparte el espacio con margin lateral en cada hijo; acá el
   padding lo pone el contenedor, así que los márgenes laterales se anulan.
   El orden importa: estas reglas van ANTES de las de cada hijo. */
.descubre-panel-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 14px 20px 18px;
}

.descubre-panel-cuerpo > * {
  margin-left: 0;
  margin-right: 0;
}

.descubre-panel-cuerpo--ancho {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8px 36px;
  align-items: start;
  padding: 22px 34px 30px;
}

.descubre-panel-col > * {
  margin-left: 0;
  margin-right: 0;
}

.descubre-panel-etiqueta {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 6px;
}

.descubre-panel-titulo {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.descubre-panel--destacado .descubre-panel-titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.descubre-panel-texto {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.descubre-panel-lista {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.descubre-panel-lista li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

.descubre-panel-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--highlight);
}

.descubre-panel-mas {
  margin-top: auto;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  transition: gap 0.25s var(--apple-ease);
}

.descubre-panel-mas::after {
  content: "→";
  transition: transform 0.25s var(--apple-ease);
}

.descubre-panel-mas:hover {
  text-decoration: none;
}

.descubre-panel-mas:hover::after {
  transform: translateX(4px);
}

/* Entrada suave al hacer scroll.

   La clase madre ("reveals-armados") la pone login.js SOLO si el
   navegador no pide reduced-motion y existe IntersectionObserver. Sin
   JS — o si algo falla — las reglas de abajo no se aplican nunca y los
   paneles quedan visibles: un fallo acá no puede dejar la página en
   blanco. */
.reveals-armados .descubre-panel {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--apple-ease),
    transform 0.6s var(--apple-ease),
    box-shadow 0.35s var(--apple-ease);
}

.reveals-armados .descubre-panel.reveal-entra {
  opacity: 1;
  transform: none;
}

/* El transform:none de la entrada anularía el hover; hay que restituirlo
   con más especificidad que .descubre-panel:hover. */
.reveals-armados .descubre-panel.reveal-entra:hover {
  transform: translateY(-4px);
}

/* ---------- CTA final (al fondo, después de "Conocé BodegaRAC") ---------- */

.login-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1120px;
  margin: 56px auto 64px;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 30px 60px -30px rgba(30, 58, 138, 0.55);
}

/* Brillo tenue de fondo, tipo vidrio: no cambia la paleta (sigue siendo
   el mismo degradé 1E3A8A → 2563EB de styles.css). */
.login-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 6% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 130% at 100% 100%, rgba(37, 99, 235, 0.6) 0%, rgba(37, 99, 235, 0) 60%);
  pointer-events: none;
}

.login-cta > * {
  position: relative;
  z-index: 1;
}

.login-cta-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}

/* Antes vivían como style inline en login.js; inline gana siempre sobre
   cualquier hoja de estilos, así que se movieron acá. */
.login-cta-or {
  color: #fff;
  opacity: 0.7;
}

.login-cta-link {
  color: #fff;
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .login-descubre-paneles {
    grid-template-columns: repeat(2, 1fr);
  }

  .descubre-panel-cuerpo--ancho {
    grid-template-columns: 1fr;
    padding: 20px 26px 26px;
  }

  .login-cta {
    padding: 32px 28px;
  }
}

@media (max-width: 640px) {
  .login-descubre {
    padding: 0 20px;
    margin-top: 56px;
  }

  .login-descubre-paneles {
    grid-template-columns: 1fr;
  }

  .descubre-panel-cuerpo,
  .descubre-panel-cuerpo--ancho {
    padding: 14px 20px 18px;
  }

  .login-cta {
    width: auto;
    margin: 44px 16px 56px;
    padding: 28px 22px;
    border-radius: 22px;
  }
}


/* ---------- Login en dos columnas ----------
   "Conoce BodegaRAC" a la izquierda (paneles) y la card de acceso a la derecha,
   fija mientras se baja; abajo, la franja de registro (.login-cta). La card
   sube sobre la banda de transición (como antes) y la columna izquierda
   empieza justo debajo de la banda, sobre el fondo claro, para que su texto
   oscuro no caiga sobre el degradé. */
.login-cuerpo {
  --banda: clamp(150px, 22vh, 260px);        /* alto de .login-transicion */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  column-gap: 56px;
  align-items: start;
  max-width: 1240px;
  margin: calc(28px - var(--banda)) auto 0;
  padding: 0 24px;
}
.login-cuerpo .login-card-host {
  grid-column: 2;
  grid-row: 1;
  /* La caja pegajosa mide casi una pantalla y centra la card: al bajar, el
     acceso queda en el MEDIO de la pantalla y no pegado arriba a la derecha. */
  position: sticky;
  top: 64px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: 0;
}
.login-cuerpo .login-descubre {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  margin: 0;
  padding: calc(var(--banda) - 28px + 36px) 0 0;
}
.login-cuerpo .login-descubre-eyebrow,
.login-cuerpo .login-descubre-titulo,
.login-cuerpo .login-descubre-intro {
  text-align: left;
}
.login-cuerpo .login-descubre-intro {
  max-width: 56ch;
  margin: 0 0 28px;
}
.login-cuerpo .login-descubre-paneles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.login-cuerpo .descubre-panel--destacado,
.login-cuerpo .descubre-panel--ancho {
  grid-column: 1 / -1;
}
/* panel ancho (el último): ilustración a la izquierda y texto a la derecha */
.login-cuerpo .descubre-panel--ancho {
  flex-direction: row;
  align-items: stretch;
}
.login-cuerpo .descubre-panel--ancho .descubre-panel-arte {
  flex: 0 0 44%;
  aspect-ratio: auto;
  min-height: 190px;
}
.login-cuerpo .descubre-panel--ancho .descubre-panel-cuerpo {
  flex: 1;
  min-width: 0;
  justify-content: center;
}
@media (max-width: 1000px) {
  .login-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px;
  }
  .login-cuerpo .login-card-host {
    grid-column: 1;
    position: relative;
    top: auto;
    min-height: 0;
    display: block;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
  }
  .login-cuerpo .login-descubre {
    grid-column: 1;
    grid-row: 2;
    padding-top: 40px;
  }
}
@media (max-width: 640px) {
  .login-cuerpo .login-descubre-paneles {
    grid-template-columns: minmax(0, 1fr);
  }
  .login-cuerpo .descubre-panel--ancho {
    flex-direction: column;
  }
  .login-cuerpo .descubre-panel--ancho .descubre-panel-arte {
    flex: none;
    aspect-ratio: 320 / 200;
  }
}

/* Las ilustraciones de "Conoce BodegaRAC" son ASCII animado (ascii_arte.js):
   el panel pone el fondo navy y el canvas va transparente encima. */
.descubre-panel-arte {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #1c3058 0%, rgba(12, 22, 44, 0) 62%),
    #0B1A48;
}

/* Card de acceso: cabecera ASCII (terminal) y controles a la medida de la columna. */
.login-cuerpo .login-card {
  padding: 0 34px 34px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(11, 26, 72, 0.45);
}
.login-card-arte {
  width: auto;                                /* anula el 100% de .descubre-panel-arte: ocupa todo el ancho de la card */
  height: 150px;
  margin: 0 -34px 26px;
  aspect-ratio: auto;
  border-radius: 0;
}
.login-cuerpo .login-card h2 {
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.login-cuerpo .login-card input {
  min-height: 48px;
  font-size: 1rem;
}
.login-cuerpo .login-card .btn {
  min-height: 50px;
  font-size: 1rem;
}
@media (max-width: 1000px) {
  .login-cuerpo .login-card {
    padding: 0 24px 28px;
  }
  .login-card-arte {
    margin: 0 -24px 22px;
    height: 128px;
  }
}