/* ══════════════════════════════════════════════════════════════════════════
   css/pulido.css — CAPA DE ACABADO PREMIUM
   ──────────────────────────────────────────────────────────────────────────
   QUÉ ES Y QUÉ NO ES

   Es SÓLO acabado: filos, sombras, cristal, brillo y radios. No mueve ni un
   elemento, no cambia una medida que afecte al flujo, no toca marcado y no
   añade ni quita nada. Todo lo que hay aquí son propiedades de PINTADO
   (`background`, `border-color`, `box-shadow`, `border-radius`, `backdrop-
   filter`) más algún `transition`. Ninguna regla cambia `display`, `flex`,
   `padding`, `margin`, `width`, `height` ni `position`.

   ⚠️ POR QUÉ UN FICHERO NUEVO Y NO `premium.css`
   `index.html` lleva un bloque `<style>` de 280 KB que va DESPUÉS de
   `css/index.css`, así que gana en la cascada a cualquier cosa que se escriba
   en `premium.css`. Los tres componentes que hay que pulir —el botón de Focus,
   la barra inferior y los filos del feed— están definidos precisamente ahí.
   Esta hoja se carga detrás del bloque incrustado: es el único sitio desde el
   que se puede afinar sin trocear ese bloque ni subir la especificidad a base
   de `!important`, que es lo que convierte una hoja en un campo de minas.

   ⚠️ NI UN `!important`. Si algo no gana, es que el selector está mal, y eso se
   arregla, no se fuerza.

   ──────────────────────────────────────────────────────────────────────────
   EL SISTEMA · tres conceptos, y todo lo demás sale de ellos

   1 · EL FILO. Un borde premium no es una línea: son DOS. Una sombra exterior
       oscura que despega el elemento del fondo y un brillo interior de 1 px en
       el canto superior que simula la luz cayendo sobre un canto biselado. Es
       lo que separa «un div con `border`» de «una pieza de cristal».

   2 · LA ELEVACIÓN. Dos sombras por nivel, nunca una: una AMBIENTAL muy
       difusa y de poca opacidad (la que da la sensación de volumen) y una de
       CONTACTO, corta y más densa (la que dice a qué altura está). Una sola
       sombra grande y opaca es lo que hace que un componente parezca «pegado».

   3 · EL HALO. Sólo para lo que es acento. Una sombra del color de la marca,
       muy difusa y muy poco opaca. En cuanto se ve «el glow», está mal.

   Se declaran como tokens y como clases reutilizables (`.pro-filo`,
   `.pro-superficie`, `.pro-realce`) para que lo que venga después no vuelva a
   inventarse números.
══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── EL FILO ── */
  --filo:            rgba(255,255,255,.085);   /* borde base, casi invisible  */
  --filo-hover:      rgba(255,255,255,.16);
  --filo-brillo:     rgba(255,255,255,.10);    /* canto superior iluminado    */
  --filo-sombra:     rgba(0,0,0,.55);          /* anillo exterior de contraste*/

  /* ── LA ELEVACIÓN · ambiental + contacto ── */
  --elev-1: 0 1px 2px rgba(0,0,0,.30),  0 4px 14px rgba(0,0,0,.22);
  --elev-2: 0 2px 4px rgba(0,0,0,.34),  0 10px 30px rgba(0,0,0,.30);
  --elev-3: 0 4px 8px rgba(0,0,0,.38),  0 18px 50px rgba(0,0,0,.38);

  /* ── EL HALO DE ACENTO ── */
  --halo-acento:      0 6px 22px rgba(217,119,6,.28);
  --halo-acento-alto: 0 10px 32px rgba(217,119,6,.40);

  /* ── CRISTAL ── */
  --cristal-fondo: linear-gradient(168deg,
                     rgba(255,255,255,.075) 0%,
                     rgba(255,255,255,.022) 52%,
                     rgba(255,255,255,.045) 100%);
  --cristal-blur:  blur(22px) saturate(165%);

  /* ── RADIOS · una sola escala para que todo case ── */
  --r-pro-sm: 12px;
  --r-pro:    14px;
  --r-pro-lg: 18px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLASES REUTILIZABLES · lo que pide «una solución consistente»
   Cualquier pieza futura se pule añadiendo una de estas tres, sin volver a
   escribir sombras a mano.
══════════════════════════════════════════════════════════════════════════ */

/* El filo doble. Se hace con `box-shadow` y no con `border` a propósito: un
   `border` ocupa espacio y movería el contenido, y aquí no se puede mover
   nada. Un `box-shadow` de dispersión 1 px pinta encima, sin tocar el flujo. */
.pro-filo {
  border-color: var(--filo);
  box-shadow: 0 0 0 1px var(--filo-sombra),
              inset 0 1px 0 var(--filo-brillo);
}

.pro-superficie {
  background: var(--cristal-fondo);
  backdrop-filter: var(--cristal-blur);
  -webkit-backdrop-filter: var(--cristal-blur);
  border: 1px solid var(--filo);
  border-radius: var(--r-pro);
  box-shadow: var(--elev-2), inset 0 1px 0 var(--filo-brillo);
}

.pro-realce { box-shadow: var(--elev-2), var(--halo-acento), inset 0 1px 0 rgba(255,255,255,.14); }

/* ⚠️ HAIRLINE DE VERDAD EN PANTALLAS DENSAS. En un móvil con densidad ≥ 2 un
   borde de 1 px CSS son 2 o 3 píxeles físicos y se ve grueso: es exactamente
   la diferencia entre una app «de web» y una nativa. A media pantalla el canto
   se afina sin perder definición. Se aplica sólo donde el borde es decorativo,
   nunca donde separa dos zonas pulsables. */
@media (min-resolution: 2dppx) {
  .pro-filo, .pro-superficie { border-width: .5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1 · LA TARJETA DE FOCUS
   ──────────────────────────────────────────────────────────────────────────
   Era un rectángulo plano: un color de acento al 10 % y un borde al 25 %. Pasa
   a ser una pieza de cristal ámbar con volumen — degradado muy discreto, canto
   superior iluminado, anillo de acento y un halo que sólo se intuye.

   Mismo tamaño, misma posición, mismo contenido: no se toca ni el `padding`
   ni el `flex-basis`, que son los que fijan que la barra no se mueva.
══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ EL COLOR ES EL VIOLETA/AZUL NOCHE QUE FOCUS TENÍA ANTES DE MUDARSE.
   Al pasar al hueco de la barra heredó las clases de acento (`accent-btn`) y
   con ellas el ámbar de la marca, que es el color de la Praxis y las monedas.
   Focus tiene identidad propia —es la única pantalla de concentración— y el
   morado la distingue de un vistazo. Se recuperan los tres tonos exactos del
   botón ancho original (`#0c0420 · #160838 · #080828`) y el lila de su icono
   (`#9980d4`); lo que se añade es el acabado, no un color nuevo. */
.home-top-btn.accent-btn {
  --focus-lila: #9980d4;
  background: linear-gradient(168deg, #160838 0%, #0c0420 55%, #080828 100%);
  border: 1px solid rgba(153,128,212,.34);
  border-radius: var(--r-pro-sm);
  color: #cbb8ff;
  box-shadow:
    var(--elev-1),
    0 6px 22px rgba(88,52,180,.34),                /* halo violeta            */
    inset 0 1px 0 rgba(203,184,255,.22),           /* el canto biselado       */
    inset 0 -12px 20px -12px rgba(120,80,220,.30); /* rescoldo desde abajo    */
  transition: background .22s var(--ease-out-quart, ease),
              border-color .22s var(--ease-out-quart, ease),
              box-shadow .22s var(--ease-out-quart, ease),
              transform .16s var(--ease-out-quart, ease);
}
.home-top-btn.accent-btn:hover {
  background: linear-gradient(168deg, #1d0b47 0%, #120632 55%, #0b0b33 100%);
  border-color: rgba(153,128,212,.50);
  box-shadow: var(--elev-2), 0 10px 30px rgba(88,52,180,.46),
              inset 0 1px 0 rgba(203,184,255,.30),
              inset 0 -12px 20px -12px rgba(120,80,220,.36);
}
.home-top-btn.accent-btn:active { transform: scale(.97); }
.home-top-btn.accent-btn:focus-visible {
  outline: 2px solid var(--focus-lila);
  outline-offset: 2px;
}
.home-top-btn.accent-btn [data-lucide] { color: var(--focus-lila); }

/* Su vecino de la barra conserva el mismo canto y la misma profundidad, pero
   el interior es NEGRO.

   ⚠️ [F.12.9] POR QUÉ SE VEÍA GRIS. `index.html` ya le daba `background:#0d0d0d`
   —negro—, y esta hoja se lo pisaba con `--cristal-fondo`, que es un degradado
   de BLANCO al 7,5 % sobre lo que haya detrás: sobre el fondo de la app eso es
   exactamente un gris. No era el color declarado en el marcado, era esta
   regla, que se carga después. El cristal se retira aquí (y con él un
   `backdrop-filter` que sobre una superficie opaca no pinta nada y sí cuesta
   una capa de composición).

   Los CUATRO estados quedan fijados a propósito —normal, hover, active y
   focus—: el gris volvía por `:hover`, y un estado sin declarar es cómo
   reaparece un color que se creía corregido. El color de primer plano también
   se fija en blanco en vez de heredar `--tx-2`, que en tema claro es casi
   negro y sobre este fondo dejaría el botón ilegible. */
.home-search-btn {
  background: #050506;
  border: 1px solid var(--filo);
  border-radius: var(--r-pro-sm);
  color: rgba(255,255,255,.72);
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .22s var(--ease-out-quart, ease),
              border-color .22s var(--ease-out-quart, ease),
              box-shadow .22s var(--ease-out-quart, ease),
              transform .16s var(--ease-out-quart, ease);
}
.home-search-btn [data-lucide] { color: currentColor; }
.home-search-btn:hover {
  background: #0d0d10;
  border-color: var(--filo-hover);
  color: #fff;
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.10);
}
.home-search-btn:active  { background: #030304; color: #fff; }
.home-search-btn:focus-visible {
  background: #050506; color: #fff;
  outline: 2px solid var(--focus-lila, #a78bfa); outline-offset: 2px;
}

/* La tarjeta de racha, que va entre las dos. Su fondo lo fija un `style` en
   línea (es el truco de borde por relleno de 1,5 px), así que aquí sólo se
   afinan el canto y la profundidad — y el radio, para que las tres piezas de
   la barra terminen igual. */
#streak-card-home {
  border-radius: var(--r-pro);
  box-shadow: var(--elev-1),
              0 0 0 1px rgba(255,255,255,.05),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · FILOS, BORDES Y LÍNEAS
   ──────────────────────────────────────────────────────────────────────────
   Las separaciones duras se sustituyen por DEGRADADOS que se apagan en los
   extremos. Una línea que llega al borde de la pantalla se lee como una
   costura; una que se desvanece se lee como una transición. Es el detalle que
   más distingue una interfaz cuidada, y no cuesta ni un píxel de espacio.
══════════════════════════════════════════════════════════════════════════ */

/* La barra superior del feed. `border-bottom` fuera, y en su lugar una línea
   pintada que se apaga a los lados. Se compensa con un `box-shadow` de 1 px
   para que la altura NO cambie ni un píxel al quitar el borde. */
.home-sticky {
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.055);
  position: relative;
}
.home-sticky::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.10) 78%, transparent 100%);
  pointer-events: none;
}

/* Las cartas del feed: canto doble y elevación real. El radio sube a la escala
   común para que casen con la barra y con el botón flotante. */
.pf-face {
  border: 1px solid var(--filo);
  border-radius: var(--r-pro-lg);
  background: linear-gradient(168deg,
    rgba(255,255,255,.045) 0%,
    var(--surface, #15151b) 42%,
    rgba(0,0,0,.14) 100%);
  box-shadow: var(--elev-2),
              0 0 0 1px rgba(0,0,0,.45),
              inset 0 1px 0 var(--filo-brillo);
}
@media (min-resolution: 2dppx) { .pf-face { border-width: .5px; } }

/* Las superficies de cristal que ya existían pasan por el mismo filo, para que
   no queden dos generaciones de acabado conviviendo. */
.glass-pill {
  border-color: var(--filo);
  box-shadow: var(--elev-1), inset 0 1px 0 var(--filo-brillo);
}
.coin-chip { border-radius: 999px; }

/* Los botones de icono de la cabecera (Comunidad y campana): mismo canto. */
.app-topbar .icon-btn {
  border-radius: var(--r-pro-sm);
  transition: background .2s var(--ease-out-quart, ease),
              box-shadow .2s var(--ease-out-quart, ease);
}
.app-topbar .icon-btn:hover {
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px var(--filo);
}

/* El botón flotante de subir hábito.
   ⚠️ [F.12.9] AQUÍ VOLVÍA EL NARANJA. Esta regla reescribe la sombra ENTERA de
   `premium.css` —`box-shadow` no se acumula, se sustituye—, y la suya incluía
   `--halo-acento-alto`, que es un halo ámbar. Pintar el botón de negro allí sin
   tocar esto habría dejado un círculo negro con aura naranja.
   Se conserva la elevación (es lo que aporta esta hoja) y el filo blanco sube
   al mismo valor que en `premium.css`, para que el canto no cambie de grosor
   percibido según qué hoja gane. */
.fab-subir {
  box-shadow: var(--elev-3),
              0 10px 26px rgba(0,0,0,.55),
              inset 0 0 0 1px rgba(255,255,255,.22);
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · EL BOTÓN INFERIOR CENTRAL
   ──────────────────────────────────────────────────────────────────────────
   Era el color más plano de la pantalla: un `--gray-950` sin borde y con una
   sombra genérica, en la misma barra que cuatro iconos apagados. Pasa a ser lo
   que es —la acción principal— con degradado propio, canto biselado, anillo y
   halo. Sigue midiendo lo mismo y sigue yendo a `home`.

   ⚠️ El `padding` NO se toca: es lo que fija su tamaño y la altura de la barra.
   La presencia se consigue con contraste y profundidad, no con más superficie.
══════════════════════════════════════════════════════════════════════════ */
.bnav-center-inner {
  background:
    linear-gradient(168deg, #26262c 0%, #17171b 55%, #101014 100%);
  border-radius: 999px;
  color: #fff;
  /* ⚠️ NI `font-weight` NI `letter-spacing`. Se probaron 700 y −.005em y la
     medición dio 114 px → 115 px: un píxel de más, pero un píxel es geometría,
     y esta hoja promete no tocarla. La jerarquía la dan el degradado, el canto
     y el halo, que no ocupan espacio. */
  box-shadow:
    var(--elev-2),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 16px -10px rgba(0,0,0,.6);
  transition: background .22s var(--ease-out-quart, ease),
              box-shadow .22s var(--ease-out-quart, ease),
              transform .16s var(--ease-out-quart, ease);
}
.bnav-center-inner [data-lucide] { color: var(--accent-hi, #f59e0b); }

.bnav-center-inner:hover {
  background: linear-gradient(168deg, #2e2e35 0%, #1c1c21 55%, #131317 100%);
  box-shadow: var(--elev-3),
              0 0 0 1px rgba(255,255,255,.16),
              inset 0 1px 0 rgba(255,255,255,.18);
}
.bnav-center:active .bnav-center-inner { transform: scale(.96); }

/* ACTIVO · cuando el feed es el panel a la vista, el botón es de acento. Aquí
   sí manda el ámbar de la marca, con su halo. */
.bnav-center-inner.active {
  background: linear-gradient(168deg,
    var(--accent-hi, #f59e0b) 0%, var(--accent, #d97706) 58%, #a15c05 100%);
  color: #fff;
  box-shadow:
    var(--elev-2),
    var(--halo-acento-alto),
    0 0 0 1px rgba(255,200,120,.34),
    inset 0 1px 0 rgba(255,235,190,.42),
    inset 0 -10px 18px -10px rgba(120,60,0,.55);
}
.bnav-center-inner.active [data-lucide] { color: #fff; }
.bnav-center-inner.active:hover {
  background: linear-gradient(168deg, #ffab1f 0%, var(--accent-hi, #f59e0b) 58%, #b96806 100%);
}

/* La barra que lo aloja: misma gramática de línea que la de arriba —se apaga
   en los extremos— para que las dos costuras de la pantalla sean la misma. */
.app-bottomnav { position: relative; }
.app-bottomnav::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.10) 78%, transparent 100%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA CLARO · el acabado no puede dar por hecho un fondo oscuro
   Un canto blanco al 10 % sobre blanco no existe, y un halo ámbar sobre blanco
   se ve sucio. Se invierten los dos tokens que dependen del fondo.
══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --filo:        rgba(0,0,0,.10);
  --filo-hover:  rgba(0,0,0,.18);
  --filo-brillo: rgba(255,255,255,.65);
  --filo-sombra: rgba(0,0,0,.10);
  --elev-1: 0 1px 2px rgba(0,0,0,.06),  0 4px 14px rgba(0,0,0,.05);
  --elev-2: 0 2px 4px rgba(0,0,0,.07),  0 10px 30px rgba(0,0,0,.07);
  --elev-3: 0 4px 8px rgba(0,0,0,.09),  0 18px 50px rgba(0,0,0,.10);
  --cristal-fondo: linear-gradient(168deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
}
[data-theme="light"] .pf-face {
  background: #fff;
  box-shadow: var(--elev-1), 0 0 0 1px rgba(0,0,0,.06);
}
[data-theme="light"] .bnav-center-inner {
  background: linear-gradient(168deg, #1c1c22 0%, #09090b 100%);
}

/* Quien pide menos movimiento conserva TODO el acabado: aquí no hay animación
   que aporte información, sólo transiciones de cortesía. */
@media (prefers-reduced-motion: reduce) {
  .home-top-btn.accent-btn,
  .home-search-btn,
  .bnav-center-inner,
  .app-topbar .icon-btn { transition: none; }
  .home-top-btn.accent-btn:active,
  .bnav-center:active .bnav-center-inner { transform: none; }
}