/* =====================================================================
   AveDex · estilos principales (antes, el primer <style> de index.html).
   Se carga ANTES de js/vendor/leaflet-1.9.4/leaflet.css, como iba el
   <style>: algunas reglas .leaflet-* de aquí cuentan con ese orden.
   Lo que va DESPUÉS de leaflet.css está en js/app-tras-leaflet.css.
   ===================================================================== */
/* Fraunces y Spline Sans Mono van empaquetadas en www/js/vendor/fonts/.
   Antes esto era un @import a fonts.googleapis.com: en el campo, sin
   cobertura, la app arrancaba con la tipografía del sistema y otra cara.
   El archivo local conserva los unicode-range de Google, así que el
   navegador sigue descargando solo el rango que necesita. */
/* fonts.css (Fraunces y Spline Sans Mono) se carga desde index.html, en el
   <link> que va justo antes del de este archivo: mismo sitio en la cascada
   que el @import que había aquí, sin encadenar una descarga detrás de otra. */
/* ---- Inicio v7: colores fijos (misión, revelación de Barrabás y planificador) ----
   Son los mismos valores que llevaban los estilos; se declaran aquí, una vez, para que el CSS de cada
   componente no lleve colores a pelo (§5.2). No cambian con el tema: son del dibujo, no del tema. */
:root{
  --v7-000:#000;
  --v7-070d13:#070d13;
  --v7-08121a:#08121a;
  --v7-0a1219:#0a1219;
  --v7-0b141c:#0b141c;
  --v7-0c141b:#0c141b;
  --v7-0e1c27:#0e1c27;
  --v7-101a22:#101a22;
  --v7-122434:#122434;
  --v7-14202b:#14202b;
  --v7-1a2c3b:#1a2c3b;
  --v7-1d3345:#1d3345;
  --v7-21425b:#21425b;
  --v7-2a1c00:#2a1c00;
  --v7-2a3b4d:#2a3b4d;
  --v7-3b8fd4:#3b8fd4;
  --v7-3f86d6:#3f86d6;
  --v7-3fbf8f:#3fbf8f;
  --v7-4f8fe0:#4f8fe0;
  --v7-4f9bea:#4f9bea;
  --v7-6f7f90:#6f7f90;
  --v7-7fa6cf:#7fa6cf;
  --v7-7fd0ff:#7fd0ff;
  --v7-8794a1:#8794a1;
  --v7-9aa8b5:#9aa8b5;
  --v7-aab6c0:#aab6c0;
  --v7-aebccb:#aebccb;
  --v7-b9862a:#b9862a;
  --v7-c9741a:#c9741a;
  --v7-cfe3f7:#cfe3f7;
  --v7-d9742a:#d9742a;
  --v7-d99a12:#d99a12;
  --v7-e0803a:#e0803a;
  --v7-e0a040:#e0a040;
  --v7-e1ae45:#e1ae45;
  --v7-e4dcc0:#e4dcc0;
  --v7-e8803a:#e8803a;
  --v7-e8b94a:#e8b94a;
  --v7-e8c46a:#e8c46a;
  --v7-f2b53a:#f2b53a;
  --v7-f4b82e:#f4b82e;
  --v7-f6c23e:#f6c23e;
  --v7-f6d98a:#f6d98a;
  --v7-f6efd6:#f6efd6;
  --v7-ffe9a8:#ffe9a8;
  --v7-fff:#fff;
  --v7-fff2c4:#fff2c4;
  --v7-rgba-0-0-0-4:rgba(0,0,0,.4);
  --v7-rgba-0-0-0-5:rgba(0,0,0,.5);
  --v7-rgba-0-0-0-6:rgba(0,0,0,.6);
  --v7-rgba-150-230-255-22:rgba(150,230,255,.22);
  --v7-rgba-232-185-74-25:rgba(232,185,74,.25);
  --v7-rgba-232-185-74-45:rgba(232,185,74,.45);
  --v7-rgba-232-185-74-5:rgba(232,185,74,.5);
  --v7-rgba-232-185-74-6:rgba(232,185,74,.6);
  --v7-rgba-232-196-106-5:rgba(232,196,106,.5);
  --v7-rgba-255-214-120-22:rgba(255,214,120,.22);
  --v7-rgba-255-220-150-28:rgba(255,220,150,.28);
  --v7-rgba-255-226-150-28:rgba(255,226,150,.28);
  --v7-rgba-255-236-170-22:rgba(255,236,170,.22);
  --v7-rgba-255-236-190-7:rgba(255,236,190,.7);
  --v7-rgba-255-236-190-82:rgba(255,236,190,.82);
  --v7-rgba-255-255-255-0:rgba(255,255,255,.0);
  --v7-rgba-255-255-255-08:rgba(255,255,255,.08);
  --v7-rgba-255-255-255-1:rgba(255,255,255,.1);
  --v7-rgba-255-255-255-12:rgba(255,255,255,.12);
  --v7-rgba-255-255-255-16:rgba(255,255,255,.16);
  --v7-rgba-255-255-255-18:rgba(255,255,255,.18);
  --v7-rgba-255-255-255-2:rgba(255,255,255,.2);
  --v7-rgba-255-255-255-6:rgba(255,255,255,.6);
  --v7-rgba-255-255-255-7:rgba(255,255,255,.7);
  --v7-rgba-255-255-255-88:rgba(255,255,255,.88);
}

:root{
  /* Zonas seguras del móvil (muesca/barra de estado arriba, barra de gestos
     abajo). Se declaran una vez aquí para poder usarlas con var() en vez de
     repetir env() por todo el fichero -- y para poder forzarlas en pruebas.
     El viewport lleva viewport-fit=cover, que es lo que hace que env() valga
     algo en el móvil. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  /* ================================================================
     TOKENS DEL TEMA — un solo :root, organizado por familias para
     que las próximas mejoras EDITEN la definición existente en vez
     de añadir otra al final. Familias: color de fondo, detalle/
     acento, estados, tipografía, sombras, radios, tamaños de letra,
     interlineado, cuerpo de texto, tintas sobre acento, acentos
     semánticos, color sobre panel, relleno primario, dimensión de
     layout y logros.
     ================================================================ */
  --ink:#121C19; --panel:#1A2622; --panel2:#22332C; --line:#33473E;
  --teal:#2EB6A4; --teal-deep:#1F8E80; --gold:#D6A95A; --text:#DEE7E0; --muted:#8D9E94;
  --bg1:#1C2A25; --bg2:#121C19;
  --err-bg:#3a2020; --err-border:#6b3a3a; --err-text:#e8a3a3;
  /* Atlas · Buscar por especie (26/10/2026): rampa de un solo tono para los
     sitios por días con registros (tramos 2-4, 5-19 y 20+; el 1 es un anillo
     hueco, sin token). color-mix con --teal/--panel/--text en vez de hex fijo:
     se adapta sola a los 8 acentos y a claro/oscuro, como pide CLAUDE.md §5.2. */
  --sitio-2:color-mix(in srgb,var(--teal) 55%,var(--panel)); --sitio-3:var(--teal);
  --sitio-4:color-mix(in srgb,var(--teal) 55%,var(--text));
  /* Atlas: sombra de contraste sobre fondos de foto/satélite (drop-shadow y
     text-shadow, no box-shadow -- por eso no vale --sh-1..4) y las miniaturas
     de Satélite/Relieve del selector de fondo: dibujadas con CSS porque no
     hay imagen real que cargar, iguales en claro y oscuro a propósito (quieren
     parecer una foto, no adaptarse al tema). */
  --atl-sombra:rgba(0,0,0,.4);
  --atl-mini-sat-1:#6f7d4a; --atl-mini-sat-2:#1f3d4f; --atl-mini-sat-3:#55693f; --atl-mini-sat-4:#7b6a4a;
  --atl-mini-rel-1:#cfe0ea; --atl-mini-rel-2:#efe9d6; --atl-mini-rel-tex:rgba(150,105,60,.55);
  /* 07/10/2026: iguales en los dos temas. Texto sobre una foto (la marca en
     la portada del Álbum), velo de la cabecera sobre esa foto y velo del
     menú de tu foto. */
  --sobre-foto:#fff; --velo-foto:rgba(0,0,0,.35); --velo-menu:rgba(6,11,9,.45);
  /* Libro de parecidas (lbp): el magenta de los números que marcan las láminas. */
  --lbp-marca:#d6336c;
  --velo-pie:rgba(0,0,0,.55);   /* pie oscuro de una foto con texto encima (cromos del Álbum) */
  /* 07/10/2026, Liga: cada juego con su color, igual en los dos temas
     (tarjetas de «Juegos de hoy»), y los del dibujo del Birdle y del Trivial. */
  --j-birdle:#2FA86F; --j-birdle-2:#1E7F52; --j-trivial:#7C5CE0; --j-trivial-2:#5A3DB8; --j-foto:#E3923A; --j-foto-2:#C26C1C;
  --j-acierto:#3FD38A; --j-casi:#F2C14E; --j-casi-tinta:#3A2A00; --j-boton-tinta:#17221D; --j-sombra:0 4px 10px rgba(0,0,0,.18);
  --display:'Fraunces',Georgia,serif; --mono:'Spline Sans Mono',ui-monospace,monospace;

  /* Escala de elevación (sombras) y de esquinas (radios). Regla de uso:
     toda sombra y todo radio nuevos salen de esta escala; si hace falta un
     valor que no está, primero se discute si el nivel debe existir. Cuanto
     más "por encima" está un elemento en la jerarquía, mayor su sombra;
     un elemento no sube de nivel por decoración. */
  --sh-1:0 1px 2px rgba(0,0,0,.20);                 /* apoyado: chips, píldoras, badges */
  --sh-2:0 4px 12px -6px rgba(0,0,0,.45);           /* tarjeta en reposo */
  --sh-3:0 10px 26px -14px rgba(0,0,0,.55);         /* tarjeta elevada, popup, control flotante */
  --sh-4:0 18px 38px -18px rgba(0,0,0,.65);         /* hoja inferior, panel sobre el mapa */
  --sh-5:0 30px 70px -28px rgba(0,0,0,.75);         /* modal, visor a pantalla completa */
  --sh-arriba:0 -10px 26px -14px rgba(0,0,0,.6);    /* hoja pegada abajo (sombra hacia arriba) */
  --r-sm:8px;    /* elementos pequeños: badges, chips, celdas de icono */
  --r-md:12px;   /* botones, campos, miniaturas */
  --r-lg:16px;   /* tarjetas */
  --r-xl:22px;   /* tarjetas grandes, hojas, modales */
  --r-full:99px; /* píldoras */

  /* ---- Movimiento: curvas y duraciones ----
     Guía de uso: --dur-0 para el toque (:active, pulsaciones), --dur-1 para
     hover y foco, --dur-2 para abrir y cerrar, --dur-3 para entradas de
     contenido. --ease para todo; --ease-pop SOLO para lo que aparece o
     celebra (un distintivo que surge, una tarjeta que se revela, el pin del
     mapa al seleccionarse). Nunca en un hover, en un cambio de color ni en
     un valor de progreso: --ease-pop sobrepasa un 9,8% y una barra que pasa
     del 100% y vuelve se ve rota.
     NORMA: ninguna duración ni curva nueva fuera de estos tokens; si hace
     falta un ritmo distinto, primero se decide si el sistema necesita un
     paso más. Los bucles (animation ... infinite) quedan fuera del sistema:
     su velocidad constante o simétrica es justo lo que los hace ambientales. */
  --ease:cubic-bezier(.2,.8,.2,1);          /* entra rápido y frena suave */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);  /* con rebote, solo para aparecer */
  --dur-0:.12s;   /* toque */
  --dur-1:.18s;   /* hover, foco, cambio de color */
  --dur-2:.28s;   /* abrir y cerrar, deslizar, plegar */
  --dur-3:.45s;   /* entrada de contenido y celebraciones */

  /* Escala de capas (z-index). NORMA: lo que RESPONDE a una acción va siempre
     por encima de lo que la originó. Si al borrar un comentario el aviso de
     "¿seguro?" sale por debajo del panel de comentarios, el usuario tiene que
     cerrar aquello sobre lo que estaba decidiendo: eso no es un detalle
     visual, rompe la acción. Por eso los tramos altos están reservados y
     ordenados por quién puede abrir a quién:
       - hoja      : hojas modales (.overlay), se abren sobre cualquier pantalla
       - visor     : visores a pantalla completa, se abren DESDE una hoja
       - selector  : selector de ubicación, se abre DESDE el visor de fotos
       - dialogo   : confirmaciones y avisos; pueden salir desde cualquiera
       - aviso     : el toast, lo último que se pinta, nunca tapado
     Cualquier capa nueva sale de esta escala; si de verdad hace falta un
     tramo más, se añade aquí y se documenta a quién debe tapar.

     OJO -- caso confirmado (PROMPT-URGENTE-RECUPERACION-E-IMPORTACION.md,
     Fase 0, "pila de ventanas"): Ajustes (#ajustesOverlay) usa la clase
     .tarot-overlay, que vive en el tramo "dialogo" (6000), no en "hoja"
     (5000). Es una decisión de diseño ya tomada (Ajustes se trata como un
     diálogo grande, no como una hoja más), pero tiene una consecuencia
     obligatoria: CUALQUIER pantalla que se abra DESDE Ajustes (Importar/
     Exportar, Datos, Premium, Diagnóstico, herramientas de colección...)
     tiene que usar también la familia .tarot-overlay/.tarot-overlay.top
     ("dialogo"/"dialogo-top"), NUNCA .overlay/.overlay.top ("hoja"/
     "hoja-top") -- si no, esa pantalla queda arquitectónicamente por DEBAJO
     de Ajustes (5100 < 6000) aunque se haya creado después y esté más
     arriba en el DOM. Esto es justo lo que le pasaba a Importar de eBird
     (abrirImportarEbird): usaba .overlay.top y se abría oculta detrás de
     Ajustes. Antes de dar por buena una pantalla nueva lanzada desde
     Ajustes, comprobar que usa .tarot-overlay.top. */
  --z-hoja:5000;
  --z-hoja-top:5100;
  --z-visor:5300;
  --z-selector:5500;
  --z-dialogo:6000;
  --z-dialogo-top:6100;
  --z-dialogo-modal:6300; /* confirmación, contraseña, denuncia, invitación a sesión: por encima de CUALQUIER hoja */
  --z-aviso:6500;

  /* Escala tipográfica. Regla de uso: todo tamaño de letra nuevo sale de esta
     escala; el mínimo para texto legible es --fs-1, y --fs-0 queda solo para
     etiquetas en MAYÚSCULAS con letter-spacing y contadores de 1-2 cifras. */
  --fs-0:10px;  /* etiquetas en MAYÚSCULAS con letter-spacing, contadores */
  --fs-1:11px;  /* mínimo para texto que se lee: metadatos, subtítulos cortos */
  --fs-2:13px;  /* secundario: descripciones, listas */
  --fs-3:15px;  /* cuerpo principal */
  --fs-4:17px;  /* título de tarjeta */
  --fs-5:20px;  /* título de sección */
  --fs-6:24px;  /* título de pantalla */
  --fs-7:30px;  /* cifra o titular protagonista */

  /* Interlineado para texto que puede ocupar más de una línea. */
  --lh-tight:1.25;  /* títulos en var(--display) */
  --lh:1.5;         /* texto corrido y descripciones */

  /* ---- Cuerpo de texto ----
     El mismo stack que ya se repetía literal en media docena de reglas (body,
     .medal .mdesc, .ruta-mision, .gal-empty...). Con token, las tarjetas de
     inicio/juegos/logros lo comparten en vez de descargar una fuente aparte. */
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- Texto e iconos SOBRE un relleno de acento ----
     En los temas oscuros el acento es siempre un tono vivo y claro, así que
     encima va tinta casi negra. Los temas claros lo invierten (más abajo):
     ahí --teal se vuelve oscuro y lo que va encima debe ser blanco. */
  --on-teal:#06231F;
  --on-amber:#3A2A0E;
  /* --gold es claro en los 12 fondos (y con acento "dorado" se vuelve turquesa,
     también claro), así que su tinta es la misma en tema claro y oscuro: no
     necesita override. */
  --on-gold:#3A2A0E;
  /* Plata: material de recompensa hermano de --gold, para el repertorio de
     poses. Sobre panel claro el plata vivo se queda en 1.5:1 y el marcador
     desaparece, así que allí baja a un acero legible (ver bloque claro). */
  --plata:#CFD3DA;

  /* ---- Acentos semánticos de los iconos ----
     Fijos por significado (foto/vista/duda), no por el acento elegido en
     Ajustes, pero con dos versiones: viva sobre paneles oscuros y apagada
     sobre paneles claros, que si no se deslavan sobre blanco. */
  --acc-amber:#E08C28; --acc-sky:#4D9BF0; --acc-lilac:#9B6DD6;

  /* ---- Estados: confirmado y atención ----
     REGLA DE USO: ningún color hex nuevo fuera del :root y de los bloques de
     tema. Si un color no existe como token, primero se decide qué SIGNIFICA y
     se le da nombre por su papel, no por su tono (--ok, no --verde), para que
     siga teniendo sentido cuando el usuario cambia el acento a rojo o a lila.
     Cuidado: --ok y --warn son el color de la MARCA (borde, tinte de fondo).
     Como TEXTO hay que mezclarlos hacia --text —igual que --teal-on-panel—,
     porque sobre su propio tinte pálido no llegan ni a 2.6:1. */
  --ok:#3FBF6F;    /* capturado, confirmado, completado */
  --warn:#E8B93D;  /* observado, pendiente, "lo tienes cerca" */
  /* Rojo de aviso de los distintivos de recompensa. No lleva versión clara: es
     un rojo saturado que aguanta sobre panel oscuro y sobre blanco (3.5 y 3.9:1)
     y lleva texto blanco encima (4.0:1). */
  --alert:#E0473E;

  /* El acento usado como TEXTO sobre un panel. Sobre panel oscuro vale el tono
     vivo tal cual; sobre panel claro hay que bajar al profundo (ver bloque
     claro), porque --teal ahí es un tono medio pensado para leerse pequeño. */
  --teal-on-panel:var(--teal);

  /* Relleno de la tarjeta primaria del inicio. El extremo profundo se suaviza
     mezclándolo con --teal: a plena profundidad, la tinta --on-teal perdía
     contraste en la esquina inferior con los acentos más apagados (morado
     3.60:1, azul 3.71:1); así ningún extremo baja de 4.1:1. */
  --grad-primary:linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal-deep) 70%, var(--teal)));

  /* ---- Dimensión de layout (barra inferior) ---- */
  --bottom-nav-h:78px;

  /* ---- Logros: colores por categoría ----
     Base sobre tema oscuro; el bloque claro (más abajo) apaga los
     tonos para que no se deslaven sobre fondo blanco. */
  --ach-coleccion:var(--teal-on-panel); --ach-habitats:#5FC183; --ach-familias:var(--acc-lilac);
  /* Maestría: sección nueva de logros de "completar" (ver ACH_SEC_ORDER). */
  --ach-maestria:#B8862E;
  /* Metales de las medallas de logro. El peldaño de cada logro elige uno;
     los degradados que los usan se declaran una sola vez por pantalla en
     ACH_DEFS, no dentro de cada medalla. */
  --met-bronce-1:#D98E52; --met-bronce-2:#8A4A22;
  --met-plata-1:#C2CEDA;  --met-plata-2:#6E7F90;
  --met-oro-1:#F0CE72;    --met-oro-2:#B8862E;
  --met-diam-1:#6FD4D6;   --met-diam-2:#2E7F9B;
  --met-prisma-1:#C79BF0; --met-prisma-2:#4D9BF0;
  --ach-rarezas:var(--acc-amber); --ach-campo:#E09257; --ach-fotografia:var(--acc-sky);
  --ach-viajes:#5A9BD6; --ach-minijuegos:#D976AC; --ach-rutas:#6FB8AA; --ach-competicion:#E4789F;

  /* ---- Foco visible (anillo de navegación por teclado/mando) ----
     Un único anillo en toda la app. Sale del token del acento, así que
     cambia de color con el tema; en los temas claros se sobrescribe con
     --teal-deep (más abajo) para garantizar contraste sobre blanco. */
  --focus-color:var(--teal);
  --focus-w:2px;
  --focus-offset:2px;
}
/* ---- Color de fondo (oscuro/claro, neutros) ---- */
html[data-bg="azul"]{
  --ink:#101826; --panel:#19243A; --panel2:#202E48; --line:#2E4060; --bg1:#192640; --bg2:#101826;
}
html[data-bg="morado"]{
  --ink:#1A1426; --panel:#241B3A; --panel2:#2E2148; --line:#42305E; --bg1:#241A38; --bg2:#1A1426;
}
html[data-bg="rojo"]{
  --ink:#1F1414; --panel:#2A1B1B; --panel2:#352121; --line:#4F2E2E; --bg1:#291919; --bg2:#1F1414;
}
/* --muted en los temas CLAROS (21/09/2026).
   Los valores anteriores (#7A8076 y compañía) daban 3,2-4,1:1 sobre el panel
   blanco y bajaban a 2,8-3,4 sobre --panel2: por debajo del minimo legible
   (4,5). Y --muted esta en 448 reglas, 125 de ellas ademas en mono de 11px,
   que es justo lo peor a pleno sol. Los nuevos conservan el tono y la
   saturacion de cada tema -- solo bajan luminosidad -- y llegan a >=4,5:1
   contra --panel2, que es el peor fondo, quedando en ~5,4 contra --panel:
   el mismo nivel que el tema oscuro por defecto (5,54). Los oscuros no se
   tocan. Si se cambia un --panel o un --panel2 claro, hay que recalcular. */
html[data-bg="claro"]{
  --ink:#F4F1EA; --panel:#FFFFFF; --panel2:#F0ECE3; --line:#DCD6C9; --text:#2A2D2A; --muted:#676C64;
  --bg1:#FBF9F4; --bg2:#EFEAE0;
}
html[data-bg="claro-azul"]{
  --ink:#F0F4F8; --panel:#FFFFFF; --panel2:#E8EEF5; --line:#D2DEEA; --text:#22303D; --muted:#5E6D7D;
  --bg1:#F6F9FC; --bg2:#E6EEF6;
}
html[data-bg="claro-rosa"]{
  --ink:#FAF1F4; --panel:#FFFFFF; --panel2:#F7E9EE; --line:#EBD3DC; --text:#352830; --muted:#82626F;
  --bg1:#FDF6F8; --bg2:#F6E8EE;
}
html[data-bg="verde"]{
  --ink:#0F1F16; --panel:#16261D; --panel2:#1C3325; --line:#2C4A38; --bg1:#152620; --bg2:#0F1F16;
}
html[data-bg="gris"]{
  --ink:#16191C; --panel:#1F2429; --panel2:#272D33; --line:#3A4148; --bg1:#1C2126; --bg2:#16191C;
}
html[data-bg="claro-verde"]{
  --ink:#EEF6F0; --panel:#FFFFFF; --panel2:#E6F2E9; --line:#CFE6D6; --text:#243329; --muted:#5C7167;
  --bg1:#F6FCF8; --bg2:#E8F4EC;
}
html[data-bg="claro-crema"]{
  --ink:#FBF6E8; --panel:#FFFFFF; --panel2:#F7EFD9; --line:#EBDCB8; --text:#3A331F; --muted:#786C52;
  --bg1:#FDFAEF; --bg2:#F6EEDB;
}
html[data-bg="claro-lila"]{
  --ink:#F5F0FA; --panel:#FFFFFF; --panel2:#EFE6F7; --line:#DCCBEC; --text:#2E2638; --muted:#726385;
  --bg1:#FAF6FD; --bg2:#EFE5F7;
}
html[data-bg="claro-gris"]{
  --ink:#F2F3F5; --panel:#FFFFFF; --panel2:#E9EBEF; --line:#D6DAE1; --text:#262B33; --muted:#616B79;
  --bg1:#F8F9FB; --bg2:#EBEDF1;
}

/* ---- Color de detalle (acentos: marcos, texto destacado, barras) ---- */
html[data-accent="azul"]{ --teal:#4D9BF0; --teal-deep:#3478CC; --gold:#D6A95A; }
html[data-accent="morado"]{ --teal:#B07CF0; --teal-deep:#8E5BD1; --gold:#E8B86D; }
html[data-accent="rojo"]{ --teal:#F0795C; --teal-deep:#D1583B; --gold:#E8C46D; }
html[data-accent="rosa"]{ --teal:#F07CB4; --teal-deep:#D15A95; --gold:#E8C46D; }
html[data-accent="naranja"]{ --teal:#F0A24D; --teal-deep:#D1822F; --gold:#F0CB6D; }
html[data-accent="dorado"]{ --teal:#D6A95A; --teal-deep:#B98C3E; --gold:#2EB6A4; }
html[data-accent="turquesa"]{ --teal:#22B8CF; --teal-deep:#1A8FA3; --gold:#D6A95A; }
html[data-accent="lima"]{ --teal:#8BC34A; --teal-deep:#6B9E37; --gold:#E8C46D; }

/* ---- Compensación de acentos sobre fondo claro (mejor contraste) ---- */
html[data-bg^="claro"][data-accent="azul"]{ --teal:#3478CC; --teal-deep:#2A60A6; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="morado"]{ --teal:#8E5BD1; --teal-deep:#7244B0; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="rojo"]{ --teal:#D1583B; --teal-deep:#B0432A; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="rosa"]{ --teal:#D1588F; --teal-deep:#B23F73; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="naranja"]{ --teal:#D1822F; --teal-deep:#B06A20; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="turquesa"]{ --teal:#1A8FA3; --teal-deep:#15707F; --gold:#C9963E; }
html[data-bg^="claro"][data-accent="lima"]{ --teal:#6B9E37; --teal-deep:#557D2C; --gold:#C9963E; }
/* "dorado" era el único acento sin compensación para fondo claro: se quedaba en
   #D6A95A, que sobre blanco da 2.17:1 y no se lee. Sigue el mismo patrón que
   los otros siete (el --teal claro parte del --teal-deep oscuro) y baja un paso
   más, hasta 3.79:1, en línea con naranja y lima. No toca --gold: con este
   acento --gold es el turquesa intercambiado y ese canje se mantiene. */
html[data-bg^="claro"][data-accent="dorado"]{ --teal:#A67C2E; --teal-deep:#8B6428; }
html[data-bg^="claro"]:not([data-accent]){ --teal:#1F8E80; --teal-deep:#176E63; --gold:#B9893C; }

/* ---- Mensajes de error sobre fondo claro ---- */
html[data-bg^="claro"]{ --err-bg:#FBEAEA; --err-border:#F0C2C2; --err-text:#B23A3A; }

/* ---- Elevación en temas claros: más tenue y con tinte frío (teal tinta),
        para que la sombra lea como elevación y no como mancha negra ---- */
html[data-bg^="claro"]{
  --sh-1:0 1px 2px rgba(16,51,58,.06);
  --sh-2:0 2px 8px rgba(16,51,58,.08);
  --sh-3:0 8px 24px rgba(16,51,58,.10);
  --sh-4:0 16px 36px -12px rgba(16,51,58,.14);
  --sh-5:0 28px 60px -20px rgba(16,51,58,.18);
  --sh-arriba:0 -10px 26px -14px rgba(16,51,58,.28);
}

/* ---- Tinta sobre acento y acentos de icono en temas claros ----
   Aquí --panel es blanco y --teal se vuelve un tono medio/oscuro (#1F8E80 por
   defecto, #3478CC con acento azul...), así que todo se invierte respecto al
   bloque oscuro: encima del acento va blanco, y los acentos de icono bajan a
   versiones apagadas que aguanten sobre blanco. --acc-amber se oscurece hasta
   #9C540F porque el ámbar vivo no llega a 4.5:1 ni en el distintivo de 9.5px
   ni sobre su propio tinte. */
html[data-bg^="claro"]{
  --on-teal:#FFFFFF;
  --on-amber:#FFFFFF;
  --acc-amber:#9C540F; --acc-sky:#2F6FB5; --acc-lilac:#6C5AA6;
  --plata:#7E8899;   /* el plata vivo daba 1.5:1 sobre blanco; este, 3.6:1 */
  /* Sobre panel blanco los dos estados se apagan: el verde vivo daba 2.36:1 y
     el ámbar vivo 1.84:1 como borde de un marcador, por debajo del 3:1 que
     pide un elemento de interfaz. Estos suben a 3.42 y 3.81. */
  --ok:#2E9E57;
  --warn:#A67C10;
  /* El acento como texto sobre panel blanco: --teal-deep aún se queda corto con
     los acentos cálidos (naranja 3.67:1 sobre su propio tinte), así que se lleva
     un tercio hacia --text. Mantiene el tono y sube a 5.4:1 el peor. */
  --teal-on-panel:color-mix(in srgb, var(--teal-deep) 68%, var(--text));
  /* Degradado invertido: el texto blanco arranca sobre el extremo profundo, y
     el otro extremo se oscurece hacia --text. Sin invertirlo, el blanco caía a
     3.02:1 con acento naranja y 3.20:1 con lima. */
  /* El arranque se lleva un 6% hacia --text: a plena luz, el acento naranja
     dejaba el título blanco en 4.26:1, justo por debajo del mínimo. Con este
     retoque, imperceptible a la vista, ningún acento baja de 4.58:1. */
  --grad-primary:linear-gradient(135deg, color-mix(in srgb, var(--teal-deep) 94%, var(--text)), color-mix(in srgb, var(--teal-deep) 74%, var(--text)));

  /* El anillo de foco en claro: --teal es un tono medio pensado para leerse
     pequeño y con acentos cálidos (dorado→turquesa, naranja, rosa) no llega
     a 3:1 sobre blanco. --teal-deep sí, en todos los acentos. */
  --focus-color:var(--teal-deep);
}




.topbar{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.topbar-btn{flex:0 0 auto; width:42px; height:42px; padding:0; border-radius:99px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:var(--fs-5); display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; overflow:hidden; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);}
.topbar-btn:active{transform:scale(.88); border-color:var(--teal);}
.topbar-btn:hover{border-color:var(--teal);}
#topbarAv{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
#topbarAv img{width:100%; height:100%; object-fit:cover; border-radius:99px;}
.topbar-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-6); margin:0; letter-spacing:-.01em; text-align:center; flex:1 1 auto; min-width:0; overflow:hidden; background:none; border:none; padding:0; cursor:pointer; touch-action:manipulation; display:inline-flex; align-items:baseline; justify-content:center; transition:transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);}
.topbar-title:active{transform:scale(.94); opacity:.8;}
.logo-ave{color:var(--text);}
.logo-dex{color:var(--teal); margin-left:1px;}
.topbar-right{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
/* Icono de Comunidad/Amigos, a la izquierda de Ajustes -- mismo tamaño que
   el resto de botones de la topbar (perfil/ajustes), no uno más chico:
   position:relative + overflow:visible solo aquí (no en .topbar-btn en
   general, que necesita overflow:hidden para recortar la foto de perfil en
   círculo) para que la insignia de notificaciones no se recorte. */
#btnComunidadTop{position:relative; overflow:visible;}
.topbar-btn-badge{position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--ink);}
.bar{height:8px; background:var(--panel2); border:1px solid var(--line); border-radius:99px; overflow:hidden; margin-top:14px; position:relative;}
.bar > span{display:block; position:absolute; left:0; top:0; height:100%; width:0; transition:width var(--dur-3) var(--ease);}

#barVistas{background:var(--teal); opacity:.35;}
.bartxt{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin:8px 0 0;}
.bartxt strong{color:var(--gold);}
.pokedex-progress{margin-top:4px;}
.pokedex-progress .bar{margin-top:8px;}
.pokedex-progress-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.pokedex-progress-count{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.pokedex-progress-count strong{color:var(--gold); font-size:var(--fs-3);}
.pokedex-progress-pct{font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--teal);}
.tools{margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; touch-action:manipulation;}
.filtros-btn{position:relative; flex:0 0 auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 16px; color:var(--text); font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer; white-space:nowrap; touch-action:manipulation; transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.filtros-btn:hover{border-color:var(--teal);}
/* Con filtros puestos, el botón entero se tiñe: el globito de la esquina solo
   dice CUÁNTOS, y de un vistazo lo que importa es saber que la lista que estás
   mirando está filtrada. */
.filtros-btn.con-filtros{border-color:var(--teal); color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, var(--panel));}
/* En móvil, solo el icono. El texto "Filtros" se comía el ancho del buscador,
   que acababa mostrando "Bus…". Los dos botones de la barra quedan cuadrados de
   44px, que es el objetivo táctil mínimo recomendado y además los alinea. */
@media (max-width:560px){
  .cv2-head-row .filtros-btn{width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center;}
  .cv2-head-row .filtros-btn svg{width:20px; height:20px; vertical-align:0;}
  .filtros-btn-txt{display:none;}
  /* El buscador baja a su propia línea.
     Con contador + segmento + dos botones, en una pantalla de 393 px al
     buscador le quedaban 77 px y el placeholder se leía "Bus…". Quitar el
     texto del botón de filtros ayudaba, pero no cabía de ninguna manera: son
     demasiadas cosas para una sola fila. Abajo ocupa el ancho entero.
     El contador crece para empujar los dos botones al borde derecho, que es
     donde el pulgar los espera. */
  .cv2-head-row{flex-wrap:wrap; row-gap:9px;}
  .cv2-head-row .cv2-head-counter{flex:1 1 auto;}
  .cv2-head-row .search-wrap{order:5; flex:1 0 100%;}
}
.filtros-badge{position:absolute; top:-7px; right:-7px; background:var(--teal); color:var(--on-teal); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; border-radius:99px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center;}
.size-picker{position:relative;}
.size-picker-menu{display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:6px; box-shadow:var(--sh-2); flex-direction:column; gap:4px; min-width:140px;}
.size-picker-menu.open{display:flex;}
.size-picker-menu button{display:flex; align-items:center; gap:8px; background:transparent; border:1px solid transparent; border-radius:var(--r-sm); padding:8px 10px; color:var(--text); font-family:var(--display); font-size:var(--fs-2); cursor:pointer; text-align:left;}
.size-picker-menu button:hover{border-color:var(--line);}
.size-picker-menu button.active{background:var(--teal); color:var(--on-teal); font-weight:600;}
.filtros-panel-actions{display:flex; gap:8px; margin-top:26px;}
.filtros-panel-actions .add{flex:2;}
.filtros-panel-actions .toggle-chip{flex:1; text-align:center;}
.search-wrap{position:relative; flex:1 1 180px; min-width:0; display:flex;}
.search{flex:1 1 180px; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 34px 11px 14px; color:var(--text); font-size:var(--fs-3); width:100%;}
.search::placeholder{color:var(--muted);}
.search:focus{border-color:transparent;}
.search-clear{display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:99px; background:none; border:none; color:var(--muted); font-size:var(--fs-3); line-height:1; cursor:pointer; align-items:center; justify-content:center;}
.search-clear.show{display:flex;}
.search-counter{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:6px;}
/* ==== PULIDO COLECCIÓN: Mejora 4 -- chips de filtros activos ==== */
.filtros-chips-row{display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:2px; scrollbar-width:none;}
.filtros-chips-row::-webkit-scrollbar{display:none;}

.filtro-chip button{background:none; border:none; color:inherit; font-size:var(--fs-3); line-height:1; cursor:pointer; padding:2px 4px;}
.filtro-chip-clear{color:var(--muted); border-color:var(--line); padding:5px 11px; cursor:pointer;}
.poke-empty-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px;}
.poke-empty-actions .tarot-btn-sec{width:auto; padding:9px 16px;}
.poke-completadas-ocultas{text-align:center; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin:14px 0 4px;}
.poke-completadas-ocultas button{background:none; border:none; color:var(--teal); font-family:inherit; font-size:inherit; text-decoration:underline; cursor:pointer; padding:0;}
.poke-badges-leyenda{line-height:var(--lh);display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:14px 0 4px; text-align:center; justify-content:center;}
.poke-badges-leyenda span svg{line-height:var(--lh);vertical-align:-0.3em;}
/* ==== PULIDO COLECCIÓN: Mejora 2 -- carril A-Z ==== */
.az-rail{position:fixed; top:50%; right:0; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; z-index:35; padding:4px 8px 4px 4px; touch-action:none;}
.az-rail-letter{font-family:var(--mono); font-size:9px; color:var(--muted); line-height:14px; width:16px; padding:1px 6px; text-align:center; user-select:none;}
.az-rail-letter.on{color:var(--teal); font-weight:700;}
.az-rail-bubble{line-height:var(--lh-tight);position:fixed; right:34px; top:0; transform:translateY(-50%); background:var(--panel); border:1px solid var(--line); color:var(--teal); font-family:var(--display); font-weight:700; font-size:var(--fs-6); width:50px; height:50px; border-radius:50%; display:none; align-items:center; justify-content:center; box-shadow:var(--sh-3); z-index:36; pointer-events:none;}
.az-rail-bubble.show{display:flex;}
.album-btn{position:relative; isolation:isolate; display:flex; align-items:center; gap:13px; width:100%; margin-top:10px; padding:13px 16px; border-radius:var(--r-lg); border:1px solid rgba(214,169,90,.35); background:linear-gradient(135deg, var(--panel2), var(--panel) 75%); color:var(--text); cursor:pointer; touch-action:manipulation; box-shadow:0 12px 26px -16px rgba(214,169,90,.4); transition:transform var(--dur-1), box-shadow var(--dur-1);}
.album-btn::before{content:''; position:absolute; inset:-10px; z-index:-1; border-radius:var(--r-xl); background:conic-gradient(from 120deg, var(--gold), var(--teal), var(--gold)); filter:blur(16px); opacity:.3; animation:homePrimaryGlow 6s ease-in-out infinite;}
.album-btn:hover{transform:translateY(-1px); box-shadow:0 16px 32px -16px rgba(214,169,90,.5);}
.album-btn-icon{flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:var(--fs-5); color:var(--gold);}
.album-btn-label{flex:1; min-width:0; text-align:left; font-family:var(--display); font-weight:600; font-size:var(--fs-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.album-btn-count{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:5px 11px; white-space:nowrap;}

.seg{display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:3px; gap:2px; touch-action:manipulation}

.head{touch-action:manipulation; max-width:760px; margin:0 auto; padding:calc(24px + var(--sat)) 18px 6px}
.seg button{background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:7px 11px; border-radius:var(--r-sm); cursor:pointer; touch-action:manipulation}
.seg button.on{background:var(--teal); color:var(--on-teal);}
#segAves{display:none; flex-wrap:wrap; width:100%; margin-top:8px; gap:2px;}
#segAves.show{display:inline-flex;}
#segFeno{flex-wrap:wrap; margin-top:8px; gap:2px;}
#segHabitat{flex-wrap:wrap; margin-top:8px; gap:2px;}
#segRareza{flex-wrap:wrap; margin-top:8px; gap:2px;}
#segRarezaOrden{flex-wrap:wrap; margin-top:8px; gap:2px;}
#segCaptura{flex-wrap:wrap; margin-top:8px; gap:2px;}
#segCapturaOrden{flex-wrap:wrap; margin-top:8px; gap:2px;}
.sp-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.toggle-chip{background:transparent; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:7px 12px; border-radius:99px; cursor:pointer;}
.toggle-chip.on{border-color:var(--gold); color:var(--gold); background:rgba(214,169,90,.12);}
.row-badges{display:inline-flex; gap:4px; margin-left:6px;}
.row-badge{font-size:var(--fs-2);}
.io{display:flex; gap:8px; margin-top:10px;}
.io button{background:transparent; border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:var(--fs-2); padding:8px 12px; border-radius:var(--r-sm); cursor:pointer;}
.io button:hover{border-color:var(--teal);}
.note{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:8px 0 0;}

.muted{color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); text-align:center; padding:34px 0;}
ul.list{list-style:none; margin:0; padding:0;}
.letter{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.2em; color:var(--gold); padding:16px 4px 6px; border-bottom:1px solid var(--line); margin-bottom:2px;}
.pokedex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:10px;}
.pokedex-grid .letter{grid-column:1/-1; margin-top:6px;}
/* FIX QA (rendimiento): las tarjetas fuera de pantalla no pagan estilo, layout
   ni pintado (638 tarjetas × 13 nodos con filtro de grises). Medido: tareas
   largas del pintado por tramos 5 -> 0, cambio de tema con la colección
   detrás 67 -> 35 ms, CPU en reposo 27 % -> 10 %. El tamaño intrínseco es
   solo el de reserva hasta que la tarjeta se pinta una vez (auto). */
.pokedex-grid .poke-card{content-visibility:auto; contain-intrinsic-size:auto 138px;}
.pokedex-grid.size-grande .poke-card{contain-intrinsic-size:auto 162px;}
.pokedex-grid.size-pequena .poke-card{contain-intrinsic-size:auto 72px;}
.pokedex-grid.size-lista .poke-card{contain-intrinsic-size:auto 81px;}
.pokedex-grid.size-grande{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.pokedex-grid.size-pequena{grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:6px;}
.pokedex-grid.size-pequena .poke-card{padding:6px 2px 6px; gap:3px;}
.pokedex-grid.size-pequena .poke-name{font-size:9px;}
.pokedex-grid.size-lista{display:flex; flex-direction:column; gap:6px;}
.pokedex-grid.size-lista .letter{margin-top:6px;}
.pokedex-grid.size-lista .poke-card{flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; padding:8px 14px; gap:12px; border-radius:var(--r-md);}
.pokedex-grid.size-lista .poke-name{font-size:var(--fs-2); white-space:normal;}
.poke-lista-habs{display:flex; flex-direction:column; gap:3px; flex:0 0 auto;}
.poke-lista-info{line-height:var(--lh);display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; flex:1 1 auto;}
.poke-sci{font-style:italic; font-weight:400; color:var(--muted); font-size:var(--fs-2);}
.pokedex-grid.size-lista .rareza-badge{margin-top:0;}
.poke-card{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 6px 10px; cursor:pointer; position:relative; text-align:center; color:inherit; font:inherit; touch-action:manipulation; box-shadow:var(--sh-3); transition:box-shadow var(--dur-1), transform var(--dur-1), border-color var(--dur-1);}
.poke-card:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--sh-3);}
.poke-card:active{transform:scale(.95); transition:transform var(--dur-0) var(--ease);}
.poke-card.undiscovered .ref{filter:grayscale(1) brightness(.5); opacity:.55;}
.poke-card.undiscovered .poke-name{color:var(--muted);}
.poke-name{font-family:var(--display); font-weight:600; font-size:var(--fs-1); line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Envuelve la imagen + sus insignias (pokébola, ruta) para que se puedan
   colocar siempre encima de la foto, tanto en cuadrícula como en lista,
   sin descuadrar la fila ni el nombre. */

.poke-status{position:absolute; top:6px; right:6px; z-index:2; font-size:var(--fs-2); background:var(--panel2); border-radius:99px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line);}
.ruta-status{position:absolute; top:6px; left:6px; z-index:2; font-size:var(--fs-2); background:var(--gold); color:var(--on-gold); border-radius:99px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line);}
.ruta-status svg{width:13px; height:13px;}
.poke-card.poke-unlock-anim{animation:pokeUnlockCard .9s var(--ease); z-index:2;}
.poke-card.poke-unlock-anim .ref{animation:pokeUnlockRef .9s var(--ease);}
@keyframes pokeUnlockCard{
  0%{transform:scale(1); box-shadow:none;}
  45%{transform:scale(1.18); box-shadow:0 0 26px 8px rgba(79,179,160,.6);}
  100%{transform:scale(1); box-shadow:none;}
}
@keyframes pokeUnlockRef{
  0%{filter:grayscale(1) brightness(.5); opacity:.55;}
  45%{filter:grayscale(0) brightness(1.25); opacity:1;}
  100%{filter:grayscale(0) brightness(1); opacity:1;}
}
.poke-nueva-banner{text-align:center; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--gold); margin:0 0 12px;}
.mini-pokedex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:5px; margin-top:10px;}
.mini-poke-card{position:relative; border-radius:var(--r-sm); overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--panel); padding:0; line-height:0; touch-action:manipulation;}
.mini-poke-card.undiscovered .ref{filter:grayscale(1) brightness(.5); opacity:.5;}
.mini-poke-status{position:absolute; top:1px; right:1px; z-index:2; width:13px; height:13px; display:flex; align-items:center; justify-content:center;}
.mini-poke-status svg{width:11px; height:11px;}
.poke-foto-picker-hint{line-height:var(--lh);text-align:center; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:6px 0 6px;}
.poke-foto-picker{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.poke-foto-picker button{width:46px; height:46px; border-radius:var(--r-md); overflow:hidden; border:2px solid var(--line); padding:0; cursor:pointer; background:var(--panel2);}
.poke-foto-picker button.sel{border-color:var(--gold);}
.poke-foto-picker img{width:100%; height:100%; object-fit:cover; display:block;}
.historia-picker{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:52vh; overflow-y:auto; padding-top:2px;}
.historia-picker-item{position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; border:2px solid var(--line); padding:0; cursor:pointer; background:var(--panel2); transition:border-color var(--dur-1), transform var(--dur-1);}
.historia-picker-item:hover{border-color:var(--gold); transform:translateY(-1px);}
.historia-picker-item:disabled{opacity:.5; cursor:default;}
/* La miniatura que se está publicando: se queda a plena opacidad (aunque esté
   deshabilitada como las demás) y gira un aro encima, para que se vea CUÁL se
   ha elegido. Antes se deshabilitaban las doce en silencio y parecía que la
   app se había colgado. */
.historia-picker-item.publicando:disabled{opacity:1; border-color:var(--gold);}
.historia-picker-item.publicando::after{
  content:''; position:absolute; inset:0; margin:auto; width:28px; height:28px;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:historiaPublicandoGiro .8s linear infinite;
}
.historia-picker-item.publicando::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.45);
}
@keyframes historiaPublicandoGiro{to{transform:rotate(360deg);}}
/* Con "reducir movimiento" no gira: se queda el aro fijo, que sigue diciendo
   cuál se eligió sin animación. */
@media (prefers-reduced-motion: reduce){
  .historia-picker-item.publicando::after{animation:none;}
}
.historia-picker-item img{width:100%; height:100%; object-fit:cover; display:block;}
.historia-picker-name{position:absolute; left:0; right:0; bottom:0; padding:5px 6px 6px; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); color:#fff; font-family:var(--mono); font-size:var(--fs-1); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row{width:100%; display:flex; align-items:center; gap:12px; padding:9px 6px; background:none; border:none; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; color:inherit; font:inherit;}
.row.active{background:var(--ink); color:var(--teal);}
.row svg{margin-left:auto; flex-shrink:0; color:var(--teal);}
.row:hover{background:var(--panel2);}
.ref{flex:0 0 auto; width:48px; height:48px; border-radius:var(--r-md); overflow:hidden; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative;}
/* ==== PULIDO COLECCIÓN: Mejora 11 -- placeholder + shimmer ==== */
.ref-placeholder-inicial{position:absolute; bottom:2px; right:3px; font-family:var(--display); font-weight:700; font-size:var(--fs-2); color:var(--muted); opacity:.65; line-height:1; pointer-events:none;}
/* FIX QA (rendimiento): el brillo animado solo mientras la miniatura se está
   pidiendo de verdad (data-load-state="loading", que pone el IntersectionObserver).
   Antes las 638 miniaturas sin cargar animaban background-position a la vez,
   casi todas fuera de pantalla: 6-16 % de CPU en reposo con la colección
   abierta (1,8 % sin ello), batería y tirones en el móvil. */
.ref.lazy{background:var(--panel2);}
.ref.lazy>svg{color:var(--muted);opacity:.5;}
.ref.lazy[data-load-state="loading"]{background:linear-gradient(100deg, var(--panel2) 35%, var(--line) 50%, var(--panel2) 65%); background-size:200% 100%; animation:refShimmer 1.8s ease-in-out infinite;}
.ref[data-load-state="offline"],.ref[data-load-state="error"]{animation:none;background:var(--panel2);}
.ref[data-load-state="offline"]::after,.ref[data-load-state="error"]::after{position:absolute;inset:auto 2px 2px 2px;border-radius:5px;padding:2px 3px;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--muted);font:600 8px/1.2 var(--mono);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ref[data-load-state="offline"]::after{content:'Sin red';}
.ref[data-load-state="error"]::after{content:'Reintento pendiente';}
@keyframes refShimmer{ 0%{background-position:150% 0;} 100%{background-position:-50% 0;} }

/* ==== ESQUELETOS DE CARGA (sustituyen a la palabra "Cargando…") ====
   Regla de uso: se muestran tras 150 ms (si la respuesta llega antes no se
   pintan, para no parpadear) y se sustituyen por un estado de error a los
   10 s. Con reduced-motion/[data-motion="reducido"] el degradado no se
   mueve (ya lo apaga la regla global). */
.sk{background:linear-gradient(100deg, var(--panel2) 35%, var(--line) 50%, var(--panel2) 65%); background-size:200% 100%; animation:skShimmer 1.5s linear infinite; border-radius:var(--r-sm);}
@keyframes skShimmer{0%{background-position:150% 0;}100%{background-position:-50% 0;}}
.sk-linea{height:9px;}
.sk-linea.corta{width:60%;}
.sk-circulo{width:42px;height:42px;border-radius:50%;flex:0 0 auto;}
.sk-cuadro{aspect-ratio:1;border-radius:var(--r-md);}
.sk-bloque{height:var(--sk-h,72px);border-radius:var(--r-md);}
.sk-fila{display:flex;align-items:center;gap:12px;padding:10px 0;}
.sk-fila-txt{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;}
.sk-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:8px;}
.sk-texto{display:flex;flex-direction:column;gap:9px;padding:4px 0;}
.sk-parrafo{display:flex;flex-direction:column;gap:7px;}
.sk-pos{width:18px;flex:0 0 auto;}
.sk-puntos{width:48px;margin-left:auto;flex:0 0 auto;}

.especie-picker, .explo-scroll, .explo-sheet-body, .historia-picker, .hoja, .tarot-sheet, .trivia-rank-list{overscroll-behavior:contain;}
.filtros-chips-row, .sp-tabbar, .home-historias-row, .mp-strip, .pp-recent, .cv2-casi-row, .cropper2-aspects, .galeria-viewport{overscroll-behavior-x:contain;}
body{overscroll-behavior-y:contain;}

/* ==== TIRAR PARA RECARGAR: retirado el 2026-09-16 (ver el comentario en el
   bloque JS del mismo nombre). Se quitan también sus estilos. ==== */
}
.ref img{width:100%; height:100%; object-fit:cover; display:block;}
.ref.gold,.friend-cell.gold{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.ref.poses,.friend-cell.poses{border-color:var(--plata); box-shadow:0 0 0 2px var(--plata), 0 0 10px 2px color-mix(in srgb, var(--plata) 70%, transparent);}
.ref.gold.poses,.friend-cell.gold.poses{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 0 10px 2px color-mix(in srgb, var(--plata) 70%, transparent);}
.txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.common{font-family:var(--display); font-weight:600; font-size:var(--fs-3); line-height:1.18;}
.common.big{font-size:var(--fs-6);}
.sci{font-family:var(--display); font-style:italic; font-weight:500; color:var(--muted); font-size:var(--fs-2);}
.sci.big{font-size:var(--fs-3); margin-top:2px;}
.status-badge{flex:0 0 auto; display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:var(--fs-1); padding:4px 7px; border-radius:99px; white-space:nowrap;}
.status-visto{background:rgba(59,130,246,.16); color:#6fb3ff; border:1px solid rgba(59,130,246,.35);}
.status-capturado{background:rgba(212,175,55,.16); color:var(--gold); border:1px solid rgba(212,175,55,.4);}
.status-badges{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.status-badge.icon-only{width:22px; height:22px; padding:0; justify-content:center; font-size:var(--fs-2);}
.chev{flex:0 0 auto; color:var(--muted); font-size:var(--fs-5); line-height:1;}
/* Mismo arreglo que .tarot-overlay (2026-09-16): reservar la muesca y la barra
   de gestos para que la × de la hoja (.close) no acabe sobre la hora ni la
   batería. Lo sufría Mi álbum, que es una hoja alta. */
.overlay{position:fixed; inset:0; background:rgba(6,11,9,.66); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab)); z-index:var(--z-hoja);}
.overlay.top{z-index:var(--z-hoja-top);}
/* Refuerzo para navegadores/WebView sin soporte nativo de [inert]: basta con
   que no reciban punteros ni foco, aunque el atributo por sí solo ya lo haga
   en Chromium moderno (ver _impFijarEstado, import-guard.js). */
[inert]{pointer-events:none !important;}
[inert] *{ user-select:none !important; }

/* Envoltorio temporal usado solo mientras se anima el paso de una ficha de
   ave a la siguiente (efecto "carta"): ocupa exactamente el mismo hueco que
   ocupaba el .sheet suelto, para que ambas fichas puedan superponerse y
   deslizarse una sobre otra sin alterar el resto de overlays que comparten
   la clase .sheet. */
.carta-stage{position:relative; width:100%; max-width:460px; max-height:92dvh;}
.carta-stage .sheet.carta-en-stage{position:absolute; inset:0; margin:0;}
.close{position:absolute; top:10px; right:12px; z-index:3; width:34px; height:34px; border-radius:99px; background:rgba(10,18,15,.6); border:1px solid var(--line); color:var(--text); font-size:var(--fs-5); line-height:1; cursor:pointer;}
.close:hover{border-color:var(--teal);}
.sp-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-right:30px;}

/* ==== PULIDO COLECCIÓN: Mejora 10 -- pistas de navegación ‹ › ==== */
.sp-nav-hint{line-height:var(--lh);display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 26px 6px 0; min-height:20px;}
.sp-nav-prev,.sp-nav-next{background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; padding:4px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sp-nav-next{text-align:right; margin-left:auto;}
/* ==== PULIDO COLECCIÓN: Mejora 8 -- progreso de dominación ==== */
.dominacion-progress{margin-top:10px; text-align:center;}
.dominacion-label{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.dominacion-segs{display:flex; gap:4px; justify-content:center; margin-top:6px;}
.dominacion-seg{width:26px; height:5px; border-radius:99px; background:var(--panel2); border:1px solid var(--line);}
.dominacion-seg.on{background:var(--gold); border-color:var(--gold);}
.sp-head-big{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; margin-bottom:16px;}
.sp-head-big .ref{width:200px; height:200px; margin-bottom:8px;}
.sp-head-big .common.big{margin:0;}
.lang-flag{width:16px; height:11px; border-radius:2px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(255,255,255,.15);}
.acc-section{border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; box-shadow:var(--sh-3); transition:box-shadow var(--dur-1);}
.acc-header{width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:none; padding:15px 17px; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); cursor:pointer; text-align:left;}
.acc-header:hover{background:var(--panel2);}
.acc-chevron{transition:transform var(--dur-1); color:var(--muted);}
.acc-header.open .acc-chevron{transform:rotate(180deg);}
.acc-body{line-height:var(--lh);padding:16px 17px; display:none;}
.acc-body.show{line-height:var(--lh);display:block;}
/* ---------- ficha del ave: barra de pestañas horizontal (estilo Instagram) ---------- */
.sp-tabbar{display:flex; gap:4px; overflow-x:auto; padding:6px 2px 4px; margin-top:10px; scrollbar-width:none;}
.sp-tabbar::-webkit-scrollbar{display:none;}
.sp-tab{flex:1 1 0; min-width:66px; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; padding:4px 2px; cursor:pointer; touch-action:manipulation; color:var(--muted); font:inherit;}
.sp-tab-ico{width:50px; height:50px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1.5px solid var(--line); color:var(--muted); font-size:var(--fs-6); transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.sp-tab-label{font-family:var(--mono); font-size:var(--fs-1); font-weight:600; letter-spacing:.01em; white-space:nowrap; transition:color var(--dur-1) var(--ease);}
.sp-tab.on .sp-tab-ico{border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 3px rgba(214,169,90,.18), 0 6px 16px -8px rgba(214,169,90,.5); transform:translateY(-2px);}
.sp-tab.on .sp-tab-label{color:var(--text);}
.sp-tab:active .sp-tab-ico{transform:scale(.9);}
.sp-tabpanels{margin-top:6px;}
.sp-tabpanel{display:none; padding:14px 2px 4px;}
.sp-tabpanel.on{display:block; animation:spTabIn var(--dur-2) var(--ease);}
@keyframes spTabIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.credit{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:6px 0 0;}

/* ==== FICHA PREMIUM ====
   Rediseño solo de presentación de la ficha de especie (showDetail/
   detailHTML/wireDetail/closeDetail/moverDetalle). Namespace "sd-" propio;
   no toca .sp-tab/.sp-tabpanel (esta última se reutiliza en otra pantalla,
   el ranking, así que se deja intacta aunque la ficha ya no la use). */
.sd-sheet{padding:0; overflow-x:hidden;}
.sd-sheet .close{display:none;}

/* -- 1. Foto limpia + cartela de museo (portado del prototipo) -- */
.sd-hero{position:relative;height:200px;overflow:hidden;background:linear-gradient(135deg,var(--bg1),var(--panel2));border-radius:var(--r-xl) var(--r-xl) 0 0;}
.sd-hero-parallax{position:absolute;inset:-15% -5%;will-change:transform;}
.sd-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;display:block;}
.sd-hero-silhouette{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:.28;}
.sd-hero-silhouette svg{width:auto;height:auto;max-width:150px;max-height:118px;}
.sd-hero-top{position:absolute;top:calc(10px + var(--sat));left:0;right:0;display:flex;justify-content:space-between;padding:0 12px;z-index:3;}
.sd-hero-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--panel) 76%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--text) 28%,transparent);box-shadow:var(--sh-2);color:var(--text);cursor:pointer;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);padding:0;}
.sd-hero-btn:active{transform:scale(.88);}
.sd-hero-btn:hover{border-color:var(--gold);}
.sd-hero-nav{display:flex;gap:8px;}
.sd-etiq{padding:15px 16px 17px;background:var(--bg1);border-bottom:1px solid var(--line);}
.sd-etiq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;}
.sd-etiq-num{color:var(--gold);font-variant-numeric:tabular-nums;}
.sd-etiq-rar{color:var(--muted);text-align:right;}
.sd-etiq-name{font-family:var(--display);font-weight:600;font-size:var(--fs-6);line-height:1.14;color:var(--text);margin:10px 0 0;text-wrap:balance;}
.sd-etiq-sci{font-family:var(--display);font-style:italic;font-size:var(--fs-3);color:var(--gold);margin:4px 0 0;}
.sd-etiq-badge{margin-top:11px;}
.sd-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-family:var(--mono);font-size:var(--fs-0);font-weight:700;}
.sd-badge-estado{background:var(--panel2);color:var(--text);border:1px solid var(--line);}
.sd-badge-estado.capturada,.sd-badge-estado.dominada{color:var(--on-gold);background:var(--gold);border-color:var(--gold);}
.sd-badge-estado svg{width:12px;height:12px;}
.sd-datos{display:grid;grid-template-columns:auto 1fr;margin:13px 0 0;border-top:1px solid var(--line);}
.sd-datos dt{grid-column:1;font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding:9px 16px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap;}
.sd-datos dd{grid-column:2;margin:0;font-family:var(--display);font-size:var(--fs-2);color:var(--text);padding:8px 0 9px;border-bottom:1px solid var(--line);line-height:1.35;}
.sd-datos dd em{font-style:italic;color:var(--muted);}
.sd-datos dt:last-of-type,.sd-datos dd:last-of-type{border-bottom:0;padding-bottom:2px;}

/* -- 2. Mini-header sticky -- */
.sd-miniheader{position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px; height:52px; padding:0 12px; background:color-mix(in srgb, var(--bg1) 82%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); opacity:0; pointer-events:none; transition:opacity var(--dur-1) var(--ease);}
.sd-miniheader.show{opacity:1; pointer-events:auto;}
.sd-mh-btn{display:flex; align-items:center; justify-content:center; width:31px; height:31px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); color:var(--text); cursor:pointer; flex:0 0 auto; padding:0; box-shadow:var(--sh-1); transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.sd-mh-btn:active{transform:scale(.88); box-shadow:var(--sh-1);}
.sd-mh-btn:hover{border-color:var(--gold);}
.sd-mh-nav{display:flex; gap:6px; flex:0 0 auto;}
.sd-mh-estado{flex:0 0 auto; padding:3px 8px; border-radius:99px; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; background:var(--panel2); color:var(--muted); border:1px solid var(--line);}
.sd-mh-estado.capturada,.sd-mh-estado.dominada{color:var(--on-gold);background:var(--gold);border:none;}
.sd-mh-name{flex:1; min-width:0; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* -- 3. Tarjeta de dominación -- */
/* -- Dominación: anillo de 5 tramos alrededor de la masterball -- */
.sd-domina{position:relative; display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 16px 12px 14px; margin:14px 16px 0; overflow:hidden;}
.sd-domina::after{content:''; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--gold) 18%,transparent), transparent 70%); pointer-events:none;}
.sd-domina-ring{position:relative; width:56px; height:56px; flex:0 0 auto;}
.sd-domina-ring svg{display:block; width:56px; height:56px;}
.sd-domina-arc{stroke:var(--line);}
.sd-domina-arc.on{stroke:var(--gold); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--gold) 55%,transparent));}
.sd-domina-ball{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--bg1) 55%,transparent));}
.sd-domina-ball svg{display:block;}
.sd-domina-body{flex:1; min-width:0;}
.sd-domina-label{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); margin:0; line-height:1.15;}
.sd-domina-label b{font-size:var(--fs-6); font-weight:600; color:var(--gold);}
.sd-domina-label span{font-size:var(--fs-2); color:var(--muted); margin-left:2px;}
.sd-domina-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:4px 0 0; line-height:1.4;}
.sd-domina.dominada .sd-domina-label{color:var(--gold); font-size:var(--fs-4);}
.sd-domina.dominada .sd-domina-arc.on{animation:sdArcGlow 2.6s ease-in-out infinite;}
@keyframes sdArcGlow{0%,100%{opacity:1;}50%{opacity:.6;}}

/* -- 4. Pestañas (segmentado con indicador deslizante) -- */
.sd-tabs-wrap{position:sticky; top:0; z-index:4; background:var(--bg1); padding:10px 16px 8px;}
/* Las columnas salen del número de botones que haya (3 sin sesión, 4 con
   ella): antes estaban clavadas a 4, así que sin sesión los tres botones se
   apretaban en tres cuartos de la barra mientras la pastilla medía un tercio,
   y el texto quedaba descentrado dentro de ella. El indicador va en
   position:absolute, así que no cuenta como columna de la rejilla.
   Sin hueco entre columnas: el ancho del indicador -- (100% - los 6px de
   padding) / n -- coincide entonces al milímetro con cada botón, que es lo
   que da por supuesto el translateX(i*100%) de sdWireTabs(). */
.sd-tabs{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:3px;}
.sd-tabs-ind{position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px)/var(--n,4)); background:var(--teal); border-radius:var(--r-sm); transition:transform var(--dur-1) var(--ease); z-index:0;}
/* justify-content:center: "Fotos" lleva debajo su contador y las demás no,
   pero la rejilla las estira a todas a la misma altura. Sin esto, el texto de
   "Ficha" y "Saber más" se quedaba pegado arriba en vez de centrado. */
.sd-tab{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; padding:7px 2px; cursor:pointer; font-family:inherit; color:var(--muted);}
.sd-tab.on{color:var(--on-teal);}
.sd-tab-label{font-family:var(--mono); font-size:var(--fs-1); font-weight:700; white-space:nowrap;}
/* Con cuatro pestañas («Curiosidades» es la más larga) la letra baja un
   punto en todas por igual, para que ninguna se corte en móviles de 360 px. */
.sd-tabs.n4 .sd-tab-label{font-size:var(--fs-0); letter-spacing:-.03em;}
.sd-tabs.n4 .sd-tab{padding-left:0; padding-right:0;}
.sd-tab-count{font-family:var(--mono); font-size:var(--fs-0); color:var(--gold); font-weight:700;}
.sd-tab.on .sd-tab-count{color:var(--on-gold);}
.sd-tabpanels-wrap{padding:2px 16px 0;}
.sd-tabpanel2{display:none;}
.sd-tabpanel2.on{display:block; animation:sdTabIn var(--dur-1) var(--ease);}
@keyframes sdTabIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:translateY(0);}}

/* -- 5. Tarjetas con reveal-on-scroll -- */
.sd-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:16px; margin-bottom:12px; opacity:0; transform:translateY(14px);}.sd-nivel{display:block;margin:0 0 6px}.sd-nivel-cab{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;padding:2px 2px 10px;margin-top:6px}.sd-nivel-n{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold);flex:none}.sd-nivel-t{margin:0;font-size:15px;font-weight:800;color:var(--text);line-height:1.2}.sd-nivel-s{margin:1px 0 0;font-size:11.5px;color:var(--muted);line-height:1.3}.sd-nivel-mas{margin:4px 0 6px}.sd-nivel-mas>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:26px 1fr 18px;gap:10px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl)}.sd-nivel-mas>summary::-webkit-details-marker{display:none}.sd-nivel-mas>summary:after{content:"\2304";font-size:18px;line-height:1;color:var(--muted);transition:transform .2s;justify-self:end}.sd-nivel-mas[open]>summary:after{transform:rotate(180deg)}.sd-nivel-mas[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.sd-nivel-cuerpo{padding-top:12px}
.sd-card.in{animation:sdCardIn var(--dur-3) var(--ease) forwards;}
@keyframes sdCardIn{to{opacity:1; transform:translateY(0);}}
.sd-card-title{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sd-card-title-r{color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:var(--fs-1);text-align:right;}

/* -- Descripción con letra capital -- */
.sd-desc{font-family:var(--display); font-size:var(--fs-3); line-height:1.6; color:var(--text); margin:0;}
.sd-desc::first-letter{font-size:var(--fs-7); font-weight:700; color:var(--gold); float:left; line-height:.8; padding:4px 6px 0 0;}

/* -- Cómo distinguirlo -- */
.sd-distinguir-item{display:flex; gap:10px; margin-bottom:10px; align-items:flex-start;}
.sd-distinguir-item:last-child{margin-bottom:0;}
.sd-distinguir-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);font-family:var(--mono);font-weight:700;font-size:var(--fs-1);display:flex;align-items:center;justify-content:center;}
.sd-distinguir-txt{font-size:var(--fs-2); line-height:1.5; color:var(--text); padding-top:2px;}

/* -- Su canto -- */
.sd-song-row{display:flex; align-items:center; gap:12px;}
.sd-song-play{position:relative; width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--on-gold); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; padding:0;}
.sd-song-play svg{width:18px; height:18px;}
.sd-song-ring{position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--gold); opacity:0; pointer-events:none;}
.sd-song-play.playing .sd-song-ring{animation:sdSongPulse 1.6s ease-out infinite;}
@keyframes sdSongPulse{0%{opacity:.55;transform:scale(1);}100%{opacity:0;transform:scale(1.5);}}
.sd-song-wave{flex:1; display:flex; align-items:center; gap:2px; height:32px; cursor:pointer;}
.sd-song-bar{flex:1; min-width:2px; border-radius:2px; background:var(--panel2); transition:background var(--dur-1) var(--ease);}
.sd-song-bar.done{background:var(--gold);}
.sd-song-time{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto;}
.sd-song-state{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}

/* -- Cuándo verlo -- */
.sd-presencia-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-1); color:var(--text); margin-bottom:14px;}
.sd-presencia-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:sdPulseDot 1.8s ease-in-out infinite;}
@keyframes sdPulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 50%,transparent);}50%{opacity:.6;box-shadow:0 0 0 4px transparent;}}

/* -- 6. Pestaña Fotos: galería uniforme + línea temporal -- */
.sd-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:16px 0 10px;}
.sd-section-title{font-family:var(--display);font-weight:600;font-size:var(--fs-4);color:var(--text);margin:0;}
.sd-section-count{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);text-align:right;}
.sd-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.sd-id-pistas{margin:0;padding-left:22px;display:grid;gap:10px;line-height:1.45;color:var(--text);font-size:var(--fs-2)}
.sd-id-pistas li::marker{color:var(--gold);font-family:var(--mono);font-weight:700}
.sd-hab-texto{margin:0 0 14px;line-height:1.6;color:var(--text)}
.sd-presencia-simple{padding:0 0 12px}.sd-presencia-simple p{margin:6px 0;line-height:1.45;color:var(--muted);font-size:var(--fs-2)}.sd-presencia-simple b{color:var(--text)}
.sd-presencia-tuya{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2)}.sd-presencia-simple .sd-presencia-tuya p{margin:0;color:var(--text)}
.sd-presencia-simple p.sd-presencia-esp{margin:10px 0 2px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.sd-presencia-simple p.sd-presencia-pista{font-size:12px;margin-top:8px}
.sd-lock{border-style:dashed;color:var(--muted)}.sd-lock p:last-child{margin-bottom:0;line-height:1.5}
.sd-libreta-btn{width:100%;padding:13px;margin:0 0 12px;background:color-mix(in srgb,var(--gold) 15%,var(--panel));border:1px solid var(--gold);border-radius:var(--r-lg);color:var(--text);font:600 var(--fs-2) var(--display);cursor:pointer}.sd-libreta{padding:16px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--panel)}.sd-libreta[hidden]{display:none}.sd-libreta h3{font:600 var(--fs-4) var(--display);margin:0 0 8px}.sd-libreta>p{font-size:var(--fs-2);color:var(--muted);line-height:1.5}.sd-libreta-compara{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sd-libreta-compara figure{margin:0}.sd-libreta-compara img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md)}.sd-libreta-compara figcaption{font-size:var(--fs-1);color:var(--muted);padding-top:5px}.sd-libreta-linea{border-left:1px solid var(--gold);margin:18px 0 0 9px;padding-left:16px;display:grid;gap:12px}.sd-libreta-paso{display:flex;gap:10px;align-items:center;position:relative}.sd-libreta-paso>span{position:absolute;left:-25px;top:16px;background:var(--gold);color:var(--bg1);border-radius:50%;width:18px;height:18px;text-align:center;font:700 11px/18px var(--mono)}.sd-libreta-paso img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm)}.sd-libreta-paso b,.sd-libreta-paso small{display:block}.sd-libreta-paso small{font-size:var(--fs-1);color:var(--muted);line-height:1.4}
.sd-photo-cell{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:var(--panel2);border:none;padding:0;}
.sd-photo-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-2) var(--ease);}
@media (hover:hover){.sd-photo-cell:hover img{transform:scale(1.06);}}
.sd-photo-cell::after{content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(0deg,color-mix(in srgb,var(--bg1) 82%,transparent),transparent);pointer-events:none;}
.sd-photo-cell-info{position:absolute;left:6px;bottom:5px;right:6px;z-index:1;color:var(--text);font-family:var(--mono);font-size:var(--fs-0);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-photo-add{aspect-ratio:1;border-radius:var(--r-md);border:1.5px dashed var(--line);background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:var(--fs-0);}
.sd-photo-add svg{width:18px;height:18px;}
.sd-photo-empty{text-align:center;padding:22px 10px;}.sd-photo-empty>svg{display:block;margin:0 auto;color:var(--muted);opacity:.42;}
.sd-photo-empty p{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);margin:10px 0 0;}
.sd-photo-ref{position:relative;display:block;width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel2);padding:0;cursor:pointer;color:var(--text);}
.sd-photo-ref img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-photo-ref span{position:absolute;left:9px;right:9px;bottom:8px;padding:6px 8px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--bg1) 82%,transparent);font-family:var(--mono);font-size:var(--fs-0);text-align:left;}
.sd-aporte{margin:14px 0;}
/* ---- "Envíanos tu foto" (21/09/2026) ----
   Antes era un botón suelto "+ Enviar foto" colado entre las miniaturas, sin
   decir a dónde iba la foto ni qué pasaba después. Ahora es su propia sección,
   debajo de los avistamientos, y explica el trato: revisión, y si entra, sale
   en la galería con tu nombre. */
.env-foto{margin:18px 0 4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:14px 15px;}
.env-foto-t{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.env-foto-t svg{width:20px; height:20px; color:var(--teal); flex:0 0 auto;}
.env-foto-t h3{margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--text);}
.env-foto-p{margin:0 0 12px; font-size:var(--fs-2); line-height:var(--lh); color:var(--muted);}
.env-foto-btn{width:100%; min-height:48px; border-radius:var(--r-md); border:1px solid var(--teal); background:color-mix(in srgb, var(--teal) 12%, transparent); color:var(--teal); font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; touch-action:manipulation;}
.env-foto-btn svg{width:18px; height:18px;}
.env-foto-btn:active{transform:scale(.985);}
.env-foto-estado{display:flex; align-items:flex-start; gap:9px; margin-top:10px; padding:10px 12px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); font-size:var(--fs-2); line-height:var(--lh); color:var(--text);}
.env-foto-estado svg{width:17px; height:17px; flex:0 0 auto; margin-top:2px;}
.env-foto-estado.pendiente svg{color:var(--gold);}
.env-foto-estado.aprobada svg{color:var(--teal);}
.env-foto-estado.cambios{border-color:var(--gold);}
.env-foto-estado.cambios svg{color:var(--gold);}
.env-foto-estado.rechazada svg{color:var(--err-text);}
.env-foto-estado b{display:block; font-weight:600;}
.env-foto-estado small{display:block; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); margin-top:3px;}
/* El formulario de envío */
.envf-previa{width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; border:1px dashed var(--line); background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--fs-2); cursor:pointer; padding:0; text-align:center;}
.envf-previa img{width:100%; height:100%; object-fit:cover;}
.envf-previa span{display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px;}
.envf-previa svg{width:26px; height:26px;}
.envf-campo{margin-top:12px;}
.envf-campo label{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
.envf-chips{display:flex; flex-wrap:wrap; gap:7px;}
.envf-chip{min-height:38px; padding:0 13px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:var(--fs-2); cursor:pointer; touch-action:manipulation;}
.envf-chip.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal); font-weight:600;}
.envf-aviso{margin:12px 0 0; font-size:var(--fs-1); line-height:var(--lh); color:var(--muted);}
/* La ficha de cada foto pendiente en el panel de administración */
.inf-foto{display:flex; gap:12px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px; margin-bottom:10px;}
.inf-foto-img{flex:0 0 auto; width:92px; height:92px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--panel); padding:0; cursor:zoom-in;}
.inf-foto-img img{width:100%; height:100%; object-fit:cover; display:block;}
.inf-foto-txt{flex:1 1 auto; min-width:0;}
.inf-foto-txt b{font-family:var(--display); font-size:var(--fs-3);}
.inf-foto-meta{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); line-height:1.6; margin-top:3px; word-break:break-word;}
.inf-foto-nota{font-size:var(--fs-2); color:var(--text); margin-top:6px;}
.inf-foto-acciones{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.inf-foto-acciones button{min-height:38px; padding:0 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:var(--fs-2); cursor:pointer;}
.inf-foto-acciones .ok{border-color:var(--teal); color:var(--teal);}
.inf-foto-acciones .no{border-color:var(--err-border); color:var(--err-text);}
.sd-tl{position:relative;padding-left:20px;margin-bottom:14px;}
.sd-tl::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line);}
.sd-tl-it{position:relative;display:block;width:100%;padding:9px 0;background:none;border:none;color:var(--text);text-align:left;cursor:pointer;}
.sd-tl-it::before{content:'';position:absolute;left:-18px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--bg1);border:2px solid var(--teal);}
.sd-tl-body{display:block;}
.sd-tl-date{display:block;font-family:var(--display);font-size:var(--fs-2);}
.sd-tl-meta{display:block;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin-top:2px;}

/* -- 7. Pestaña Saber más: cinco curiosidades en hilo -- */
.sd-curio-progress{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.sd-curio-pips{display:flex;gap:5px;flex:1;}
.sd-curio-pip{flex:1;height:5px;border-radius:99px;background:var(--panel2);}
.sd-curio-pip.on{background:linear-gradient(90deg,var(--teal),var(--gold));}
.sd-curio-count{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);white-space:nowrap;}
.sd-hilo{position:relative;padding-left:32px;}
.sd-hilo::before{content:'';position:absolute;left:11px;top:14px;bottom:24px;width:1px;background:linear-gradient(180deg,var(--teal),var(--gold));}
.sd-hi{position:relative;margin-bottom:22px;}
.sd-hi:last-child{margin-bottom:0;}
.sd-hi-n{position:absolute;left:-32px;top:-1px;width:23px;height:23px;border-radius:50%;background:var(--bg1);border:1px solid var(--teal);color:var(--teal);font-family:var(--mono);font-size:var(--fs-1);font-weight:700;display:flex;align-items:center;justify-content:center;}
.sd-hi-n svg{width:11px;height:11px;}
.sd-hi-cat{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.sd-hi-tx{font-family:var(--display);font-size:var(--fs-3);line-height:1.55;color:var(--text);margin:0;}
.sd-hi.gold .sd-hi-n{border-color:var(--gold);color:var(--on-gold);background:var(--gold);}
.sd-hi.gold .sd-hi-cat,.sd-hi.gold .sd-hi-tx{color:var(--gold);}
.sd-hi.lock .sd-hi-n{border-color:var(--line);color:var(--muted);}
.sd-hi-blur{display:block;height:11px;border-radius:5px;background:var(--panel2);filter:blur(2.5px);margin-bottom:7px;}
.sd-hi-blur.short{width:62%;}
.sd-hi-hint{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin:8px 0 0;line-height:1.45;}

/* -- Ficha técnica -- */
.sd-stat{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--mono);font-size:var(--fs-1);}
.sd-stat:last-of-type{margin-bottom:0;}
.sd-stat-k{color:var(--muted);letter-spacing:.04em;}
.sd-stat-bar{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;}
.sd-stat-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-deep),var(--teal));}
.sd-stat-v{color:var(--text);font-variant-numeric:tabular-nums;text-align:right;}
.sd-nota{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin:11px 0 0;line-height:1.5;}

/* -- Comparador de tamaño -- */
.sd-escala{display:grid;grid-template-columns:repeat(var(--n,3),1fr);align-items:start;padding:8px 2px 10px;min-height:112px;}
.sd-escala-it{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;}
.sd-escala-bird{height:76px;width:100%;box-sizing:content-box;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;border-bottom:1px solid var(--line);}
.sd-escala-it svg{display:block;color:var(--muted);height:auto;opacity:.55;}
.sd-escala-it.me svg{color:var(--gold);opacity:1;filter:drop-shadow(0 1px 5px color-mix(in srgb,var(--gold) 45%,transparent));}
.sd-escala-it.me .sd-escala-bird{border-bottom:2px solid var(--gold);margin-bottom:-1px;background:radial-gradient(60% 70% at 50% 100%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%);}
.sd-escala-l{font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);text-align:center;line-height:1.35;}
.sd-escala-it.me .sd-escala-l{color:var(--gold);font-weight:700;}

/* -- Cuándo verlo: presencia + meses propios -- */
.sd-when-histo .mes-histo-bar.mine .mes-histo-fill{background:var(--gold);}
.sd-when-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.sd-when-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}
.sd-when-presencia{background:var(--teal);}
.sd-when-mine{background:var(--gold);}

/* -- Se confunde con -- */
/* -- Se confunde con: tarjetas con miniatura grande, nombre, clave y flecha -- */
.sd-conf{display:flex;gap:12px;align-items:center;width:100%;padding:10px;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel2);color:var(--text);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);}
.sd-conf:first-of-type{margin-top:2px;}
.sd-conf:active{transform:scale(.985);}
@media (hover:hover){.sd-conf:hover{border-color:color-mix(in srgb,var(--teal) 50%,var(--line));}}
.sd-conf-th{width:56px;height:56px;flex:0 0 56px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);}
.sd-conf-th .ref{border-radius:var(--r-md);}
.sd-conf-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.sd-conf-n{font-family:var(--display);font-weight:600;font-size:var(--fs-3);line-height:1.2;}
.sd-conf-k{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:3px;}
.sd-conf-d{display:block;font-size:var(--fs-2);color:var(--text);line-height:1.45;}
.sd-conf-d::first-letter{text-transform:uppercase;}
.sd-conf-go{flex:0 0 auto;width:22px;height:22px;color:var(--muted);}
.sd-conf-go svg{width:22px;height:22px;}

/* -- Tus datos -- */
.sd-hist{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sd-hbox{background:var(--panel2);border-radius:var(--r-md);padding:11px 12px;min-width:0;}
.sd-hbox-k{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sd-hbox-v{font-family:var(--display);font-weight:600;font-size:var(--fs-4);color:var(--text);margin-top:3px;overflow-wrap:anywhere;}
.sd-hbox-s{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin-top:2px;line-height:1.4;overflow-wrap:anywhere;}

/* -- Ficha: cifras protagonistas, medidas, KPIs, escala UICN, fuentes al pie -- */
.sd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sd-tile{background:var(--panel2);border-radius:var(--r-md);padding:11px 12px 12px;min-width:0;position:relative;overflow:hidden;}
.sd-tile-k{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sd-tile-v{font-family:var(--display);font-weight:600;font-size:var(--fs-6);line-height:1.1;color:var(--text);margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.sd-tile-v small{font-family:var(--mono);font-size:var(--fs-1);font-weight:400;color:var(--muted);margin-left:4px;}
.sd-tile-s{font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);margin-top:3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-tile-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--line) 55%,transparent);}
.sd-tile-fill{display:block;height:100%;background:linear-gradient(90deg,var(--teal-deep),var(--teal));}
.sd-measures{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;}
.sd-measure{text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-sm);min-width:0;}
.sd-measure-v{font-family:var(--display);font-weight:600;font-size:var(--fs-3);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sd-measure-k{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.sd-kpis{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding-bottom:2px;}
.sd-kpis::-webkit-scrollbar{display:none;}
.sd-kpi{flex:1 0 auto;min-width:84px;background:var(--panel2);border-radius:var(--r-md);padding:9px 11px;}
.sd-kpi-v{font-family:var(--display);font-weight:600;font-size:var(--fs-5);color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sd-kpi-v small{font-family:var(--mono);font-size:var(--fs-0);font-weight:400;color:var(--muted);margin-left:3px;}
.sd-kpi-k{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap;}
.sd-lead{font-family:var(--display);font-size:var(--fs-3);line-height:1.55;color:var(--text);margin:0 0 4px;}
.sd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px;}
.sd-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-1);color:var(--text);}
.sd-chip.on{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:color-mix(in srgb,var(--teal) 45%,transparent);color:var(--teal);}
.sd-load-final code{font-family:var(--mono);background:var(--panel2);padding:1px 5px;border-radius:4px;}
.sd-iucn{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:8px 0 12px;}
.sd-iucn-seg{text-align:center;padding:9px 2px;letter-spacing:.08em;border-radius:var(--r-sm);background:var(--panel2);font-family:var(--mono);font-size:var(--fs-1);font-weight:700;color:var(--muted);opacity:.5;min-width:0;}
.sd-iucn-seg small{display:block;font-weight:400;font-size:8px;letter-spacing:0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-iucn-seg.on{opacity:1;color:#1B1F1C;background:var(--seg);box-shadow:var(--sh-2);transform:scale(1.06);}
.sd-iucn-cat{font-family:var(--display);font-weight:600;font-size:var(--fs-4);color:var(--text);margin:0;}
.sd-iucn-sub{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin:2px 0 0;}

/* -- 8. Pestaña Amigos -- */
/* -- Pestaña Amigos: tarjetas con avatar (foto o inicial), nombre, nivel y estado -- */
.sd-friend-row{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px 10px 10px; margin-top:8px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel2); color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);}
.sd-friend-row:first-child{margin-top:0;}
.sd-friend-row:active{transform:scale(.985);}
@media (hover:hover){.sd-friend-row:hover{border-color:color-mix(in srgb,var(--teal) 50%,var(--line));}}
.sd-friend-ring{width:48px; height:48px; border-radius:50%; padding:2px; background:var(--line); flex:0 0 auto;}
.sd-friend-ring.capturada{background:linear-gradient(135deg,var(--gold),var(--teal));}
.sd-friend-av{width:100%; height:100%; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--text); border:2px solid var(--panel2); overflow:hidden;}
.sd-friend-av img{width:100%; height:100%; object-fit:cover; display:block;}
.sd-friend-body{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.sd-friend-name{font-family:var(--display); font-weight:600; font-size:var(--fs-3); line-height:1.2; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-friend-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-friend-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:99px; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.02em; text-transform:uppercase;}
.sd-friend-chip svg{width:12px; height:12px;}
.sd-friend-chip.capturada{background:var(--gold); color:var(--on-gold);}
.sd-friend-chip.vista{background:var(--panel); color:var(--muted); border:1px solid var(--line);}
.sd-friend-note{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); text-align:center; margin:14px 0 4px; line-height:1.5;}

/* -- 9. Barra de acciones fija -- */
.sd-actionbar{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:8px; padding:10px 16px calc(10px + var(--sab)); background:color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); margin-top:8px;}
.sd-action-main{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--on-gold);border:none;border-radius:var(--r-lg);padding:13px;font-family:var(--display);font-weight:700;font-size:var(--fs-3);cursor:pointer;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--gold) 60%,transparent);}
.sd-action-main svg{width:17px; height:17px;}
.sd-action-icon{flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-lg); background:var(--panel2); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.sd-action-icon svg{width:19px; height:19px;}
.sd-action-icon:active, .sd-action-main:active, .sd-song-play:active{transform:scale(.96);}
/* -- 10. Reutilización con reskin puntual de piezas compartidas -- */
.sd-card .song-title{display:none;}
.sd-when-histo .mes-histo-title{display:none;}
.sd-when-histo .mes-histo-chart{gap:4px;}
.sd-when-histo .mes-histo-fill{transition:height var(--dur-3) var(--ease);}
.sd-when-histo .mes-histo-fill.sd-pre{height:0 !important;}
.sd-when-histo .mes-histo-bar.current .mes-histo-fill{outline:2px solid var(--gold); outline-offset:1px;}
.sd-when-histo .mes-histo-note{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:10px;}
.add{width:100%; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-lg); padding:12px; font-weight:600; font-size:var(--fs-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 10px 22px -12px rgba(46,182,164,.55); transition:box-shadow var(--dur-1), transform var(--dur-1);}
.add:hover{background:var(--teal-deep); transform:translateY(-1px);}
.add-row{display:flex; gap:8px;}
.add-row .add{flex:1; width:auto;}
.obs-section{display:flex; flex-direction:column; gap:12px;}
.obs-card{background:linear-gradient(155deg, var(--panel2), var(--panel) 75%); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-3);}
.obs-card-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.obs-card-ico{flex:0 0 auto; width:36px; height:36px; border-radius:99px; background:var(--ink); border:1px solid rgba(214,169,90,.35); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:var(--fs-3);}
.obs-card-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3);}
.obs-card-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:1px; line-height:1.35;}
.obs-card .add-row{gap:10px;}
.obs-card .add{background:linear-gradient(135deg, var(--teal), var(--teal-deep)); box-shadow:0 10px 22px -12px rgba(46,182,164,.5); font-size:var(--fs-3);}
.obs-card .add:active{transform:scale(.97);}
.obs-card .add:disabled{opacity:.55; box-shadow:none; cursor:default;}
.add[disabled]{opacity:.55; cursor:wait;}
.empty{text-align:center; padding:30px 16px 10px; color:var(--muted);}
.empty p{font-size:var(--fs-3); line-height:1.5; margin:12px auto 0; max-width:320px;}
.gal-label{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:18px 0 0;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-top:10px;}
.thumb{position:relative; aspect-ratio:1; border:none; padding:0; border-radius:var(--r-md); overflow:hidden; cursor:pointer; background:var(--panel2);}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb .place{position:absolute; left:0; right:0; bottom:0; font-family:var(--mono); font-size:var(--fs-1); color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); padding:10px 6px 4px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.thumb-add{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px dashed var(--line); color:var(--muted);}
.thumb-add .thumb-add-icon{font-size:var(--fs-6); line-height:1; font-family:var(--display);}
.thumb-add .thumb-add-label{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-align:center; padding:0 4px;}
.thumb-add:hover{border-color:var(--teal); color:var(--teal);}
.vphoto{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#000; margin-bottom:16px;}
.vphoto img{width:100%; max-height:50vh; object-fit:contain; display:block;}
/* Contador/botón de like de la foto del equipo: abajo a la derecha de la
   foto, encima de la imagen. Deshabilitado (sin :hover ni cursor) cuando es
   tu propia foto (solo lectura) o no has iniciado sesión. */
.vphoto-like{position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px; background:rgba(18,28,25,.72); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.16); color:#fff; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; transition:transform var(--dur-1), background var(--dur-1);}
.vphoto-like svg{width:15px; height:15px; flex-shrink:0;}
.vphoto-like:disabled{cursor:default;}
.vphoto-like:not(:disabled):hover{transform:scale(1.05);}
.vphoto-like.liked{background:rgba(214,169,90,.85); border-color:var(--gold); color:var(--on-gold);}
.vphoto-like.liked svg{fill:currentColor;}
/* ---------- Visor de historias a pantalla completa ---------- */
.historia-viewer{position:fixed; inset:0; z-index:200; background:#000; display:flex; flex-direction:column; opacity:0; transform:translateY(14px); transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); touch-action:none;}
.historia-viewer.on{opacity:1; transform:translateY(0);}
.historia-viewer-bars{position:absolute; top:calc(10px + var(--sat)); left:10px; right:10px; z-index:3; display:flex; gap:4px;}
.hv-bar{flex:1; height:2.5px; border-radius:99px; background:rgba(255,255,255,.32); overflow:hidden;}
.hv-bar-fill{display:block; height:100%; width:0%; background:#fff; border-radius:99px;}
.historia-viewer-head{position:absolute; top:calc(22px + var(--sat)); left:12px; right:12px; z-index:3; display:flex; align-items:center; gap:9px;}
.historia-viewer-avatar{width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:var(--fs-2); flex:0 0 auto;}
.historia-viewer-avatar img{width:100%; height:100%; object-fit:cover;}
.historia-viewer-name{color:#fff; font-family:var(--display); font-weight:600; font-size:var(--fs-2);}
.historia-viewer-time{color:rgba(255,255,255,.65); font-family:var(--mono); font-size:var(--fs-1); flex:1;}
.historia-viewer-close{margin-left:auto; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); border:none; color:#fff; font-size:var(--fs-4); line-height:1; cursor:pointer; flex:0 0 auto;}
.historia-viewer-body{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.historia-viewer-body img{line-height:var(--lh);max-width:100%; max-height:100%; object-fit:contain;}
.historia-viewer-zones{position:absolute; inset:0; z-index:2; display:flex;}
.hz{flex:1; height:100%;}
.hz-prev{flex:0 0 32%;}
.historia-viewer-like.vphoto-like{bottom:calc(28px + var(--sab)); right:16px; z-index:3;}
/* Barra de acciones cuando estás viendo tu PROPIA historia: likes de solo
   lectura + borrar la foto actual + añadir otra (hasta HISTORIA_MAX_ACTIVAS). */
.historia-viewer-owner-bar{position:absolute; left:12px; right:12px; bottom:calc(20px + var(--sab)); z-index:3; display:flex; align-items:center; gap:8px;}.hv-ficha{position:absolute; left:12px; bottom:calc(70px + var(--sab)); z-index:3; max-width:min(74%,320px);display:flex; flex-direction:column; gap:1px; padding:7px 12px 7px 10px;border-left:2px solid var(--gold); border-radius:3px var(--r-md) var(--r-md) 3px;background:rgba(10,18,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); pointer-events:none;}.hv-ficha-n{font-family:var(--display); font-size:13.5px; font-weight:700; line-height:1.2;}.hv-ficha-s{font-family:var(--display); font-style:italic; font-size:11.5px; line-height:1.25; color:rgba(255,255,255,.84);}.hv-ficha-f{font-family:var(--mono); font-size:10px; letter-spacing:.06em; line-height:1.3; color:rgba(255,255,255,.68); margin-top:2px;}
/* Ahora es un <button>: además de contar, da like a tu propio Aleteo. */
.hv-owner-likes{display:flex; align-items:center; gap:5px; color:#fff; font-family:var(--mono); font-size:var(--fs-2); background:rgba(18,28,25,.6); padding:8px 10px; border-radius:99px; flex:0 0 auto; border:1px solid transparent; cursor:pointer; transition:background var(--dur-1), border-color var(--dur-1), transform var(--dur-0);}
.hv-owner-likes svg{width:15px; height:15px;}
.hv-owner-likes:disabled{cursor:default; opacity:.75;}
.hv-owner-likes:not(:disabled):active{transform:scale(.94);}
.hv-owner-likes.liked{background:rgba(214,169,90,.85); border-color:var(--gold); color:var(--on-gold);}
.hv-owner-likes.liked svg{fill:currentColor;}
.hv-owner-btn{display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); backdrop-filter:blur(3px); color:#fff; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.hv-owner-del{flex:0 0 auto; width:38px;}
.hv-owner-del svg{width:15px; height:15px;}
.hv-owner-del:hover{border-color:var(--err-text); color:#ffb8b8;}
.hv-owner-add{flex:1; background:rgba(214,169,90,.9); border-color:var(--gold); color:var(--on-gold); font-weight:700;}
.hv-autor{cursor:pointer;}
/* Transición suave al ocultar/mostrar la interfaz al pausar */
.historia-viewer-bars,.historia-viewer-head,.historia-viewer-like.vphoto-like,.historia-viewer-owner-bar{transition:opacity var(--dur-1) var(--ease);}
.historia-viewer.paused .historia-viewer-bars,
.historia-viewer.paused .historia-viewer-head,
.historia-viewer.paused .historia-viewer-like,
.historia-viewer.paused .historia-viewer-owner-bar{opacity:0; pointer-events:none;}
/* Corazón del doble toque */
.hv-heart-burst{position:fixed; z-index:5; width:96px; height:96px; margin:-48px 0 0 -48px; color:#ff3b6b; pointer-events:none; animation:hvHeart .9s var(--ease) forwards;}
.hv-heart-burst svg{width:100%; height:100%; filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));}
@keyframes hvHeart{0%{transform:scale(.3); opacity:0;} 15%{transform:scale(1.15); opacity:1;} 30%{transform:scale(.95);} 45%{transform:scale(1);} 80%{transform:scale(1); opacity:1;} 100%{transform:scale(1.1); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .hv-heart-burst{animation-duration:var(--dur-3);} }
.hv-owner-add:hover{background:var(--gold);}
.refphoto{border-radius:var(--r-lg); overflow:hidden; background:#000; margin-bottom:12px;}
.refphoto img{width:100%; max-height:75vh; object-fit:contain; display:block;}.ref-grupo-0{color:var(--muted);}
.ref-gallery-label{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; color:var(--text); background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); padding:8px 12px; text-align:center;}
.ref-gallery-spinner{font-size:var(--fs-5); animation:refSpin 1.2s linear infinite;}
.ref-gallery-loading .ref-gallery-label{border:none; background:transparent; padding:0;}
@keyframes refSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
/* ---------- visor de fotos a pantalla completa con deslizamiento lateral ---------- */
.swipe-lb{position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:var(--z-visor); display:flex; flex-direction:column; touch-action:pan-y; overscroll-behavior:contain; -webkit-user-select:none; user-select:none;}
.swipe-lb-viewport{position:relative; flex:1; overflow:hidden;}
.swipe-lb-track{display:flex; height:100%; will-change:transform;}
.swipe-lb-slide{flex:0 0 100%; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:14px; box-sizing:border-box;}
.swipe-lb-slide img{max-width:100%; max-height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; pointer-events:none; border-radius:var(--r-sm);}
.swipe-lb-close{position:absolute; top:calc(var(--sat) + 12px); right:14px; z-index:5; width:40px; height:40px; border-radius:99px; background:rgba(20,20,20,.6); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:var(--fs-6); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
/* Zoom del visor (01/10/2026): la lupa va junto a la «×»; el visor maneja él
   mismo pellizco, doble toque y arrastre, así que el navegador no se queda
   ningún gesto de la zona de la foto. */
.swipe-lb-zoom{position:absolute; top:calc(var(--sat) + 12px); right:62px; z-index:5; width:40px; height:40px; border-radius:99px; background:rgba(20,20,20,.6); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.swipe-lb-zoom svg{width:20px; height:20px;}
.swipe-lb-viewport{touch-action:none;}
.swipe-lb.con-zoom .swipe-lb-viewport{cursor:grab;}
.swipe-lb.con-zoom .swipe-lb-viewport:active{cursor:grabbing;}
.swipe-lb-counter{position:absolute; top:calc(var(--sat) + 18px); left:50%; transform:translateX(-50%); z-index:5; font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.08em; color:#fff; background:rgba(20,20,20,.5); border-radius:99px; padding:5px 12px;}
.swipe-lb-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:99px; background:rgba(20,20,20,.45); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:var(--fs-6); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.swipe-lb-arrow.prev{left:10px;} .swipe-lb-arrow.next{right:10px;}
.swipe-lb-arrow:hover{background:rgba(40,40,40,.7);}
.swipe-lb-dots{position:absolute; left:0; right:0; bottom:calc(var(--sab) + 16px); z-index:5; display:flex; gap:7px; justify-content:center;}
.swipe-lb-dots.with-detail{bottom:calc(var(--sab) + 62px);}
.swipe-lb-dot{width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.35); transition:background var(--dur-1), transform var(--dur-1); cursor:pointer;}
.swipe-lb-dot.on{background:#fff; transform:scale(1.25);}
.swipe-lb-detail{position:absolute; left:50%; bottom:calc(var(--sab) + 16px); transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:7px; background:rgba(214,169,90,.92); color:var(--on-gold); border:none; font-family:var(--display); font-weight:700; font-size:var(--fs-2); padding:10px 18px; border-radius:99px; cursor:pointer; box-shadow:var(--sh-3);}
.swipe-lb-detail:hover{background:#E0B868;}
@media (hover:none){ .swipe-lb-arrow{display:none;} }
/* ---------- GALERÍA v5 (23/09/2026): fotos de ejemplo de la ficha ---------- */
.gal-hoja{max-width:560px;}
.gal-kicker{margin:0 0 4px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.gal-titulo{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(22px,6vw,28px); line-height:1.1; color:var(--text); padding-right:40px;}
.gal-sci{margin:2px 0 0; font-style:italic; color:var(--muted); font-size:var(--fs-2);}
.gal-intro{margin:10px 0 14px; font-size:var(--fs-1); line-height:1.45; color:var(--muted); max-width:46ch;}
.gal-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -2px 12px; padding:2px;}
.gal-chips::-webkit-scrollbar{display:none;}
.gal-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text);
  font-family:var(--display); font-weight:600; font-size:var(--fs-1); cursor:pointer;}
.gal-chip b{font-family:var(--mono); font-weight:600; font-size:var(--fs-0); color:var(--muted);}
.gal-chip.on{background:var(--text); color:var(--panel); border-color:var(--text);}
.gal-chip.on b{color:color-mix(in srgb,var(--panel) 70%,transparent);}
.gal-rejilla{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
/* v6 (23/09/2026): cada foto es una tarjeta: la imagen arriba y, debajo, una
   franja con lo que es (Macho, Hembra, Joven...) en su color y el crédito.
   Nada escrito encima de la foto: se ve el ave entera y la etiqueta se lee
   siempre igual, sea clara u oscura la imagen. */
.gal-foto{position:relative; margin:0; border-radius:14px; overflow:hidden; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0;}
.gal-foto.grande{grid-column:1 / -1; border-radius:18px;}
.gal-img{position:relative; aspect-ratio:4/3; background:var(--panel2); overflow:hidden;}
.gal-foto.grande .gal-img{aspect-ratio:3/2;}
.gal-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;}
.gal-foto figcaption{display:flex; flex-direction:column; gap:2px; padding:7px 9px 8px; border-top:3px solid var(--gal-c, var(--muted));}
.gal-foto.grande figcaption{padding:9px 12px 10px;}
.gal-foto.g-general{--gal-c:var(--text);} .gal-foto.g-macho{--gal-c:var(--teal);} .gal-foto.g-hembra{--gal-c:var(--acc-lilac);}
.gal-foto.g-joven{--gal-c:var(--gold);} .gal-foto.g-vuelo{--gal-c:#3f7fb6;}
.gal-etq{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gal-c, var(--muted)); line-height:1.2;}
.gal-foto.grande .gal-etq{font-size:12px;}
.gal-foto.g-general .gal-etq{color:var(--muted);}
.gal-foto .gal-cred{color:var(--muted); opacity:1;}
.gal-foto .gal-tags{position:absolute; top:7px; left:7px; z-index:1;}
.gal-hueco .gal-img{background:none;}
.gal-par{grid-auto-flow:row;}
.gal-par > .g-macho{grid-column:1;} .gal-par > .g-hembra{grid-column:2;}
.gal-igual{display:flex; align-items:center; gap:10px; margin:16px 0 0; padding:11px 13px; border-radius:14px; border:1px dashed var(--line); background:color-mix(in srgb,var(--panel2) 60%,transparent);
  font-size:var(--fs-1); line-height:1.4; color:var(--muted);}
.gal-igual b{color:var(--text);}
.gal-igual .gal-simb{font-size:18px; color:var(--text); letter-spacing:-.05em; flex:none;}
.gal-tags{display:flex; flex-wrap:wrap; gap:4px;}
.gal-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.92); color:#1d2320;}
.gal-tag.g-macho{background:color-mix(in srgb,var(--teal) 88%,#fff); color:#fff;}
.gal-tag.g-hembra{background:color-mix(in srgb,var(--acc-lilac) 88%,#fff); color:#fff;}
.gal-tag.g-joven{background:color-mix(in srgb,var(--gold) 90%,#fff); color:#1d2320;}
.gal-tag.g-vuelo{background:#3f7fb6; color:#fff;}
.gal-tag.g-fuera{background:rgba(0,0,0,.55); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.gal-tag.g-avedex{background:var(--gold); color:#1d2320;}
.gal-meta{font-size:var(--fs-1); font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.gal-cred{font-size:10px; line-height:1.25; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gal-foto .ed-foto{position:absolute; top:6px; right:6px; z-index:2;}
.gal-hueco{background:linear-gradient(100deg, var(--panel2) 30%, color-mix(in srgb,var(--panel2) 60%,var(--panel)) 50%, var(--panel2) 70%) 0 0 / 300% 100%; animation:galHueco 1.4s linear infinite;}
@keyframes galHueco{from{background-position:100% 0;} to{background-position:-200% 0;}}
@media (prefers-reduced-motion: reduce){ .gal-hueco{animation:none;} }
html.perf-bajo .gal-hueco{animation:none;}
.gal-sec{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; margin:20px 2px 8px;}
.gal-sec:first-of-type{margin-top:2px;}
.gal-sec-t{font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--text); display:inline-flex; align-items:center; gap:7px;}
.gal-sec-t::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--muted);}
.gal-sec-t.g-macho::before{background:var(--teal);} .gal-sec-t.g-hembra::before{background:var(--acc-lilac);} .gal-sec-t.g-joven::before{background:var(--gold);}
.gal-sec-t.g-general::before{background:var(--text);} .gal-sec-t.g-vuelo::before{background:#3f7fb6;}
.gal-sec-t.g-par::before{background:linear-gradient(90deg, var(--teal) 50%, var(--acc-lilac) 50%);}
.gal-sec-s{font-size:var(--fs-0); color:var(--muted);}
.gal-sec-n{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.gal-nota{margin:12px 2px 0; font-size:var(--fs-1); line-height:1.45; color:var(--muted);}
.gal-reintentar{margin-left:6px; height:28px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-weight:600; cursor:pointer;}
.gal-credito{margin-top:14px;}
/* Pie del visor a pantalla completa */
.swipe-lb-pie{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:28px 18px calc(var(--sab) + 34px); background:linear-gradient(180deg, transparent, rgba(0,0,0,.78)); color:#fff; pointer-events:auto;}
.swipe-lb-pie p{margin:0; max-width:640px; margin-inline:auto;}
.gal-pie-t{font-size:var(--fs-2); line-height:1.35;}
.gal-pie-c{margin-top:3px !important; font-size:var(--fs-1); color:rgba(255,255,255,.78);}
.gal-pie-c a{color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.swipe-lb-dots.with-pie{bottom:calc(var(--sab) + 12px);}

.sp-head .ref{cursor:pointer; width:64px; height:64px}
label.lbl{display:block; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:13px;}
.inp{width:100%; margin-top:6px; background:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; color:var(--text); font-size:var(--fs-3); font-family:inherit;}
.inp:focus{border-color:transparent;}
textarea.inp{min-height:64px; resize:vertical;}
.poses-banner{margin-top:12px; background:linear-gradient(180deg,color-mix(in srgb, var(--plata) 16%, transparent),color-mix(in srgb, var(--plata) 4%, transparent)); border:1px solid var(--plata); border-radius:var(--r-md); padding:10px 12px; font-family:var(--mono); font-size:var(--fs-2); color:var(--text); text-align:center;}
.danger{width:100%; margin-top:18px; background:transparent; border:1px solid color-mix(in srgb, var(--err-text) 70%, transparent); color:var(--err-text); border-radius:var(--r-md); padding:11px; font-size:var(--fs-3); cursor:pointer; font-family:inherit;}
.danger:hover{background:var(--err-bg);}
.hidden{display:none;}
.profile-level-row{display:flex; align-items:stretch; gap:10px; margin-top:14px;}
.profile-level-row .session{flex:1 1 0; min-width:0; margin-top:0;}
.profile-level-row .profile-card{width:auto; height:100%; flex:1 1 auto;}
.level-mini{flex:1 1 0; min-width:0; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px 15px; display:flex; flex-direction:column; justify-content:center; gap:5px; font:inherit; color:inherit; text-align:left; cursor:pointer; box-shadow:var(--sh-3); transition:box-shadow var(--dur-1), transform var(--dur-1);}
.level-mini.clickable:active{transform:scale(.98);}
.level-mini.clickable:hover{transform:translateY(-1px); box-shadow:var(--sh-3);}
.level-mini-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.level-mini-rank{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:4px;}
.rango-art{display:inline-block; vertical-align:middle; flex-shrink:0;}
@keyframes rango-flap{0%,100%{transform:scaleY(1) rotate(0deg);} 50%{transform:scaleY(.82) rotate(-12deg);}}
/* 23/09/2026: el icono del rango va quieto (antes subía y bajaba y aleteaba):
   más serio. Se quitan las animaciones; los @keyframes quedan sin uso. */
.rango-art:not(.rango-raptor) .rango-wing{transform-origin:27px 25px;}
@keyframes rango-soar{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-2px) rotate(2deg);}}
.rango-raptor{}
@keyframes rango-glide-l{0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-9deg);}}
@keyframes rango-glide-r{0%,100%{transform:rotate(0deg);} 50%{transform:rotate(9deg);}}
.rango-wing-l{transform-origin:32px 22px;}
.rango-wing-r{transform-origin:32px 22px;}
@keyframes rango-bob2{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.rango-art-ill{animation:none;}
.rango-card{display:flex; align-items:center; gap:12px;}
.rango-card-art{flex-shrink:0; display:flex; align-items:center; justify-content:center; width:52px; height:44px;}
.rango-desc{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:4px; line-height:1.5;}
.level-mini-num{font-family:var(--display); font-weight:600; font-size:var(--fs-3); line-height:1; white-space:nowrap;}
.level-mini-num b{color:var(--gold);}
.level-mini-xp{font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); white-space:nowrap;}
.xpbar.sm{height:6px; margin-top:0;}

/* ---------- pantalla de inicio: tarjetas estilo "premium" ---------- */
/* ==== HOME PREMIUM: 4. responsive por diseño ====
   clamp() ligado a vh para que en pantallas bajas (teclado, split-screen,
   móviles compactos) todo se ESCALE hacia abajo en vez de desbordar -- el
   contenido nunca se recorta, solo ocupa menos aire. */
.home-grid{display:none; grid-template-columns:repeat(2,1fr); gap:clamp(8px,1.6vh,14px); width:100%; margin-top:clamp(10px,1.8vh,18px);}
.home-grid.show{display:grid;}
.home-card{position:relative; grid-column:span 1; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(12px,2.2vh,18px); cursor:pointer; color:var(--text); text-align:left; touch-action:manipulation; transition:box-shadow var(--dur-1), transform var(--dur-1), border-color var(--dur-1); box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.05);}
.home-card::after{content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%); pointer-events:none;}
.home-card:hover{transform:translateY(-2px); border-color:rgba(214,169,90,.4); box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.05);}
.home-card:active{transform:scale(.97); transition:transform var(--dur-0) var(--ease);}
.home-card.primary{position:relative; isolation:isolate; grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; border:none; padding:26px 24px; background:linear-gradient(135deg, var(--panel2), var(--panel) 75%); box-shadow:0 16px 32px -16px rgba(214,169,90,.45);}
/* ==== HOME PREMIUM: 2. glow del hero -- menos "feria", más "joyería":
   opacidad base baja y quieto; en desktop (hover:hover) se anima solo al
   pasar el ratón o enfocar. En móvil se queda estático siempre. */
.home-card.primary::before{content:''; position:absolute; inset:-14px; z-index:-1; border-radius:var(--r-xl); background:conic-gradient(from 120deg, var(--gold), var(--teal), var(--gold)); filter:blur(20px); opacity:.18;}
@media (hover:hover){
  .home-card.primary::before{transition:opacity var(--dur-2) var(--ease);}
  .home-card.primary:hover::before, .home-card.primary:focus-visible::before{opacity:.4; animation:homePrimaryGlow 5s ease-in-out infinite;}
}
.home-card.primary::after{border:1px solid rgba(214,169,90,.35); background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%);}
.home-card.primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -16px rgba(214,169,90,.55);}
/* ==== HOME PREMIUM: 2. icono de cámara ORIGINAL, mismo <svg>, reducido a
   ~44px en un squircle translúcido arriba a la derecha (antes 90px suelto
   en la fila, restaba seriedad por tamaño, no por diseño). */
.home-card.primary .home-icon{filter:drop-shadow(0 4px 10px rgba(214,169,90,.5)); position:absolute; top:16px; right:16px; z-index:2; width:44px; height:44px; padding:7px; background:rgba(255,255,255,.14); border-radius:var(--r-lg); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
@keyframes homePrimaryGlow{0%,100%{opacity:.32; transform:scale(1);} 50%{opacity:.5; transform:scale(1.035);}}
/* Última foto registrada, de fondo en la tarjeta "Registrar ave": difuminada
   y con un velo degradado encima para que el texto/CTA/icono sigan
   leyéndose perfectamente -- un guiño personal sin dejar de notarse que es
   un botón. Sin fotos todavía (usuario nuevo) la tarjeta se queda tal cual
   estaba (degradado dorado liso), sin huecos ni imágenes rotas. */
.home-hero-photo-wrap{position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; opacity:0; transition:opacity .6s var(--ease);}
.home-card.primary.has-photo .home-hero-photo-wrap{opacity:1;}
.home-hero-photo-img{position:absolute; inset:-14%; background-size:cover; background-position:center; filter:blur(5px) saturate(1.15) brightness(.82); transform:scale(1) translate(0,0);}
/* ==== HOME PREMIUM: 2. Ken Burns sutil (solo con foto y sin reduced-motion:
   [data-motion="reducido"]/prefers-reduced-motion ya apagan cualquier
   animation-duration globalmente, así que no hace falta condición extra aquí). */
.home-card.primary.has-photo .home-hero-photo-img{animation:homeHeroKenBurns 18s ease-in-out infinite alternate;}
@keyframes homeHeroKenBurns{ from{transform:scale(1) translate(0,0);} to{transform:scale(1.06) translate(-1.5%,-1%);} }
.home-hero-photo-wrap::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, var(--panel2) 10%, rgba(20,30,26,.52) 55%, rgba(20,30,26,.18) 90%);}
/* Bloque que envuelve el inicio "obturador" (acción principal + continuidad):
   apilado en columna, no en fila -- antes era una sola fila horizontal para
   la vieja tarjeta "Registrar ave"; ahora contiene el obturador, el epígrafe
   "Tienes a medias" y las tarjetas de continuidad, uno debajo de otro. */
.home-registrar-row{grid-column:1/-1; display:flex; flex-direction:column; gap:4px;}
.home-pend-count{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg1, var(--panel));}
/* ==== HOME INSTAGRAM-STYLE: secciones como círculos (estilo destacados) ====
   Oculto por completo hoy (ver #homeGrid #homeSectionsGrid más abajo); se
   deja el CSS porque #homeSectionsGrid sigue en el DOM. */
.home-sections-grid{grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; row-gap:16px; margin-top:2px;}
.home-card-circle{flex:0 0 auto; width:19%; min-width:60px; display:flex; flex-direction:column; align-items:center; gap:7px;}
#btnPendientes{display:none;}
#btnPendientes.show{display:flex;}

/* ==== INICIO · OBTURADOR (ver prototipo-inicio.html) ====
   Acción principal única: un botón circular grande con el anillo de progreso
   de la colección alrededor, en vez de las antiguas tarjetas .reg-path-card
   apiladas (esas se conservan tal cual para el selector de iniciarFlujoCaptura,
   ver más abajo -- este bloque es solo del inicio). */
.reg-hero{position:relative; display:flex; flex-direction:column; align-items:center; width:100%; padding:8px 0 2px;}
/* Foco de luz detrás del obturador: da profundidad y separa la acción
   principal del fondo (que en una cuenta nueva es un degradado liso y en el
   escritorio es la última foto muy difuminada). Puramente decorativo. */
.reg-hero::before{content:''; position:absolute; top:-10px; left:50%; width:min(300px,88%); height:280px;
  transform:translateX(-50%); pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--gold) 16%,transparent) 0%,
    color-mix(in srgb,var(--gold) 6%,transparent) 42%,
    transparent 70%);}
.reg-shutter{position:relative; z-index:1; width:212px; height:212px; max-width:100%; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.reg-shutter-ring{position:absolute; inset:0; transform:rotate(-90deg); overflow:visible;}
/* La pista se saca de --muted y no de --panel2: sobre la foto ambiental del
   escritorio, --panel2 se perdía por completo en los temas claros. */
.reg-shutter-ring .pista{fill:none; stroke:color-mix(in srgb,var(--muted) 32%,transparent); stroke-width:6;}
/* El avance va más grueso que la pista a propósito: así el progreso "monta"
   sobre el carril en vez de confundirse con él. */
.reg-shutter-ring .avance{fill:none; stroke:var(--teal); stroke-width:8.5; stroke-linecap:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--teal) 50%,transparent));
  transition:stroke-dashoffset 1.1s var(--ease);}
/* Núcleo dorado con volumen: luz especular arriba a la izquierda, sombra
   interior abajo y dos aros (hueco del color del fondo + hairline) que lo
   separan del anillo de progreso sin ensanchar la caja. */
.reg-shutter-core{position:relative; width:144px; height:144px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; color:var(--on-gold); overflow:hidden;
  background:radial-gradient(circle at 34% 26%, color-mix(in srgb,var(--gold) 55%,#fff) 0%, var(--gold) 44%, #A87B33 100%);
  box-shadow:0 0 0 4px var(--ink), 0 0 0 5px color-mix(in srgb,var(--line) 80%,transparent),
             0 18px 38px -16px rgba(0,0,0,.55),
             inset 0 -12px 24px -6px rgba(88,58,10,.30), inset 0 2px 0 rgba(255,255,255,.45);
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.reg-shutter-core::after{content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(158deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.05) 34%, transparent 58%);}
.reg-shutter:active .reg-shutter-core{transform:scale(.955);}
@media (hover:hover){ .reg-shutter:hover .reg-shutter-core{transform:scale(1.025);} }
.reg-shutter-core svg{position:relative; z-index:1; width:36px; height:36px;}
.reg-shutter-core span{position:relative; z-index:1; font-family:var(--display); font-weight:600; font-size:var(--fs-3); letter-spacing:.01em;}
.reg-shutter-chip{position:absolute; top:4px; right:-2px; z-index:2; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.05em;
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line)); color:var(--gold); border-radius:99px; padding:3px 9px;
  box-shadow:var(--sh-1);}
/* Halo suave y lento, apagado con reduced-motion/[data-motion="reducido"]. */
.reg-shutter-halo{position:absolute; width:144px; height:144px; border-radius:50%; pointer-events:none;
  animation:regHalo 3.6s ease-in-out infinite;}
@keyframes regHalo{0%,100%{box-shadow:0 0 0 0 rgba(214,169,90,0);}50%{box-shadow:0 0 0 18px rgba(214,169,90,.09);}}
/* Progreso de la colección: en una "pastilla" de cristal, no texto suelto.
   Sobre la foto ambiental difuminada el texto plano no se leía. */
.reg-hero-cap{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; max-width:100%;
  margin:18px 0 0; padding:7px 10px 7px 14px; border-radius:99px; cursor:pointer;
  background:color-mix(in srgb,var(--panel) 90%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); box-shadow:var(--sh-3);
  font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:left;
  transition:border-color var(--dur-1), transform var(--dur-0);}
@supports not (backdrop-filter:blur(1px)){ .reg-hero-cap{background:var(--panel);} }
.reg-hero-cap:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));}
.reg-hero-cap:active{transform:scale(.98);}
.reg-hero-cap .cap-tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reg-hero-cap b{color:var(--text); font-family:var(--display); font-weight:700; font-size:var(--fs-2);}
.reg-hero-cap .cap-chev{width:13px; height:13px; flex:0 0 auto; color:var(--teal);}

/* Las 3 rutas secundarias, reducidas a accesos compactos con icono + etiqueta
   corta -- la explicación larga de cada una ya vive en su propio flujo y en
   el tutorial de Barrabas, así que aquí sobra. Ocupan TODA la fila (width:100%):
   .reg-hero centra sus hijos, así que sin esto se encogían al ancho del texto. */
.reg-otras{display:flex; align-items:stretch; gap:9px; width:100%; padding:20px 0 2px; position:relative; z-index:1;}
.reg-otra{flex:1 1 0; min-width:0; border:1px solid var(--line); border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:13px 6px 12px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; cursor:pointer;
  color:var(--text); text-align:center; font:inherit; box-shadow:var(--sh-3);
  transition:border-color var(--dur-1), transform var(--dur-0), box-shadow var(--dur-1);}
@supports not (backdrop-filter:blur(1px)){ .reg-otra{background:var(--panel);} }
.reg-otra:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); transform:translateY(-2px); box-shadow:var(--sh-3);}
.reg-otra:active{transform:scale(.97);}
.reg-otra-ic{width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;}
.reg-otra-ic svg{width:19px; height:19px;}
.reg-otra span:last-child{font-family:var(--display); font-weight:600; font-size:var(--fs-1); line-height:1.28; color:var(--text);}

/* Zona de continuidad: "Tienes a medias" -- solo estados reales del usuario
   (pendientes por añadir, aves nuevas cerca), nunca rutas de registro. */
.home-sec-lab{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:22px 0 9px; margin:0;}
.home-sec-lab::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent);}
.home-cont{border:1px solid var(--line); border-radius:var(--r-lg); padding:13px; margin-bottom:8px;
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:12px; cursor:pointer; color:var(--text); text-align:left; font:inherit; width:100%;
  box-shadow:var(--sh-3);
  transition:border-color var(--dur-1), transform var(--dur-0), box-shadow var(--dur-1);}
@supports not (backdrop-filter:blur(1px)){ .home-cont{background:var(--panel);} }
@media (hover:hover){ .home-cont:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line)); transform:translateY(-1px);} }
.home-cont:active{transform:scale(.99);}
.home-cont-ic{width:42px; height:42px; border-radius:var(--r-md); flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.home-cont-ic svg{width:20px; height:20px;}
.home-cont-tx{flex:1; min-width:0;}
.home-cont-t{font-family:var(--display); font-weight:600; font-size:var(--fs-3);}
.home-cont-s{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:3px;}
.home-cont-n{font-family:var(--mono); font-size:var(--fs-1); color:var(--gold); border:1px solid var(--gold);
  border-radius:99px; padding:2px 8px; flex:0 0 auto;}
.home-cont.viva{border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); background:color-mix(in srgb,var(--teal) 7%,var(--panel));}
.home-cont .reg-path-chev{width:18px; height:18px; flex:0 0 auto; color:var(--muted);}
@media (prefers-reduced-motion: reduce){ .reg-shutter-halo{animation:none;} .reg-shutter-ring .avance{transition:none;} }
html[data-motion="reducido"] .reg-shutter-halo{animation:none;}
html[data-motion="reducido"] .reg-shutter-ring .avance{transition:none;}
/* Partícula que "viaja" de la tarjeta "Tengo la foto, la añado luego" hasta
   el círculo de Pendientes al guardar (ver animarPendienteAlCirculo). */
.pend-fly-particle{position:fixed; z-index:90; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--gold); box-shadow:0 4px 14px -4px rgba(214,169,90,.6); pointer-events:none; transition:transform .55s var(--ease), opacity .55s var(--ease);}
.home-card:not(.primary):not(.about).home-card-circle{align-items:center; text-align:center; padding-bottom:0;}
.home-circle-icon{position:relative; width:clamp(50px,14vw,64px); height:clamp(50px,14vw,64px); border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-3); background:var(--panel2); border:1px solid var(--line);}
.home-circle-icon svg{width:100%; height:100%;}
.home-circle-label{font-family:var(--display); font-weight:600; font-size:var(--fs-1); line-height:1.2; color:var(--text);}
.home-circle-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (min-width:640px){
  .home-sections-grid{justify-content:center; column-gap:22px;}
  .home-card-circle{width:auto; min-width:78px;}
}
.home-hero-text{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0;}
.home-eyebrow{display:inline-flex; align-items:center; gap:6px; background:rgba(214,169,90,.18); color:var(--gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:99px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.home-eyebrow::before{content:''; width:5px; height:5px; flex:0 0 auto; border-radius:99px; background:var(--gold);}
.home-card.primary .home-eyebrow{max-width:calc(100% - 56px);}
.home-card.primary .home-title{font-size:clamp(24px,5vw,34px); line-height:1.08; margin:2px 56px 0 0;}
.home-card.primary .home-sub{line-height:var(--lh);font-size:var(--fs-2);}
.home-cta{display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--on-gold); font-family:var(--display); font-weight:700; font-size:var(--fs-2); padding:9px 16px; border-radius:99px; margin-top:6px;}
.home-cta svg{transition:transform var(--dur-1) var(--ease);}
@media (hover:hover){ .home-card.primary:hover .home-cta svg{transform:translateX(3px);} }
.home-card.primary:active .home-cta svg{transform:translateX(3px);}
.home-icon{width:50px; height:50px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.home-icon img, .home-icon svg{width:100%; height:100%; object-fit:contain; border-radius:var(--r-lg);}
.home-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3); margin-top:12px;}
.home-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.3;}
/* ==== HOME PREMIUM: 3. las 4 tarjetas, de casual a profesional ====
   Alineación izquierda; icono ORIGINAL reescalado (nunca redibujado) arriba
   a la izquierda; título+subtítulo vivo debajo; chevron abajo a la derecha.
   Mismo <svg>/<img> de siempre dentro de .home-icon, solo cambia el tamaño
   y la posición vía CSS. */
.home-card:not(.primary):not(.about){ align-items:flex-start; text-align:left; padding-bottom:34px; }
.home-card:not(.primary):not(.about) .home-icon{width:clamp(36px,9vw,44px); height:clamp(36px,9vw,44px);}
.home-card:not(.primary):not(.about) .home-title{margin-top:10px; font-size:var(--fs-3);}
.home-card-body{line-height:var(--lh);display:flex; flex-direction:column; gap:3px; min-width:0; width:100%;}
.home-card-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.3; min-height:1.3em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.home-card-dot{display:inline-block; width:7px; height:7px; border-radius:99px; background:var(--gold); margin-left:6px; vertical-align:middle; box-shadow:0 0 0 3px rgba(214,169,90,.22);}
.home-card:not(.primary):not(.about) .home-chevron{position:absolute; right:14px; bottom:12px;}
@media (hover:hover){
  .home-card:not(.primary):not(.about):hover{border-color:rgba(214,169,90,.4); transform:translateY(-2px); box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.05);}
}
.home-card:not(.primary):not(.about):active{transform:scale(.98);}
.home-card.about{grid-column:1/-1; flex-direction:row; align-items:center; gap:14px; padding:14px 18px;}
.home-card.about .home-icon{width:42px; height:42px;}
.home-card.about .home-title{margin-top:0; font-size:var(--fs-3);}
.home-about-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.home-chevron{flex:0 0 auto; width:18px; height:18px; color:var(--muted); display:flex; align-items:center; justify-content:center;}
/* ==== HOME PREMIUM: fila inferior fina (Acerca de + enlaces fusionados) ==== */
.home-bottom-row{grid-column:1/-1; display:flex; align-items:center; gap:10px;}
.home-bottom-row .home-card.about{flex:1 1 auto; padding:10px 14px;}
.home-bottom-row .home-links{display:flex; margin-top:0; flex:0 0 auto; gap:10px;}
.home-links{display:none; align-items:center; justify-content:center; gap:18px; margin-top:14px;}
.home-links.show{display:flex;}
.home-link{display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; padding:4px; text-decoration:underline; text-decoration-color:transparent; transition:color var(--dur-1), text-decoration-color var(--dur-1);}
.home-link:hover{color:var(--teal); text-decoration-color:var(--teal);}
/* ==== HOME PREMIUM: franja de identidad ==== */
/* display:flex + flex-wrap (en vez de un overflow:hidden/max-height fijo
   que recortaba el saludo en vertical si no cabía en una sola línea): si
   algún día no cabe todo, las pills bajan a una segunda línea en vez de
   cortar el texto a media palabra. */
/* ==== INICIO · TARJETA DE IDENTIDAD ====
   Antes eran tres bloques sueltos sobre el fondo (saludo, chip de sync con
   texto y una fila de píldoras). Ahora van en una sola tarjeta con el mismo
   lenguaje que el resto del inicio: sobre la foto ambiental difuminada, el
   texto suelto en gris no se leía. */
.home-identity{grid-column:1/-1; width:100%; border:1px solid var(--line); border-radius:var(--r-xl); padding:14px 14px 12px;
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-4);}
@supports not (backdrop-filter:blur(1px)){ .home-identity{background:var(--panel);} }
.home-identity-top{display:flex; align-items:center; gap:12px;}
.home-identity-greet{min-width:0; flex:1 1 auto;}
.home-identity-saludo{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 2px;}
.home-identity-hello{font-family:var(--display); font-weight:600; font-size:var(--fs-5); line-height:1.15; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Sin capitalize: con él salía "Jueves, 3 De Septiembre" (el "de" también). */
.home-identity-date{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:3px; white-space:nowrap;}

/* Avatar + punto de estado de sincronización */
.home-av-wrap{position:relative; flex:0 0 auto;}
.home-avatar{width:46px; height:46px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:var(--fs-5); color:var(--on-gold);
  background:radial-gradient(circle at 32% 26%, color-mix(in srgb,var(--gold) 55%,#fff), var(--gold) 55%, #A87B33);
  box-shadow:0 0 0 2px var(--panel), 0 0 0 3.5px color-mix(in srgb,var(--gold) 55%,transparent), var(--sh-3);}
.home-avatar img{width:100%; height:100%; object-fit:cover;}
.home-avatar svg{width:22px; height:22px; color:var(--on-gold);}
/* Estado de sincronización: ya no es un chip con texto, es un punto sobre el
   avatar (teal = al día, girando = subiendo, dorado = pendiente/sin conexión).
   Lo pinta actualizarChipSync(), que sigue distinguiendo los mismos casos. */
.sync-chip{position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; padding:0;
  border:2.5px solid var(--panel); background:var(--muted); box-shadow:var(--sh-1); cursor:help;}
.sync-chip.ok{background:var(--teal);}
.sync-chip.pend{background:var(--gold);}
.sync-chip.subiendo{line-height:var(--lh);background:var(--panel); border-color:var(--panel);}
.sync-chip.subiendo::after{content:''; position:absolute; inset:-1px; border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--teal) 28%,transparent); border-top-color:var(--teal);
  animation:syncSpin .85s linear infinite;}
@keyframes syncSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .sync-chip.subiendo::after{animation:none;} }
html[data-motion="reducido"] .sync-chip.subiendo::after{line-height:var(--lh);animation:none;}

/* Fila de métricas: nivel + rango ocupan lo que sobra, el calendario es solo
   un recuadro (abre el calendario/racha, ver wireHomeIdentity). */
.home-identity-pills{display:flex; align-items:stretch; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line);}
.home-pill-nivel{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:8px 11px; color:var(--text); font:inherit;
  transition:border-color var(--dur-1), transform var(--dur-0);}
.home-pill-nivel:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));}
.home-pill-nivel:active{transform:scale(.98);}




.home-pill-top{display:flex; align-items:baseline; gap:6px; min-width:0;}
#homePillNivelLabel{font-family:var(--display); font-weight:700; font-size:var(--fs-2); line-height:1.1; color:var(--text); flex:0 0 auto;}
.home-pill-rango-n{font-family:var(--display); font-weight:600; font-size:var(--fs-2); color:var(--gold);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.home-pill-rango-n:not(:empty)::before{content:'· '; color:var(--muted);}
/* Selector con el botón delante a propósito: más abajo sigue viva la regla
   antigua de las píldoras (.home-pill-bar a 40px), que si no ganaría por
   orden y dejaría la barra de XP en un muñón. */
.home-pill-nivel .home-pill-bar{display:block; width:auto; height:4px; border-radius:99px; background:var(--line); margin-top:6px; overflow:hidden;}
.home-pill-nivel .home-pill-bar-fill{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--teal-deep),var(--teal)); transition:width var(--dur-3) var(--ease);}
.home-pill-xp{display:block; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:4px;}

/* Calendario: recuadro estrecho con el día de hoy; el distintivo dorado con
   los días de racha solo aparece si hay racha viva. */
.home-pill-racha{position:relative; width:52px; flex:0 0 auto; border-radius:var(--r-md); cursor:pointer; overflow:hidden;
  background:var(--panel2); border:1px solid var(--line); color:var(--text); font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 0 7px;
  transition:border-color var(--dur-1), transform var(--dur-0);}
.home-pill-racha:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));}
.home-pill-racha:active{transform:scale(.96);}
.home-pill-racha::before{content:''; position:absolute; top:0; left:0; right:0; height:12px;
  background:color-mix(in srgb,var(--teal) 78%,transparent);}
.home-cal-dia{font-family:var(--display); font-weight:700; font-size:var(--fs-4); line-height:1; margin-top:12px; color:var(--text);}
.home-cal-mes{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px;}



#homePillRachaLabel svg{width:9px; height:9px;}
/* Aleteos dentro de la tarjeta: el borde va en la propia fila para que
   desaparezca con ella cuando no hay sesión (ver pintarHistoriasRow). */
.home-identity .home-historias-row{margin-top:13px; padding-top:12px; border-top:1px solid var(--line);}
/* Dentro de la tarjeta el aro de cada burbuja se recorta contra el panel, no
   contra el fondo de la página. */
.home-identity .historia-avatar{border-color:var(--panel);}

.home-pill-rango{width:16px; height:16px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); overflow:hidden; background:color-mix(in srgb,var(--gold) 14%,transparent)}
.home-pill-rango svg, .home-pill-rango img{width:100%; height:100%; object-fit:contain}
.home-pill-text{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.home-pill-label{font-weight:700; font-size:var(--fs-1); line-height:1;}
.home-pill-bar{width:40px; height:3px; border-radius:99px; background:var(--panel2); overflow:hidden;}
.home-pill-bar-fill{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal-deep),var(--teal)); transition:width var(--dur-3) var(--ease);}

/* La píldora de colección se vuelve redundante con el anillo de progreso del
   obturador (ver .reg-shutter-ring): se oculta pero se deja en el DOM, sin
   quitarle el id, porque pintarHomeIdentity() la sigue actualizando. */
.home-pill-coleccion{display:none;}
/* Prioridad al quedarse sin sitio: racha > nivel > colección (se ocultan
   por completo, nunca se comprimen). */
@media (max-width:400px){ .home-pill-coleccion{display:none;} }
@media (max-width:340px){ .home-pill-nivel{display:none;} }
/* ----- Inicio a pantalla completa: los bloques llenan la altura disponible ----- */

@media (max-width:1023px){
  body.home-active .home-grid.show{
    min-height:calc(100dvh - 178px - var(--sat) - var(--sab));
    min-height:calc(100dvh - 178px - var(--sat) - var(--sab));
    /* Un track "auto" más al principio: la franja de identidad (nueva) es
       ahora el primer hijo de #homeGrid, por delante de #historiasRow. */
    grid-template-rows:auto auto auto 1fr 1fr auto;
  }
}
body.home-active .home-grid.show .home-card:not(.primary):not(.about){ justify-content:center; }
/* ==== HOME PREMIUM: 4. Tablet (640-1023px) ====
   4 columnas: identidad/historias/hero/bottom siguen ocupando todo el ancho
   (ya tienen grid-column:1/-1 como regla base), y las 4 tarjetas -- que ya
   son grid-column:span 1 -- caen solas en una única fila de 4. Solo hace
   falta ajustar el número de filas explícitas (una fila menos que en
   móvil, porque las 4 tarjetas ya no se reparten en 2 filas de 2). */
@media (min-width:640px) and (max-width:1023px){
  .home-grid{grid-template-columns:repeat(4,1fr);}
  body.home-active .home-grid.show{ grid-template-rows:auto auto auto 1fr auto; }
  body.home-active .home-grid.show .home-card:not(.primary):not(.about){ justify-content:flex-start; }
}
/* ==== HOME PREMIUM: 4-5. Desktop (≥1024px) ====
   Antes había aquí una composición en dos zonas (identidad+hero a la
   izquierda, Aleteos+tarjetas a la derecha) que ensanchaba .main hasta
   1120px SOLO en el inicio -- eso dejaba la barra inferior (siempre en
   760px, o en 760/1120 según otra regla) descuadrada respecto al
   contenido de encima, que es justo el "no está centrado" que se reportó.
   Se retira esa composición especial: el inicio se queda en la misma
   columna centrada de 760px que el resto de pantallas (Colección, Mapa,
   Logros, Juegos) y que la barra inferior, en cualquier ancho. */
/* ==== HOME PREMIUM: 5. fondo ambiental (solo desktop/tablet apaisada) ====
   Con foto: la última captura del propio usuario, muy difuminada -- cambia
   con cada captura nueva, así que es gratis y personal. Sin foto: gradiente
   lentísimo entre --bg1/--bg2 con dos manchas radiales de --teal/--gold. En
   móvil no se pinta nunca (coste de GPU, y no hay sitio vacío que llenar). */
.home-ambient-bg{display:none;}
@media (min-width:1024px){
  .home-ambient-bg{display:block; position:fixed; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(120deg, var(--bg1), var(--bg2)); background-size:200% 200%;}
  /* FIX: fuera del inicio, el fondo ambiental queda colgando detrás de otras pantallas (mapa, colección...) */
  body:not(.home-active) .home-ambient-bg{display:none;}
  .home-ambient-bg.no-photo{animation:homeAmbientDrift 20s ease-in-out infinite;}
  .home-ambient-bg.no-photo::before{content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--teal) 6%, transparent) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--gold) 6%, transparent) 0%, transparent 45%);}
  /* Menos saturación y más desenfoque que antes: la foto es AMBIENTE, no
     protagonista -- con los valores anteriores competía con el obturador y
     dejaba el texto del inicio ilegible sobre las zonas claras. */
  .home-ambient-photo{position:absolute; inset:-5%; background-size:cover; background-position:center; opacity:0; transition:opacity .8s var(--ease); filter:blur(80px) saturate(.75) brightness(.42);}
  html[data-bg^="claro"] .home-ambient-photo{filter:blur(80px) saturate(.7) brightness(1.12);}
  .home-ambient-photo.show{opacity:.75;}
  /* Doble velo: viñeta radial (profundidad) + degradado vertical desde el
     color de fondo (asegura contraste bajo la cabecera y la barra inferior). */
  .home-ambient-bg::after{content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 38%, transparent 18%, var(--bg2) 120%),
               linear-gradient(180deg, var(--bg2) 0%, transparent 26%, transparent 62%, var(--bg2) 100%);
    opacity:.72;}
}
@keyframes homeAmbientDrift{0%,100%{background-position:0% 0%;} 50%{background-position:100% 100%;}}
/* ==== HOME PREMIUM: 6. celebración de especie nueva ==== */
.celebra-overlay{position:fixed; inset:0; z-index:var(--z-visor); display:flex; align-items:center; justify-content:center; background:rgba(10,14,12,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:24px;}
.celebra-overlay.show{display:flex;}
.celebra-particles{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.celebra-particle{position:absolute; top:-10%; left:var(--x,50%); width:8px; height:8px; border-radius:2px; background:var(--gold); opacity:.9; animation:celebraFall 1.8s var(--ease) forwards; animation-delay:var(--delay,0s); transform:rotate(var(--rot,0deg));}
.celebra-particle.teal{background:var(--teal);}
@keyframes celebraFall{ from{transform:translateY(0) rotate(var(--rot,0deg)); opacity:.95;} to{transform:translateY(115vh) rotate(calc(var(--rot,0deg) + 180deg)); opacity:0;} }
.celebra-card{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; max-width:340px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 24px 24px; box-shadow:var(--sh-5); animation:celebraCardIn var(--dur-3) var(--ease-pop) backwards;}
@keyframes celebraCardIn{ from{opacity:0; transform:scale(.8) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);} }
.celebra-ring{position:absolute; top:-6px; left:50%; width:132px; height:132px; transform:translate(-50%,-50%); border-radius:50%; border:3px solid var(--gold); opacity:0; animation:celebraRingOut .8s var(--ease) .1s forwards;}
.celebra-card.rara .celebra-ring{border-color:var(--gold); box-shadow:0 0 0 8px rgba(214,169,90,.15);}
@keyframes celebraRingOut{ from{opacity:.9; transform:translate(-50%,-50%) scale(.4);} to{opacity:0; transform:translate(-50%,-50%) scale(1.5);} }
.celebra-art{width:130px; height:130px; border-radius:50%; overflow:hidden; background:var(--panel2); border:3px solid var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -8px rgba(214,169,90,.5);}
.celebra-art img{width:100%; height:100%; object-fit:cover;}
/* Escalado de intensidad por rareza (celebrarNuevaEspecie -> cardEl.classList r-*) */
.celebra-card{ --r-color: var(--gold); }
.celebra-backdrop{position:absolute; inset:-32px; pointer-events:none; opacity:0; border-radius:inherit;}
.celebra-overlay.show .celebra-backdrop{opacity:1; transition:opacity .5s ease-out;}
.celebra-rays{position:absolute; inset:0; background:conic-gradient(from 0deg, transparent 0deg, var(--r-color) 8deg, transparent 20deg, transparent 160deg, var(--r-color) 172deg, transparent 184deg, transparent 340deg, var(--r-color) 352deg, transparent 360deg); opacity:.16; filter:blur(2px);}
.celebra-overlay.r-epico .celebra-backdrop .celebra-rays,
.celebra-overlay.r-legendario .celebra-backdrop .celebra-rays,
.celebra-overlay.r-mistico .celebra-backdrop .celebra-rays{animation:celebraRaySpin 9s linear infinite;}
@keyframes celebraRaySpin{ to{transform:rotate(360deg);} }
.celebra-vignette{position:absolute; inset:0; opacity:0;}
.celebra-overlay.r-epico .celebra-backdrop .celebra-vignette,
.celebra-overlay.r-legendario .celebra-backdrop .celebra-vignette,
.celebra-overlay.r-mistico .celebra-backdrop .celebra-vignette{opacity:1; background:radial-gradient(circle, transparent 30%, color-mix(in srgb, var(--r-color) 22%, transparent) 100%);}
.celebra-card{border-color:var(--line);}
.celebra-card.r-poco_comun,.celebra-card.r-raro,.celebra-card.r-epico,.celebra-card.r-legendario,.celebra-card.r-mistico{border-color:color-mix(in srgb, var(--r-color) 40%, var(--line));}
.celebra-card.r-mistico{box-shadow:var(--sh-5), 0 0 40px 4px color-mix(in srgb, var(--r-color) 35%, transparent); animation:celebraCardIn var(--dur-3) var(--ease-pop) backwards, celebraPulseBorde 1.8s ease-in-out .4s infinite;}
@keyframes celebraPulseBorde{ 0%,100%{box-shadow:var(--sh-5), 0 0 40px 4px color-mix(in srgb, var(--r-color) 25%, transparent);} 50%{box-shadow:var(--sh-5), 0 0 60px 10px color-mix(in srgb, var(--r-color) 45%, transparent);} }
.celebra-card .celebra-ring{border-color:var(--r-color); display:none;}
.celebra-card.r-poco_comun .celebra-ring,.celebra-card.r-raro .celebra-ring,.celebra-card.r-epico .celebra-ring,.celebra-card.r-legendario .celebra-ring,.celebra-card.r-mistico .celebra-ring{display:block;}
.celebra-card .celebra-art{border-color:var(--r-color); display:none;}
.celebra-card.r-poco_comun .celebra-art,.celebra-card.r-raro .celebra-art,.celebra-card.r-epico .celebra-art,.celebra-card.r-legendario .celebra-art,.celebra-card.r-mistico .celebra-art{display:flex;}
.celebra-card.r-epico .celebra-art,.celebra-card.r-legendario .celebra-art,.celebra-card.r-mistico .celebra-art{animation:celebraArtGlow 1.8s ease-in-out .3s infinite;}
@keyframes celebraArtGlow{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--r-color) 55%, transparent);} 50%{box-shadow:0 0 22px 4px color-mix(in srgb, var(--r-color) 45%, transparent);} }
.celebra-badge-comun{width:34px; height:34px; border-radius:50%; background:var(--panel2); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); margin-top:2px;}
.celebra-card.r-comun .celebra-badge-comun{display:flex;}
.celebra-eyebrow{color:var(--r-color);}
.celebra-rareza{color:var(--r-color); font-weight:700;}
.celebra-particle{background:var(--r-color);}
.celebra-eyebrow{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.15em; color:var(--gold); margin:4px 0 0;}
.celebra-name{font-family:var(--display); font-weight:800; font-size:clamp(21px,6.5vw,27px); color:var(--text); margin-top:4px;}
.celebra-rareza{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.celebra-next{margin-top:14px; width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2); text-align:left; cursor:pointer; display:flex; align-items:center; gap:10px;}
.celebra-next:hover{border-color:var(--teal);}
.celebra-cerrar{margin-top:8px; width:100%; background:var(--gold); color:var(--on-gold); border:none; border-radius:99px; padding:11px; font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer;}
/* ==== HOME PREMIUM: 7. transición entre pantallas ==== */
#app.pantalla-transicion{animation:pantallaEntrada var(--dur-1) var(--ease) .04s backwards;}
@keyframes pantallaEntrada{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
/* ==== HOME PREMIUM: 8. topbar glass sobre el fondo ambiental de desktop ====
   .head no tiene fondo propio hoy (por eso funciona igual en el resto de
   pantallas sin tocar nada): en desktop, con el inicio activo, el fondo
   ambiental fijo queda detrás y conviene una base translúcida para que los
   botones sigan leyéndose. */
@media (min-width:1024px){
  body.home-active .head{background:color-mix(in srgb, var(--panel) 55%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:0 0 var(--r-xl) var(--r-xl);}
  @supports not (backdrop-filter: blur(1px)){ body.home-active .head{background:var(--panel);} }
}
/* ----- entrada escalonada de las tarjetas al llegar al inicio -----
   Los números de nth-child cuentan un hueco más porque #historiasRow es
   ahora el primer hijo de #homeGrid (por delante de #homeRegistrarRow); las
   tarjetas dentro de #homeRegistrarRow (primary/pendientes) no se ven
   afectadas porque nth-child cuenta sobre SU propio padre, no sobre
   #homeGrid. */
.home-grid.show .home-card{animation:homeCardIn var(--dur-3) var(--ease-pop) backwards;}
.home-grid.show .home-card:nth-child(1){animation-delay:0s;}
.home-grid.show .home-card:nth-child(2){animation-delay:.05s;}
.home-grid.show .home-card:nth-child(3){animation-delay:.05s;}
.home-grid.show .home-card:nth-child(4){animation-delay:.1s;}
.home-grid.show .home-card:nth-child(5){animation-delay:.15s;}
.home-grid.show .home-card:nth-child(6){animation-delay:.2s;}
.home-grid.show .home-card:nth-child(7){animation-delay:.25s;}
@keyframes homeCardIn{from{opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);}}
/* ---------- Historias (burbujas tipo Instagram, fila encima de "Registrar ave") ---------- */
.home-historias-row{grid-column:1/-1; display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px; margin-bottom:-2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.home-historias-row::-webkit-scrollbar{display:none;}
.historia-bubble{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; padding:0; cursor:pointer; width:64px; touch-action:manipulation; animation:homeCardIn var(--dur-3) var(--ease-pop) backwards;}
.home-historias-row .historia-bubble:nth-child(1){animation-delay:0s;}
.home-historias-row .historia-bubble:nth-child(2){animation-delay:.04s;}
.home-historias-row .historia-bubble:nth-child(3){animation-delay:.08s;}
.home-historias-row .historia-bubble:nth-child(4){animation-delay:.12s;}
.home-historias-row .historia-bubble:nth-child(5){animation-delay:.16s;}
.home-historias-row .historia-bubble:nth-child(6){animation-delay:.2s;}
.historia-bubble:active .historia-ring{transform:scale(.94);}
.historia-ring{width:60px; height:60px; border-radius:50%; padding:2.5px; display:flex; align-items:center; justify-content:center; background:var(--line); transition:transform var(--dur-1);}
.historia-ring:not(.vista):not(.historia-ring-add){background:conic-gradient(from 45deg, var(--gold), var(--teal), var(--gold));}
.historia-ring.vista{background:var(--line);}
.historia-ring-add{background:none;}
.historia-avatar{line-height:var(--lh-tight);width:100%; height:100%; border-radius:50%; background:var(--panel2); border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; font-family:var(--display); font-weight:700; color:var(--text); font-size:var(--fs-4);}
.historia-avatar img{width:100%; height:100%; object-fit:cover;}
.historia-avatar-add{border:2.5px dashed var(--line); color:var(--gold); font-size:var(--fs-6); font-weight:400; line-height:1;}
/* En color de texto y con la tipografía de títulos: en --muted a 10px, sobre
   la foto ambiental del inicio, "Tu Aleteo" no se leía. */
.historia-label{font-family:var(--display); font-weight:600; font-size:var(--fs-1); color:var(--text); max-width:64px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body.home-active .home-links.show{ margin-top:12px; }
.radar-link-btn{width:100%; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel); border:1px solid var(--teal); color:var(--teal); font-family:var(--display); font-weight:600; font-size:var(--fs-3); border-radius:var(--r-md); padding:12px; cursor:pointer; touch-action:manipulation;}
.radar-link-btn:hover{background:rgba(46,182,164,.12);}
.scroll-top-btn{position:fixed; right:16px; bottom:calc(var(--bottom-nav-h) + 10px + var(--sab)); z-index:75; width:46px; height:46px; border-radius:50%; background:var(--teal); color:var(--on-teal); border:none; display:none; align-items:center; justify-content:center; box-shadow:var(--sh-2); cursor:pointer; touch-action:manipulation;}
.scroll-top-btn.show{display:flex;}
.scroll-top-btn svg{width:22px; height:22px;}
.identificar-home{display:flex; flex-direction:column; gap:12px; padding:2px 0 6px;}
.identificar-btn{line-height:var(--lh-tight);
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 6%, var(--panel)), var(--panel));
  border:1.5px solid var(--line); border-radius:var(--r-xl); padding:18px 20px;
  cursor:pointer; color:var(--text); font-family:var(--display); font-weight:600; font-size:var(--fs-4);
  text-align:left; touch-action:manipulation;
  transition:transform var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1);
  box-shadow:var(--sh-3);
}
.identificar-btn:hover{ border-color:color-mix(in srgb, var(--teal) 45%, var(--line)); box-shadow:0 12px 26px -14px color-mix(in srgb, var(--teal) 30%, transparent); }
.identificar-btn:active{ transform:scale(.98); }
/* Segunda línea descriptiva bajo el título de cada acción. */
.identificar-btn > span:last-child{ display:flex; flex-direction:column; line-height:1.25; }
.identificar-sub{line-height:var(--lh); font-family:var(--mono); font-size:var(--fs-1); font-weight:400; color:var(--muted); margin-top:3px; }
.identificar-btn.danger{border-color:color-mix(in srgb, var(--err-text) 70%, transparent);}
.identificar-btn.danger:hover{border-color:var(--err-text);}
.premium-crown-top{display:flex; justify-content:center; margin:0 0 4px;}
.identificar-sub.barrabas-sub{font-family:var(--display); font-size:var(--fs-2); font-weight:700; color:var(--teal);}
/* ---------- recorte de fotos al capturar ---------- */
.crop-sheet{max-width:520px;}
.crop-progreso{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin:0 0 12px;}
.crop-stage-wrap{display:flex; align-items:center; justify-content:center; margin:6px 0 16px;}
.crop-stage{position:relative; display:inline-block; max-width:100%; touch-action:none; border-radius:var(--r-lg); overflow:hidden; background:#0a0a0a; line-height:0;}
.crop-stage img{display:block; max-width:min(88vw,472px); max-height:52vh; width:auto; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none;}
.crop-handle{position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--teal); touch-action:none; box-shadow:var(--sh-1); transform:translate(-50%,-50%);}
.crop-handle[data-h="tl"]{top:0%; left:0%; cursor:nwse-resize;}
.crop-handle[data-h="tr"]{top:0%; left:100%; cursor:nesw-resize;}
.crop-handle[data-h="bl"]{top:100%; left:0%; cursor:nesw-resize;}
.crop-handle[data-h="br"]{top:100%; left:100%; cursor:nwse-resize;}
.premium-plans{display:flex; flex-direction:column; gap:14px; margin:20px 0 16px;}
.premium-plan{position:relative; display:flex; align-items:center; gap:14px; background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-xl); padding:16px 16px 16px 14px; cursor:pointer; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1); text-align:left;}
.premium-plan:hover{transform:translateY(-1px);}
.premium-plan.selected{border-color:var(--gold); box-shadow:0 12px 26px -14px rgba(214,169,90,.55); background:linear-gradient(160deg, rgba(214,169,90,.16), var(--panel));}
.premium-plan-radio{flex:0 0 auto; width:22px; height:22px; border-radius:99px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-1); background:var(--panel2);}
.premium-plan.selected .premium-plan-radio{border-color:var(--gold);}
.premium-plan-radio::after{content:''; width:11px; height:11px; border-radius:99px; background:var(--gold); transform:scale(0); transition:transform var(--dur-1);}
.premium-plan.selected .premium-plan-radio::after{transform:scale(1);}
.premium-plan-info{line-height:var(--lh);flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0;}
.premium-plan-name{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.premium-plan-sub{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.premium-plan-price{flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px;}
.premium-plan-old{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-decoration:line-through;}
.premium-plan-new{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); white-space:nowrap;}
.premium-plan.selected .premium-plan-new{color:var(--gold);}
.premium-plan-badge{position:absolute; top:-10px; right:14px; background:linear-gradient(135deg,var(--gold),#9C6E1C); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.04em; padding:3px 10px; border-radius:99px; box-shadow:var(--sh-1);}
.premium-cta{line-height:var(--lh-tight);display:block; width:100%; background:linear-gradient(135deg,var(--gold),#B97E1F); color:var(--on-gold); border:none; border-radius:var(--r-lg); padding:16px 18px; font-family:var(--display); font-weight:700; font-size:var(--fs-4); text-align:center; cursor:pointer; touch-action:manipulation; transition:transform var(--dur-1), box-shadow var(--dur-1); box-shadow:0 14px 30px -14px rgba(214,169,90,.6);}
.premium-cta:hover{transform:translateY(-1px); box-shadow:0 18px 36px -14px rgba(214,169,90,.7);}
.premium-cta:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none;}
.premium-cta small{display:block; font-family:var(--mono); font-weight:500; font-size:var(--fs-1); color:var(--on-gold); opacity:.75; margin-top:2px;}
.premium-secondary{display:flex; justify-content:center; gap:18px; margin-top:14px;}
.premium-secondary button{background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; padding:6px; touch-action:manipulation;}
.premium-secondary button:hover{color:var(--text);}
.premium-legal{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; line-height:1.5; margin:16px 0 0; opacity:.8;}
/* Sin aspect-ratio fijo y con la foto entera (contain): antes la caja era 4:3
   y la imagen se recortaba con cover, así que una foto vertical parecía
   analizarse solo por el centro. Lo que se envía a la IA no cambia -- ya era
   la foto completa. El wrapper hace que las esquinas y el barrido se ciñan a
   la imagen y no a las franjas de fondo. */
.ia-scan-stage{position:relative; width:100%; max-height:56vh; border-radius:var(--r-xl); overflow:hidden; background:#0c0f0e; border:1px solid var(--line); margin:14px 0 0; box-shadow:var(--sh-4); display:flex; align-items:center; justify-content:center;}
.ia-scan-imgwrap{position:relative; display:block; max-width:100%; max-height:56vh; line-height:0;}
.ia-scan-photo{display:block; max-width:100%; max-height:56vh; width:auto; height:auto; object-fit:contain;}
.ia-scan-corner{position:absolute; width:22px; height:22px; border:2.5px solid var(--gold); opacity:.9; filter:drop-shadow(0 0 4px rgba(214,169,90,.55));}
.ia-scan-corner.tl{top:8px; left:8px; border-right:none; border-bottom:none; border-radius:var(--r-sm) 0 0 0;}
.ia-scan-corner.tr{top:8px; right:8px; border-left:none; border-bottom:none; border-radius:0 var(--r-sm) 0 0;}
.ia-scan-corner.bl{bottom:8px; left:8px; border-right:none; border-top:none; border-radius:0 0 0 var(--r-sm);}
.ia-scan-corner.br{bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 var(--r-sm) 0;}
.ia-scan-beam{position:absolute; left:0; right:0; height:40%; top:-40%; background:linear-gradient(180deg, rgba(214,169,90,0) 0%, rgba(214,169,90,.42) 50%, rgba(214,169,90,0) 100%); box-shadow:0 0 18px 4px rgba(214,169,90,.32); display:none;} /* FIX registro premium: linea de barrido dorada en vez de teal, un unico cambio que se ve consistente en escaneo + reverificacion al guardar */
.ia-scan-stage.scanning .ia-scan-beam{display:block; animation:iaScanSweep 2.1s ease-in-out infinite;}
.ia-scan-stage.scanning::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%); pointer-events:none;}
@keyframes iaScanSweep{0%{top:-40%;} 50%{top:100%;} 100%{top:-40%;}}

.ia-spinner{width:16px; height:16px; border-radius:99px; border:2.5px solid var(--line); border-top-color:var(--gold); animation:iaSpin .8s linear infinite; flex:0 0 auto;}
@keyframes iaSpin{to{transform:rotate(360deg);}}
.ia-actions-row{display:flex; align-items:center; gap:10px; margin-top:14px;}
.ia-btn-icon{flex:0 0 auto; width:46px; height:46px; border-radius:99px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:var(--fs-4); display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1);}
.ia-btn-icon:hover{border-color:var(--teal); transform:translateY(-1px);}
.ia-btn-text{flex:1 1 auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 16px; color:var(--text); font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1);}
.ia-btn-text:hover{border-color:var(--teal); transform:translateY(-1px);}
.akin-progreso{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin:0 0 10px; text-align:center;}
.akin-bar{height:6px; background:var(--panel2); border-radius:99px; overflow:hidden; margin:0 0 20px;}
.akin-bar>span{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width var(--dur-2) var(--ease);}
.akin-botones{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.akin-botones .add{transition:background var(--dur-1), transform var(--dur-1);}
.akin-botones .add:hover{transform:translateY(-1px);}
.akin-btn-no{width:100%; background:transparent; border:1px solid var(--line); color:var(--text); border-radius:var(--r-md); padding:12px; font-weight:600; font-size:var(--fs-3); cursor:pointer; transition:border-color var(--dur-1), transform var(--dur-1);}
.akin-btn-no:hover{border-color:var(--teal); transform:translateY(-1px);}
.akin-botones button.akin-clicked{pointer-events:none;}
.akin-botones .add.akin-clicked{animation:akinPulseYes var(--dur-3) var(--ease);}
.akin-btn-no.akin-clicked[data-resp="no"]{animation:akinPulseNo var(--dur-3) var(--ease); border-color:var(--teal);}
.akin-btn-no.akin-clicked[data-resp="nose"]{animation:akinPulseNose var(--dur-3) var(--ease); border-color:var(--gold);}
@keyframes akinPulseYes{0%{transform:scale(1);}45%{transform:scale(.9);}100%{transform:scale(1);}}
@keyframes akinPulseNo{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(2px);}}
@keyframes akinPulseNose{0%,100%{transform:rotate(0);}30%{transform:rotate(-7deg);}60%{transform:rotate(7deg);}85%{transform:rotate(-2deg);}}
.akin-fade-enter{animation:akinFadeIn var(--dur-2) var(--ease) both;}
@keyframes akinFadeIn{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:translateY(0);}}
.akin-reveal-stage{position:relative; height:220px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; overflow:hidden;}
.akin-reveal-txt{line-height:var(--lh-tight);position:relative; z-index:2; font-family:var(--display); font-size:var(--fs-5); text-align:center; color:var(--text); opacity:.85; animation:akinPulseText 1.1s ease-in-out infinite; padding:0 12px;}
@keyframes akinPulseText{0%,100%{opacity:.55;}50%{opacity:1;}}
.akin-smoke{position:absolute; width:130px; height:130px; margin:-65px 0 0 -65px; border-radius:50%; filter:blur(20px); mix-blend-mode:screen; opacity:0; background:radial-gradient(circle, var(--teal) 0%, transparent 70%); animation:akinSmoke 1.15s var(--ease) forwards;}
@keyframes akinSmoke{0%{opacity:0; transform:translateY(20px) scale(.4);}25%{opacity:.5;}100%{opacity:0; transform:translateY(-70px) scale(1.6);}}
.akin-spark{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px var(--gold); opacity:0; animation:akinSpark 1.1s var(--ease) forwards;}
@keyframes akinSpark{0%{opacity:0; transform:scale(0) translate(0,0);}15%{opacity:1;}100%{opacity:0; transform:scale(1) translate(var(--sx),var(--sy));}}
.akin-materialize{animation:akinMaterialize .55s var(--ease-pop) both;}
@keyframes akinMaterialize{0%{opacity:0; transform:scale(.8); filter:blur(8px);}100%{opacity:1; transform:scale(1); filter:blur(0);}}
@media (prefers-reduced-motion: reduce){
  .akin-botones button.akin-clicked, .akin-fade-enter, .akin-smoke, .akin-spark, .akin-materialize, .akin-reveal-txt{animation:none !important;}
}

/* ==== REGISTRO PREMIUM ====
   Bloque nuevo del rediseño del flujo "Registrar ave": sheet de entrada por
   situación (foto / sin foto / no sé), escaneo+resultado unificados,
   detalles de 1 toque, selector con chips de estado, Akinator conversacional
   y celebración ampliada. Reutiliza .tarot-overlay/.tarot-sheet/.identificar-*
   /.ia-scan-*/.akin-*/.row/.count-badge ya existentes; aquí solo lo propio. */

/* -- 1. Sheet de entrada: 3 tarjetas-camino -- */
.reg-paths{display:flex; flex-direction:column; gap:10px; padding:2px 0 8px;}


.reg-path-card:active{transform:scale(.985) translateY(0); box-shadow:none;}

.reg-path-card.reg-path-foto:hover{box-shadow:0 0 0 1px var(--gold),0 20px 40px -10px rgba(214,169,90,.42);}
@keyframes regCardIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}


.reg-path-icon-gold{background:color-mix(in srgb,var(--gold) 15%,transparent); color:var(--gold);}
.reg-path-icon-teal{background:color-mix(in srgb,var(--teal) 15%,transparent); color:var(--teal);}
.reg-path-icon-violet{background:color-mix(in srgb, var(--acc-lilac) 14%, transparent); color:var(--acc-lilac);}
.reg-path-icon-amber{background:color-mix(in srgb, var(--acc-amber) 15%, transparent); color:var(--acc-amber);}
.reg-path-body{line-height:var(--lh);flex:1 1 auto; min-width:0;}


.reg-path-chip{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-1); font-weight:600; letter-spacing:.04em; color:var(--gold); border:1px solid var(--gold); border-radius:99px; padding:3px 9px;}

@media (prefers-reduced-motion: reduce){ .reg-path-card{animation:none; opacity:1; transform:none;} }
/* Hoja «Añadir foto» (Cámara / Galería): sus dos botones se ven desde el primer fotograma; antes entraban con fundido y la hoja salía vacía un instante (o siempre, si la animación no llegaba a correr). */
.cap-origen-ov .reg-path-card{animation:none; opacity:1; transform:none;}

/* -- 2. Botón atrás squircle común a los pasos internos del flujo -- */
.reg-back-btn{position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1);}
.reg-back-btn:hover{border-color:var(--teal); transform:translateX(-1px);}
.reg-back-btn svg{width:17px; height:17px;}
/* 2026-09-16: el chip iba en position:absolute (top:16px; right:52px) y la
   cejilla "IDENTIFICACIÓN CON IA" es texto CENTRADO en la misma banda. Con
   "Premium · ilimitado" el chip crecía hacia la izquierda y se comía el
   título: se leía "IDENTIFIC…". Ahora el chip ocupa su propia fila en el flujo
   normal, alineado a la izquierda y sin invadir el hueco de la ×, y el título
   empieza debajo. Nada puede solaparse porque ya no hay nada absoluto. */
.reg-header-chip{display:inline-block; margin:0 0 12px; max-width:calc(100% - 46px);
  font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:4px 11px; background:var(--panel2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;}
/* Cuando el chip marca Premium, se distingue con el oro de la app. */
.ia-codigo-error{margin:-4px 0 12px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); text-align:center;}
.ia-codigo-error b{color:var(--text); font-weight:600; user-select:all; -webkit-user-select:all;}
.ia-copiar-detalle{font:inherit; font-size:var(--fs-0); color:var(--gold); background:none; border:0; border-bottom:1px dashed currentColor; padding:0 0 1px; margin-left:6px; cursor:pointer;}
.ia-copiar-detalle:active{opacity:.6;}
.reg-header-chip[data-premium="1"]{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); background:color-mix(in srgb,var(--gold) 12%,transparent);}

/* -- 3. Escaneo: caption rotativa + rechazo con salidas -- */
.ia-scan-status{transition:opacity var(--dur-1) var(--ease); display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 4px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted)}
.reg-reject-box{text-align:center; padding:6px 4px 2px;}
.reg-reject-box p{color:var(--muted); font-size:var(--fs-2); margin:0 0 14px;}
/* IA sin red y con red lenta (13/10/2026): la salida que funciona sin conexión. */
.ia-lenta{margin:12px 0 0; padding:12px 14px; border-radius:var(--r-md); border:1px dashed var(--line); background:var(--panel2); text-align:center; animation:akinFadeIn .3s ease both;}
.ia-lenta p{margin:0 0 10px; color:var(--muted); font-size:var(--fs-2);}
.reg-reject-box.ia-sin-red p b{color:var(--text);}
/* Hoja de permiso bloqueado (13/10/2026): pasos para desbloquear la ubicación,
   la cámara o las notificaciones en ese aparato, y volver a pedirlo. */
.perm-sheet .tarot-title{margin-bottom:8px; padding-right:28px;}
.perm-txt{margin:0 0 12px; color:var(--muted); font-size:var(--fs-3); line-height:1.45;}
.perm-pasos{margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:8px; font-size:var(--fs-3); line-height:1.45; color:var(--text);}
.perm-pasos b{color:var(--gold);}
.perm-btns{display:flex; flex-direction:column; gap:8px;}
.perm-ahora-no{background:none; border:none; color:var(--muted); font-family:inherit; font-size:var(--fs-3); padding:8px; cursor:pointer;}
.reg-reject-actions{display:flex; flex-direction:column; gap:9px;}

/* -- 4. Tarjeta de resultado compartida (foto+IA y revelación Akinator) -- */
.reg-result-wrap{opacity:0; transform:translateY(10px) scale(.97); animation:regResultIn var(--dur-3) var(--ease-pop) forwards;}
@keyframes regResultIn{to{opacity:1; transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion: reduce){ .reg-result-wrap{animation:none; opacity:1; transform:none;} }
.reg-result-eyebrow{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin:0 0 6px;}
.reg-result-card{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:16px;}
.reg-result-thumb{flex:0 0 auto;}
.reg-result-info{line-height:var(--lh);flex:1 1 auto; min-width:0;}
.reg-result-name{font-family:var(--display); font-weight:600; font-size:var(--fs-5); line-height:1.2;}
.reg-result-sci{font-style:italic; color:var(--muted); font-size:var(--fs-2); margin:2px 0 8px;}
.reg-result-badges{display:flex; flex-wrap:wrap; gap:6px;}
.reg-conf-ring{flex:0 0 auto; width:52px; height:52px; position:relative;}
.reg-conf-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.reg-conf-ring circle{fill:none; stroke-width:4;}
.reg-conf-ring .track{stroke:var(--panel2);}
.reg-conf-ring .fill{stroke:var(--gold); stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease);}
.reg-conf-ring-pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-2); font-weight:700; color:var(--gold);}
.reg-alt-row{display:flex; gap:8px; margin-top:12px;}
.reg-alt-card{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 6px; cursor:pointer; text-align:center; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1);}
.reg-alt-card:hover{border-color:var(--teal); transform:translateY(-1px);}
.reg-alt-name{font-size:var(--fs-1); font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.reg-alt-pct{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.reg-alt-manual{color:var(--muted);}
.reg-alt-manual .reg-alt-icon{width:36px; height:36px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.reg-alt-manual .reg-alt-icon svg{width:17px; height:17px;}

/* -- 5. Selector de especie: chips de estado -- */
.reg-sp-chip{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-1); font-weight:600; border-radius:99px; padding:3px 8px; white-space:nowrap;}
.reg-sp-chip-nueva{color:var(--gold); border:1px solid var(--gold);}
.reg-sp-chip-vista{color:var(--muted); border:1px solid var(--line);}
.reg-sp-chip-capturada{color:var(--teal); border:1px solid var(--teal);}
.reg-sp-row{opacity:0; animation:regCardIn var(--dur-2) var(--ease) forwards;}
@media (prefers-reduced-motion: reduce){ .reg-sp-row{animation:none; opacity:1;} }
.reg-aviso-banner{background:color-mix(in srgb, var(--gold) 12%, transparent); border:1px solid var(--gold); color:var(--text); border-radius:var(--r-md); padding:10px 12px; font-size:var(--fs-2); margin:0 0 14px; text-align:center;}
.reg-search-wrap{position:relative;}
.reg-search-wrap .search{padding-left:38px;}
.reg-search-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex;}
/* -- 5b. Selector de especie a pantalla completa (no tarjeta flotante) -- */
.tarot-overlay.reg-fullscreen{ align-items:stretch; padding:0; background:var(--bg2); backdrop-filter:none; }
.tarot-overlay.reg-fullscreen > .reg-screen{ width:100%; height:100%; max-width:none; max-height:none; border-radius:0; border:none; box-shadow:none; background:radial-gradient(120% 70% at 50% -10%, var(--bg1) 0%, var(--bg2) 60%); color:var(--text); display:flex; flex-direction:column; padding:0; overflow:hidden; }
/* D12: en pantalla ancha, «¿Qué ave es?» se queda en la columna de la app
   (760 px, la misma que .head/main/.bottom-nav) en vez de ir de lado a lado. */
@media (min-width:800px){ .tarot-overlay.reg-fullscreen > .reg-screen{ max-width:760px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); } }
.reg-screen-head{ display:flex; align-items:center; gap:12px; padding:calc(var(--sat) + 12px) 16px 12px; border-bottom:1px solid var(--line); flex-shrink:0; }
.reg-screen-head .reg-back-btn{ position:static; margin:0; flex-shrink:0; }
.reg-screen-head-txt{ flex:1; min-width:0; }
.reg-screen-head-txt .tarot-eyebrow{ margin:0 0 2px; }
.reg-screen-head-txt .tarot-title{ margin:0; font-size:var(--fs-4); }
.reg-screen-body{ flex:1; overflow-y:auto; padding:16px; }
.reg-screen-foot{ flex-shrink:0; padding:12px 16px calc(var(--sab) + 12px); border-top:1px solid var(--line); }
/* ---- "¿Qué ave es?": la foto manda y debajo los tres caminos (20/09/2026) ----
   Antes esta pantalla ponía tres acciones con el mismo peso visual y volcaba el
   catálogo entero por la A sin haber enseñado nunca la foto recién hecha.
   NORMA para cualquier retoque de aquí: SOLO tokens. La app tiene 12 fondos
   (6 de ellos claros) y 8 acentos que redefinen --teal, --gold, --panel y
   --text; un color fijo se vería bien en el tema oscuro y roto en el resto. */
.idsel-foto{position:relative; margin:0 0 16px; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--panel2); box-shadow:var(--sh-4); line-height:0;}
.idsel-foto-img{display:block; width:100%; height:clamp(180px, 34vh, 292px); object-fit:cover; transition:height var(--dur-2) var(--ease);}
.idsel-foto.idsel-entera .idsel-foto-img{height:auto; max-height:56vh; object-fit:contain; background:var(--ink);}
.idsel-foto-meta{position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-1); line-height:1.4; color:var(--text); background:color-mix(in srgb, var(--ink) 72%, transparent); border:1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius:var(--r-full); padding:5px 11px;}
.idsel-foto-meta svg{width:13px; height:13px; color:var(--teal); flex:0 0 auto;}
.idsel-foto-expand{position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:var(--r-md); background:color-mix(in srgb, var(--ink) 72%, transparent); border:1px solid color-mix(in srgb, var(--text) 18%, transparent); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation;}
.idsel-foto-expand svg{width:17px; height:17px;}
.idsel-lista{display:flex; flex-direction:column; gap:10px;}
.idsel-camino{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:12px 14px; color:var(--text); font:inherit; cursor:pointer; touch-action:manipulation; transition:border-color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1);}
.idsel-camino:hover{border-color:color-mix(in srgb, var(--teal) 45%, var(--line));}
.idsel-camino:active{transform:scale(.985);}
.idsel-camino-ia{background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, var(--panel)), var(--panel) 64%); border:1.5px solid color-mix(in srgb, var(--teal) 50%, var(--line)); box-shadow:var(--sh-3);}
.idsel-camino-icon{flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center;}
.idsel-camino-icon svg{width:21px; height:21px;}
.idsel-camino-ia .idsel-camino-icon{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.idsel-camino-duda .idsel-camino-icon{color:var(--gold);}
.idsel-camino-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.idsel-camino-title{font-family:var(--display); font-weight:600; font-size:var(--fs-4); line-height:var(--lh-tight);}
.idsel-camino-sub{font-family:var(--mono); font-size:var(--fs-1); line-height:1.4; color:var(--muted); margin-top:2px;}
.idsel-camino-chip{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-0); font-weight:600; white-space:nowrap; color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 10%, transparent); border-radius:var(--r-full); padding:4px 8px;}
.idsel-camino-chevron{flex:0 0 auto; color:var(--muted); display:flex;}
.idsel-camino-chevron svg{width:18px; height:18px;}
.idsel-guardar{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; text-align:left; background:transparent; border:1px dashed var(--line); border-radius:var(--r-lg); padding:8px 14px; color:var(--text); font:inherit; cursor:pointer; touch-action:manipulation;}
.idsel-guardar:hover{border-color:var(--teal);}
.idsel-guardar > svg{width:18px; height:18px; color:var(--muted); flex:0 0 auto;}
.idsel-guardar-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.idsel-guardar-txt b{font-weight:500; font-size:var(--fs-2); line-height:1.3;}
.idsel-guardar-txt small{font-family:var(--mono); font-size:var(--fs-0); line-height:1.4; color:var(--muted); margin-top:2px;}
.idsel-cuenta{margin:12px 0 2px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.idsel-oculto{display:none;}
@media (prefers-reduced-motion: reduce){ .idsel-foto-img{transition:none;} .idsel-camino{transition:none;} }

/* -- 6. Detalles: cabecera, chips fecha/hora, ubicación, nota colapsada -- */
.reg-det-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
/* Avistamiento/captura a pantalla completa: en pantalla ancha se queda en la
   columna de la app (760 px), como «¿Qué ave es?» (.reg-fullscreen). */
@media (min-width:800px){ .tarot-overlay.pantalla.pp-pantalla > .tarot-sheet, .tarot-overlay.pantalla.reg-det-pantalla > .tarot-sheet{ max-width:760px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); } }
.reg-det-head-info{line-height:var(--lh);flex:1 1 auto; min-width:0;}
.reg-det-head-info .common{line-height:var(--lh);font-size:var(--fs-3);}
.reg-det-head-info .sci{line-height:var(--lh);font-size:var(--fs-2);}
.reg-det-cambiar{flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--teal); border-radius:99px; padding:7px 13px; font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; touch-action:manipulation;}
.reg-det-cambiar:hover{border-color:var(--teal);}
.reg-chip-row{display:flex; gap:10px; margin-bottom:14px;}
.reg-chip{flex:1 1 0; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; touch-action:manipulation; font-size:var(--fs-2); color:var(--text); position:relative;}
.reg-chip svg{width:15px; height:15px; color:var(--muted); flex:0 0 auto;}
.reg-chip input{position:absolute; inset:0; opacity:0; cursor:pointer; border:0;}
.reg-geo-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:14px;}
.reg-geo-row{display:flex; align-items:center; gap:10px;}
.reg-geo-icon{flex:0 0 auto; width:32px; height:32px; border-radius:99px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--teal);}
.reg-geo-icon svg{width:16px; height:16px;}
.reg-geo-txt{flex:1 1 auto; min-width:0; font-size:var(--fs-2);}
.reg-geo-dot{display:inline-block; width:7px; height:7px; border-radius:99px; background:var(--gold); margin-right:6px; animation:regDotPulse 1.1s ease-in-out infinite;}
.reg-geo-municipio{display:block; font-size:var(--fs-1); color:var(--muted); margin-top:1px;}
@keyframes regDotPulse{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1.15);}}
@media (prefers-reduced-motion: reduce){ .reg-geo-dot{animation:none;} }
.reg-toggle{flex:0 0 auto; width:38px; height:22px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); position:relative; cursor:pointer; touch-action:manipulation; transition:background var(--dur-1);}
.reg-toggle::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:99px; background:var(--muted); transition:transform var(--dur-1), background var(--dur-1);}
.reg-toggle.on{background:color-mix(in srgb, var(--teal) 35%, var(--panel2));}
.reg-toggle.on::after{transform:translateX(16px); background:var(--teal);}
/* ===== Selector de calidad por foto ===== */
.cal-sel{margin-top:14px;}
.cal-sel-lbl{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;}
.cal-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.cal-card{display:flex; flex-direction:column; gap:3px; text-align:left; padding:10px 11px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--panel2); color:var(--text); font:inherit; cursor:pointer; transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.cal-card:active{transform:scale(.985);}
.cal-card.on{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 10%, var(--panel2));}
.cal-card-t{display:flex; align-items:center; gap:5px; font-family:var(--display); font-weight:600; font-size:var(--fs-3); line-height:1.2;}
.cal-card-t svg{width:14px; height:14px; flex:0 0 auto; color:var(--gold);}
.cal-card-lock{display:inline-flex; margin-left:auto; color:var(--muted);}
.cal-card-lock svg{width:12px; height:12px; color:var(--muted);}
.cal-card-d{font-size:var(--fs-1); line-height:1.4; color:var(--muted);}
.cal-card-w{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); opacity:.8;}
.cal-card.on .cal-card-w{color:var(--teal); opacity:1;}
.reg-nota-toggle{background:none; border:none; color:var(--teal); font-family:var(--mono); font-size:var(--fs-2); padding:4px 0; cursor:pointer; touch-action:manipulation;}
.reg-nota-area{margin-top:8px;}
.reg-det-guardar{width:100%; background:var(--gold); color:#3a2a06; border:none; border-radius:var(--r-lg); padding:14px; font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer; touch-action:manipulation; box-shadow:0 14px 28px -14px rgba(214,169,90,.55); transition:box-shadow var(--dur-1), transform var(--dur-1), opacity var(--dur-1);}
.reg-det-guardar:hover{transform:translateY(-1px);}
.reg-det-guardar[disabled]{opacity:.65; cursor:default; transform:none;}
.reg-det-pendiente{width:100%; background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:10px; cursor:pointer; touch-action:manipulation; text-align:center;}
.reg-det-pendiente:hover{color:var(--text);}
.reg-det-pendiente svg{width:16px; height:16px; flex:0 0 auto; vertical-align:-0.125em;}

/* -- 7. Akinator conversacional -- */
.akin-eyebrow{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.2em; text-transform:uppercase; color:var(--acc-lilac); text-align:center; margin:0 0 6px;}
.akin-question-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px 18px; text-align:center;}
.akin-question-txt{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-5); margin:0 0 14px;}
.akin-botones.akin-btn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.akin-btn-grid .add, .akin-btn-grid .akin-btn-no{padding:12px 4px; font-size:var(--fs-2);}
.akin-link-buscar{display:block; width:100%; text-align:center; background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:12px 0 0; cursor:pointer; touch-action:manipulation;}
.akin-link-buscar:hover{color:var(--teal);}
.akin-progreso strong{color:var(--gold);}

/* -- 8. Celebración ampliada -- */
.celebra-ring.ring2{animation-delay:.3s;}
.celebra-xp-row{display:flex; flex-direction:column; align-items:center; gap:2px; margin:10px 0 2px;}
.celebra-xp-num{line-height:var(--lh-tight);font-family:var(--display); font-weight:800; font-size:var(--fs-6); color:var(--gold);}
.celebra-xp-lbl{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); letter-spacing:.08em; text-transform:uppercase;}
.celebra-progress{width:100%; margin:8px 0 2px;}
.celebra-progress-track{height:8px; background:var(--panel2); border-radius:99px; overflow:hidden;}
.celebra-progress-fill{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); width:0%; transition:width 1s var(--ease);}
.celebra-progress-txt{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin-top:5px;}
.celebra-btn-sec{width:100%; background:transparent; border:1px solid var(--line); color:var(--text); border-radius:var(--r-md); padding:11px; font-size:var(--fs-2); cursor:pointer; touch-action:manipulation; margin-top:8px;}
.celebra-btn-sec:hover{border-color:var(--teal);}

/* -- 9. Transición de paso (aplicada vía JS por irAPasoRegistro) -- */
.reg-step-in{transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);}
@media (prefers-reduced-motion: reduce){ .reg-step-in{transition:none !important;} }

/* ---------- panel "Aves": controles propios de ese índice ---------- */
.aves-tools{display:none;}
.aves-tools.show{display:block;}
.xpbar{height:10px; background:var(--panel2); border:1px solid var(--line); border-radius:99px; overflow:hidden; margin-top:10px;}
.xpbar>span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),#f0cd86); transition:width var(--dur-3) var(--ease);}
/* ---------- Aviso flotante ----------
   Antes vivía en el flujo, justo debajo de la cabecera, y con max-height:28px.
   Eso lo dejaba fuera de pantalla en cuanto se hacía scroll, DETRÁS de
   cualquier hoja (.tarot-overlay está en z-index 1200) y recortaba a una línea
   los mensajes largos. Como casi todos los avisos se lanzan con una hoja
   abierta, ahora flota por encima de todo y crece con el texto.
   El tono lo marcan el filo izquierdo y el icono: info (por defecto), error y
   ok. mostrarToast('texto') a secas sigue funcionando igual. */
.toast{position:fixed; left:50%; bottom:calc(16px + var(--bottom-nav-h,78px) + var(--sab));
  transform:translateX(-50%) translateY(14px); z-index:var(--z-aviso);
  width:min(420px, calc(100vw - 32px)); box-sizing:border-box;
  display:flex; align-items:flex-start; gap:9px;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r-md); box-shadow:var(--sh-1), var(--sh-3);
  padding:11px 14px; margin:0; max-height:none; overflow:visible;
  font-family:var(--mono); font-size:var(--fs-2); line-height:1.45; color:var(--text);
  text-align:left; opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast-ico{flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--gold);}
.toast-txt{flex:1 1 auto; min-width:0;}
.toast.t-error{border-left-color:var(--err-text);}
.toast.t-error .toast-ico{color:var(--err-text);}
.toast.t-ok{border-left-color:var(--ok);}
.toast.t-ok .toast-ico{color:var(--ok);}

/* ===================================================================
   ESTADO VACÍO — un solo componente para toda la app
   ===================================================================
   Antes cada pantalla se inventaba el suyo: once tipografías distintas,
   rellenos de 2px a 34px y casi ninguno con salida. El estado vacío es la
   pantalla que más ve quien acaba de instalar la app, así que es el mejor
   sitio para decirle qué hacer.

   LOS CUATRO TIPOS (clasifica antes de escribir uno nuevo):
     A · vacío inicial     — nunca lo ha hecho. Botón que lleve al primer paso.
     B · vacío por filtro  — sí hay datos, el filtro no devuelve nada. Botón
                             para quitar el filtro. NUNCA una acción de primer
                             paso: quien tiene 300 fotos y buscó mal no
                             necesita que le inviten a empezar su colección.
     C · vacío contextual  — no hay nada ahora y no es culpa suya. Explica por
                             qué y cuándo cambiará. Botón solo si hay palanca.
     D · vacío en línea    — falta un dato dentro de una ficha que sí existe.
                             Usa .vacio-linea. NUNCA el componente grande: una
                             tarjeta con icono y botón dentro de una ficha
                             queda absurda.
   Y dos que NO son estados vacíos aunque lo parezcan:
     · carga  (.vacio-carga) — es transitorio, no lleva icono ni botón.
     · sesión — lo resuelve pedirSesion(), no este componente. */
.vacio{display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0; padding:34px 22px; box-sizing:border-box;}
.vacio-ic{width:58px; height:58px; border-radius:var(--r-lg); margin:0 0 14px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--teal) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  color:color-mix(in srgb, var(--teal-on-panel) 60%, transparent);}
.vacio-ic svg{width:26px; height:26px;}
.vacio-tit{font-family:var(--display); font-weight:600; font-size:var(--fs-4);
  color:var(--text); margin:0 0 6px; line-height:var(--lh-tight,1.25);}
.vacio-txt{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);
  margin:0; line-height:1.5; max-width:34ch;}
.vacio-accion{margin-top:16px; display:inline-flex; align-items:center; gap:7px;
  background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-full);
  padding:11px 18px; font-family:var(--display); font-weight:600; font-size:var(--fs-2);
  cursor:pointer; touch-action:manipulation;
  transition:transform var(--dur-0) var(--ease), box-shadow var(--dur-1) var(--ease);}
.vacio-accion:hover{box-shadow:var(--sh-2);}
.vacio-accion:active{transform:scale(.96);}
.vacio-accion:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
/* Tono "bueno": el vacío es una buena noticia (no tienes nada a medias). */
.vacio.bueno .vacio-ic{background:color-mix(in srgb, var(--ok) 12%, transparent);
  border-color:color-mix(in srgb, var(--ok) 30%, transparent);
  color:color-mix(in srgb, var(--ok) 75%, var(--text));}
/* Compacto: dentro de una hoja inferior o de una tarjeta, no a pantalla entera. */
.vacio.compacto{padding:20px 16px;}
.vacio.compacto .vacio-ic{width:44px; height:44px; margin-bottom:11px; border-radius:var(--r-md);}
.vacio.compacto .vacio-ic svg{width:21px; height:21px;}
.vacio.compacto .vacio-tit{font-size:var(--fs-3);}
.vacio.compacto .vacio-accion{margin-top:13px; padding:9px 15px;}
/* Tipo D: hueco informativo dentro de una ficha. Sin icono, sin caja, sin
   botón; que se note a simple vista que es otro componente. */
.vacio-linea{font-family:var(--mono); font-size:var(--fs-2); font-style:italic;
  color:var(--muted); margin:8px 0; line-height:1.5; text-align:left;}
/* Carga: mismo sitio que un vacío pero es transitorio. */
.vacio-carga{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);
  text-align:center; padding:24px 18px; margin:0;}
@media (prefers-reduced-motion: reduce){
  .vacio-accion{transition:none !important;}
  .vacio-accion:active{transform:none !important;}
}
@media (max-width:360px){
  .vacio{padding:26px 14px;}
  .vacio-accion{width:100%; justify-content:center;}
}

/* ---------- Hojas de diálogo propias ----------
   Sustituyen a alert/confirm/prompt del navegador, que ignoraban el tema,
   bloqueaban el hilo y mostraban el nombre del paquete de Android. Reutilizan
   .tarot-overlay/.tarot-sheet, o sea el lenguaje visual de la app. */
.dlg-ico{width:46px; height:46px; margin:0 auto 12px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--err-text) 16%, transparent); color:var(--err-text);}
.dlg-ico svg{width:24px; height:24px;}
/* El título va centrado a todo el ancho y el aspa está posicionada encima, así
   que en pantallas estrechas un título largo se le metía debajo. */
#confirmOverlay .tarot-title, #passOverlay .tarot-title, #denunciaOverlay .tarot-title{padding:0 38px;}
.dlg-acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.dlg-acciones .btn-mini{min-width:120px; padding:11px 14px; text-align:center;}
/* El botón seguro (cancelar) es el discreto; el destructivo se pinta con el
   token de error, nunca con un rojo literal. */
.btn-mini.dlg-cancelar{background:var(--panel2); color:var(--text); border:1px solid var(--line);}
.btn-mini.dlg-peligro{background:var(--err-text); color:var(--err-bg); border:1px solid var(--err-text);}
.btn-mini.dlg-peligro:disabled{opacity:.45; cursor:not-allowed;}
/* Segundo paso de fricción para lo irreversible */
.dlg-entiendo{display:flex; align-items:flex-start; gap:9px; text-align:left; cursor:pointer;
  background:color-mix(in srgb, var(--err-text) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--err-text) 40%, transparent);
  border-radius:var(--r-md); padding:11px 13px; margin:0 0 18px;
  font-family:var(--mono); font-size:var(--fs-1); line-height:1.45; color:var(--text);}
.dlg-entiendo input{flex:0 0 auto; width:17px; height:17px; margin:1px 0 0; accent-color:var(--err-text); cursor:pointer;}
/* Campo de contraseña y de detalle */
.dlg-campo{position:relative; margin:0 0 6px;}
.dlg-campo input, .dlg-campo textarea{width:100%; box-sizing:border-box; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-md); color:var(--text);
  font-family:var(--mono); font-size:var(--fs-3); padding:12px 44px 12px 13px;
  transition:border-color var(--dur-1) var(--ease);}
.dlg-campo textarea{padding-right:13px; resize:vertical; min-height:64px; font-size:var(--fs-2);}
.dlg-campo input:focus, .dlg-campo textarea:focus{border-color:var(--teal);}
.dlg-campo.mal input{border-color:var(--err-text);}
.dlg-ver{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border:none; background:none; color:var(--muted); cursor:pointer; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;}
.dlg-ver svg{width:19px; height:19px;}
.dlg-error{min-height:17px; margin:0 0 14px; font-family:var(--mono); font-size:var(--fs-1);
  color:var(--err-text); text-align:left;}
/* Motivos de reporte */
.dlg-motivos{display:flex; flex-direction:column; gap:8px; margin:0 0 14px; text-align:left;}
.dlg-motivo{display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px;
  font-family:var(--mono); font-size:var(--fs-2); color:var(--text);
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.dlg-motivo input{flex:0 0 auto; width:16px; height:16px; margin:0; accent-color:var(--teal); cursor:pointer;}
.dlg-motivo:has(input:checked){border-color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, transparent);}
.dlg-motivo:focus-within{outline:2px solid var(--teal); outline-offset:2px;}
@media (max-width:360px){
  .dlg-acciones{flex-direction:column-reverse;}
  .dlg-acciones .btn-mini{width:100%;}
}

/* ---------- popup de XP ganada, estilo "juego" ---------- */
.xp-popup{position:fixed; left:50%; top:calc(8px + var(--sat)); width:min(300px,88vw); display:flex; align-items:center; gap:12px; background:linear-gradient(155deg, var(--panel2), var(--panel) 75%); border:1px solid rgba(214,169,90,.4); border-radius:var(--r-xl); padding:10px 16px 10px 10px; box-shadow:var(--sh-4); z-index:300; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-130%); transition:transform var(--dur-3) var(--ease-pop), opacity var(--dur-2) var(--ease);}
.xp-popup.show{opacity:1; transform:translateX(-50%) translateY(0);}
.xp-popup.lvlup-burst{animation:xpPopupGlow .7s var(--ease);}
.xp-popup-badge{flex:0 0 auto; width:38px; height:38px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 30% 20%, #f7dca0, var(--gold) 65%); color:var(--on-gold); font-family:var(--display); font-weight:700; font-size:var(--fs-3); box-shadow:0 4px 14px -4px rgba(214,169,90,.65);}
.xp-popup.lvlup-burst .xp-popup-badge{animation:xpBadgeBurst .6s var(--ease);}
.xp-popup-body{line-height:var(--lh);flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px;}
.xp-popup-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.xp-popup-gain{font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--gold); white-space:nowrap;}
.xp-popup-lvlup{display:none; align-items:center; font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); white-space:nowrap;}
.xp-popup-lvlup.show{display:inline-flex;}
.xp-popup-lvlup b{color:var(--gold); margin-left:3px; font-family:var(--display);}
.xp-popup-bar{height:7px; background:var(--ink); border:1px solid var(--line); border-radius:99px; overflow:hidden;}
.xp-popup-fill{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--gold),#f0cd86);}
@keyframes xpBadgeBurst{0%{transform:scale(1);} 45%{transform:scale(1.4);} 100%{transform:scale(1);}}
@keyframes xpPopupGlow{0%,100%{box-shadow:var(--sh-4);} 50%{box-shadow:0 16px 34px -14px rgba(214,169,90,.6), 0 0 0 1px rgba(214,169,90,.3);}}
.iobtn{background:transparent; border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:var(--fs-2); padding:8px 12px; border-radius:var(--r-sm); cursor:pointer; margin-top:10px;}
.iobtn:hover{border-color:var(--teal);}
.iobtn[disabled]{opacity:.6; cursor:wait;}
.geoerr{font-family:var(--mono); font-size:var(--fs-1); color:var(--err-text); margin:6px 0 0; display:none;}
.minimap{height:220px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-top:8px;}
/* Selector de ubicación a pantalla completa (abrirSelectorUbicacion). El
   z-index va por encima de .tarot-overlay (1200), que es el formulario de
   captura desde el que se abre. */
.locpicker-ov{position:fixed; inset:0; z-index:var(--z-selector); background:var(--bg2,#101a17); display:flex; flex-direction:column;}
.locpicker-top{display:flex; align-items:center; gap:10px; padding:calc(10px + var(--sat)) 14px 10px; background:var(--panel); border-bottom:1px solid var(--line);}
.locpicker-close{width:34px; height:34px; border-radius:99px; border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:var(--fs-3); line-height:1; cursor:pointer; flex:0 0 auto;}
.locpicker-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.locpicker-map{position:relative; flex:1 1 auto; min-height:0;}
.locpicker-hint{line-height:var(--lh);position:absolute; left:50%; top:12px; transform:translateX(-50%); background:rgba(0,0,0,.62); color:#fff; font-family:var(--mono); font-size:var(--fs-2); padding:6px 12px; border-radius:99px; pointer-events:none; z-index:1000;}
.locpicker-locate{position:absolute; right:12px; bottom:14px; z-index:1000; width:44px; height:44px; border-radius:50%; border:none; background:var(--panel); color:var(--teal-deep); box-shadow:var(--sh-2); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.locpicker-locate svg{width:22px; height:22px;}
.locpicker-locate.buscando{opacity:.5;}
.locpicker-bar{padding:12px 14px calc(12px + var(--sab)); background:var(--panel); border-top:1px solid var(--line);}
.locpicker-save{width:100%; padding:13px; border-radius:var(--r-md); border:none; background:var(--teal); color:var(--on-teal); font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer;}
.locpicker-save:disabled{opacity:.5; cursor:default;}
/* Botón "ampliar" sobre los minimapas */
.minimap-expand{position:absolute; top:8px; right:8px; z-index:3; width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--sh-2);}
.minimap-expand svg{width:18px; height:18px;}
.coords{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:6px 0 0;}
.map-screen{position:relative; isolation:isolate;}
#gmap{height:75dvh; min-height:75dvh; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; position:relative; background:var(--panel2);}
.gmap-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; pointer-events:none;}
/* ==== MAPA PREMIUM: 8. tarjeta de estado vacío/error, a juego con el resto de la app ==== */
.gmap-empty-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 20px; max-width:280px; box-shadow:var(--sh-4); pointer-events:auto;}
.gmap-empty-card svg{opacity:.5; margin-bottom:6px;}
.gmap-empty-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); margin:0 0 6px;}
/* Primer pintado: shimmer + prismáticos al 20% mientras cargan los primeros
   tiles, para no dejar nunca un hueco gris/a cuadros. */
.gmap-loading{position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; border-radius:inherit; overflow:hidden; pointer-events:none; opacity:1; transition:opacity var(--dur-2) var(--ease);}
.gmap-loading::before{content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--panel2) 35%, var(--line) 50%, var(--panel2) 65%); background-size:200% 100%; animation:refShimmer 1.8s ease-in-out infinite;}
.gmap-loading svg{position:relative; width:56px; height:56px; opacity:.2; color:var(--muted);}
.gmap-loading.hide{opacity:0;}
/* OSM solo publica el estilo claro. Cuando la app va en tema oscuro y toca
   usar OSM (sin CARTO_KEY, o CARTO caído), se invierte y desatura por CSS
   para que el mapa no deslumbre dentro de una pantalla oscura. El filtro va
   solo en el panel de mosaicos: marcadores, rutas y popups viven en otros
   panes de Leaflet y conservan sus colores reales. */
.map-tiles-osm-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7);}
/* Atribución de Leaflet: legal pero discreta, a juego con el tema. */
.leaflet-control-attribution{background:color-mix(in srgb, var(--panel) 75%, transparent) !important; color:var(--muted) !important; font-size:9px !important;}
.leaflet-control-attribution a{color:var(--muted) !important;}
/* ==== MAPA PREMIUM: 2. Popups ==== */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel); color:var(--text); border:1px solid var(--line);}


.leaflet-popup-content{margin:12px 14px; font-family:system-ui,-apple-system,Segoe UI,sans-serif;}
.leaflet-popup-content .pc{font-family:var(--display); font-weight:700; font-size:var(--fs-3); margin-bottom:6px;}
.leaflet-popup-content .ps{font-family:var(--display); font-style:italic; color:var(--muted); font-size:var(--fs-2); margin-bottom:6px;}
.leaflet-popup-content .pp{font-size:var(--fs-2); margin-top:6px;}
.leaflet-popup-content .pd{font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); margin-top:6px;}
.leaflet-popup-content img{border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2);}
.leaflet-popup-content .popbtn{margin-top:8px; background:var(--teal); color:var(--on-teal); border:none; border-radius:99px; padding:7px 14px; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; transition:transform var(--dur-0) var(--ease);}
.leaflet-popup-content .popbtn:active{transform:scale(.97);}
/* Variante secundaria: para el "Cómo llegar" de los popups que ya tienen una
   acción principal (ver especie, acceder al observatorio…). Mismo tamaño de
   pulsación, menos peso visual, para que no compitan entre sí. */
.leaflet-popup-content .popbtn.sec{background:transparent; color:var(--teal); border:1px solid var(--teal); margin-top:6px;}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted); width:24px; height:24px; border-radius:99px; background:var(--panel2); display:flex; align-items:center; justify-content:center; top:8px; right:8px; font-size:var(--fs-3);}
/* Animación de apertura, solo en .leaflet-popup-content-wrapper (nunca en
   .leaflet-popup, que Leaflet ya usa para posicionarse en el mapa con su
   propio transform: translate3d, ni en .leaflet-popup-tip, que Leaflet gira
   45º con transform para formar el triangulito -- sumar un transform propio
   ahí rompería esa rotación). Se apaga con reduced-motion vía las reglas
   globales [data-motion="reducido"] y @media (prefers-reduced-motion) ya
   existentes en el archivo. */
.leaflet-popup-content-wrapper{animation:mapPopupIn var(--dur-1) var(--ease); transform-origin:50% 100%; border-radius:var(--r-lg); box-shadow:var(--sh-4)}
.leaflet-popup-tip{animation:mapPopupTipIn var(--dur-1) var(--ease); box-shadow:none}
@keyframes mapPopupIn{ from{opacity:0; transform:scale(.92) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);} }
@keyframes mapPopupTipIn{ from{opacity:0;} to{opacity:1;} }
.btn-mini{background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-md); padding:7px 10px; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
/* ==== MAPA PREMIUM: 3. Familia de pins ====
   Anillo + sombra consistentes en los cinco tipos; cola triangular (::after)
   solo en los que anclan por abajo (ruta-pin ya la tiene resuelta con su
   propio giro de 45º, así que aquí solo se la añadimos a obs-pin y
   community-pin, que hoy son círculos "flotantes" sin punta pese a estar
   anclados como si la tuvieran -- iconAnchor:[15,28] en un icono de 30px). */
.ruta-pin{position:relative; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; font-size:var(--fs-3); box-shadow:var(--sh-2); border:2px solid var(--panel); transition:transform var(--dur-1) var(--ease-pop);}
/* .ruta-pin ya usa transform para su forma de gota: al activarse hay que
   COMPONER el giro con la escala, no sustituirlo (si no, perdería la forma). */
.ruta-pin.map-pin-activo{transform:rotate(-45deg) scale(1.15);}
.ruta-pin span{transform:rotate(45deg);}
.ruta-pin.locked{opacity:.8; filter:grayscale(.6);}
.ruta-pin-lock{position:absolute; top:-7px; right:-7px; transform:rotate(45deg); font-size:var(--fs-2); line-height:1; background:#fff; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1);}
.user-pin{position:relative; width:16px; height:16px; border-radius:50%; background:#2b8fe0; border:3px solid #fff; box-shadow:0 0 0 4px rgba(43,143,224,.35), var(--sh-1);}
.user-pin-arrow{position:absolute; left:50%; top:50%; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:28px solid #2b8fe0; transform-origin:50% 86%; transform:translate(-50%,-100%) rotate(0deg); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
/* Anillo "respirando" bajo el marcador de usuario (la flecha de rumbo, que
   ya existe, se mantiene tal cual encima). */
.user-pin-breath{position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; background:var(--teal); opacity:.25; transform:translate(-50%,-50%) scale(1); animation:userBreath 2.4s ease-out infinite;}
@keyframes userBreath{ from{transform:translate(-50%,-50%) scale(1); opacity:.35;} to{transform:translate(-50%,-50%) scale(2.6); opacity:0;} }
.gmap-controls{display:flex; flex-direction:column; background:color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-4);}
@supports not (backdrop-filter: blur(1px)){ .gmap-controls{background:var(--panel);} }
.gmap-ctrl-btn{width:34px; height:34px; border:none; background:transparent; color:var(--text); font-size:var(--fs-5); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); font-family:inherit; padding:0; transition:transform var(--dur-0) var(--ease);}
.gmap-ctrl-btn:last-child{border-bottom:none;}
.gmap-ctrl-btn:hover{background:var(--panel2);}
.gmap-ctrl-btn:active{transform:scale(.94);}
.gmap-locate-btn svg{width:18px; height:18px; transition:transform var(--dur-1) var(--ease);}
.gmap-locate-btn.loading svg{animation:mapSpin .8s linear infinite;}
@keyframes mapSpin{ to{transform:rotate(360deg);} }
.obs-pin,.community-pin,.captura-pin,.avi-pin{border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); border:2px solid var(--panel); transition:transform var(--dur-1) var(--ease-pop);}
.obs-pin{position:relative; width:30px; height:30px; background:#d4af37; font-size:var(--fs-3);}
/* Pin de los puntos curados: misma silueta de gota que el resto, el color lo
   pone cada tipo con la variable --poi. */
.poi-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--poi,#3a7bd5);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.poi-pin span{transform:rotate(45deg);display:flex;color:#fff;}
.poi-pin span svg{width:15px;height:15px;}
/* Hide de reserva: marco dorado. Señala que el punto es aproximado y que el
   sitio exacto se da al reservar. */
.poi-pin.premium{border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,169,90,.55), var(--sh-2);}
/* Punto aproximado (zona amplia, o aproximado a propósito para no molestar a
   las aves): borde discontinuo y halo del color de la capa. Ver UBICACIÓN DE
   CADA PUNTO en js/app.js. */
.poi-pin.aprox{border-style:dashed; box-shadow:0 0 0 4px color-mix(in srgb,var(--poi,#3a7bd5) 28%,transparent), var(--sh-2);}
/* Punto bloqueado (sin premium): candado dorado, sin revelar de qué tipo es.
   Se apaga un poco para que no compita con los puntos que sí se pueden usar. */
.poi-pin.locked{background:linear-gradient(140deg,#8d7a4e,#6b5a33); border-color:var(--gold); opacity:.9;}
.poi-pin.locked span{color:var(--gold);}
.poi-pin.locked span svg{width:13px;height:13px;}
.leaflet-popup-content .pop-web{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); text-decoration:none; cursor:pointer;}
.leaflet-popup-content .pop-web:hover{text-decoration:underline;}
.community-pin{position:relative; width:30px; height:30px; background:#9aa3ad; font-size:var(--fs-3);}
.obs-pin::after,.community-pin::after{content:''; position:absolute; left:50%; bottom:-6px; width:10px; height:10px; background:inherit; border-radius:0 0 3px 0; transform:translateX(-50%) rotate(45deg); box-shadow:var(--sh-1); z-index:-1;}
.captura-pin{width:28px; height:28px; background:var(--panel);}
.captura-pin svg{width:20px; height:20px;}
.avi-pin{width:28px; height:28px; background:var(--teal); color:var(--on-teal);}
.avi-pin svg{width:17px; height:17px;}
/* Estado activo (popup abierto): pequeño rebote de escala. Lo engancha
   wireMapPinActivo() a los eventos popupopen/popupclose del marker, sin
   tocar la lógica de creación de los markers. */
.map-pin-activo{transform:scale(1.15);}
/* Entrada escalonada al montar el mapa: applyMapFilters() añade esta clase
   la primera vez, con --pin-delay puesto inline por marcador. */
.map-pin-enter{animation:mapPinEnter var(--dur-1) var(--ease) backwards; animation-delay:var(--pin-delay,0ms);}
@keyframes mapPinEnter{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
/* .ruta-pin de nuevo compone en vez de sustituir el transform, esta vez con
   la animación de entrada. */
.ruta-pin.map-pin-enter{animation-name:mapPinEnterRuta;}
@keyframes mapPinEnterRuta{ from{opacity:0; transform:rotate(-45deg) translateY(-8px);} to{opacity:1; transform:rotate(-45deg) translateY(0);} }
/* ==== MAPA PREMIUM: 7. modo "añadir punto" con feedback ==== */
.map-add-btn{position:absolute; bottom:74px; right:10px; z-index:700; width:46px; height:46px; border-radius:50%; background:var(--teal); color:var(--on-teal); font-size:var(--fs-6); line-height:1; border:none; box-shadow:var(--sh-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-1) var(--ease);}
.map-add-btn svg{transition:transform var(--dur-1) var(--ease);}
.map-add-btn.active{background:var(--gold); color:var(--on-gold);}
.map-add-btn.active svg{transform:rotate(45deg);}
.map-add-hint{line-height:var(--lh);position:absolute; top:10px; left:10px; z-index:700; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 10px; font-size:var(--fs-2); max-width:65%; box-shadow:var(--sh-2); opacity:0; transform:translateY(-12px); transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); pointer-events:none;}
.map-add-hint.show{line-height:var(--lh);opacity:1; transform:translateY(0); pointer-events:auto;}
.map-tap-ripple{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--teal); opacity:.5; pointer-events:none; z-index:600; animation:mapTapRipple var(--dur-2) var(--ease) forwards;}
@keyframes mapTapRipple{ from{transform:scale(1); opacity:.5;} to{transform:scale(6); opacity:0;} }
.icon-picker{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.icon-picker button{font-size:var(--fs-5); width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2); cursor:pointer; color:inherit;}
.icon-picker button.on{border-color:var(--teal); background:rgba(79,179,160,.18);}
.star-rate{display:flex; gap:3px; justify-content:center; margin-top:6px;}
.star-rate button{background:none; border:none; font-size:var(--fs-5); cursor:pointer; color:var(--muted); padding:0; line-height:1;}
.star-rate button.on{color:#f0c419;}
.especie-picker{max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-md); margin-top:6px; background:var(--panel2);}
.especie-picker .row{cursor:pointer; padding:7px 8px;}
.especie-picker .row:last-child{border-bottom:none;}
.map-legend{position:absolute; top:10px; right:10px; z-index:500; font-family:system-ui,-apple-system,Segoe UI,sans-serif; font-size:var(--fs-2); display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
/* ===== Sin conexión: fondo propio del mapa =====
   Una retícula suave hecha con gradientes, cero descargas. No pretende ser un
   mapa: solo evitar el vacío gris y que se lea que los pines siguen ahí. */
.map-sin-red{
  background-color:var(--panel2);
  background-image:
    linear-gradient(color-mix(in srgb,var(--line) 60%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--line) 60%,transparent) 1px, transparent 1px);
  background-size:34px 34px, 34px 34px;
}
/* 2026-09-16: el aviso vivía en top:12px con z-index:600, el MISMO que
   .mv-mod-bar (Mi diario / En vivo / Explorar) y por detrás en el DOM, así que
   la barra de modos lo tapaba y no se llegaba a leer. Se baja al hueco libre de
   la parte inferior del mapa -- encima de la hoja de "Mi diario", por debajo de
   los chips-- y se sube de capa para que nada lo pise. */
.mapa-offline-aviso{
  /* 74px = los 60px que asoma la hoja de "Mi diario" (.explo-sheet colapsada)
     + 14 de aire, para quedar justo encima de ella y no pisarla. */
  position:absolute; left:12px; right:12px; top:auto; bottom:74px; z-index:660;
  display:flex; align-items:center; gap:11px; text-align:left;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));
  border-radius:var(--r-lg); padding:11px 13px; box-shadow:var(--sh-4);
  animation:avisoOfflineEntra var(--dur-2) var(--ease) backwards;
}
@keyframes avisoOfflineEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.mapa-offline-aviso{animation:none}}
html[data-motion="reducido"] .mapa-offline-aviso{animation:none;}
/* Con la hoja de En vivo/Explorar desplegada o el botón de añadir punto, el
   aviso sube lo justo para no quedar debajo de ellos. */
body.mapa-fullscreen .mapa-offline-aviso{bottom:calc(18px + var(--sab));}
.mapa-offline-ic{flex:0 0 auto; color:var(--gold); display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--r-full);
  background:color-mix(in srgb,var(--gold) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));}
.mapa-offline-ic svg{width:19px; height:19px;}
.mapa-offline-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mapa-offline-txt b{font-family:var(--display); font-weight:600; font-size:var(--fs-2); line-height:1.3;}
.mapa-offline-txt span{font-size:var(--fs-1); line-height:1.45; color:var(--muted);}
.map-legend-row{display:flex; align-items:center; gap:5px; width:100%; box-sizing:border-box; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm); padding:4px 6px; font-size:var(--fs-1); font-weight:500; font-family:inherit; cursor:pointer; text-align:left; transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);}
.map-legend-row.active{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.dif-dot{display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.dif-badge{display:inline-block; font-family:var(--mono); font-size:var(--fs-1); font-weight:600; color:#fff; border-radius:99px; padding:2px 9px; margin-left:6px; vertical-align:middle;}
.ruta-blur{filter:blur(4px); opacity:.6; user-select:none; pointer-events:none;}
.ruta-lock-msg{font-family:var(--mono); font-size:var(--fs-1); color:var(--err-text); text-align:center; margin-top:6px;}

/* ---------- Capa "Exploración": zonas aproximadas + panel de aves cercanas ----------
   ==== MAPA PREMIUM: 3. pulso MUY sutil solo en la zona seleccionada (antes
   pulsaban todas; las demás se quedan quietas para no distraer). */
.explo-zone-pane svg path.explo-zone-circle.activa{animation:exploZonaActiva 2.2s ease-in-out infinite;}
@keyframes exploZonaActiva{
  0%,100%{ stroke-opacity:.7; fill-opacity:.08; }
  50%{ stroke-opacity:1; fill-opacity:.14; }
}

/* ==== MAPA PREMIUM: 6. bottom sheet "glass" ====
   El asa (36×4px, var(--line)), las esquinas de 18px y el "quitar/poner la
   transición en pointerdown/pointerup" que pide el encargo ya existían tal
   cual (ver wireExploSheet: sheetEl.style.transition='none'/'' ). Aquí solo
   se cambia el fondo a glass, a juego con la leyenda y los controles. */
.explo-sheet{position:absolute; left:0; right:0; bottom:0; z-index:650; height:62dvh; max-height:460px;
  background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--sh-4);
  display:flex; flex-direction:column; transform:translateY(calc(100% - 60px)); transition:transform var(--dur-2) var(--ease); touch-action:none;}
@supports not (backdrop-filter: blur(1px)){ .explo-sheet{background:var(--panel);} }
.explo-sheet.expanded{transform:translateY(0);}
.explo-sheet-handle{flex:0 0 auto; padding:10px 16px 10px; cursor:grab; user-select:none; -webkit-tap-highlight-color:transparent;}
.explo-sheet-grip{width:40px; height:5px; border-radius:99px; background:var(--muted); opacity:.28; margin:0 auto 10px; transition:opacity var(--dur-1);}
.explo-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.explo-sheet-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); display:flex; align-items:center; gap:6px;}
.explo-sheet-title svg{color:var(--teal);}
.explo-sheet-chev{color:var(--muted); transition:transform var(--dur-2) var(--ease); width:18px; height:18px; flex-shrink:0;}
.explo-sheet.expanded .explo-sheet-chev{transform:rotate(180deg);}
.explo-sheet-handle:hover .explo-sheet-grip{opacity:.48;}
.explo-sheet-handle:active .explo-sheet-grip{opacity:.6;}
.explo-radio-row{flex:0 0 auto; display:flex; gap:6px; padding:0 14px 10px;}
.explo-radio-chip{flex:1 1 0; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm); padding:7px 4px; font-size:var(--fs-1); font-family:inherit; font-weight:600; cursor:pointer; text-align:center; transition:background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);}
.explo-radio-chip:active{transform:scale(.96);}
.explo-radio-chip.active{background:var(--teal); color:var(--on-teal); border-color:var(--teal);}
.explo-sheet-body{line-height:var(--lh);flex:1 1 auto; overflow-y:auto; padding:2px 14px 14px; -webkit-overflow-scrolling:touch;}
.explo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
/* El contenedor de cada ave usa el color principal del tema, con un borde
   que indica la rareza (azul, verde, dorado...) para identificarla de un
   vistazo sin tener que abrir la ficha. */
.explo-item{background:linear-gradient(160deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; cursor:pointer; color:var(--text); font:inherit;}
.explo-item:active{border-color:var(--teal);}
/* La foto redonda lleva el marco de color según la rareza del ave (azul,
   verde, dorado...); el recuadro de fuera usa los colores del tema. */
.explo-item-photowrap{position:relative; width:46px; height:46px;}
.explo-item-img{position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; border:4px solid var(--line);}
.explo-item-img img{width:100%; height:100%; object-fit:cover;}
.explo-item-img.undiscovered img{filter:grayscale(1) brightness(.5); opacity:.55;}
.explo-item-status{position:absolute; top:-3px; right:-3px; z-index:5; font-size:var(--fs-1); background:var(--panel2); border-radius:99px; width:16px; height:16px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); box-shadow:var(--sh-1);}
.explo-item-status svg{width:12px; height:12px;}
/* position:relative + ::after para el shimmer: el elemento ya trae un
   box-shadow inline por especie (el halo de color de su rareza, en
   exploItemHTML) y no se le puede tocar esa propiedad sin perderlo, así que
   el brillo dorado va en una capa aparte, encima. */
.explo-item-mystery{position:relative; width:46px; height:46px; border-radius:50%; background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:var(--fs-5); color:var(--gold); border:4px solid var(--line);}
.explo-item-mystery::after{content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid var(--gold); opacity:0; animation:exploMisteriosaShimmer 2.6s ease-in-out infinite;}
@keyframes exploMisteriosaShimmer{ 0%,100%{opacity:0; transform:scale(1);} 50%{opacity:.55; transform:scale(1.08);} }
.explo-item-name{font-family:var(--display); font-weight:600; font-size:var(--fs-1); line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
.explo-item-dist{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.explo-item-rareza{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; font-weight:700;}
.explo-item-when{display:flex; flex-direction:column; align-items:center; gap:0;}
.explo-item-fecha{font-family:var(--mono); font-size:var(--fs-1); color:var(--text); font-weight:700;}
.explo-item-hora{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); opacity:.8;}
.explo-popup{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:var(--fs-2);}
/* Pin de cluster de "Aves cercanas" a zoom lejano (ver recalcExploEscalaYClusters). */
/* Agrupa zonas de exploración al alejar el zoom. Antes era un círculo con un
   número suelto: no se entendía qué contaba (se leía como "capturas"). Ahora
   es una píldora con prismáticos + número, del mismo lenguaje que el resto de
   pines del mapa, y el número se explica solo. */
.explo-cluster{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 11px 0 8px; border-radius:99px;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep));
  color:var(--on-teal); cursor:pointer;
  border:2px solid var(--panel);
  box-shadow:0 5px 16px -5px color-mix(in srgb, var(--teal) 65%, transparent),
             0 0 0 1px rgba(255,255,255,.18) inset;
  transition:transform var(--dur-0) var(--ease), box-shadow var(--dur-0) var(--ease);
}
.explo-cluster:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -6px color-mix(in srgb, var(--teal) 70%, transparent), 0 0 0 1px rgba(255,255,255,.22) inset; }
.explo-cluster:active{ transform:scale(.96); }
/* Contenido por encima del anillo y sin heredar sus eventos. */
.explo-cluster > *{ position:relative; z-index:1; }
.ec-ico{ display:flex; align-items:center; opacity:.92; }
.ec-ico svg{ width:15px; height:15px; }
.ec-n{ font-family:var(--display); font-weight:700; font-size:var(--fs-3); line-height:1; letter-spacing:.01em; }
.explo-cluster::before{
  content:''; position:absolute; inset:-6px; border-radius:99px;
  border:2px solid color-mix(in srgb, var(--teal) 40%, transparent);
  animation:clusterPulse 2.6s ease-out infinite;
  pointer-events:none;   /* el anillo no debe robarle el clic al número */
}
@keyframes clusterPulse{
  0%{ transform:scale(.85); opacity:.7; }
  70%{ transform:scale(1.15); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .explo-cluster::before{ animation:none; opacity:0; } }
.habicons{flex:0 0 auto; display:flex; gap:3px; line-height:1; margin-left:2px; align-items:center;}

/* ---- Color de cada hábitat, declarado UNA vez ----
   Lo usan los tres sitios que pintan hábitats: la insignia pequeña de la
   colección, el icono grande del bloque "Dónde vive" y el borde del chip de
   la ficha. Antes eran tres listas sueltas y cada una cubría hábitats
   distintos (unas los seis nombres viejos, otra los trece actuales), que es
   lo que hacía que tres hábitats se vieran de otra manera que los diez
   restantes. Los 13 de HAB_ORDER, en su orden. */
.habicon-svg-cost,.habicon-anim-cost{background:#1f6f8c;} .sd-hab-cost{border-color:color-mix(in srgb,#1f6f8c 45%,var(--line));}
.habicon-svg-plad,.habicon-anim-plad{background:#c9a24a;} .sd-hab-plad{border-color:color-mix(in srgb,#c9a24a 45%,var(--line));}
.habicon-svg-mar1,.habicon-anim-mar1{background:#2f8f7a;} .sd-hab-mar1{border-color:color-mix(in srgb,#2f8f7a 45%,var(--line));}
.habicon-svg-lag,.habicon-anim-lag{background:#1a7a96;}   .sd-hab-lag{border-color:color-mix(in srgb,#1a7a96 45%,var(--line));}
.habicon-svg-rio,.habicon-anim-rio{background:#2b8fa8;}   .sd-hab-rio{border-color:color-mix(in srgb,#2b8fa8 45%,var(--line));}
.habicon-svg-bosc,.habicon-anim-bosc{background:#8a6a24;} .sd-hab-bosc{border-color:color-mix(in srgb,#8a6a24 45%,var(--line));}
.habicon-svg-bosm,.habicon-anim-bosm{background:#215932;} .sd-hab-bosm{border-color:color-mix(in srgb,#215932 45%,var(--line));}
.habicon-svg-deh,.habicon-anim-deh{background:#7a8c3a;}   .sd-hab-deh{border-color:color-mix(in srgb,#7a8c3a 45%,var(--line));}
.habicon-svg-est,.habicon-anim-est{background:#b88820;}   .sd-hab-est{border-color:color-mix(in srgb,#b88820 45%,var(--line));}
.habicon-svg-alt,.habicon-anim-alt{background:#607484;}   .sd-hab-alt{border-color:color-mix(in srgb,#607484 45%,var(--line));}
.habicon-svg-mat,.habicon-anim-mat{background:#6f7a35;}   .sd-hab-mat{border-color:color-mix(in srgb,#6f7a35 45%,var(--line));}
.habicon-svg-urb,.habicon-anim-urb{background:#5c7080;}   .sd-hab-urb{border-color:color-mix(in srgb,#5c7080 45%,var(--line));}
.habicon-svg-pel,.habicon-anim-pel{background:#124a63;}   .sd-hab-pel{border-color:color-mix(in srgb,#124a63 45%,var(--line));}
.fam{font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); margin-top:2px;}
.habblock-title{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}

/* Los colores de fondo de estos iconos están arriba, con los de los otros dos
   sitios. Las animaciones que había aquí movían el <svg> de dentro, y solo las
   tenían 3 de los 13 hábitats: con el emoji ya no hay SVG que mover, así que
   se van -- animar tres sí y diez no era otra forma de la misma mezcla. */
.curio-block{margin:14px 0 0;}
.curio-title{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between;}
.curio-gold-tag{color:var(--gold); font-size:var(--fs-1);}
.curio-item{display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-2); margin-bottom:6px; padding:9px 11px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line);}
.curio-item .cicon{flex:0 0 auto; font-size:var(--fs-3); line-height:1.3;}
.curio-item .ctxt{flex:1;}
.curio-item.locked .ctxt{color:var(--muted); filter:blur(4px); user-select:none; -webkit-user-select:none;}
.curio-item.unlocked{border-color:var(--teal);}
.curio-item.gold{border-color:var(--gold);}
.distinguir-block{font-size:var(--fs-2); line-height:1.65; color:var(--text); padding:2px 1px;}
.medlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.medal{display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 15px; box-shadow:var(--sh-3); transition:box-shadow var(--dur-1), transform var(--dur-1);}

.medal.done{border-color:var(--gold);}
.medal .micon{font-size:var(--fs-6); flex:0 0 auto; opacity:.45;}
.medal.done .micon{opacity:1;}
.medal .mtxt{flex:1 1 auto; min-width:0;}
.medal .mname{font-family:var(--display); font-weight:600; font-size:var(--fs-3);}
.medal.done .mname{color:var(--gold);}
.medal.locked{opacity:.55;}
.medal.agotado{opacity:.45; filter:grayscale(.5);}
.medal.agotado .micon{filter:grayscale(1);}
.medal[data-ach],.medal[data-poses]{cursor:pointer;}
.medal[data-ach]:hover,.medal[data-poses]:hover{border-color:var(--teal); transform:translateY(-1px); box-shadow:var(--sh-3)}
.medal .mdesc{line-height:var(--lh);font-family:system-ui,-apple-system,Segoe UI,sans-serif; font-size:var(--fs-2); color:var(--muted); margin-top:2px;}
.medal-btn{cursor:pointer; font:inherit; color:inherit; text-align:left; width:100%; display:flex;}
.medal-btn:hover{border-color:var(--teal);}
.count-badge{display:inline-block; font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); border:1px solid var(--teal); border-radius:99px; padding:1px 8px; margin-left:6px; vertical-align:middle;}
.gal-empty{font-family:system-ui,-apple-system,Segoe UI,sans-serif; font-size:var(--fs-2); color:var(--muted); margin:8px 0 0;}
.vphoto-sighting{display:flex; align-items:center; justify-content:center; min-height:160px;}
.vsighting-icon{font-size:var(--fs-7);}
.r-zona{color:#4d9bf0; font-weight:600;}

/* ---------- sesión / usuario ---------- */
.session{display:flex; align-items:center; gap:8px; margin-top:12px;}
.profile-card{display:flex; align-items:center; gap:12px; width:100%; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 14px; color:var(--text); font:inherit; cursor:pointer; text-align:left;}
.profile-card:hover{border-color:var(--teal);}
.profile-card-av{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:99px; overflow:hidden; flex:0 0 auto; background:var(--panel2); border:1px solid var(--line);}
.profile-card-av img{width:100%; height:100%; object-fit:cover; border-radius:99px;}
.profile-card-av .dot{width:10px; height:10px; border-radius:99px; background:var(--teal);}
.profile-card-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.profile-card-label{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.profile-card-name{font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-card-chev{flex:0 0 auto; color:var(--muted); font-size:var(--fs-6); line-height:1;}

/* ---------- pantalla de carga inicial (mientras arranca / resuelve sesión) ---------- */
.boot-overlay{position:fixed; inset:0; z-index:400; background:radial-gradient(120% 70% at 50% -10%, var(--bg1) 0%, var(--bg2) 60%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity var(--dur-2) var(--ease); opacity:1;}
.boot-overlay.boot-overlay-hide{opacity:0; pointer-events:none;}
.boot-overlay-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-7); letter-spacing:-.01em; animation:bootRise var(--dur-3) var(--ease) .08s backwards;}
/* El logo permanece estático (sin flotar ni "respirar"): solo aparece con
   un fundido de entrada breve, sin animaciones continuas de movimiento. */
.boot-overlay-mark{position:relative; width:130px; height:150px; animation:bootRise var(--dur-3) var(--ease) backwards;}
.boot-overlay-mark img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 14px 26px rgba(0,0,0,.28));}
.boot-overlay-mark::after{content:''; position:absolute; left:50%; bottom:-14px; width:70px; height:12px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.22), transparent 70%);}
@keyframes bootRise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.boot-overlay-spinner{width:26px; height:26px; border-radius:99px; border:2.5px solid var(--line); border-top-color:var(--teal); animation:bootSpin .8s linear infinite; margin-top:4px;}
@keyframes bootSpin{to{transform:rotate(360deg);}}
/* ---------- modal de autenticación ---------- */
.auth-overlay{position:fixed; inset:0; background:radial-gradient(120% 70% at 50% -10%, var(--bg1) 0%, var(--bg2) 60%); display:flex; align-items:center; justify-content:center; padding:20px; z-index:120;}
.auth-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 24px 26px; box-shadow:var(--sh-5);}
.auth-back{display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; padding:0 0 14px; transition:color var(--dur-1);}
.auth-back:hover{color:var(--teal);}
.auth-logo{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin:0 0 4px;}
.auth-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-6); text-align:center; margin:0 0 4px; letter-spacing:-.01em;}
.auth-sub{line-height:var(--lh);text-align:center; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin:0 0 20px;}
.auth-tabs{display:flex; background:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); padding:3px; gap:3px; margin-bottom:18px;}
.auth-tabs button{flex:1; background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:9px; border-radius:var(--r-sm); cursor:pointer;}
.auth-tabs button.on{background:var(--teal); color:var(--on-teal); font-weight:600;}
.auth-card .lbl{margin-top:14px;}
.auth-checks{display:flex; flex-direction:column; gap:8px; margin-top:12px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.auth-checks label{display:flex; align-items:center; gap:7px; cursor:pointer;}
.auth-checks input[type="checkbox"]{width:16px; height:16px; accent-color:var(--teal); cursor:pointer;}
.auth-btn{width:100%; margin-top:20px; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-lg); padding:13px; font-weight:600; font-size:var(--fs-3); cursor:pointer; font-family:inherit; box-shadow:0 10px 22px -12px rgba(46,182,164,.55); transition:box-shadow var(--dur-1), transform var(--dur-1);}
.auth-btn:hover{background:var(--teal-deep); transform:translateY(-1px);}
.auth-btn[disabled]{opacity:.6; cursor:wait;}
.auth-err{background:var(--err-bg); border:1px solid var(--err-border); color:var(--err-text); font-family:var(--mono); font-size:var(--fs-2); padding:9px 12px; border-radius:var(--r-sm); margin-top:14px; display:none;}
.auth-err.show{display:block;}
.auth-foot{text-align:center; margin-top:16px;}
.auth-foot button{background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); text-decoration:underline; cursor:pointer;}
.auth-foot button:hover{color:var(--teal);}

/* ---------- comunidad ---------- */
.comm-intro{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin:4px 0 14px; line-height:1.5;}
.comm-search{display:flex; gap:8px; margin-bottom:16px;}
.comm-search input{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 14px; color:var(--text); font-size:var(--fs-3);}
.comm-search input:focus{border-color:transparent;}
.comm-search button{background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-md); padding:0 16px; font-weight:600; font-size:var(--fs-3); cursor:pointer; font-family:inherit;}
.comm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.comm-card{display:flex; align-items:center; gap:13px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; cursor:pointer; text-align:left; color:inherit; font:inherit;}
.comm-card:hover{border-color:var(--teal);}

.comm-info{line-height:var(--lh);flex:1 1 auto; min-width:0;}
.comm-name{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.comm-meta{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin-top:2px;}
.comm-meta b{color:var(--gold);}
.comm-chev{color:var(--muted); font-size:var(--fs-5);}
.comm-level-rank{display:flex; align-items:center; gap:3px; margin-top:3px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.comm-level-rank b{color:var(--gold);}
.comm-stats-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;}
.comm-stat-chip{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); display:inline-flex; align-items:center; gap:6px;}
.comm-stat-chip .stat-badge{width:22px; height:22px;}
.comm-stat-chip .stat-badge svg{width:12px; height:12px;}
.comm-empty{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); text-align:center; padding:24px 0;}
/* ---------- Cabecera de Comunidad: Amigos manda, el resto en pequeño ---------- */
/* Un poco de aire arriba y a la derecha: esta pantalla siempre vive dentro
   del overlay con su propio botón "×" (arriba a la derecha, fuera del flujo
   normal), y sin este hueco el icono de Ranking quedaba pegado -- casi
   debajo -- de ese botón de cerrar. */
.comm-top{display:flex; align-items:center; gap:10px; margin:6px 0 2px;}
.comm-title{line-height:var(--lh-tight);flex:1; font-family:var(--display); font-weight:600; font-size:var(--fs-6); margin:0; letter-spacing:-.01em;}
.comm-top-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-right:38px;}
.comm-icon-btn{position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:99px; background:var(--panel); border:1px solid var(--line); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; touch-action:manipulation; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.comm-icon-btn svg{width:16px; height:16px;}
.comm-icon-btn:hover{border-color:var(--teal); color:var(--teal);}
.comm-icon-btn:active{transform:scale(.9);}
.comm-icon-btn.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.comm-icon-badge{position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--ink);}
.comm-back-btn{flex:0 0 auto; margin-right:-2px;}
.comm-add-friend{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel); border:1px dashed var(--teal); color:var(--teal); font-family:var(--display); font-weight:700; font-size:var(--fs-2); padding:12px; border-radius:var(--r-lg); cursor:pointer; margin:14px 0 16px; transition:background var(--dur-1) var(--ease);}
.comm-add-friend:hover{background:rgba(46,182,164,.1);}
.comm-add-friend svg{width:16px; height:16px;}
/* Insignia circular compartida para los iconos de vistas/capturas/logros */
.stat-badge{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:28px; height:28px; border-radius:99px; background:var(--panel2); border:1px solid var(--line);}
.stat-badge svg{width:15px; height:15px; vertical-align:middle;}
.stat-badge.badge-eye{color:var(--teal);}
.stat-badge.badge-pokeball{color:var(--text);}
.stat-badge.badge-medal{color:var(--gold);}

/* perfil espejo del amigo */
.friend-head{display:flex; align-items:center; gap:14px; margin-bottom:8px;}
.friend-head .comm-av{width:54px; height:54px; font-size:var(--fs-6);}
.friend-head .comm-av.has-photo{cursor:pointer;}
.avatar-lightbox{position:fixed; inset:0; background:rgba(6,11,9,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; z-index:var(--z-visor);}
.avatar-lightbox img{max-width:100%; max-height:75vh; border-radius:var(--r-lg); object-fit:contain;}
.avatar-lightbox-edit{display:flex; align-items:center; gap:7px; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-md); padding:9px 18px; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.avatar-lightbox-close{position:absolute; top:calc(14px + var(--sat)); right:16px; width:40px; height:40px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:var(--fs-5); display:flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.avatar-lightbox-close:active{transform:scale(.88); background:rgba(255,255,255,.22);}
.avatar-lightbox-edit:hover{border-color:var(--gold); color:var(--gold);}
.friend-stats{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 6px;}
.friend-stat{flex:1 1 0; min-width:90px; background:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; text-align:center;}
.friend-stat .v{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-6); color:var(--gold);}
.friend-stat .k{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
.friend-readonly{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); background:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 11px; margin:10px 0; text-align:center;}
.friend-sec{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:18px 0 10px; border-bottom:1px solid var(--line); padding-bottom:6px;}
.friend-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:7px;}
.cap-progress{margin:0 0 14px;}
.cap-progress-label{display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-2); color:var(--muted); margin-bottom:5px;}
.cap-progress-label strong{color:var(--text); font-size:var(--fs-2);}
.cap-progress-track{background:var(--ink); border-radius:99px; height:9px; overflow:hidden; border:1px solid var(--line);}
.cap-progress-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),#a8e6cf); transition:width .6s var(--ease);}
.friend-cell{aspect-ratio:1; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; position:relative; transition:border-color var(--dur-1);}
.friend-cell:hover{border-color:var(--teal);}
.friend-cell img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) opacity(.32);}
.friend-cell.seen img{filter:none;}
.friend-cell.seen{border-color:var(--teal);}
.friend-cell-badge{position:absolute; top:2px; right:2px; z-index:2; width:13px; height:13px; line-height:0;}
.friend-cell-badge svg{width:100%; height:100%; display:block;}
.report-btn{width:100%; margin-top:20px; background:transparent; border:1px solid color-mix(in srgb, var(--err-text) 70%, transparent); color:var(--err-text); border-radius:var(--r-md); padding:11px; font-size:var(--fs-2); cursor:pointer; font-family:inherit;}
.report-btn:hover{background:var(--err-bg);}
.friend-actions{display:flex; gap:8px; margin-top:20px;}
.friend-actions .report-btn{margin-top:0; flex:1;}
.add-friend-btn{flex:1.4; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-md); padding:11px; font-size:var(--fs-2); font-weight:600; cursor:pointer; font-family:inherit;}
.add-friend-btn.added{background:transparent; border:1px solid var(--teal); color:var(--teal);}
.friend-cta{width:100%; margin:14px 0 4px; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-md); padding:13px; font-size:var(--fs-3); font-weight:700; cursor:pointer; font-family:inherit;}
.friend-cta.added{background:transparent; border:1px solid var(--teal); color:var(--teal); cursor:default; margin-bottom:8px;}
.friend-cta.danger{background:transparent; border:1px solid color-mix(in srgb, var(--err-text) 70%, transparent); color:var(--err-text);}
.friend-cta.pending{background:transparent; border:1px solid var(--gold); color:var(--gold); cursor:default;}
/* Botón compacto (solo icono) de amistad, junto al nombre del perfil de otro jugador */
.friend-add-btn{flex-shrink:0; width:36px; height:36px; border-radius:99px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; padding:0;}
.friend-add-btn svg{width:18px; height:18px;}
.friend-add-btn:hover{border-color:var(--teal); color:var(--teal);}
.friend-add-btn.added{border-color:#3ecf6e; color:#3ecf6e; cursor:default;}
.friend-add-btn.pending{border-color:var(--gold); color:var(--gold); cursor:default;}
.friend-add-btn.accept{border-color:var(--gold); color:var(--gold); animation:tarot-pulse 1.8s ease infinite;}

/* ===== PERFIL PROPIO (premium, minimalista) ===== */
.mp-head{display:flex; align-items:center; gap:14px; margin-bottom:2px;}
.mp-head .comm-av{width:58px; height:58px; font-size:var(--fs-6);}

/* ---- Perfil de amigo: panel algo más amplio y la ✕ en su propia esquina ----
   El botón de solicitud de amistad es el último elemento de .mp-head, así que
   caía justo debajo de la ✕ (la fila del avatar centra el botón en y≈33-69 y
   la ✕ ocupa y=10-44) y se solapaban. Se reserva la columna de la ✕ con un
   padding en la cabecera: así no depende del alto del avatar ni de si el
   nombre ocupa una o dos líneas. */
.mp-sheet{max-width:480px; padding:28px 22px 26px;}
.mp-sheet .close{top:14px; right:14px; width:38px; height:38px; font-size:var(--fs-6);}
.mp-sheet .mp-head{gap:16px; padding-right:46px;}
.mp-sheet .mp-head .comm-av{width:64px; height:64px; font-size:var(--fs-6);}
.mp-sheet .friend-add-btn{width:42px; height:42px;}
.mp-sheet .friend-add-btn svg{width:20px; height:20px;}
.mp-head-info{line-height:var(--lh);flex:1; min-width:0;}
.mp-rango{display:flex; align-items:center; gap:6px; margin-top:5px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.mp-stats{display:flex; gap:8px; margin:16px 0 4px;}
.mp-stat{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px 8px; text-align:center;}
/* El carril va en --line, no en --ink: la tarjeta ya es --ink y la barra
   vacía no se vería, perdiéndose la referencia de "cuánto falta". */
.mp-stat .mp-bar{width:100%; height:4px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:7px;}
.mp-stat .mp-bar > i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--teal-deep));}
.mp-stat .mp-bar.gold > i{background:linear-gradient(90deg,#e6c27f,var(--gold));}
.mp-stat .stat-badge{width:34px; height:34px;}
.mp-stat .stat-badge svg{width:18px; height:18px;}
.mp-stat .v{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.mp-stat .k{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
.mp-col-sub{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:6px 0 14px; text-align:center;}
.mp-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; margin-bottom:4px; -webkit-overflow-scrolling:touch;}
.mp-strip .poke-card{flex:0 0 78px;}
.mp-account{display:flex; flex-direction:column; gap:8px; margin-bottom:6px;}
.mp-account .identificar-btn{padding:11px 14px; font-size:var(--fs-3);}
/* corona premium junto al nombre */
.corona-premium{display:inline-block; vertical-align:-0.16em; margin-left:7px; filter:drop-shadow(0 1.5px 2.5px rgba(0,0,0,.35)); flex:0 0 auto;}
.premium-crown-top .corona-premium{margin-left:0; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));}
.mp-head-info .common.big{line-height:var(--lh);display:inline-flex; align-items:center; flex-wrap:wrap;}
.mp-premium-activo{display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:var(--r-md); background:linear-gradient(180deg, rgba(214,169,90,.18), rgba(214,169,90,.06)); border:1px solid var(--gold); color:var(--gold); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.04em;}

/* ==== PERFIL PREMIUM ====
   Rediseño solo de presentación del perfil propio (y esqueleto del de
   invitado). Namespace "pp-" propio para no tocar ni una coma de las clases
   .mp-, .friend- ni .equipo- (compartidas con el perfil de amigo, que no se
   toca en esta pasada) -- las piezas reutilizadas (equipoSeccionHTML,
   rangoArtHTML, refHTML...) se reescriben solo por fuera, con selectores
   descendientes tipo ".pp-team-wrap .equipo-vinil" etc. */
.pp-banner{position:relative; height:148px; margin:-12px -18px 0; overflow:hidden; background:linear-gradient(120deg, var(--bg1), var(--bg2));}
.pp-banner-photo{position:absolute; inset:-12%; background-size:cover; background-position:center; filter:blur(24px) saturate(1.15) brightness(.85);}
.pp-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 38%, var(--bg1) 96%);}
.pp-banner-btn{position:absolute; top:calc(12px + var(--sat)); display:flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 12px; border-radius:99px; background:rgba(0,0,0,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; z-index:2; font-family:var(--mono); font-size:var(--fs-1); transition:transform var(--dur-0) var(--ease);}
.pp-banner-btn svg{width:15px; height:15px; flex:0 0 auto;}
.pp-banner-back{left:12px; width:36px; padding:0;}
.pp-banner-edit{right:12px;}
.pp-banner-btn:active{transform:scale(.92);}
.pp-identity{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:-52px;}
.pp-avatar-wrap{position:relative; width:104px; height:104px; flex:0 0 auto;}
.pp-avatar{line-height:var(--lh-tight);display:flex; align-items:center; justify-content:center; width:104px; height:104px; border-radius:50%; overflow:hidden; background:linear-gradient(180deg,var(--teal-deep),#143832); border:4px solid var(--bg1); box-shadow:0 0 0 2px var(--gold), var(--sh-4); font-family:var(--display); font-weight:600; font-size:var(--fs-7); color:var(--text); cursor:pointer; padding:0;}
.pp-avatar img{width:100%; height:100%; object-fit:cover;}
.pp-avatar-cam{position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--on-gold); display:flex; align-items:center; justify-content:center; border:3px solid var(--bg1); cursor:pointer; padding:0;}
.pp-avatar-cam svg{width:14px; height:14px;}
.pp-medal{position:absolute; left:calc(50% + 30px); top:-2px; width:38px; height:38px; border-radius:50%; background:var(--panel); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); animation:ppMedalBob 3s ease-in-out infinite;}
@keyframes ppMedalBob{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
.pp-name{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-6); margin:12px 0 3px; color:var(--text); display:flex; align-items:center; gap:6px; max-width:100%;}
.pp-subline{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.pp-xp{width:100%; max-width:280px; margin:14px auto 0; display:flex; align-items:center; gap:8px;}
.pp-xp-label{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.pp-xp-track{flex:1; height:6px; border-radius:99px; background:var(--panel2); overflow:hidden;}
.pp-xp-fill{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width 1s var(--ease);}
.pp-xp-val{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.pp-reclamar{display:inline-flex; align-items:center; gap:5px; margin-top:10px; background:var(--gold); color:var(--on-gold); border:none; border-radius:99px; padding:7px 13px; font-family:var(--mono); font-weight:700; font-size:var(--fs-1); cursor:pointer;}
.pp-reclamar svg{width:13px; height:13px;}
.pp-chips{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:16px 0 0;}
.pp-chip{display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:7px 13px; color:var(--text); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; transition:transform var(--dur-0) var(--ease), border-color var(--dur-1);}
.pp-chip svg{width:14px; height:14px; flex:0 0 auto;}
.pp-chip-racha svg{color:#E8703A;}
.pp-chip-prov svg{color:var(--teal);}
.pp-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0 0;}
.pp-stat{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 8px; text-align:center; cursor:pointer; font-family:inherit; color:var(--text); opacity:0; transform:translateY(10px); animation:ppIn var(--dur-2) var(--ease) forwards; transition:transform var(--dur-0) var(--ease);}
.pp-stat:nth-child(1){animation-delay:0ms;}
.pp-stat:nth-child(2){animation-delay:50ms;}
.pp-stat:nth-child(3){animation-delay:100ms;}
.pp-stat .stat-badge{width:38px; height:38px; border-radius:var(--r-md); border:none;}
.pp-stat .stat-badge svg{width:19px; height:19px;}
.pp-stat .stat-badge.badge-eye{background:rgba(46,182,164,.16); color:var(--teal);}
.pp-stat .stat-badge.badge-pokeball{background:rgba(214,169,90,.16); color:var(--gold);}
.pp-stat .stat-badge.badge-medal{background:color-mix(in srgb, var(--acc-lilac) 16%, transparent); color:var(--acc-lilac);}
.pp-stat-val{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-5); color:var(--text);}
.pp-stat-label{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.pp-stat-bar{width:100%; height:3.5px; border-radius:99px; background:var(--panel2); overflow:hidden; margin-top:2px;}
.pp-stat-bar-fill{display:block; height:100%; width:0; border-radius:99px; transition:width .8s var(--ease);}
.pp-sec{display:flex; align-items:baseline; justify-content:space-between; margin:24px 0 10px;}
.pp-sec h3{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0;}
.pp-sec-link{background:none; border:none; color:var(--teal); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; padding:4px 0;}
.pp-fade{opacity:0; transform:translateY(10px); animation:ppIn var(--dur-2) var(--ease) forwards; animation-delay:150ms;}
@keyframes ppIn{to{opacity:1; transform:translateY(0);}}
.pp-recent{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; margin:0; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.pp-recent::-webkit-scrollbar{display:none;}
.pp-recent-item{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; transition:transform var(--dur-0) var(--ease);}
.pp-recent-thumb{position:relative; width:56px; height:56px; border-radius:var(--r-lg); overflow:hidden;}
.pp-recent-thumb .ref{width:56px!important; height:56px!important; border-radius:var(--r-md);}
.pp-recent-dot{position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:2px solid var(--bg1);}
.pp-recent-name{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pp-account{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;}
.pp-row{display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; background:none; border:none; border-bottom:1px solid var(--line); color:var(--text); text-align:left; cursor:pointer; font-family:inherit; transition:transform var(--dur-0) var(--ease);}
.pp-row:last-child{border-bottom:none;}
.pp-row-chev{flex:0 0 auto; width:16px; height:16px; color:var(--muted);}
.pp-row-badge{flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; display:flex; align-items:center; justify-content:center;}
.pp-logout{display:block; width:100%; margin-top:16px; background:transparent; border:1px solid color-mix(in srgb, #E0544E 40%, transparent); color:var(--err-text); border-radius:var(--r-md); padding:12px; font-size:var(--fs-2); font-family:inherit; cursor:pointer; transition:transform var(--dur-0) var(--ease);}
.pp-legal{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin:10px 0 0;}
.pp-row:active, .pp-chip:active, .pp-stat:active, .pp-recent-item:active, .pp-banner-btn:active, .pp-logout:active, .pp-avatar:active, .pp-avatar-cam:active{transform:scale(.96);}
.pp-row:focus-visible, .pp-chip:focus-visible, .pp-stat:focus-visible, .pp-recent-item:focus-visible, .pp-avatar:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:var(--focus-offset);}
.pp-guest-cta{display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:var(--teal); color:var(--on-teal); border:none; border-radius:99px; padding:13px 22px; font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer;}
.friend-cta.accept{background:var(--gold); color:var(--on-gold);}
.seg-badge{display:inline-block; background:var(--gold); color:var(--on-gold); border-radius:99px; font-size:var(--fs-0); padding:1px 6px; margin-left:5px; font-weight:700; vertical-align:middle;}
.req-actions{display:flex; gap:6px; flex:0 0 auto;}
.req-accept,.req-reject{width:34px; height:34px; border-radius:99px; border:1px solid var(--line); background:var(--panel2); font-size:var(--fs-3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit;}
.req-accept{color:var(--teal); border-color:var(--teal);}
.req-reject{color:var(--err-text); border-color:color-mix(in srgb, var(--err-text) 70%, transparent);}
.req-card{margin-top:12px;}
#commContent{margin-top:14px;}
.sortwrap{margin-top:10px;}
.sortwrap select{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2);}
.regionwrap{display:flex; align-items:center; gap:8px; margin:10px 0;}
.regionwrap label{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); white-space:nowrap;}
.regionwrap select{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 12px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2);}

/* ---------- perfil propio (avatar y banner) ---------- */
.comm-av{overflow:hidden; line-height:var(--lh-tight); flex:0 0 auto; width:44px; height:44px; border-radius:99px; background:linear-gradient(180deg,var(--teal-deep),#143832); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--text)}
.comm-av img{width:100%; height:100%; object-fit:cover; border-radius:99px;}
.txt .fam-tag{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:1px;}
.fam-progress{font-family:var(--mono); font-size:var(--fs-2); color:var(--teal); font-weight:400; text-transform:none; letter-spacing:normal;}
.feno-badge{font-family:var(--mono); font-size:var(--fs-1); font-weight:600; letter-spacing:.02em; text-transform:none; border-radius:99px; padding:2px 8px; margin-top:3px; display:inline-flex; align-items:center; gap:4px; width:fit-content;}
.feno-alta{background:rgba(94,196,140,.16); color:#5EC48C; border:1px solid #5EC48C;}
.feno-media{background:rgba(214,169,90,.16); color:var(--gold); border:1px solid var(--gold);}
.feno-baja{background:rgba(224,85,106,.16); color:#E0556A; border:1px solid #E0556A;}
.sp-head .feno-badge{font-size:var(--fs-2); padding:4px 11px; margin-top:6px;}
/* ---- FENOLOGÍA LOCAL: selector de la hoja de En vivo y lista de la zona ---- */
.fl-tabs{display:flex; gap:4px; margin:0 0 10px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-full); padding:3px;}
.fl-tabs button{flex:1 1 0; border:none; background:transparent; color:var(--muted); font-family:inherit; font-size:var(--fs-2); font-weight:600; padding:9px 6px; border-radius:var(--r-full); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;}
.fl-tabs button.active{background:var(--teal); color:var(--on-teal);}
.fl-tabs .ct{font-family:var(--mono); font-size:var(--fs-0); background:rgba(255,255,255,.14); border-radius:var(--r-full); padding:1px 6px;}
.fl-tabs button.active .ct{background:rgba(0,0,0,.22);}
.fl-cap{font-size:var(--fs-1); color:var(--muted); padding:0 2px 10px;}
.fl-marcador{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; margin-bottom:12px;}
.fl-marcador .big{font-family:var(--display); font-size:var(--fs-6); font-weight:600; color:var(--teal);}
.fl-barra{height:5px; border-radius:var(--r-full); background:var(--line); margin:9px 0 7px; overflow:hidden;}
.fl-barra i{display:block; height:100%; border-radius:var(--r-full); background:var(--teal);}
.fl-grupo{display:flex; align-items:center; gap:7px; padding:12px 0 7px;}
.fl-grupo .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.fl-grupo .lab{font-family:var(--mono); font-size:var(--fs-1); font-weight:600; letter-spacing:.04em;}
.fl-grupo .num{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.fl-fila{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); cursor:pointer; width:100%; background:transparent; border-left:none; border-right:none; border-top:none; color:var(--text); font-family:inherit; text-align:left;}
.fl-fila:active{opacity:.7;}
.fl-fila .th{width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--panel2); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.fl-fila .th img{width:100%; height:100%; object-fit:cover;}
.fl-fila .nm{flex-grow:1; min-width:0;}
.fl-fila .nm b{display:block; font-size:var(--fs-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-fila .nm span{display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-fila.hecha .nm b{color:var(--muted); text-decoration:line-through;}
.fl-chk{width:24px; height:24px; border-radius:50%; flex-shrink:0; border:2px dashed #4A6357; display:flex; align-items:center; justify-content:center;}
.fl-chk.on{border:none; background:var(--teal);}
.fl-mas{display:block; width:100%; margin:14px 0 6px; text-align:center; font-size:var(--fs-2); font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:var(--r-md); padding:11px; cursor:pointer; font-family:inherit;}
.fl-nota{font-size:var(--fs-0); color:var(--muted); line-height:1.5; padding:10px 2px 4px;}
/* ===================================================================
   PISTAS DE ZONA (22/09/2026)
   ===================================================================
   Lo que sabe la gente que ya ha encontrado un ave AQUÍ, para quien venga
   detrás. Van atadas a la misma celda de 0,25 grados que la fenología local:
   si te mueves de zona, cambian. No es un feed -- se leen donde ya estabas
   mirando (la lista de la zona, la ficha, Explorar). */
.fl-filtros{display:flex; gap:6px; margin:0 0 2px; overflow-x:auto; scrollbar-width:none; padding:0 0 3px;}
.fl-filtros::-webkit-scrollbar{display:none;}
.fl-filtros button{flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  font-family:inherit; font-size:var(--fs-1); font-weight:600; padding:8px 13px; border-radius:var(--r-full);
  cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap;}
.fl-filtros button.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.fl-filtros .ct{font-family:var(--mono); font-size:var(--fs-0); opacity:.75;}
.fl-resto{text-align:center; font-size:var(--fs-1); color:var(--muted); padding:11px 0 3px; border-bottom:1px solid var(--line);}
/* Las que ya tienes bajan de peso en vez de llevar un círculo grande que se
   lleva la mirada: tachadas, apagadas y con una marca pequeña. */
.fl-fila.hecha .th{opacity:.42;}
.fl-fila.hecha .nm span{opacity:.55;}
.fl-tick{width:15px; height:15px; flex-shrink:0; color:var(--teal); opacity:.75;}
.pz-bomb{display:inline-flex; align-items:center; gap:3px; flex-shrink:0; color:var(--gold);
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600;}
.pz-bomb svg{width:14px; height:14px;}

/* -- La hoja de resumen: foto, nombre, estado del mes, descripción, pistas -- */
.pz-ov{position:fixed; inset:0; z-index:5250; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,11,9,.7); animation:pzFade .2s var(--ease);}
@keyframes pzFade{from{opacity:0}to{opacity:1}}
.pz-hoja{width:100%; max-width:560px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0; animation:pzSube .26s var(--ease);}
@keyframes pzSube{from{transform:translateY(24px)}to{transform:none}}
.pz-scroll{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(16px + var(--sab));}
.pz-foto{position:relative; height:186px; background:var(--panel2); flex-shrink:0;}
.pz-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.pz-foto .vacia{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--line);}
.pz-foto .vacia svg{width:64px; height:64px;}
.pz-x{position:absolute; top:11px; left:11px; width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(6,11,9,.6); color:#fff; font-size:19px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;}
.pz-cuerpo{padding:14px 16px 4px;}
.pz-nom{font-family:var(--display); font-size:var(--fs-5); font-weight:600; line-height:1.2;}
.pz-sci{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:3px;}
.pz-estado{display:flex; align-items:center; gap:9px; margin:12px 0 0; padding:10px 12px;
  border-radius:var(--r-md); background:rgba(255,255,255,.04);}
.pz-estado b{display:block; font-size:var(--fs-2);}
.pz-estado span span{display:block; font-size:var(--fs-1); color:var(--muted); margin-top:1px;}
.pz-desc{font-size:var(--fs-2); line-height:1.6; color:var(--text); margin:13px 0 0; opacity:.9;}
.pz-h{display:flex; align-items:center; gap:8px; margin:20px 0 10px;}
.pz-h b{font-family:var(--display); font-size:var(--fs-3); font-weight:600;}
.pz-h .ct{font-family:var(--mono); font-size:var(--fs-0); color:var(--gold); background:rgba(214,169,90,.15);
  border-radius:var(--r-full); padding:2px 7px;}
.pz-pista{border-left:2px solid var(--gold); background:var(--panel2); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:11px 13px; margin-bottom:9px;}
.pz-pista p{font-size:var(--fs-2); line-height:1.55; margin:0 0 9px; white-space:pre-wrap; overflow-wrap:anywhere;}
.pz-pie{display:flex; align-items:center; gap:9px;}
.pz-aut{flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pz-voto{flex-shrink:0; display:flex; align-items:center; gap:5px; background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:var(--r-full); padding:5px 10px; font-family:var(--mono); font-size:var(--fs-0);
  cursor:pointer; transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);}
.pz-voto svg{width:12px; height:12px;}
.pz-voto.on{color:var(--gold); border-color:var(--gold); background:rgba(214,169,90,.12);}
.pz-voto:disabled{opacity:.5; cursor:default;}
.pz-vacio{font-size:var(--fs-2); line-height:1.6; color:var(--muted); background:var(--panel2);
  border:1px dashed var(--line); border-radius:var(--r-md); padding:13px;}
.pz-cta{display:block; width:100%; margin:16px 0 0; padding:13px; border-radius:var(--r-md); border:none;
  background:var(--teal); color:var(--on-teal); font-family:inherit; font-size:var(--fs-2); font-weight:700; cursor:pointer;}
.pz-meta .pz-falta{color:var(--gold);}
.pz-cta.sec{background:transparent; border:1px solid var(--line); color:var(--text); margin-top:9px;}
.pz-cargando{font-size:var(--fs-1); color:var(--muted); padding:6px 0;}

/* -- Escribir la pista, en la confirmación de la captura -- */
.pz-esc{padding:2px 0 0;}
.pz-esc h3{font-family:var(--display); font-size:var(--fs-4); font-weight:600; margin:0 0 5px;}
.pz-esc .sub{font-size:var(--fs-1); color:var(--muted); line-height:1.5; margin:0 0 12px;}
.pz-ta{width:100%; min-height:104px; resize:vertical; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-md); color:var(--text); font-family:inherit; font-size:var(--fs-2); line-height:1.55;
  padding:11px 13px; box-sizing:border-box;}
.pz-ta:focus{outline:none; border-color:var(--teal);}
.pz-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:7px 2px 11px;
  font-size:var(--fs-0); color:var(--muted);}
.pz-meta .ct{font-family:var(--mono);}
.pz-meta .ct.pasado{color:#C98A9B;}
.pz-sitio{display:flex; align-items:flex-start; gap:7px; font-size:var(--fs-1); color:var(--muted); line-height:1.45; margin-bottom:11px;}
.pz-sitio svg{width:15px; height:15px; flex-shrink:0; margin-top:1px;}
.pz-nido{display:flex; align-items:flex-start; gap:9px; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px 12px; font-size:var(--fs-1); color:var(--muted); line-height:1.5;}
.pz-nido svg{width:15px; height:15px; flex-shrink:0; color:var(--gold); margin-top:1px;}

/* -- Explorar: agrupadas por sitio, no por especie -- */
.pz-sitios{margin-bottom:6px;}
.pz-sit{display:block; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:11px 13px; margin-bottom:8px; cursor:pointer; color:var(--text); font-family:inherit;}
.pz-sit .cab{display:flex; align-items:center; gap:8px;}
.pz-sit .cab b{flex:1 1 auto; min-width:0; font-size:var(--fs-2); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.pz-sit .cab .ct{flex-shrink:0; font-family:var(--mono); font-size:var(--fs-0); color:var(--gold);}
.pz-sit .esp{display:block; font-size:var(--fs-1); color:var(--muted); margin-top:4px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.pz-sit .abierto{display:none;}
.pz-sit.on .esp{display:none;}
.pz-sit.on .abierto{display:block; margin-top:10px; border-top:1px solid var(--line); padding-top:10px;}
.pz-mini{display:block; border-left:2px solid var(--gold); padding:2px 0 2px 10px; margin-bottom:11px;}
.pz-mini b{display:block; font-size:var(--fs-1); font-weight:600; margin-bottom:3px;}
.pz-mini p{font-size:var(--fs-1); line-height:1.55; color:var(--text); opacity:.88; margin:0 0 4px; white-space:pre-wrap; overflow-wrap:anywhere;}
.pz-mini .aut{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.pz-mini[data-pzsp]{cursor:pointer;}
.pz-mini[data-pzsp]:active{opacity:.7;}
.pz-mini-v{display:inline-flex; align-items:center; gap:3px; color:var(--muted);}
.pz-mini-v.on{color:var(--gold);}
.pz-mini-v svg{width:10px; height:10px;}

/* -- El enlace desde la ficha completa: la mejor pista y nada más -- */
.pz-ficha{border-left:2px solid var(--gold); background:rgba(214,169,90,.07); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:11px 13px; margin-top:4px;}
.pz-ficha p{font-size:var(--fs-2); line-height:1.55; margin:0 0 7px; white-space:pre-wrap; overflow-wrap:anywhere;}
.pz-ficha .aut{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); display:block;}
.pz-ver{display:block; width:100%; margin-top:10px; background:transparent; border:1px solid var(--line);
  border-radius:var(--r-md); color:var(--gold); font-family:inherit; font-size:var(--fs-1); font-weight:600;
  padding:10px; cursor:pointer;}
/* ---- LA ESTANTERÍA DE LOS MESES (easter egg del calendario) ---- */
/* 22/09/2026: estaba en 5200 y el calendario, que es de donde se abre, es un
   .tarot-overlay a --z-dialogo (6000). O sea que la estantería se abría por
   DEBAJO de la pantalla que la había llamado y parecía que no pasaba nada al
   mantener pulsado el año. Va a --z-dialogo-top, justo encima del calendario
   y por debajo de los modales de confirmación (--z-dialogo-modal, 6300),
   que tienen que seguir mandando sobre todo. */
.fl-ov{position:fixed; inset:0; z-index:var(--z-dialogo-top); display:flex; flex-direction:column; overflow:hidden;
  background:radial-gradient(130% 55% at 50% 0%, #1A2019 0%, #0D1512 60%); color:#DEE7E0;
  padding-top:var(--sat); animation:flOvIn .26s var(--ease);}
@keyframes flOvIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.fl-ov-top{flex:0 0 auto; display:flex; align-items:flex-start; gap:10px; padding:16px 18px 4px;}
.fl-ov-top h2{font-family:var(--display); font-size:var(--fs-6); font-weight:600; margin:5px 0 0;}
.fl-ov-eyebrow{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; color:#B98A3E;}
.fl-ov-x{width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#8D9E94; cursor:pointer; padding:0; font-size:22px; line-height:1;}
.fl-ov-body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.fl-balda{padding:0 14px; margin-bottom:26px;}
.fl-libros{display:flex; align-items:flex-end; justify-content:center; gap:5px; min-height:182px; padding:0 6px;}
.fl-lomo{flex-shrink:0; border:none; padding:0; cursor:pointer; border-radius:3px 3px 2px 2px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.9); display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; transform-origin:bottom center; transition:transform var(--dur-1) var(--ease);}
.fl-lomo:hover,.fl-lomo:focus-visible{transform:translateY(-8px);}
.fl-lomo .bnd{display:block; height:3px; background:rgba(255,255,255,.22); align-self:stretch; margin:9px 4px 0;}
.fl-lomo .bnd2{margin:0 4px 10px;}
.fl-lomo .txt{writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.92); white-space:nowrap;}
.fl-hueco{width:30px; min-height:150px; border-radius:3px; border:1px dashed #4A6357; background:rgba(46,182,164,.06);
  display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;}
.fl-hueco .mk{position:absolute; top:-5px; left:50%; margin-left:-4px; width:8px; height:26px; background:var(--teal); border-radius:1px 1px 0 0;}
.fl-tabla{height:10px; border-radius:2px; background:linear-gradient(180deg,#4A3B2B,#2A2118); box-shadow:0 8px 18px -8px rgba(0,0,0,.9);}
.fl-pie{flex:0 0 auto; padding:14px 18px calc(18px + var(--sab)); display:flex; gap:10px; border-top:1px solid #22332C;}
.fl-pie div{flex:1 1 0;}
.fl-pie b{font-family:var(--display); font-size:var(--fs-5); font-weight:600; display:block;}
.fl-pie span{font-size:var(--fs-0); color:#8D9E94;}
/* el libro abierto */
.fl-tomo{position:absolute; left:12px; right:12px; top:calc(74px + var(--sat)); bottom:calc(18px + var(--sab)); perspective:1400px;}
.fl-tapa{position:absolute; inset:0; border-radius:3px 10px 10px 3px; transform-origin:left center; backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.55,.05,.3,1); z-index:5; display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.95);}
.fl-tapa.abierta{transform:rotateY(-168deg);}
.fl-tapa-in{display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px; text-align:center;}
.fl-placa{background:rgba(0,0,0,.34); border-radius:3px; padding:10px 16px;}
.fl-placa b{font-family:var(--display); font-size:var(--fs-5); font-weight:600; color:#FBF6EA; display:block; line-height:1.1;}
.fl-placa span{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; color:rgba(251,246,234,.86); display:block; margin-top:4px;}
.fl-pags{position:absolute; inset:0; display:flex; border-radius:4px 10px 10px 4px; overflow:hidden; box-shadow:0 30px 70px -28px rgba(0,0,0,.95);}
.fl-lomo2{width:26px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:12px 0;}
.fl-hoja{flex:1 1 auto; min-width:0; background:linear-gradient(100deg,#E4DAC6 0%,#EFE7D6 7%,#F2EBDC 60%,#EAE1CF 100%);
  color:#2A2620; display:flex; flex-direction:column; padding:18px 16px 0;}
.fl-rule{height:1px; background:#C9BCA2;}
.fl-canto{width:7px; flex-shrink:0; background:repeating-linear-gradient(180deg,#E4DAC6 0 2px,#CFC2A8 2px 3px);}
.fl-entr{display:flex; gap:11px; padding:10px 0; border-bottom:1px solid #DCD0B8;}
.fl-entr .d{width:38px; flex-shrink:0; text-align:right;}
.fl-entr .d b{font-family:var(--mono); font-size:var(--fs-3); font-weight:600; line-height:1; display:block;}
.fl-entr .d span{font-family:var(--mono); font-size:9px; color:#5E5446; letter-spacing:.06em; display:block; margin-top:2px;}
.fl-entr .mn{width:38px; height:38px; flex-shrink:0; border-radius:3px; background:#DFD3BB; border:1px solid #C9BCA2; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#A89877;}
.fl-entr .mn img{width:100%; height:100%; object-fit:cover;}
.fl-entr .tx{flex:1 1 auto; min-width:0;}
.fl-entr .tx b{font-size:var(--fs-2); font-weight:600; display:block;}
.fl-entr .tx span{font-size:var(--fs-1); color:#5E5446; display:block; margin-top:3px;}
.fl-nueva{display:inline-block; vertical-align:1px; white-space:nowrap; font-family:var(--mono); font-size:8.5px;
  font-weight:600; letter-spacing:.08em; color:#FBF6EA; background:#A3552F; border-radius:99px; padding:2px 6px; margin-left:6px;}
.fl-hojas{flex:1 1 auto; overflow-y:auto; position:relative;}
.fl-hojas.pasa{animation:flPasa .42s var(--ease);}
@keyframes flPasa{0%{opacity:1;transform:translateX(0)}45%{opacity:0;transform:translateX(-22px)}55%{opacity:0;transform:translateX(22px)}100%{opacity:1;transform:none}}
.fl-piepag{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:6px 0 12px; border-top:1px solid #C9BCA2;}
.fl-piepag button{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:#5E5446; cursor:pointer; padding:0; font-size:20px;}
.fl-piepag .n{flex:1 1 auto; text-align:center; font-family:var(--mono); font-size:var(--fs-1); color:#5E5446; letter-spacing:.1em;}
/* portada */
.fl-cover{width:192px; height:274px; border-radius:3px 10px 10px 3px; box-shadow:0 30px 60px -24px rgba(0,0,0,.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:22px 18px; position:relative; transition:background var(--dur-2) var(--ease);}
.fl-cover .sh{position:absolute; left:0; top:0; bottom:0; width:13px; background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,0)); border-radius:3px 0 0 3px;}
.fl-cover .mc{position:absolute; left:22px; right:14px; top:14px; bottom:14px; border:1px solid rgba(255,255,255,.22); border-radius:2px;}
.fl-sw{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px;}
.fl-sw button{aspect-ratio:1/1; border-radius:50%; cursor:pointer; padding:0; border:2px solid rgba(255,255,255,.14);}
.fl-sw button.on{border:2px solid #DEE7E0; box-shadow:0 0 0 3px rgba(222,231,224,.2);}
.fl-cta{display:block; width:100%; text-align:center; background:var(--gold); color:#3A2A0E; font-size:var(--fs-3);
  font-weight:600; border:none; border-radius:var(--r-md); padding:14px; cursor:pointer; font-family:inherit;}
/* aviso de cambio de mes dentro de "Aves de la zona" */
.fl-aviso{display:flex; align-items:center; gap:10px; width:100%; background:var(--panel2); border:1px solid var(--gold);
  border-radius:var(--r-md); padding:11px 13px; margin-bottom:12px; cursor:pointer; font-family:inherit; color:var(--text); text-align:left;}
.fl-aviso b{font-size:var(--fs-2); display:block;}
.fl-aviso span{font-size:var(--fs-1); color:var(--muted); display:block; margin-top:2px;}
/* listas de cambio de mes */
.fl-lista{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;}
.fl-lista .it{display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line);}
.fl-lista .it:last-child{border-bottom:none;}
.fl-lista .it .tx{flex:1 1 auto; min-width:0;}
.fl-lista .it .tx b{font-size:var(--fs-2); font-weight:600; display:block;}
.fl-lista .it .tx span{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); display:block; margin-top:1px;}

/* ---- "Lo que cambia por tu zona" ----
   Esta pantalla vivía dentro de .fl-ov, que tiene el fondo y el color de
   texto CLAVADOS en oscuro porque nació para la estantería de los recuerdos
   (esa escena es de madera y tiene que serlo en todos los temas). Pero las
   tarjetas de dentro sí usaban var(--panel), así que con un tema claro
   quedaba texto casi blanco sobre panel blanco: los nombres de las aves no
   se leían. La variante .tema devuelve la pantalla a los colores del tema
   elegido, y solo la usa esta pantalla. */
.fl-ov.tema{ background:linear-gradient(180deg, var(--bg1), var(--bg2)); color:var(--text); }
.fl-ov.tema .fl-ov-eyebrow{ color:var(--acc-amber); }
.fl-ov.tema .fl-ov-x{ color:var(--muted); }

.flc-sub{font-size:var(--fs-1); color:var(--muted); line-height:1.5; padding:2px 18px 0;}
/* Las dos cifras de arriba: el resumen entero de un vistazo, antes de leer
   una sola fila. */
.flc-marcador{display:flex; gap:10px; padding:14px 16px 4px;}
.flc-caja{flex:1 1 0; min-width:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px 14px;}
.flc-caja .n{font-family:var(--display); font-size:var(--fs-7); font-weight:700; line-height:1; display:block;}
.flc-caja .l{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); display:block; margin-top:6px;}
.flc-caja.entran{border-color:color-mix(in srgb, var(--ok) 42%, var(--line));}
.flc-caja.entran .n{color:color-mix(in srgb, var(--ok) 72%, var(--text));}
.flc-caja.salen{border-color:color-mix(in srgb, var(--warn) 42%, var(--line));}
.flc-caja.salen .n{color:color-mix(in srgb, var(--warn) 72%, var(--text));}

.flc-cab{display:flex; align-items:center; gap:8px; padding:20px 18px 8px;}
.flc-cab .pt{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.flc-cab h3{font-family:var(--display); font-size:var(--fs-4); font-weight:600; margin:0; flex:1 1 auto;}
.flc-cab .n{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); font-variant-numeric:tabular-nums;}

.flc-lista{margin:0 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;}
.flc-fila{display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px; background:none;
  border:none; border-bottom:1px solid var(--line); font-family:inherit; color:var(--text);
  text-align:left; cursor:pointer;}
.flc-fila:last-child{border-bottom:none;}
.flc-fila:active{background:var(--panel2);}
.flc-th{width:42px; height:42px; flex-shrink:0; border-radius:var(--r-md); overflow:hidden;
  background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted);}
.flc-th img{width:100%; height:100%; object-fit:cover; display:block;}
.flc-nm{flex:1 1 auto; min-width:0;}
/* El nombre común parte en dos líneas antes que recortarse: "Papamoscas
   cer..." no le dice nada a quien está aprendiendo, que es justo quien lee
   esta pantalla. El científico sí se recorta, que es de apoyo. */
.flc-nm b{display:block; font-size:var(--fs-2); font-weight:600; color:var(--text); line-height:1.25;}
.flc-nm span{display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);
  font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
/* La píldora toma su tono de --c y lo mezcla: los colores de tramo son vivos
   y sobre panel blanco se deslavan, así que el texto se empuja hacia --text
   y el fondo se queda en un tinte. Legible en los dos temas sin un hex nuevo. */
.flc-pill{flex-shrink:0; font-family:var(--mono); font-size:var(--fs-0); font-weight:600;
  letter-spacing:.02em; border-radius:var(--r-full); padding:3px 9px; white-space:nowrap;
  background:color-mix(in srgb, var(--c) 15%, transparent);
  color:color-mix(in srgb, var(--c) 43%, var(--text));   /* medido: al 58% se quedaba en 3,8:1 sobre panel claro */
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);}
.flc-pill.vuelve{--c:var(--warn);}
.flc-tick{width:15px; height:15px; flex-shrink:0; color:var(--ok);}
.flc-chev{width:14px; height:14px; flex-shrink:0; color:var(--muted);}
.flc-fila.hecha .flc-nm b{color:var(--muted);}
.flc-mas{display:block; width:calc(100% - 28px); margin:8px 14px 0; background:none;
  border:1px dashed var(--line); border-radius:var(--r-md); padding:9px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-1); color:var(--teal-on-panel);}
.flc-nada{margin:0 14px; font-size:var(--fs-1); color:var(--muted); padding:10px 2px;}
.flc-pie{font-size:var(--fs-1); color:var(--muted); padding:12px 18px 0; line-height:1.5;}

/* ---- el libro como ÁLBUM: un bloque por día ---- */
.fl-dia{margin:0 0 4px; padding:12px 0 4px; border-bottom:1px solid #DCD0B8;}
.fl-dia:last-child{border-bottom:none;}
.fl-dia-cab{display:flex; align-items:baseline; gap:10px; margin-bottom:9px;}
.fl-dia-num{font-family:var(--display); font-size:30px; font-weight:600; line-height:1; color:#2A2620; min-width:34px;}
.fl-dia-tx{flex:1 1 auto; min-width:0;}
.fl-dia-tx b{display:block; font-size:var(--fs-2); font-weight:600; text-transform:capitalize;}
.fl-dia-tx span{display:block; font-size:var(--fs-1); color:#5E5446; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-dia-ct{font-family:var(--mono); font-size:var(--fs-0); color:#8A7C64; flex-shrink:0;}
/* Cada registro lleva SU cromo en el margen izquierdo: pequeño, con el nombre
   debajo y ligeramente torcido, como una estampa pegada en la agenda. Las
   observaciones (sin foto) llevan un recuadro punteado con un ojo, para que
   la columna no se desalinee y se vea de un vistazo qué día llevaste cámara.
   Lo único que se mueve es un transform al pasar por encima: ni un solo
   @keyframes, que esto tiene que ir fino en un WebView. */
.fl-reg{display:flex; gap:11px; padding:7px 0; border-bottom:1px solid #DCD0B8;}
.fl-reg:last-child{border-bottom:none;}
.fl-cromo{width:58px; height:74px; flex-shrink:0; border-radius:4px; padding:3px 3px 0; margin:0;
  cursor:pointer; background:#FDFBF5; border:1px solid #D2C5AB;
  box-shadow:0 3px 7px -3px rgba(60,45,25,.55);
  transform:rotate(-2deg); transition:transform var(--dur-1) var(--ease);}
.fl-reg:nth-child(even) .fl-cromo{transform:rotate(1.6deg);}
.fl-cromo:hover,.fl-cromo:focus-visible{transform:rotate(0) scale(1.06); position:relative; z-index:2;}
.fl-cromo img{width:100%; height:52px; object-fit:cover; display:block; border-radius:2px; background:#E4DAC6;}
.fl-cromo figcaption{display:block; font-family:var(--mono); font-size:6.5px; letter-spacing:.04em;
  color:#5E5446; text-align:center; padding:3px 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-sinfoto{width:58px; height:74px; flex-shrink:0; border-radius:4px; border:1px dashed #C0B39A;
  display:flex; align-items:center; justify-content:center; color:#B3A68D;}
.fl-reg .tx{flex:1 1 auto; min-width:0; padding-top:3px;}
.fl-reg .tx b{display:block; font-size:var(--fs-2); font-weight:600; line-height:1.5;}
.fl-reg .tx > span{display:block; font-size:var(--fs-1); color:#5E5446; margin-top:3px;}
.fl-reg .tx q{display:block; font-family:var(--display); font-style:italic; font-size:var(--fs-1);
  color:#5E5446; margin-top:4px; quotes:none;}
/* El selector de arriba lleva > a propósito: las etiquetas van DENTRO del <b>
   y, sin él, ".fl-reg .tx span" les ganaba en especificidad y las pintaba
   como bloques a todo el ancho. */
.fl-reg .tx .fl-tag{display:inline-block; width:auto; font-family:var(--mono); font-size:7.5px; font-weight:600;
  letter-spacing:.06em; border-radius:99px; padding:2px 5px; margin:0 0 0 4px; white-space:nowrap; vertical-align:1px;}
.fl-tag{display:inline-block; font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.07em;
  border-radius:99px; padding:2px 6px; margin-left:5px; white-space:nowrap; vertical-align:1px;}
.fl-tag.nv{background:#A3552F; color:#FBF6EA;}
.fl-tag.cp{border:1px solid #6E8C5A; color:#4C6B3A;}
.fl-tag.ob{border:1px solid #B0A48C; color:#6E6350;}
.fl-dia{padding-bottom:2px;}
.fl-anyo{background:transparent; border:none; font:inherit; color:inherit; cursor:pointer; padding:0 4px; border-radius:6px; position:relative;}
.fl-anyo.hold{background:rgba(214,169,90,.18); box-shadow:0 0 0 2px rgba(214,169,90,.45);}
.rareza-badge{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; border-radius:99px; padding:1px 7px; margin-top:2px; display:inline-block; width:fit-content;}
.sp-head .rareza-badge{font-size:var(--fs-2); padding:3px 10px; margin-top:6px;}
.song-block{margin:0 0 14px;}
.song-title{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.song-loading{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px;}
.song-credit{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:5px;}
.song-player{display:flex; align-items:center; gap:11px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px;}
.song-play{flex:0 0 auto; width:36px; height:36px; border-radius:99px; border:none; background:var(--teal); color:var(--on-teal); display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit;}
.song-play:hover{filter:brightness(1.08);}
/* Trivial (14/10/2026): mientras la grabación se descarga, un aro que gira
   alrededor del botón (solo transform, ver §6.3 de CLAUDE.md). */
.song-play{position:relative;}
.song-play.cargando::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid transparent; border-top-color:var(--teal); border-right-color:var(--teal); animation:refSpin .8s linear infinite; pointer-events:none;}
.song-play:disabled{opacity:.45; cursor:default;}
@media (prefers-reduced-motion: reduce){ .song-play.cargando::after{animation-duration:2.4s;} }
.song-progress{flex:1 1 auto; height:6px; background:var(--ink); border-radius:99px; overflow:hidden; position:relative; cursor:pointer;}
.song-progress-bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--teal); border-radius:99px;}
.mes-histo{margin:0 0 14px;}
.mes-histo-title{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.mes-histo-chart{display:flex; align-items:flex-end; gap:3px; height:74px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:8px 6px 6px;}
.mes-histo-bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px;}
.mes-histo-fill{width:100%; border-radius:3px 3px 0 0; background:var(--teal); min-height:0;}
.mes-histo-bar.current .mes-histo-fill{background:var(--gold);}
.mes-histo-label{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1;}
/* Los doce meses caben siempre (01/10/2026): la barra se puede estrechar
   por debajo de su etiqueta, la etiqueta es la inicial y, solo si la gráfica
   es ancha, la abreviatura de tres letras. Ver mesHistoLabelHTML. */
.mes-histo-chart{container-type:inline-size; min-width:0; overflow:hidden;}
.mes-histo-bar{min-width:0;}
.mes-histo-label{flex:0 0 auto; max-width:100%; overflow:hidden; white-space:nowrap; text-align:center;}
.mes-histo-label .mh-l3{display:none;}
@container (min-width: 330px){
  .mes-histo-label .mh-l1{display:none;}
  .mes-histo-label .mh-l3{display:inline;}
}
.mes-histo-note{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:6px; line-height:1.4;}
.song-time{flex:0 0 auto; min-width:78px; text-align:right; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}

/* ===== ESTILOS DE PANEL/MODAL GENÉRICO (compartidos por todos los overlays) ===== */
/* 2026-09-16: el relleno era 16px planos. Con una hoja alta (max-height:95dvh)
   la tarjeta llegaba casi al borde de la pantalla y su × (.tarot-close, arriba
   a la derecha) caía DENTRO de la barra de estado, encima de la hora y la
   batería. Ahora el overlay reserva la zona segura del móvil, así que ninguna
   hoja -- y por tanto ninguna × -- puede meterse ahí. */
.tarot-overlay{position:fixed; inset:0; background:rgba(4,8,6,.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab)); z-index:var(--z-dialogo);}
.tarot-overlay.top{z-index:var(--z-dialogo-top);}
/* FIX QA: los diálogos con promesa (confirmarAccion, pedirContrasena,
   denuncia, invitación a iniciar sesión) se abren desde CUALQUIER pantalla,
   incluidas las hojas creadas al vuelo con .tarot-overlay.top (ficha de una
   pendiente, importar eBird...). Con el mismo z-index que ellas
   decidía el orden del DOM y, como esas hojas se añaden al final del body,
   el diálogo quedaba DETRÁS: "Descartar pendiente" no se veía ni se podía
   pulsar, y la pantalla se quedaba atenuada sin explicación. */
#confirmOverlay, #passOverlay, #denunciaOverlay, #sessionInviteOverlay{ z-index:var(--z-dialogo-modal); }

.tarot-close{position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-size:var(--fs-5); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-1);}
.tarot-close:hover{transform:rotate(90deg);}
.acerca-body{font-size:var(--fs-3); line-height:1.6; color:var(--text);}
.acerca-body p{line-height:var(--lh);margin:0 0 14px;}
.acerca-body strong{line-height:var(--lh);color:var(--gold);}

/* ===== POP-UP DE RECOMPENSA (mini, arriba) ===== */
.reward-toast-stack{position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:1300; display:flex; flex-direction:column; gap:10px; width:min(92vw,380px); pointer-events:none;}
.reward-toast{position:relative; display:flex; align-items:center; gap:10px; width:100%; background:linear-gradient(160deg,var(--panel2),var(--panel)); border:1px solid var(--gold); border-radius:var(--r-lg); padding:10px 36px 10px 12px; box-shadow:var(--sh-3); animation:rewardToastIn var(--dur-3) var(--ease-pop); pointer-events:auto; touch-action:pan-y; transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);}
.reward-toast.closing{animation:rewardToastOut var(--dur-2) var(--ease) forwards;}
.reward-toast.dragging{transition:none; cursor:grabbing;}
.reward-toast-icon{font-size:var(--fs-7); line-height:1; flex:0 0 auto;}
.reward-toast-body{line-height:var(--lh);flex:1 1 auto; min-width:0;}
.reward-toast-title{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0;}
.reward-toast-name{font-family:var(--display); font-size:var(--fs-3); color:var(--text); margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reward-toast-reward{font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reward-toast-actions{display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:0 0 auto;}
.reward-toast-claim{font-family:var(--mono); font-size:var(--fs-1); font-weight:700; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-sm); padding:6px 10px; cursor:pointer; white-space:nowrap;}
.reward-toast-claim:hover{filter:brightness(1.08);}
.reward-toast-close{position:absolute; top:6px; right:6px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-family:inherit; font-size:var(--fs-2); line-height:1; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); cursor:pointer;}
.reward-toast-close:hover{border-color:var(--gold); color:var(--gold);}
@keyframes rewardToastIn{
  0%{opacity:0; transform:translateY(-160%);}
  70%{opacity:1; transform:translateY(8%);}
  100%{opacity:1; transform:translateY(0);}
}
@keyframes rewardToastOut{from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(.35);}}

/* ===== BARRABAS: mascota-guía con bocadillo (abajo a la derecha) ===== */
/* Fondo del tutorial: difumina TODA la pantalla salvo un "hueco" nítido
   sobre el elemento resaltado. En vez de un solo velo (que exigiría elevar
   el elemento anidado por encima con z-index, poco fiable por los contextos
   de apilado), se colocan cuatro paneles difuminados alrededor del elemento
   dejando su rectángulo despejado -- así el elemento se ve nítido sin tener
   que moverlo ni tocar su apilado. El contenedor no pinta nada; los paneles
   sí, y capturan los toques (más un bloqueador transparente sobre el hueco)
   para que el usuario solo pueda avanzar con los botones de Barrabas. */
.barrabas-backdrop{position:fixed; inset:0; z-index:68; pointer-events:none;}
.barrabas-backdrop.closing{animation:barrabasBdOut var(--dur-2) var(--ease) forwards;}
.bb-panel{position:fixed; background:rgba(6,11,9,.34); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); pointer-events:auto; animation:barrabasBdIn var(--dur-2) var(--ease);}
@supports not (backdrop-filter: blur(1px)){ .bb-panel{background:rgba(6,11,9,.62);} }
.bb-hole-block{position:fixed; pointer-events:auto; background:transparent;}
.bb-ring{position:fixed; z-index:1; border-radius:var(--r-lg); pointer-events:none; box-shadow:0 0 0 3px var(--teal), 0 0 0 7px rgba(46,182,164,.3); animation:barrabasPulse 1.6s ease-in-out infinite;}
@keyframes barrabasBdIn{from{opacity:0;} to{opacity:1;}}
@keyframes barrabasBdOut{from{opacity:1;} to{opacity:0;}}
.barrabas-widget{position:fixed; right:16px; bottom:90px; z-index:72; display:flex; align-items:flex-end; gap:6px; max-width:min(92vw,380px); animation:barrabasIn var(--dur-3) var(--ease-pop);}
.barrabas-widget.closing{animation:barrabasOut var(--dur-2) var(--ease) forwards;}
.barrabas-img{width:96px; height:144px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); display:block;}
.barrabas-bubble{position:relative; flex:1 1 auto; min-width:0; background:linear-gradient(160deg,var(--panel2),var(--panel)); border:1px solid var(--gold); border-radius:var(--r-lg); padding:12px 14px; box-shadow:var(--sh-4);}
/* El pico sale por la IZQUIERDA porque en el flex Barrabas va delante del
   bocadillo, o sea a su izquierda: el pico tiene que apuntarle a el, no al
   borde de la pantalla. Y a 38px del suelo (la mitad de los 76px de la
   imagen, que se alinea por abajo) para senalar su cuerpo y no sus patas.
   El color mezcla panel2/panel porque ahi llega el degradado del bocadillo
   en ese punto, asi la union no se nota en ninguno de los 12 fondos. */
.barrabas-bubble::after{content:''; position:absolute; left:-8px; bottom:56px; width:14px; height:14px; background:color-mix(in srgb, var(--panel2) 70%, var(--panel)); border-left:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(45deg); border-radius:0 0 0 3px;}
.barrabas-bubble-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:-2px 0 6px;}
.barrabas-bubble-head span{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.barrabas-bubble-x{width:26px; height:26px; flex:0 0 auto; border-radius:50%; border:none; background:var(--panel2); color:var(--muted); font-size:17px; line-height:1; cursor:pointer;}
.barrabas-bubble-x:hover{color:var(--text);}
.barrabas-bubble-text{font-family:var(--display); font-size:var(--fs-3); line-height:1.4; color:var(--text); margin:0 0 10px;}
.barrabas-bubble-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.barrabas-bubble-next{font-family:var(--mono); font-size:var(--fs-2); font-weight:700; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-sm); padding:7px 14px; cursor:pointer; white-space:nowrap;}
.barrabas-bubble-next:hover{filter:brightness(1.08);}
.barrabas-bubble-skip{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); background:none; border:none; cursor:pointer; padding:7px 4px;}
.barrabas-bubble-skip:hover{color:var(--text);}
@keyframes barrabasIn{0%{opacity:0; transform:translateY(30%) scale(.9);} 100%{opacity:1; transform:translateY(0) scale(1);}}
@keyframes barrabasOut{from{opacity:1; transform:scale(1);} to{opacity:0; transform:translateY(20%) scale(.9);}}
/* Anillo pulsante alrededor del hueco nítido (lo pinta .bb-ring, colocado
   sobre el elemento resaltado). */
@keyframes barrabasPulse{0%,100%{box-shadow:0 0 0 3px var(--teal), 0 0 0 7px rgba(46,182,164,.3);} 50%{box-shadow:0 0 0 3px var(--gold), 0 0 0 10px rgba(214,169,90,.25);}}

/* ===== PUNTO ROJO: recompensas pendientes de reclamar ===== */
.has-reward{position:relative;}
/* ==== HOME PREMIUM: 8. avatar del topbar -- anillo dorado fino en vez del
   punto rojo genérico (más elegante para un avatar de perfil). */
#btnPerfilTop.has-reward{border-color:var(--gold); box-shadow:0 0 0 2px rgba(214,169,90,.35);}
#btnPerfilTop.has-reward::after{display:none;}
.has-reward::after{content:''; position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:99px; background:var(--alert); border:1.5px solid var(--panel); box-shadow:0 0 0 1px rgba(0,0,0,.15);}
#seg button.has-reward::after{top:2px; right:2px;}
#logrosSeg button.has-reward::after{display:none;}
.reward-count{display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; margin-left:5px; border-radius:99px; background:var(--alert); color:#fff; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; line-height:1; vertical-align:middle;}
.extras-lock{position:absolute; right:0; top:0; width:42px; height:42px; border-radius:99px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:var(--fs-3); line-height:1; background:rgba(0,0,0,.35); color:#fff; pointer-events:none;}
.extras-lock-lvl{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; margin-top:1px;}
.identificar-btn.locked{cursor:not-allowed; position:relative;}
.identificar-btn.locked .identificar-label{opacity:.55;}
.acerca-sign{color:var(--muted); font-style:italic; margin-top:18px;}
.kofi-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:linear-gradient(135deg,#FF6433,#FF9466); color:#2b1206; text-decoration:none; font-weight:700; font-size:var(--fs-3); border-radius:var(--r-md); padding:14px; margin:6px 0 18px; box-shadow:0 6px 18px -6px rgba(255,100,51,.55); transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.kofi-btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px -6px rgba(255,100,51,.7);}
.kofi-icon{font-size:var(--fs-5);}
.ajustes-sec{margin-top:28px;}
.ajustes-sec:first-child{margin-top:6px;}
.ajustes-sec-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-6); margin:0 0 6px;}
.ajustes-sec-desc{line-height:var(--lh);color:var(--muted); font-size:var(--fs-2); margin:0 0 12px;}
/* Chips de filtro (Mi colección): estado activo dorado por defecto; en
   Rareza cada botón lleva su propio color via --c/--t inline, para que el
   filtro sea también un vistazo rápido de la paleta de rarezas. */
.filtro-chips{display:flex; flex-wrap:wrap; gap:8px;}
.filtro-chip{display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); font-weight:600; padding:9px 14px; border-radius:99px; cursor:pointer; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); touch-action:manipulation; flex:0 0 auto; white-space:nowrap}
.filtro-chip:active{transform:scale(.94);}
.filtro-chip.on{background:linear-gradient(135deg, color-mix(in srgb, var(--c,var(--gold)) 85%, white 15%), var(--c,var(--gold))); border-color:transparent; color:var(--t,#3A2A0E); box-shadow:0 6px 16px -8px var(--c,rgba(214,169,90,.6));}
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; margin-top:10px;}
.theme-grid.theme-grid-collapsed{display:none;}
.theme-swatch{display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 8px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.theme-swatch:hover{border-color:var(--teal);}
.theme-swatch.active{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.theme-dot{width:32px; height:32px; border-radius:99px; border:1px solid rgba(255,255,255,.15);}
.theme-current{display:flex; align-items:center; gap:10px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.theme-current:hover{border-color:var(--teal);}
.theme-current .theme-dot{width:24px; height:24px; flex:0 0 auto;}
.theme-current .theme-current-label{flex:1; text-align:left;}
.theme-current .acc-chevron{flex:0 0 auto;}
.theme-current.open .acc-chevron{transform:rotate(180deg);}
.theme-mode-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px;}
.theme-mode-label{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.theme-mode-switch{position:relative; flex:0 0 auto; width:64px; height:34px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); cursor:pointer; padding:0 8px; display:flex; align-items:center; justify-content:space-between; touch-action:manipulation;}
.theme-mode-icon{width:16px; height:16px; flex:0 0 auto; color:var(--muted); position:relative; z-index:1;}
.theme-mode-knob{position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:99px; background:var(--gold); box-shadow:var(--sh-2); transition:transform var(--dur-1) var(--ease);}
.theme-mode-switch.on .theme-mode-knob{transform:translateX(30px);}
.theme-mode-switch.on .theme-mode-icon.moon{color:var(--gold);}
.theme-mode-switch:not(.on) .theme-mode-icon.sun{color:var(--gold);}
.ajustes-subsec{line-height:var(--lh);margin-top:16px;}
.ajustes-subsec:first-of-type{line-height:var(--lh);margin-top:0;}
.ajustes-subsec-title{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-2); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px;}
.ajustes-block{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 14px;}
.ajustes-select{flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 12px; color:var(--text); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.simple-switch{position:relative; flex:0 0 auto; width:44px; height:24px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); cursor:pointer; touch-action:manipulation; transition:background var(--dur-1), border-color var(--dur-1);}
.simple-switch .simple-switch-knob{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:99px; background:var(--muted); transition:transform var(--dur-1), background var(--dur-1);}
.simple-switch.on{background:rgba(46,182,164,.22); border-color:var(--teal);}
.simple-switch.on .simple-switch-knob{transform:translateX(20px); background:var(--teal);}
/* ---- Modo editor (solo admin) ---- */
.editor-barra{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bottom-nav-h,60px) + 10px + var(--sab)); z-index:var(--z-aviso); display:flex; align-items:center; gap:10px; padding:8px 10px 8px 13px; border-radius:var(--r-full); background:color-mix(in srgb, var(--gold) 20%, var(--panel)); border:1px solid var(--gold); box-shadow:var(--sh-3); color:var(--text); font-family:var(--mono); font-size:var(--fs-1); pointer-events:auto;}
.editor-barra svg{width:16px; height:16px; color:var(--gold);}
.editor-barra button{min-height:32px; padding:0 11px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel2); color:var(--text); font:inherit; cursor:pointer;}
.ed-btn{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 11px; margin-top:8px; border-radius:var(--r-md); border:1px dashed var(--gold); background:color-mix(in srgb, var(--gold) 10%, transparent); color:var(--gold); font-family:var(--mono); font-size:var(--fs-0); cursor:pointer;}
.ed-btn svg{width:14px; height:14px;}
.ed-edit{margin-top:8px;}
.ed-edit textarea{width:100%; box-sizing:border-box;}
.ed-edit-acciones{display:flex; gap:8px; margin-top:8px;}
.ed-edit-acciones button{min-height:38px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:var(--fs-2); cursor:pointer;}
.ed-edit-acciones .ok{border-color:var(--teal); color:var(--teal);}
.ed-foto{display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-top:1px dashed var(--gold);}
.ed-foto button, .ed-foto select{min-height:34px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel2); color:var(--text); font-family:var(--mono); font-size:var(--fs-0); cursor:pointer;}
.ed-foto .quitar{border-color:var(--err-border); color:var(--err-text);}
.notif-cats-disabled{opacity:.45; pointer-events:none; transition:opacity var(--dur-1);}
#ajustesOverlay .acc-section{margin-bottom:12px;}
#ajustesOverlay .acc-header{font-size:var(--fs-3);}

/* ---- Calendario de rachas ---- */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-nav button{background:var(--panel); border:1px solid var(--line); color:var(--text); font-size:var(--fs-3); padding:6px 14px; border-radius:var(--r-sm); cursor:pointer;}
.cal-nav button:disabled{opacity:.35; cursor:default;}
.cal-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-4); text-transform:capitalize;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:18px;}
.cal-dow{text-align:center; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); padding-bottom:4px;}
.cal-day{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); font-family:var(--mono); font-size:var(--fs-2); background:var(--panel); border:1px solid var(--line); color:var(--muted);}
.cal-day.empty{background:transparent; border:none;}
/* Verde = captura (foto), amarillo = solo observación. */
.cal-day.cap{background:color-mix(in srgb,var(--ok) 30%,var(--panel)); border-color:var(--ok); color:var(--text); font-weight:700;}
.cal-day.obs{background:color-mix(in srgb,var(--warn) 28%,var(--panel)); border-color:var(--warn); color:var(--text); font-weight:700;}
.cal-day[data-caldia]{cursor:pointer; font-family:var(--mono); padding:0;}
.cal-day.sel{outline:2px solid var(--teal); outline-offset:-2px;}
.cal-day.streak{color:var(--text);}
.cal-fire-mark{position:absolute; top:-6px; right:-4px; font-size:var(--fs-2);}
.cal-day.today{box-shadow:0 0 0 2px var(--gold) inset;}
.cal-streaks{display:flex; gap:12px; flex-wrap:wrap;}
.cal-streak-box{flex:1 1 160px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; text-align:center;}
.cal-streak-fire{font-size:var(--fs-7); line-height:1;}
.cal-streak-fire.big{font-size:var(--fs-7);}
.cal-streak-label{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin-top:8px;}
.cal-streak-val{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-5); color:var(--gold); margin-top:2px;}
.cal-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:var(--fs-2); color:var(--muted); margin-bottom:14px;}
.cal-legend span{display:inline-flex; align-items:center; gap:6px;}
.cal-legend i{display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid var(--line);}
.cal-legend i.cap{background:color-mix(in srgb,var(--ok) 30%,var(--panel)); border-color:var(--ok);}
.cal-legend i.obs{background:color-mix(in srgb,var(--warn) 28%,var(--panel)); border-color:var(--warn);}
.cal-legend i.streak{background:var(--panel); border-color:var(--line);}

/* ---- Foto del Mes: la caja de cifra se reutiliza en Sesiones en grupo ---- */
.fm-score-box{text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; margin-bottom:10px;}
.fm-score-val{line-height:var(--lh-tight);font-family:var(--display); font-weight:700; font-size:var(--fs-6); color:var(--gold);}
.fm-score-sub{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:4px;}

/* =====================================================================
   FOTO DEL MES v2 (23/09/2026) — del prototipo www/Claude outputs/
   prototipo-foto-mes. Sigue el tema de la app (claro u oscuro) con sus
   mismos tokens; solo lo que es "foto" se queda sobre negro: las tarjetas
   de votar, el marco de tu foto y el visor a pantalla completa.
   Tres pestañas: Votar (tarjetas), Mi foto y Ganadores (archivo + podio).
   ===================================================================== */
#fotoMesOverlay{
  --fm-faint:color-mix(in srgb, var(--muted) 70%, var(--panel)); --fm-gold:var(--gold); --fm-gold-hi:color-mix(in srgb, var(--gold) 55%, #fff); --fm-gold-deep:color-mix(in srgb, var(--gold) 60%, #000);
  --fm-teal:var(--teal); --fm-silver:#C9CFD4; --fm-bronze:#C3845A;
  --fm-foto-txt:#EEF3EF; --fm-foto-muted:#AEBDB5;
  --fm-ease:cubic-bezier(.2,.7,.2,1); --fm-pop:cubic-bezier(.34,1.56,.64,1);
  color:var(--text);
}
#fotoMesOverlay > .tarot-sheet{position:relative; background:radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--panel2) 70%, var(--bg2)) 0%, var(--bg2) 60%);}
#fotoMesOverlay .pant-cab{background:transparent; border-bottom:0;}
#fotoMesOverlay .tarot-eyebrow{color:var(--fm-gold);}
#fotoMesOverlay .pant-cuerpo{display:flex; flex-direction:column;}
.fm2-reloj{flex:none; text-align:right; font-family:var(--mono); font-size:10px; line-height:1.35; color:var(--muted); letter-spacing:.04em;}
.fm2-reloj b{display:block; font-size:15px; color:var(--text); letter-spacing:0; font-variant-numeric:tabular-nums;}
.fm2{flex:1; display:flex; flex-direction:column; min-height:0;}
.fm2 button{font-family:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.fm2 button:focus-visible{outline:2px solid var(--fm-teal); outline-offset:3px;}
.fm2-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:4px 16px 0; padding:4px; border-radius:14px; background:var(--panel); border:1px solid var(--line);}
.fm2-tab{border:0; background:none; padding:9px 4px; border-radius:10px; font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; transition:background .2s, color .2s;}
.fm2-tab svg{width:15px; height:15px;}
.fm2-tab[aria-selected="true"]{background:var(--panel2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line);}
.fm2-punto{width:7px; height:7px; border-radius:50%; background:var(--fm-gold);}
.fm2-vista{flex:1; padding:14px 16px calc(var(--sab) + 24px); display:flex; flex-direction:column;}
.fm2-carga{flex:1; display:grid; place-items:center; color:var(--muted); font-size:14px; min-height:300px;}

/* ---- votar ---- */
.fm2-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em;}
.fm2-liga{display:inline-flex; align-items:center; gap:6px;}
.fm2-liga i{display:inline-block; width:44px; height:5px; border-radius:9px; background:var(--panel2); overflow:hidden; position:relative;}
.fm2-liga i::after{content:''; position:absolute; inset:0; width:var(--p,0%); background:var(--fm-teal); border-radius:inherit; transition:width .5s var(--fm-ease);}
.fm2-pila{position:relative; height:min(60vh, 540px); height:clamp(320px, calc(100svh - 350px), 540px); margin-bottom:44px;}
.fm2-carta{position:absolute; inset:0; border-radius:24px; overflow:hidden; background:#000; box-shadow:0 26px 50px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:50% 100%; transition:transform .45s var(--fm-ease), opacity .45s var(--fm-ease), filter .45s var(--fm-ease); touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:zoom-in;}
.fm2-carta[data-pos="1"]{transform:translateY(14px) scale(.94); filter:brightness(.55);}
.fm2-carta[data-pos="2"]{transform:translateY(28px) scale(.88); filter:brightness(.35);}
.fm2-carta[data-pos="3"]{transform:translateY(28px) scale(.88); opacity:0;}
.fm2-carta.arrastrando{transition:none;}
.fm2-carta-fondo{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(26px) saturate(1.2) brightness(.6);}
.fm2-carta-foto{position:absolute; left:0; right:0; top:50%; transform:translateY(-58%); width:100%; height:auto; max-height:72%; object-fit:contain; pointer-events:none;}
.fm2-carta-pie{position:absolute; left:0; right:0; bottom:0; padding:60px 18px 18px; background:linear-gradient(180deg, transparent, rgba(4,8,7,.92) 55%); pointer-events:none;}
.fm2-carta-sp{margin:0; font-family:var(--display); font-weight:700; font-size:25px; line-height:1.05; letter-spacing:-.01em; text-wrap:balance; color:#fff;}
.fm2-carta-sci{margin:3px 0 12px; font-family:var(--display); font-style:italic; font-size:14px; color:var(--fm-foto-muted);}
.fm2-autor{display:flex; align-items:center; gap:9px; font-size:13px; color:#dfe7e2; margin:0;}
.fm2-autor small{color:var(--fm-foto-muted);}
.fm2-av{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:700; color:#0B1210; background:var(--c,#8fd3c7); flex:none;}
.fm2-carta-n{position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; padding:5px 10px; border-radius:99px; background:rgba(0,0,0,.5); color:#fff;}
.fm2-sello{position:absolute; top:26px; padding:6px 14px; border-radius:10px; border:2.5px solid; font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; opacity:0; pointer-events:none;}
.fm2-sello-pasar{right:20px; color:#e9eef0; border-color:#e9eef0; transform:rotate(10deg);}
.fm2-sello-puntuar{left:20px; color:var(--fm-gold); border-color:var(--fm-gold); transform:rotate(-10deg);}
.fm2-sello-nota{left:50%; top:40%; transform:translate(-50%,-50%) rotate(-8deg) scale(.6); font-size:30px; color:var(--fm-gold-hi); border-color:var(--fm-gold-hi); background:rgba(11,18,16,.55); padding:10px 20px; transition:all .3s var(--fm-pop);}
.fm2-carta.sale-voto{transform:translate(120%,-30px) rotate(16deg) !important; opacity:0; transition:transform .6s var(--fm-ease) .35s, opacity .5s ease .45s;}
.fm2-carta.sale-voto .fm2-sello-nota{opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1);}
.fm2-carta.sale-paso{transform:translate(-125%,10px) rotate(-14deg) !important; opacity:0;}
.fm2-acciones{display:flex; align-items:center; justify-content:center; gap:14px;}
.fm2-pasar{width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center; flex:none;}
.fm2-pasar svg{width:22px; height:22px; color:var(--muted);}
.fm2-oro{border:0; border-radius:99px; background:linear-gradient(180deg, var(--fm-gold-hi), var(--fm-gold)); color:#1b1406 !important; font-family:var(--display); font-weight:800;
  box-shadow:0 14px 30px -12px rgba(216,174,94,.7), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .15s;}
.fm2-puntuar{flex:1; max-width:250px; height:56px; font-size:18px; display:flex; align-items:center; justify-content:center; gap:10px;}
.fm2-puntuar svg{width:20px; height:20px;}
.fm2-oro:active, .fm2-pasar:active{transform:scale(.95);}
.fm2-oro.medio{padding:13px 22px; font-size:16px;}
.fm2-sec{border:1px solid var(--line); background:var(--panel); padding:12px 20px; border-radius:99px; font-weight:600; font-size:14px;}
.fm2-pista{margin:12px 0 0; text-align:center; font-size:12px; color:var(--fm-faint);}
.fm2-vacio{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 8px 20px; min-height:380px;}
.fm2-vacio > img{width:140px; height:auto; margin-bottom:6px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));}
.fm2-vacio h2{margin:6px 0 6px; font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1; text-wrap:balance;}
.fm2-vacio p{margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.5; max-width:30ch;}
.fm2-polaroids{position:relative; width:190px; height:150px; margin-bottom:14px;}
.fm2-polaroids span{position:absolute; left:50%; top:50%; width:118px; height:92px; margin:-46px 0 0 -59px; border-radius:6px; background:#f2efe6 center/cover; border:6px solid #f2efe6; border-bottom-width:18px; box-shadow:0 14px 26px -12px rgba(0,0,0,.8);}

/* ---- hoja inferior propia (puntuar, publicar) ---- */
.fm2-velo{position:absolute; inset:0; background:rgba(3,6,5,.62); opacity:0; pointer-events:none; transition:opacity .3s; z-index:20;}
.fm2-velo.on{opacity:1; pointer-events:auto;}
.fm2-hoja{position:absolute; left:0; right:0; bottom:0; z-index:21; background:var(--panel); border-radius:26px 26px 0 0; border-top:1px solid var(--line);
  padding:10px 20px calc(var(--sab) + 20px); transform:translateY(105%); transition:transform .38s var(--fm-ease); max-height:92%; overflow-y:auto; max-width:640px; margin:0 auto;}
.fm2-hoja.on{transform:none;}
.fm2-asa{width:40px; height:4px; border-radius:9px; background:var(--line); margin:0 auto 14px;}
.fm2-hcab{display:flex; gap:12px; align-items:center; margin-bottom:16px;}
.fm2-hmini{width:62px; height:46px; border-radius:10px; object-fit:cover; flex:none;}
.fm2-hcab h3{margin:0; font-family:var(--display); font-size:20px; font-weight:700; line-height:1.1;}
.fm2-hcab p{margin:2px 0 0; font-size:12px; color:var(--muted);}
.fm2-hmedia{margin-left:auto; text-align:right; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase;}
.fm2-hmedia b{display:block; font-family:var(--display); font-size:30px; letter-spacing:0; color:var(--fm-gold-hi); line-height:1; font-variant-numeric:tabular-nums;}
.fm2-crit{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; padding:12px 0; border-top:1px solid var(--line);}
.fm2-crit-t{font-weight:700; font-size:15px;}
.fm2-crit-s{grid-column:1; font-size:12px; color:var(--muted);}
.fm2-estrellas{grid-row:1 / span 2; grid-column:2; display:flex; gap:2px;}
.fm2-estrella{border:0; background:none; padding:4px; width:38px; height:38px; display:grid; place-items:center;}
.fm2-estrella svg{width:28px; height:28px; fill:transparent; stroke:color-mix(in srgb, var(--muted) 70%, var(--line)); stroke-width:1.6; transition:fill .15s, stroke .15s, transform .2s var(--fm-pop);}
.fm2-estrella.on svg{fill:var(--fm-gold); stroke:var(--fm-gold);}
.fm2-estrella.pop svg{transform:scale(1.25);}
.fm2-enviar{width:100%; margin-top:14px; height:54px; border-radius:16px; font-size:18px;}
.fm2-enviar:disabled{opacity:.35; filter:grayscale(.6); cursor:not-allowed;}
.fm2-hnota{margin:10px 0 0; text-align:center; font-size:12px; color:var(--fm-faint); line-height:1.45;}
.fm2-pub-foto{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:16px; margin-bottom:12px;}
.fm2-pub-txt{margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--muted);}
.fm2-pub-txt b{color:var(--text);}
.fm2-pub-aviso{margin:0 0 12px; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.4; background:var(--err-bg); border:1px solid var(--err-border); color:var(--err-text);}
.fm2-pub-btns{display:flex; flex-direction:column; gap:10px;}
.fm2-pub-btns .fm2-oro{height:52px; font-size:17px; width:100%;}
.fm2-pub-btns .fm2-sec{width:100%;}

/* ---- mi foto ---- */
.fm2-mia{display:flex; flex-direction:column; gap:14px;}
.fm2-marco{position:relative; border-radius:22px; overflow:hidden; background:#000; box-shadow:0 20px 40px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); border:0; padding:0; width:100%; cursor:zoom-in;}
.fm2-marco img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;}
.fm2-chip{position:absolute; top:12px; display:flex; align-items:baseline; gap:6px; padding:7px 12px; border-radius:99px; background:rgba(0,0,0,.55); font-family:var(--mono); font-size:11px; color:#e8ede9;}
.fm2-chip b{font-family:var(--display); font-size:18px; color:var(--fm-gold-hi);}
.fm2-chip.izq{left:12px;} .fm2-chip.der{right:12px; color:var(--fm-gold-hi);}
.fm2-datos{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:16px; border-radius:20px; background:var(--panel); border:1px solid var(--line);}
.fm2-anillo{--v:0; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--fm-gold) calc(var(--v) * 1%), var(--panel2) 0);}
.fm2-anillo > div{width:74px; height:74px; border-radius:50%; background:var(--panel); display:grid; place-items:center; text-align:center;}
.fm2-anillo b{font-family:var(--display); font-size:26px; line-height:1; font-variant-numeric:tabular-nums;}
.fm2-anillo small{display:block; font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.1em;}
.fm2-barras{display:flex; flex-direction:column; gap:9px;}
.fm2-barra{display:grid; grid-template-columns:86px 1fr 28px; gap:8px; align-items:center; font-size:12px; color:var(--muted);}
.fm2-barra i{height:6px; border-radius:9px; background:var(--panel2); overflow:hidden; position:relative;}
.fm2-barra i::after{content:''; position:absolute; inset:0; width:var(--p); background:var(--fm-teal); border-radius:inherit;}
.fm2-barra b{font-family:var(--mono); font-size:12px; color:var(--text); text-align:right; font-variant-numeric:tabular-nums;}
.fm2-votos{grid-column:1 / -1; font-family:var(--mono); font-size:11px; color:var(--fm-faint); letter-spacing:.04em; margin:-4px 0 0;}
.fm2-caja{border-radius:20px; background:var(--panel); border:1px solid var(--line); padding:14px 16px;}
.fm2-caja h4{margin:0 0 10px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fm-gold);}
.fm2-premio{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);}
.fm2-premio:first-of-type{border-top:0;}
.fm2-medalla{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:11px; color:#16120a; background:var(--mc); flex:none;}
.fm2-premio > span:not(.fm2-medalla){flex:1; min-width:0;}
.fm2-premio b{font-family:var(--mono); font-size:12px; color:var(--text); font-weight:600; white-space:nowrap;}
.fm2-insignias{display:flex; gap:8px; flex-wrap:wrap;}
.fm2-insignia{display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 6px; border-radius:99px; background:color-mix(in srgb, var(--mc) 16%, var(--panel)); border:1px solid color-mix(in srgb, var(--mc) 40%, var(--line)); font-size:12px;}
.fm2-mia-vacia{border-radius:22px; border:1.5px dashed var(--line); padding:34px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;}
.fm2-mia-vacia h3{margin:0; font-family:var(--display); font-size:22px;}
.fm2-mia-vacia p{margin:0; color:var(--muted); font-size:14px; max-width:30ch; line-height:1.5;}

/* ---- ganadores ---- */
.fm2-arch{display:flex; flex-direction:column; gap:10px;}
.fm2-arch-item{display:grid; grid-template-columns:104px 1fr auto; gap:12px; align-items:center; text-align:left; padding:10px; border-radius:18px; border:1px solid var(--line); background:var(--panel); width:100%;}
.fm2-arch-fotos{position:relative; height:70px;}
.fm2-arch-fotos img{position:absolute; top:6px; width:54px; height:54px; border-radius:10px; object-fit:cover; border:2px solid var(--panel);}
.fm2-arch-fotos img:nth-child(1){left:0; transform:rotate(-7deg);}
.fm2-arch-fotos img:nth-child(3){left:46px; transform:rotate(7deg);}
.fm2-arch-fotos img:nth-child(2){left:22px; top:0; width:60px; height:60px; z-index:1; border-color:var(--fm-gold);}
.fm2-arch-t{min-width:0;}
.fm2-arch-mes{margin:0; font-family:var(--display); font-weight:700; font-size:19px; line-height:1.1;}
.fm2-arch-gan{margin:3px 0 0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fm2-arch-tu{display:inline-block; margin-top:6px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:3px 8px; border-radius:99px; color:#16120a; background:var(--mc,var(--fm-gold));}
.fm2-arch-item > svg{width:18px; height:18px; color:var(--fm-faint);}
.fm2-nota{margin:6px 2px 0; font-size:12px; color:var(--fm-faint); line-height:1.5;}

/* ---- el podio ---- */
.fm2-podio{position:absolute; inset:0; z-index:40; background:var(--bg2); overflow-y:auto; overflow-x:hidden;}
.fm2-luz{position:absolute; top:-80px; width:240px; height:720px; pointer-events:none; opacity:0; transition:opacity 1.2s ease; background:linear-gradient(180deg, rgba(243,212,141,.28), rgba(243,212,141,0) 80%); filter:blur(18px);}
.fm2-luz.l1{left:-60px; transform:rotate(-24deg); transform-origin:top center;}
.fm2-luz.l2{right:-60px; transform:rotate(24deg); transform-origin:top center;}
.fm2-podio.f5 .fm2-luz{opacity:1;}
.fm2-pd{position:relative; min-height:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column; align-items:center; padding:calc(var(--sat) + 22px) 16px calc(var(--sab) + 28px);}
.fm2-saltar{position:absolute; top:calc(var(--sat) + 16px); right:16px; z-index:3; border:1px solid var(--line); background:var(--panel); padding:7px 13px; border-radius:99px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted);}
.fm2-pd-eye{margin:26px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--fm-gold); opacity:0; transform:translateY(8px); transition:all .7s var(--fm-ease);}
.fm2-pd-mes{margin:4px 0 0; font-family:var(--display); font-weight:800; font-size:clamp(46px,15vw,64px); letter-spacing:-.03em; line-height:.95; text-transform:capitalize;
  background:linear-gradient(180deg, var(--fm-gold-hi) 15%, var(--fm-gold) 65%, var(--fm-gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(14px) scale(.96); transition:all .9s var(--fm-ease) .15s;}
.fm2-pd-sub{margin:8px 0 0; font-size:14px; color:var(--muted); opacity:0; transition:opacity .8s ease .5s;}
.fm2-podio.f1 .fm2-pd-eye, .fm2-podio.f1 .fm2-pd-mes{opacity:1; transform:none;}
.fm2-podio.f1 .fm2-pd-sub{opacity:1;}
.fm2-escena{position:relative; width:100%; display:grid; grid-template-columns:1fr 1.18fr 1fr; align-items:end; gap:8px; margin-top:26px;}
.fm2-col{display:flex; flex-direction:column; align-items:center; min-width:0;}
.fm2-pfoto{position:relative; width:100%; border:0; padding:0; background:none; opacity:0; transform:translateY(-60px) scale(.8) rotate(var(--r,0deg));}
.fm2-pfoto img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; border:3px solid var(--mc); box-shadow:0 18px 30px -14px rgba(0,0,0,.55); display:block;}
.fm2-c1 .fm2-pfoto img{border-radius:18px; box-shadow:0 0 0 1px rgba(243,212,141,.4), 0 0 60px -10px rgba(243,212,141,.55), 0 24px 40px -16px rgba(0,0,0,.55);}
.fm2-corona{position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:38px; height:28px; color:var(--fm-gold-hi); filter:drop-shadow(0 4px 10px rgba(243,212,141,.6));}
.fm2-pnombre{margin:10px 0 0; font-family:var(--display); font-weight:700; font-size:15px; line-height:1.1; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0;}
.fm2-c1 .fm2-pnombre{font-size:18px;}
.fm2-pnota{margin:2px 0 0; font-family:var(--mono); font-size:11px; color:var(--muted); opacity:0; display:flex; align-items:center; gap:4px;}
.fm2-pnota svg{width:11px; height:11px; fill:var(--fm-gold);}
.fm2-escalon{width:100%; margin-top:10px; border-radius:12px 12px 4px 4px; display:grid; place-items:start center; padding-top:10px; font-family:var(--display); font-weight:800; font-size:30px; color:rgba(0,0,0,.35);
  background:linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 55%, #000)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45); transform:scaleY(0); transform-origin:bottom; transition:transform .7s var(--fm-ease);}
.fm2-c1 .fm2-escalon{height:118px; transition-delay:.1s;} .fm2-c2 .fm2-escalon{height:86px;} .fm2-c3 .fm2-escalon{height:62px; transition-delay:.2s;}
.fm2-podio.f2 .fm2-escalon{transform:none;}
.fm2-col.ya .fm2-pfoto{opacity:1; transform:rotate(var(--r,0deg)); transition:transform .8s var(--fm-pop), opacity .35s ease;}
.fm2-col.ya .fm2-pnombre, .fm2-col.ya .fm2-pnota{opacity:1; transition:opacity .5s ease .45s;}
.fm2-c2{--r:-3deg;} .fm2-c3{--r:3deg;}
.fm2-c1.ya .fm2-pfoto{animation:fm2Brillo 2.6s ease-in-out 1s infinite;}
@keyframes fm2Brillo{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.12);}}
.fm2-resto{width:100%; margin-top:18px; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(12px); transition:all .6s var(--fm-ease);}
.fm2-podio.f6 .fm2-resto{opacity:1; transform:none;}
.fm2-fila{display:grid; grid-template-columns:34px 44px 1fr auto; gap:10px; align-items:center; padding:8px 12px 8px 8px; border-radius:14px; background:var(--panel); border:1px solid var(--line); text-align:left; width:100%;}
.fm2-fila .n{font-family:var(--display); font-weight:800; font-size:17px; color:var(--muted); text-align:center;}
.fm2-fila img{width:44px; height:44px; border-radius:9px; object-fit:cover;}
.fm2-fila > span:not(.n){font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fm2-fila small{display:block; font-weight:400; font-size:11px; color:var(--fm-faint);}
.fm2-fila b{font-family:var(--mono); font-size:12px; color:var(--muted);}
.fm2-tu{width:100%; margin-top:16px; padding:16px; border-radius:20px; text-align:center; opacity:0; transform:translateY(12px); transition:all .6s var(--fm-ease) .25s;
  background:radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--mc) 26%, var(--panel2)), var(--panel)); border:1px solid color-mix(in srgb, var(--mc) 55%, var(--line));}
.fm2-podio.f6 .fm2-tu{opacity:1; transform:none;}
.fm2-tu h3{margin:0; font-family:var(--display); font-weight:800; font-size:24px;}
.fm2-tu p{margin:4px 0 12px; color:var(--muted); font-size:13px;}
.fm2-botin{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.fm2-botin span{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--line); font-family:var(--mono); font-size:12px; font-weight:600;}
.fm2-hecho{display:inline-flex; align-items:center; gap:8px; color:var(--fm-teal); font-weight:700;}
.fm2-fin{margin-top:18px; display:flex; gap:10px; opacity:0; transition:opacity .6s ease .4s;}
.fm2-podio.f6 .fm2-fin{opacity:1;}
.fm2-confeti{position:absolute; inset:0; pointer-events:none; z-index:2;}
.fm2-redoble{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--fm-gold); opacity:0; transition:opacity .3s; white-space:nowrap;}
.fm2-podio.f4 .fm2-redoble{opacity:1;} .fm2-podio.f5 .fm2-redoble{opacity:0;}

/* ---- visor ---- */
.fm2-visor{position:absolute; inset:0; z-index:60; background:#050807; color:var(--fm-foto-txt); display:flex; flex-direction:column; justify-content:center; padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); opacity:0; pointer-events:none; transition:opacity .25s;}
.fm2-visor.on{opacity:1; pointer-events:auto;}
.fm2-visor img{width:100%; max-height:70vh; object-fit:contain; border-radius:14px;}
.fm2-visor h3{margin:14px 0 2px; font-family:var(--display); font-size:22px;}
.fm2-visor p{margin:0; color:var(--fm-foto-muted); font-size:13px;}
.fm2-visor-x{position:absolute; top:calc(var(--sat) + 14px); right:14px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--fm-foto-txt); font-size:22px; line-height:1;}
.fm2-flota{position:absolute; z-index:30; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--fm-teal); pointer-events:none; animation:fm2Flota 1.2s var(--fm-ease) forwards;}
@keyframes fm2Flota{from{opacity:0; transform:translateY(8px);} 20%{opacity:1;} to{opacity:0; transform:translateY(-40px);}}
@media (prefers-reduced-motion: reduce){
  #fotoMesOverlay *, #fotoMesOverlay *::before, #fotoMesOverlay *::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important;}
}
html[data-motion="reducido"] #fotoMesOverlay *, html.perf-bajo #fotoMesOverlay .fm2-c1 .fm2-pfoto{animation:none !important;}

/* ---- Tamaño de texto ---- */
html[data-text="grande"] .common{font-size:var(--fs-4);}
html[data-text="grande"] .sci{font-size:var(--fs-3);}
html[data-text="grande"] .row{padding:12px 6px;}
html[data-text="grande"] .ajustes-sec-desc, html[data-text="grande"] .muted, html[data-text="grande"] .note, html[data-text="grande"] .bartxt{font-size:var(--fs-3);}

/* ---- Densidad de la lista ---- */
html[data-densidad="compacta"] .row{padding:5px 6px; gap:8px;}
html[data-densidad="compacta"] .ref{width:36px; height:36px; border-radius:var(--r-sm);}
html[data-densidad="compacta"] .common{font-size:var(--fs-3);}
html[data-densidad="compacta"] .sci{font-size:var(--fs-1);}

/* ---- Modo de rendimiento (PERF fase 4) ----
   html.perf-bajo lo pone setPerfBajo(): a mano desde Ajustes > Accesibilidad,
   o solo (ajuste "auto") si navigator.hardwareConcurrency<=4,
   navigator.deviceMemory<=4 o el sistema pide prefers-reduced-motion.
   Cada backdrop-filter obliga al compositor a crear una capa y a
   recalcular el desenfoque de lo que hay detrás en CADA frame (56 en el
   CSS; en Chrome/Windows y en el WebView de Android es de lo más caro que
   hay); aquí se anulan todos de golpe y, en los que están siempre en
   pantalla, se sustituye el fondo translúcido por su equivalente sólido
   (el mismo que ya usaba el @supports not (backdrop-filter) de .head).
   Las animaciones `infinite` (66) pasan a una sola iteración: se ven
   arrancar y se paran, en vez de seguir consumiendo GPU indefinidamente;
   las de entrada (una iteración) no cambian. */
html.perf-bajo *,html.perf-bajo *::before,html.perf-bajo *::after{animation-iteration-count:1 !important;}
/* Desde el 24/09/2026 los desenfoques se quitan con html.sin-blur, que está
   puesto SIEMPRE que lo está perf-bajo y además en cualquier pantalla táctil
   (ver aplicarSinBlur() y el bloque SIN DESENFOQUES al final de
   js/app-tras-leaflet.css). Por eso estas reglas de fondo sólido pasan de
   html.perf-bajo a html.sin-blur: perf-bajo sigue teniéndolas igual. */
html.sin-blur *,html.sin-blur *::before,html.sin-blur *::after{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
html.sin-blur body.home-active .head{background:var(--panel);}
html.sin-blur .sd-miniheader{background:var(--bg1);}
html.sin-blur .cv2-floatpill{background:var(--panel);}
html.sin-blur .home-card.primary .home-icon{filter:none;}

/* ---- Animaciones reducidas ---- */
html[data-motion="reducido"] *,
html[data-motion="reducido"] *::before,
html[data-motion="reducido"] *::after{
  transition-duration:0s !important; animation-duration:0s !important; animation-delay:0s !important; scroll-behavior:auto !important;
}
/* Mismo apagado, pero cuando es el SISTEMA operativo el que pide menos
   movimiento (aunque el usuario no haya tocado el ajuste de la app). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0s !important; animation-duration:0s !important; animation-delay:0s !important; scroll-behavior:auto !important;
  }
}

/* ---- Alto contraste ---- */
html[data-contraste="1"]{
  --ink:#000000; --panel:#000000; --panel2:#0c0c0c; --line:#FFFFFF; --text:#FFFFFF; --muted:#CFCFCF;
  --teal:#00E6C3; --teal-deep:#00B89A; --gold:#FFD400; --bg1:#000000; --bg2:#000000;
}
html[data-contraste="1"] body{background:#000;}
html[data-contraste="1"] .row{border-bottom:1px solid var(--line);}
html[data-contraste="1"] .ref,html[data-contraste="1"] .theme-swatch,html[data-contraste="1"] .seg,html[data-contraste="1"] .search{border-width:2px;}
.tarot-eyebrow{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin:0 0 4px; text-align:center;}
.tarot-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-6); text-align:center; margin:0 0 4px; letter-spacing:-.01em;}
.tarot-sub{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); text-align:center; margin:0 0 22px; line-height:1.5;}
.tarot-timer{font-family:var(--mono); font-size:var(--fs-1); color:var(--teal); background:rgba(46,182,164,.1); border:1px solid rgba(46,182,164,.25); border-radius:var(--r-sm); padding:6px 12px; text-align:center; margin-bottom:18px;}
.tarot-active-banner{background:linear-gradient(90deg,rgba(46,182,164,.12),rgba(214,169,90,.12)); border:1px solid rgba(214,169,90,.3); border-radius:var(--r-md); padding:14px 16px; margin-bottom:18px; text-align:center;}
.tarot-active-xp{font-family:var(--mono); font-size:var(--fs-2); color:var(--gold); line-height:1.5;}
/* ---------- panel de "subes de nivel" (celebración + reclamar) ---------- */
.levelup-sheet{text-align:center; overflow:visible;}
.levelup-burst{position:relative; height:0;}
.levelup-burst span{position:absolute; top:-6px; font-size:var(--fs-3); opacity:0; animation:levelupSparkle 1.8s ease-in-out infinite;}
.levelup-burst span:nth-child(1){left:18%; animation-delay:.1s;}
.levelup-burst span:nth-child(2){left:38%; animation-delay:.5s;}
.levelup-burst span:nth-child(3){left:62%; animation-delay:.0s;}
.levelup-burst span:nth-child(4){left:82%; animation-delay:.7s;}
.levelup-burst span:nth-child(5){left:50%; animation-delay:.3s;}
.levelup-rango{display:flex; justify-content:center; margin:6px 0 2px; animation:levelupFloat 2.6s ease-in-out infinite;}
.levelup-num{font-family:var(--display); font-weight:800; font-size:var(--fs-7); line-height:1; margin:2px 0 0; color:var(--gold); text-shadow:0 0 26px rgba(214,169,90,.5); animation:levelupPop .55s var(--ease-pop);}
.levelup-rank-name{line-height:var(--lh-tight);font-family:var(--display); font-size:var(--fs-4); color:var(--text); margin:2px 0 16px;}
.levelup-multi{font-family:var(--mono); font-size:var(--fs-2); color:var(--teal); margin:0 0 8px;}
.levelup-claim-btn{width:100%; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-md); padding:15px; font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer;}
.levelup-claim-btn:hover{filter:brightness(1.07);}
/* ---------- PREGUNTAR A BARRABÁS (23/09/2026) ---------- */
/* Barrabás duda: candidatas con porcentaje */
.akin-cands{display:flex; flex-direction:column; gap:8px; margin:0 0 8px;}
.akin-cand{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); color:var(--text); text-align:left; cursor:pointer;}
.akin-cand:active{transform:scale(.99);}
.akin-cand-foto{flex:0 0 auto; width:52px; height:52px; border-radius:12px; overflow:hidden;}
.akin-cand-foto .ref{border-radius:12px;}
.akin-cand-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.akin-cand-tx b{font-family:var(--display); font-weight:700; font-size:var(--fs-3); line-height:1.15;}
.akin-cand-tx span{font-size:var(--fs-1); line-height:1.35; color:var(--muted);}
.akin-cand-pct{flex:0 0 58px; display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.akin-cand-pct b{font-family:var(--mono); font-size:var(--fs-3); color:var(--text);}
.akin-cand-barra{display:block; width:100%; height:5px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.akin-cand-barra i{display:block; height:100%; background:var(--teal); border-radius:inherit;}
.akin-cand:first-child{border-color:color-mix(in srgb,var(--teal) 55%,var(--line));}
.akin-resto{margin:0 4px 10px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); text-align:right;}
.akin-porque{margin:0 0 10px; padding:12px 14px; border-radius:var(--r-lg); background:var(--panel2); font-size:var(--fs-1); line-height:1.5; color:var(--text);}
.akin-porque p{margin:0 0 6px;} .akin-porque p:last-child{margin-bottom:0;}
.akin-porque-t{font-family:var(--mono); font-size:var(--fs-0) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 6px !important;}
.akin-mirar ul{margin:0; padding-left:18px;} .akin-mirar li{margin:2px 0;}
.akin-decide{margin:0 0 10px; padding:12px 14px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb,var(--teal) 40%,var(--line)); background:var(--panel);}
.akin-decide-q{margin:0 0 8px; font-family:var(--display); font-weight:700; font-size:var(--fs-3); line-height:1.3; color:var(--text);}
.akin-decide .akin-opt{padding:10px 4px; font-size:var(--fs-2);}
.akin-hoja{max-width:440px;}
.akin-hoja .akin-eyebrow{margin-bottom:10px;}
.akin-escena{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 14px; padding:16px 14px 8px; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(120% 75% at 50% 112%, color-mix(in srgb,var(--teal) 24%,var(--panel2)) 0%, var(--panel2) 55%, color-mix(in srgb,var(--panel) 70%,var(--panel2)) 100%);}
/* la sombra en el suelo, bajo las patas */
.akin-escena::after{content:''; position:absolute; left:50%; bottom:10px; width:120px; height:14px; margin-left:-60px; border-radius:50%; background:rgba(0,0,0,.14); filter:blur(3px); z-index:0;}
.akin-barrabas{position:relative; z-index:1; display:block; height:clamp(140px, 23vh, 190px); width:auto; aspect-ratio:2/3; object-fit:contain;}
.akin-barrabas.cambia{animation:akinPose var(--dur-3) var(--ease-pop) both;}
@keyframes akinPose{from{transform:translateY(8px) scale(.95); opacity:.4;} to{transform:none; opacity:1;}}
.akin-bocadillo{position:relative; z-index:2; width:100%; background:linear-gradient(160deg,var(--panel2),var(--panel)); color:var(--text); border:1px solid var(--gold); border-radius:var(--r-lg); padding:12px 16px 13px; box-shadow:var(--sh-2); text-align:center;}
.akin-bocadillo::after{content:''; position:absolute; left:50%; bottom:-8px; width:14px; height:14px; margin-left:-7px; background:var(--panel); border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(45deg);}
.akin-bocadillo .akin-question-txt{margin:0;}
.akin-intro{display:block; font-size:var(--fs-1); color:var(--muted); margin:0 0 4px;}
.akin-frase{margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-4); line-height:var(--lh-tight);}
/* compacta: Barrabás a la izquierda y el bocadillo a su lado (resultado, elegir pregunta) */
.akin-escena.compacta{flex-direction:row-reverse; align-items:flex-end; gap:6px; padding:12px 12px 6px;}
.akin-escena.compacta .akin-barrabas{height:118px; flex:0 0 auto;}
.akin-escena.compacta .akin-bocadillo{align-self:center; text-align:left; width:auto; flex:1 1 auto;}
.akin-escena.compacta .akin-bocadillo::after{left:-8px; top:50%; bottom:auto; margin:-7px 0 0; border-right:0; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold);}
.akin-escena.compacta::after{left:52px; width:70px; margin-left:-35px; bottom:8px;}
.akin-escena.compacta .akin-frase{font-size:var(--fs-3);}
.akin-hoja .akin-question-card{padding:14px 14px 16px;}
@media (prefers-reduced-motion: reduce){ .akin-barrabas.cambia{animation:none;} }
html[data-motion="reducido"] .akin-barrabas.cambia, html.perf-bajo .akin-barrabas.cambia{animation:none;}
/* En el inicio, el botón lleva la cara de Barrabás y puede partirse en dos líneas. */
#homeRegAkin{white-space:normal; line-height:1.1; text-align:left;}
#homeRegAkin .ic-barrabas{overflow:hidden; padding:0;}
#homeRegAkin .ic-barrabas img{width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:scale(1.7); transform-origin:50% 8%;}
/* ---------- NIVEL Y RANGOS: el sendero (23/09/2026) ---------- */
#nivelBody{position:relative; max-width:560px; margin:0 auto;}
.nv-hero{display:flex; gap:14px; align-items:center; padding:14px; border-radius:var(--r-xl); background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-2);}
.nv-hero-med{flex:0 0 auto; width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--teal) 16%,var(--panel)), color-mix(in srgb,var(--teal) 6%,var(--panel2)));
  box-shadow:inset 0 0 0 3px var(--teal), 0 8px 18px -10px color-mix(in srgb,var(--teal) 70%,transparent);}
.nv-hero-med img{width:64px; height:80px; object-fit:contain; margin-top:-6px;}
.nv-hero-tx{flex:1; min-width:0;}
.nv-k{margin:0; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.nv-hero-tx h3{margin:1px 0 0; font-family:var(--display); font-weight:700; font-size:var(--fs-5); line-height:1.1; color:var(--text);}
.nv-hero-nv{margin:2px 0 8px; font-size:var(--fs-1); color:var(--muted);}
.nv-barra{height:8px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.nv-barra i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),color-mix(in srgb,var(--teal) 70%,var(--gold)));}
.nv-barra-t{margin:5px 0 0; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.nv-proximo{display:flex; align-items:center; gap:10px; width:100%; margin:10px 0 14px; padding:0 2px; border:0; background:none; text-align:left; font-size:var(--fs-1); color:var(--muted); cursor:pointer;}
.nv-proximo img{width:30px; height:42px; object-fit:contain; filter:grayscale(1) opacity(.55);}
.nv-proximo b{color:var(--text); font-weight:650;}
.nv-silueta{filter:brightness(0) opacity(.22);}
html:not([data-bg^="claro"]) .nv-silueta{filter:brightness(0) invert(1) opacity(.18);}
.nv-sendero{position:relative;}
.nv-sendero svg{position:absolute; inset:0; overflow:visible; pointer-events:none;}
.nv-sendero path{fill:none; stroke-width:5; stroke-linecap:round;}
.nv-sendero path.hecho{stroke:var(--teal);}
.nv-sendero path.pend{stroke:color-mix(in srgb,var(--muted) 45%,var(--line)); stroke-dasharray:1 10;}
.nv-nodo{position:absolute; transform:translate(-50%,-50%); border:0; padding:0; background:none;}
.nv-paso{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600;
  background:var(--panel); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--muted) 55%,var(--line)); color:var(--muted);}
.nv-paso.hecho{background:var(--teal); box-shadow:none; color:var(--on-teal);}
.nv-paso.actual{width:38px; height:38px; font-size:13px; background:var(--panel); color:var(--teal); box-shadow:inset 0 0 0 3px var(--teal); animation:nvLatido 2.4s ease-out infinite;}
@keyframes nvLatido{0%,100%{box-shadow:inset 0 0 0 3px var(--teal), 0 0 0 0 color-mix(in srgb,var(--teal) 45%,transparent);} 60%{box-shadow:inset 0 0 0 3px var(--teal), 0 0 0 9px transparent;}}
.nv-rango{width:88px; height:88px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:radial-gradient(circle at 50% 38%, var(--panel), var(--panel2)); box-shadow:inset 0 0 0 3px var(--line), var(--sh-2);}
.nv-rango img{width:62px; height:80px; object-fit:contain; margin-top:-8px; pointer-events:none;}
.nv-rango.hecho{box-shadow:inset 0 0 0 3px var(--teal), 0 10px 22px -12px color-mix(in srgb,var(--teal) 80%,transparent);}
.nv-rango.actual{width:104px; height:104px; box-shadow:inset 0 0 0 4px var(--gold), 0 0 0 6px color-mix(in srgb,var(--gold) 20%,transparent), 0 14px 28px -14px color-mix(in srgb,var(--gold) 80%,transparent);}
.nv-rango.actual img{width:74px; height:96px;}
.nv-rango:focus-visible{outline:3px solid var(--text); outline-offset:3px;}
.nv-et{position:absolute; transform:translateY(-50%); white-space:nowrap; pointer-events:none;}
.nv-et b{display:block; font-family:var(--display); font-size:var(--fs-3); line-height:1.1; color:var(--text);}
.nv-et span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.nv-et.bloq b{color:var(--muted);}
.nv-tu{position:absolute; transform:translate(-50%,-100%); margin-top:-26px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--on-teal);
  background:var(--teal); padding:3px 8px; border-radius:var(--r-full); pointer-events:none;}
.nv-tu::after{content:''; position:absolute; left:50%; bottom:-4px; margin-left:-4px; border:4px solid transparent; border-bottom:0; border-top-color:var(--teal);}
.nv-cima{position:absolute; left:50%; top:10px; transform:translateX(-50%); font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.nv-nota{margin:18px 4px 0; font-size:var(--fs-1); line-height:1.5; color:var(--muted); text-align:center;}
/* Ficha de un rango, al tocarlo */
.nv-ficha-fondo{position:fixed; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center; background:color-mix(in srgb,var(--ink) 55%,transparent);}
.nv-ficha{width:100%; max-width:520px; padding:22px 22px calc(24px + var(--sab)); border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--panel); text-align:center; box-shadow:var(--sh-5); animation:hojaSube var(--dur-2) var(--ease);}
.nv-ficha img{width:110px; height:150px; object-fit:contain;}
.nv-ficha-est{margin:0 0 4px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}
.nv-ficha h4{margin:0 0 6px; font-family:var(--display); font-size:var(--fs-6); color:var(--text);}
.nv-ficha-d{margin:0 auto; max-width:32ch; font-size:var(--fs-2); line-height:1.5; color:var(--muted);}
.nv-ficha-falta{display:inline-block; margin:14px auto 0; font-size:var(--fs-1); padding:8px 12px; border-radius:var(--r-md); background:var(--panel2); color:var(--text);}
.nv-ficha-ok{display:block; width:100%; margin-top:18px; height:48px; border:0; border-radius:var(--r-md); background:var(--teal); color:var(--on-teal); font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer;}
@media (prefers-reduced-motion: reduce){ .nv-paso.actual, .nv-ficha{animation:none;} }
html[data-motion="reducido"] .nv-paso.actual, html.perf-bajo .nv-paso.actual{animation:none;}
/* Celebración de rango nuevo */
.levelup-ave{width:120px; height:160px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.25));}
.levelup-desc{margin:0 auto 16px; max-width:30ch; font-size:var(--fs-2); line-height:1.5; color:var(--muted);}
.levelup-ver{width:100%; margin-top:8px; background:none; border:1px solid var(--line); color:var(--text); border-radius:var(--r-md); padding:13px; font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer;}

@keyframes levelupPop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12); opacity:1;} 100%{transform:scale(1); opacity:1;}}
@keyframes levelupFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
@keyframes levelupSparkle{0%,100%{opacity:0; transform:scale(.5) translateY(0);} 50%{opacity:1; transform:scale(1.15) translateY(-10px);}}
.nivel-reclamar-btn{display:inline-flex; align-items:center; gap:5px; background:var(--teal); color:var(--on-teal); border:none; border-radius:99px; padding:5px 11px; margin-left:8px; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer; vertical-align:middle;}
.nivel-reclamar-btn:hover{filter:brightness(1.07);}
.nivel-reclamar-btn svg{width:1em; height:1em; vertical-align:-0.125em;}
/* 21/09/2026: la medalla es lo primero que se mira al abrir un logro, así que
   manda de verdad -- antes eran 96 px perdidos arriba del todo. Centrada con
   flex (no con text-align, que dependía de que nadie tocara el contenedor) y
   con un tamaño que se adapta a la pantalla sin pasarse en las grandes. */
.logro-det-icon{display:flex; align-items:center; justify-content:center; margin:2px 0 14px;}
.logro-det-medal{ display:inline-flex; width:clamp(124px, 42vw, 164px); height:clamp(124px, 42vw, 164px);
  aspect-ratio:auto; padding:0; background:none; border:0; box-shadow:none; cursor:default;
  animation:none; pointer-events:none; }
.logro-det-medal .ach-tile-ico{ width:100%; height:100%; }
.logro-det-faltan{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin:2px 0 6px;}
.logro-det-prog{font-family:var(--mono); font-size:var(--fs-2); color:var(--teal); text-align:center; margin:14px 0 4px;}
.logro-det-reward{font-family:var(--mono); font-size:var(--fs-2); color:var(--gold); text-align:center; margin:4px 0;}
.logro-det-estado{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); text-align:center; margin:4px 0;}
.onb-note{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin:10px 0 0; font-style:italic;}
.tarot-hover-hint{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin-bottom:18px;}
.tarot-btn-primary{width:100%; background:var(--teal); color:var(--on-teal); border:none; border-radius:var(--r-lg); padding:12px; font-weight:600; font-size:var(--fs-3); cursor:pointer; font-family:inherit; box-shadow:0 10px 22px -12px rgba(46,182,164,.55); transition:box-shadow var(--dur-1), transform var(--dur-1);}
.tarot-btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px);}
.tarot-btn-primary[disabled]{opacity:.5; cursor:default;}
.tarot-btn-sec{width:100%; background:transparent; border:1px solid var(--line); color:var(--text); border-radius:var(--r-lg); padding:11px; font-size:var(--fs-3); cursor:pointer; font-family:var(--mono); transition:border-color var(--dur-1), color var(--dur-1);}
.tarot-btn-sec:hover{border-color:var(--gold); color:var(--gold);}
.tarot-btn-sec[disabled]{opacity:.4; cursor:default;}
/* Hoja de invitación a crear cuenta (pedirSesion) */
.session-invite-ventajas{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px;}
.session-invite-ventajas li{display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-2); color:var(--text); line-height:1.45;}
.session-invite-ventajas li svg{flex:0 0 auto; margin-top:2px; color:var(--teal);}
.session-invite-ahora{width:100%; background:none; border:none; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); padding:10px; cursor:pointer; margin-top:4px; text-align:center; transition:color var(--dur-1);}
.session-invite-ahora:hover{color:var(--text);}
.tarot-badge{display:inline-block; width:12px; height:12px; border-radius:99px; background:var(--gold); vertical-align:middle; margin-right:4px; animation:tarot-pulse 1.8s ease infinite;}
@keyframes tarot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,169,90,.5);}50%{box-shadow:0 0 0 6px rgba(214,169,90,0);}}

/* ===== TRIVIA DEL NIDO ===== */
.trivia-q{font-family:var(--display); font-weight:600; font-size:var(--fs-4); line-height:1.35; margin:4px 0 16px;}
.trivia-opts{display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
.trivia-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; color:var(--text); font-family:inherit; font-size:var(--fs-3); cursor:pointer;}
.trivia-opt:hover:not([disabled]){border-color:var(--teal);}
.trivia-opt[disabled]{cursor:default;}
.trivia-opt-letter{flex:0 0 auto; width:26px; height:26px; border-radius:99px; background:var(--ink); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.trivia-opt.correct{border-color:var(--teal); background:rgba(46,182,164,.12);}
.trivia-opt.correct .trivia-opt-letter{border-color:var(--teal); color:var(--teal);}
.trivia-opt.wrong{border-color:color-mix(in srgb, var(--err-text) 70%, transparent); background:color-mix(in srgb, var(--err-bg) 50%, transparent);}
.trivia-opt.wrong .trivia-opt-letter{border-color:color-mix(in srgb, var(--err-text) 70%, transparent); color:var(--err-text);}
.trivia-result{border-radius:var(--r-md); padding:16px; text-align:center; margin-bottom:16px;}
.trivia-result.ok{background:linear-gradient(90deg,rgba(46,182,164,.15),rgba(46,182,164,.05)); border:1px solid rgba(46,182,164,.4);}
.trivia-result.fail{background:linear-gradient(90deg,rgba(214,169,90,.1),rgba(214,169,90,.04)); border:1px solid rgba(214,169,90,.3);}
.trivia-result-icon{font-size:var(--fs-7); display:block; margin-bottom:4px;}
.trivia-result-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-4);}
.trivia-result.ok .trivia-result-title{color:var(--teal);}
.trivia-result.fail .trivia-result-title{color:var(--gold);}
.trivia-result-sub{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); margin-top:4px;}

/* ===== TRIVIA - RONDA SEMANAL ===== */
.trivia-round-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.trivia-round-progress{letter-spacing:.08em; text-transform:uppercase;}
.trivia-round-timer{color:var(--teal); font-weight:600;}
.trivia-photo-wrap{width:100%; height:260px; border-radius:var(--r-md); overflow:hidden; background:var(--panel2); border:1px solid var(--line); margin-bottom:14px; display:flex; align-items:center; justify-content:center;}
.trivia-photo-wrap img{width:auto; height:100%; max-width:100%; object-fit:contain;}
.trivia-photo-loading{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted);}
.trivia-sci-name{line-height:var(--lh-tight);font-family:var(--display); font-style:italic; font-size:var(--fs-6); text-align:center; margin:10px 0 18px; color:var(--text);}
.trivia-next-btn{display:block; width:100%; margin-top:14px; padding:13px; border-radius:var(--r-md); border:1px solid var(--teal); background:rgba(46,182,164,.12); color:var(--teal); font-family:var(--display); font-weight:600; font-size:var(--fs-3); cursor:pointer;}
.trivia-next-btn:hover{background:rgba(46,182,164,.2);}
.trivia-start-btn{display:block; width:100%; margin-top:6px; padding:14px; border-radius:var(--r-md); border:none; background:var(--teal); color:var(--on-teal); font-family:var(--display); font-weight:700; font-size:var(--fs-3); cursor:pointer;}
.trivia-start-btn:hover{filter:brightness(1.06);}
.trivia-rules{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); line-height:1.6; margin:10px 0 16px;}
/* ---- Intro visual de Birdle y Trivial (23/09/2026) ---- */
.jg-intro{margin:8px 0 16px;}
.jg-pasos{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.jg-pasos li{display:flex; align-items:center; gap:11px; font-size:var(--fs-2); line-height:1.35; color:var(--muted);}
.jg-pasos li b{color:var(--text); font-weight:700;}
.jg-paso-ico{flex:none; width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--teal); background:color-mix(in srgb,var(--teal) 13%,transparent);}
.jg-paso-ico svg{width:17px; height:17px;}
/* Birdle: la foto de ejemplo se aclara intento a intento (bucle de ~7 s). */
.bd-demo{position:relative; width:min(62%,210px); aspect-ratio:1; margin:0 auto; border-radius:18px; overflow:hidden; background:var(--panel2); box-shadow:var(--sh-3); border:1px solid var(--line);}
.bd-capa{position:absolute; inset:0; opacity:0; animation:bdPaso calc(var(--n) * 1.4s) steps(1,end) infinite; animation-delay:calc(var(--i) * 1.4s);}
.bd-capa canvas, .bd-capa img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; image-rendering:pixelated;}
.bd-capa img{image-rendering:auto;}
.bd-intento{position:absolute; left:8px; top:8px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:rgba(0,0,0,.55); color:#fff;}
.bd-capa:last-child .bd-intento{background:var(--teal); color:var(--on-teal);}
.bd-vidas{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:4px;}
.bd-vidas i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35);}
.bd-vidas i.on{background:#ff6b6b; box-shadow:0 0 0 2px rgba(0,0,0,.2);}
@keyframes bdPaso{0%{opacity:1;} 20%{opacity:0;} 100%{opacity:0;}}
/* Sin movimiento: se ve directamente la foto nítida. */
@media (prefers-reduced-motion: reduce){ .bd-capa{animation:none;} .bd-capa:last-child{opacity:1;} }
html.perf-bajo .bd-capa{animation:none;} html.perf-bajo .bd-capa:last-child{opacity:1;}
/* Trivial: las 4 preguntas, encendiéndose por turnos. */
.tv-demo{display:grid; grid-template-columns:repeat(4,1fr); gap:7px;}
.tv-tarj{display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 4px 10px; border-radius:14px; background:var(--panel2); border:1.5px solid var(--line); text-align:center;
  animation:tvLuz 4.8s ease-in-out infinite;}
.tv-2{animation-delay:1.2s;} .tv-3{animation-delay:2.4s;} .tv-4{animation-delay:3.6s;}
.tv-ico{height:30px; display:flex; align-items:center; justify-content:center; color:var(--teal);}
.tv-ico svg{width:26px; height:26px;}
.tv-txt{font-size:11px; line-height:1.15; font-weight:600; color:var(--text);}
.tv-sci{font-family:var(--display); font-style:italic; font-size:13px; color:var(--teal); white-space:nowrap;}
.tv-onda{display:flex; align-items:center; gap:2px; height:22px;}
.tv-onda i{width:3px; border-radius:2px; background:var(--teal); height:40%;}
.tv-onda i:nth-child(2){height:80%;} .tv-onda i:nth-child(3){height:100%;} .tv-onda i:nth-child(4){height:60%;} .tv-onda i:nth-child(5){height:30%;}
@keyframes tvLuz{0%,22%{border-color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,var(--panel2)); transform:translateY(-2px);} 30%,100%{border-color:var(--line); background:var(--panel2); transform:none;}}
@media (prefers-reduced-motion: reduce){ .tv-tarj{animation:none;} }
html.perf-bajo .tv-tarj{animation:none;}
.trivia-rank-tabs{display:flex; gap:8px; margin:14px 0 10px;}
.trivia-rank-tab{flex:1; padding:9px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2); color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.trivia-rank-tab.on{border-color:var(--teal); color:var(--teal); background:rgba(46,182,164,.12);}
.trivia-rank-list{display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto;}
.trivia-rank-item{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-2);}
.trivia-rank-item.me{border-color:var(--gold); background:rgba(214,169,90,.1);}
.trivia-rank-pos{flex:0 0 auto; width:24px; text-align:center; color:var(--muted); font-weight:700;}
.trivia-rank-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
.trivia-rank-score{flex:0 0 auto; color:var(--muted);}
.trivia-rank-xp{flex:0 0 auto; color:var(--gold); font-weight:700;}
.trivia-rank-empty{font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); text-align:center; padding:14px;}
/* Separador antes de la fila propia cuando queda fuera del top 5/top mostrado
   (ranking "tipo videojuego": top fijo + tu puesto real debajo). */
.trivia-rank-sep{text-align:center; color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.3em; padding:2px 0;}
/* ---------- Ranking de exploradores (pestaña Comunidad > Ranking) ----------
   Reutiliza las filas .trivia-rank-item de arriba, pero a pantalla completa
   (sin el max-height/scroll interno pensado para el modal de Trivia) y con
   el podio del top 3 + la fila fija de la posición propia. */
#rankList .trivia-rank-list{max-height:none; overflow:visible; gap:8px;}
#rankList .trivia-rank-score{display:inline-flex; align-items:center; gap:10px;}
#rankList .trivia-rank-score .stat-badge{width:18px; height:18px;}
#rankList .trivia-rank-score .stat-badge svg{width:10px; height:10px;}
.trivia-rank-item[data-uid]{cursor:pointer; transition:border-color var(--dur-1), transform var(--dur-1);}
.trivia-rank-item[data-uid]:hover{border-color:var(--teal); transform:translateY(-1px);}
.rank-podio{padding:12px 13px;}
.rank-podio .trivia-rank-pos{font-size:var(--fs-3);}
.rank-podio .trivia-rank-name{font-family:var(--display); font-weight:700; font-size:var(--fs-2);}
.rank-podio-1{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 8px 20px -10px rgba(214,169,90,.55);}
.rank-podio-2{border-color:#B9C0C6; box-shadow:0 0 0 1px #B9C0C6;}
.rank-podio-3{border-color:#C08552; box-shadow:0 0 0 1px #C08552;}
.rank-me-sticky{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.rank-me-sticky::before{content:'Tu posición'; display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}

/* ===== BIRDLE ===== */
.birdle-vidas{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 10px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:2px 0 11px; letter-spacing:.03em;}
.birdle-corazones{display:inline-flex; align-items:center; gap:2px; font-size:17px; line-height:1;}
.birdle-hints{line-height:var(--lh);display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.birdle-photo-hint{width:100%; height:min(34vh,260px); border-radius:var(--r-lg); overflow:hidden; background:#000; margin-bottom:11px;}
.birdle-photo-hint img{line-height:var(--lh);width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated;}
/* Pixelado por CSS: el respaldo cuando el canvas no es viable porque el
   servidor de la foto no manda cabeceras CORS (toDataURL lanza SecurityError).
   El desenfoque lo pone birdleHintsHTML en línea, decreciente por intento.
   Se escala hacia arriba una versión diminuta para que además de borrosa se
   vea "a cuadros", igual que el pixelado por canvas. */
.birdle-photo-hint img.birdle-pixel-css{transform:scale(1.06); transition:filter var(--dur-2) var(--ease);}
@media (prefers-reduced-motion: reduce){ .birdle-photo-hint img.birdle-pixel-css{transition:none;} }
/* Aviso honesto cuando no hay foto: antes esto era una cadena vacía y se
   pintaban el buscador y "Pasar" sobre un hueco en blanco, con el reloj
   corriendo y sin ninguna pista. */
.birdle-photo-error{height:auto; background:var(--panel2); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px 16px; text-align:center;}
.birdle-photo-error p{margin:0; color:var(--text); font-size:var(--fs-2); line-height:var(--lh);}
.birdle-photo-error .trivia-start-btn{margin:0; width:auto; padding-left:22px; padding-right:22px;}
.birdle-guesses{display:flex; flex-direction:column; gap:6px; margin:14px 0;}
.birdle-guess-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); font-family:var(--display); font-size:var(--fs-2);}
.birdle-guess-row.wrong{border-color:color-mix(in srgb, var(--err-text) 70%, transparent);}
.birdle-guess-row.correct{border-color:var(--teal);}
.birdle-guess-icon{flex:0 0 auto; font-size:var(--fs-3);}
.birdle-answer{margin:14px 0 0;}
.birdle-answer label{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 2px 8px; color:var(--text); font-size:14px; font-weight:700;}
.birdle-answer label small{color:var(--muted); font-size:10.5px; font-weight:500; text-align:right;}
.birdle-search-shell{display:flex; align-items:center; gap:10px; min-height:56px; padding:0 14px; border:1.5px solid color-mix(in srgb, var(--teal) 45%, var(--line)); border-radius:15px; background:var(--panel); box-shadow:var(--sh-1); transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.birdle-search-shell svg{width:21px; height:21px; flex:none; color:var(--teal-on-panel);}
.birdle-search-shell:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);}
.birdle-search-shell .birdle-search{flex:1; min-width:0; min-height:54px; padding:13px 0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:0;}
.birdle-search-list{max-height:38vh; overflow:auto; margin:7px 0 0; padding:0; list-style:none; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:var(--sh-2);}
.birdle-search-list:empty{display:none;}
.birdle-search-list li:last-child .row{border-bottom:0;}
.birdle-search-list .row{min-height:49px; padding:8px 13px;}
.birdle-pass{display:flex; align-items:center; gap:11px; width:100%; min-height:59px; margin-top:13px; padding:9px 12px; border:1px solid var(--line); border-radius:14px; background:var(--panel2); color:var(--text); text-align:left; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);}
.birdle-pass:hover{background:color-mix(in srgb, var(--teal) 10%, var(--panel)); border-color:color-mix(in srgb, var(--teal) 40%, var(--line));}
.birdle-pass:active{transform:scale(.99);}
.birdle-pass:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.birdle-pass-icon{display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--teal-on-panel);}
.birdle-pass-icon svg{width:19px; height:19px;}
.birdle-pass-copy{flex:1; min-width:0;}
.birdle-pass-copy b,.birdle-pass-copy small{display:block;}
.birdle-pass-copy b{font-size:13px;}
.birdle-pass-copy small{margin-top:2px; color:var(--muted); font-size:10.5px; line-height:1.35;}
.birdle-pass-chevron{color:var(--muted); font-size:21px;}
.birdle-result-photo{border-radius:var(--r-lg); overflow:hidden; background:#000; margin-bottom:14px;}
.birdle-result-photo img{width:100%; max-height:46vh; object-fit:contain; display:block;}
@keyframes queave-pop{0%{transform:scale(.6); opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1); opacity:1;}}
/* ==== MISIONES PREMIUM ====
   Todo bajo prefijo mis- (o #misionesSeg/#misionesOverlay) a propósito:
   .seg, .medlist, .medal, .mname, .mdesc, .mxp, .mprog, .reward-count,
   .has-reward y .tarot-overlay/.tarot-sheet son clases COMPARTIDAS por
   muchas otras pantallas (Logros, Radar social, Rutas en el mapa, Trivia,
   Birdle...) -- nada de esto se toca de forma global, solo se añaden reglas
   con más especificidad o clases nuevas exclusivas de esta pantalla. */

/* Entrada tipo sheet, solo para el overlay de Misiones (el resto de overlays
   "tarot" no tenían animación de entrada y no se tocan aquí). */
#misionesOverlay .tarot-sheet{animation:misSheetIn var(--dur-1) var(--ease) backwards;}
@keyframes misSheetIn{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
/* Punto dorado con número en vez del rojo genérico (aquí es una recompensa
   esperando, no una alerta) -- #misionesSeg para no tocar .reward-count en
   el resto de la app. */
#misionesSeg .reward-count{background:var(--gold); color:var(--on-gold); animation:misPop var(--dur-2) var(--ease-pop) backwards;} /* el punto rojo de .has-reward no hace falta, ya está el número dorado */
@keyframes misPop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
@keyframes misCardIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes misPulse{0%{transform:scale(1);} 40%{transform:scale(1.03);} 100%{transform:scale(1);}}
@keyframes misPt{from{opacity:1; transform:translate(0,0) scale(1);} to{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.4);}}

/* Estado vacío (rutas) */
.mis-btnpri{border:none; background:var(--gold); color:var(--on-gold); font-family:var(--display); font-weight:700; font-size:var(--fs-2); padding:10px 20px; border-radius:99px; cursor:pointer; transition:transform var(--dur-0);}
.mis-btnpri:active{transform:scale(.95);}

/* ==== MAPA VIVO ==== */
.mv-mod-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;}
.mv-mod-seg{display:flex;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);position:relative;pointer-events:auto;}
@supports not (backdrop-filter:blur(1px)){.mv-mod-seg{background:var(--panel);}}
.mv-mod-indicator{position:absolute;top:3px;bottom:3px;border-radius:var(--r-md);background:var(--teal);transition:left var(--dur-2) var(--ease),width var(--dur-2) var(--ease);z-index:0;pointer-events:none;}
.mv-mod-btn{flex:1 1 auto;display:flex;align-items:center;gap:4px;padding:7px 12px;font-family:var(--display);font-size:var(--fs-2);font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;white-space:nowrap;z-index:1;position:relative;transition:color var(--dur-1) var(--ease);}
.mv-mod-btn.active{color:var(--on-teal);}
.mv-mod-btn svg{width:12px;height:12px;flex-shrink:0;}
.mv-mod-sub{font-family:var(--mono);font-size:var(--fs-1);color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.8);pointer-events:none;white-space:nowrap;text-align:center;min-height:13px;opacity:.9;}
.mv-mod-sub b{line-height:var(--lh);font-weight:700;}
/* NUEVO -- chips de filtro del diario (Todas/Capturas/Avistamientos), colgando
   de la misma barra de modos. Mismo estilo "glass" que .mv-mod-seg. */
/* nowrap (22/09/2026): con "Capturas" y "Avistamientos" escritos, los tres
   chips no cabían de ancho y flex-wrap los partía en dos líneas encima del
   mapa. Ahora los dos últimos van solo con icono, caben de sobra en una, y
   sin wrap se garantiza que sigan cabiendo aunque el número crezca. */
.mv-diario-chips{display:flex; gap:6px; pointer-events:auto; flex-wrap:nowrap; justify-content:center; max-width:92vw;}
/* Chip de solo icono: cuadrado, sin el hueco que dejaba el texto ausente. */
.mv-chip.solo-ico{padding:6px 10px; gap:4px;}
.mv-chip.solo-ico svg{width:13px; height:13px;}
.mv-chip{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:99px;
  background:color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.01em;
  cursor:pointer; white-space:nowrap; transition:background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-0);
  box-shadow:var(--sh-1);}
.mv-chip:active{transform:scale(.96);}
.mv-chip .mv-chip-n{font-family:var(--display); font-weight:700; font-size:var(--fs-1); opacity:.85;}
.mv-chip.active{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.mv-chip.active.cap{background:var(--gold); border-color:var(--gold); color:var(--on-gold);}
.mv-chip svg{width:12px; height:12px; flex-shrink:0;}
@supports not (backdrop-filter:blur(1px)){ .mv-chip{background:var(--panel);} }
/* CAMBIO -- un solo pin para capturas Y avistamientos: misma silueta y mismo
   tamaño, y el color del aro sale de --pin-ring (dorado por defecto, teal en
   avistamientos vía .avi) en vez de tener .captura-pin/.avi-pin por separado. */
.foto-pin-wrap{position:relative;width:42px;height:52px;display:flex;flex-direction:column;align-items:center;--pin-ring:var(--gold);}
.foto-pin-wrap.avi{--pin-ring:var(--teal);}
.foto-pin{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2.5px solid #fff;box-shadow:0 0 0 2px var(--pin-ring),var(--sh-2);cursor:pointer;background:var(--panel2);display:flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-pop);}
.foto-pin img{width:100%;height:100%;object-fit:cover;}
/* Avistamiento sin foto propia: se ve la foto de referencia de la especie,
   pero desaturada, para que a simple vista no se confunda con una foto real. */
.foto-pin-wrap.avi .foto-pin img{filter:grayscale(.65) brightness(.85);}
.foto-pin svg{width:22px;height:22px;opacity:.5;}
.foto-pin-tail{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid #fff;}
.foto-pin-halo{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;animation:fotoPinHalo 2.8s ease-in-out infinite;}
@keyframes fotoPinHalo{0%,100%{box-shadow:0 0 0 0 rgba(214,169,90,.0);}50%{box-shadow:0 0 0 7px rgba(214,169,90,.18);}}
/* NUEVO -- chapa de tipo en la esquina del pin: pokéball = captura, ojo =
   avistamiento (mismo SVG que ya usa el botón "La vi, pero sin foto"). Hereda
   el color del aro (--pin-ring) del .foto-pin-wrap que la envuelve. */
.reg-badge{position:absolute; right:-3px; top:25px; width:19px; height:19px; border-radius:50%;
  background:var(--panel); border:1.5px solid var(--pin-ring); color:var(--pin-ring);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); z-index:2;}
.reg-badge svg{width:12px; height:12px; opacity:1;}
.reg-badge.pokeball svg{width:13px; height:13px;}
/* El anillo de rareza (.fc-anillo) dejó de existir el 01/10/2026: el
   clúster de Mi diario es ahora la ficha de grupo (.cl-ficha, en
   app-tras-leaflet.css). */
.avi-ping-wrap{position:relative;width:28px;height:28px;}
.avi-ping-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:var(--teal);transform:translate(-50%,-50%);}
.avi-ping-ring{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;border:2px solid var(--teal);transform:translate(-50%,-50%) scale(.4);opacity:0;animation:aviPingRing 2.6s ease-out infinite;}
.avi-ping-ring2{animation-delay:1.3s;}
@keyframes aviPingRing{0%{transform:translate(-50%,-50%) scale(.35);opacity:.9;}70%{opacity:.1;}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;}}
.avi-ping-label{position:absolute;left:30px;top:50%;transform:translateY(-50%);background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--teal);border-radius:var(--r-sm);padding:3px 8px;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-1);color:var(--text);box-shadow:var(--sh-2);z-index:1;}
@supports not (backdrop-filter:blur(1px)){.avi-ping-label{background:var(--panel);}}
.community-pin-lila{position:relative;width:30px;height:30px;background:var(--acc-lilac);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-3);border:2px solid var(--panel);box-shadow:var(--sh-2);transition:transform var(--dur-1) var(--ease-pop);}
.community-pin-lila::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--acc-lilac);border-radius:0 0 3px 0;transform:translateX(-50%) rotate(45deg);box-shadow:var(--sh-1);z-index:-1;}
.community-pin-badge{position:absolute;top:-5px;right:-7px;background:var(--gold);color:var(--on-gold);font-family:var(--mono);font-size:var(--fs-0);font-weight:700;border-radius:99px;padding:1px 4px;border:1.5px solid var(--panel);white-space:nowrap;line-height:1.4;}
.ruta-pin-badge{position:absolute;top:-7px;right:-7px;transform:rotate(45deg);background:var(--panel);border:1.5px solid var(--gold);border-radius:99px;padding:1px 4px;font-family:var(--mono);font-size:var(--fs-0);font-weight:700;color:var(--gold);white-space:nowrap;line-height:1.5;}
.mv-tour-btn{position:absolute;bottom:calc(62dvh + 10px);right:10px;z-index:700;background:var(--gold);color:var(--on-gold);border:none;border-radius:99px;padding:7px 15px;font-family:var(--display);font-weight:700;font-size:var(--fs-2);cursor:pointer;box-shadow:var(--sh-2);align-items:center;gap:6px;transition:transform var(--dur-0) var(--ease),background var(--dur-1) var(--ease);display:none;}
.mv-tour-btn:active{transform:scale(.95);}
.mv-tour-btn.tour-active{background:var(--teal);color:var(--on-teal);}
.mv-tour-btn svg{width:12px;height:12px;flex-shrink:0;}
/* Tarjeta narrativa del tour (Parte 3.2): fija sobre el mapa, por encima de
   sus controles (z-index 600-700) y muy por debajo de cualquier hoja/modal
   (--z-hoja=5000) -- nunca .overlay.top, no es un modal: si se abre uno
   encima, el tour se PAUSA (ver hayOverlayAbierto() en programarAvanceTour),
   no sigue corriendo por debajo sin verse. */
/* Tarjeta del tour: anclada ABAJO del mapa, nunca a dvh. Antes colgaba de la
   hoja (bottom:calc(62dvh + 10px)) y en pantallas cortas se salía por arriba
   pisando .gmap-controls y .mv-mod-bar; durante el tour (modo cine, abajo) la
   hoja ni siquiera está en pantalla, así que no hay de qué colgarla. */
.mv-tour-card{position:absolute;left:12px;right:12px;top:auto;bottom:calc(14px + var(--sab));max-width:560px;margin-inline:auto;max-height:46dvh;overflow-y:auto;z-index:900;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:12px;display:flex;flex-direction:column;gap:9px;animation:mvTourIn var(--dur-2) var(--ease-pop);}
@keyframes mvTourIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* ==== MODO CINE del tour (body.mapa-cine, lo pone lanzarTour() y lo quitan
   pararTour() y destroyGlobalMap()) ====
   El tour es una cinemática tipo cuaderno de campo: mapa a pantalla completa
   de verdad (sin cabecera ni barra inferior), sin controles ni hoja ni barra
   de modos, viñeta marcada y solo la tarjeta abajo. Varios de estos
   elementos llevan style.display puesto por JS (mvTourBtn, mapAddBtn,
   mvModSub, mvEvResumen), por eso el !important. La atribución de Leaflet
   NO se esconde (obligatoria por licencia): solo se atenúa. */
body.mapa-cine .head, body.mapa-cine .bottom-nav{display:none !important;}
body.mapa-cine .map-screen{top:0 !important; bottom:0 !important;}
body.mapa-cine .map-screen .gmap-controls,
body.mapa-cine .map-screen .mv-mod-bar,
body.mapa-cine .map-screen .map-add-btn,
body.mapa-cine .map-screen .map-add-hint,
body.mapa-cine .map-screen .explo-sheet,
body.mapa-cine .map-screen .explo-card,
body.mapa-cine .map-screen .map-legend{display:none !important;}
body.mapa-cine .map-screen .leaflet-control-attribution{opacity:.35;}
body.mapa-cine .mv-tour-card{z-index:900;}
/* Viñeta del cine: la misma #mvVineta de "En vivo" con los dos degradados
   algo más opacos y profundos. pointer-events:none lo hereda de .mv-vineta. */
.mv-vineta.cine{
  background:linear-gradient(to bottom, color-mix(in srgb,var(--ink) 82%,transparent) 0%, transparent 28%),
             linear-gradient(to top, color-mix(in srgb,var(--ink) 62%,transparent) 0%, transparent 34%);}
.mv-tour-progreso{display:flex;gap:4px;}
.mv-tour-seg{flex:1;height:3px;border-radius:99px;background:var(--line);overflow:hidden;position:relative;}
.mv-tour-seg-fill{position:absolute;inset:0;width:0%;background:var(--gold);border-radius:inherit;}
.mv-tour-seg.done .mv-tour-seg-fill{width:100%!important;transition:none!important;}
.mv-tour-body{display:flex;gap:10px;align-items:flex-start;position:relative;}
.mv-tour-foto{width:62px;height:62px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:3px solid var(--line);background:var(--panel2);display:flex;align-items:center;justify-content:center;}
.mv-tour-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.mv-tour-foto svg{width:60%;height:60%;}
.mv-tour-info{flex:1;min-width:0;}
.mv-tour-fecha{font-family:var(--mono);font-size:var(--fs-0);color:var(--gold);text-transform:uppercase;letter-spacing:.03em;}
.mv-tour-nombre{font-family:var(--display);font-weight:800;font-size:var(--fs-4);line-height:1.15;}
.mv-tour-cientifico{font-style:italic;color:var(--muted);font-size:var(--fs-1);}
.mv-tour-lugar{color:var(--muted);font-size:var(--fs-1);}
.mv-tour-frase{margin-top:4px;font-size:var(--fs-2);line-height:var(--lh);}
.mv-tour-cerrar{position:absolute;top:-4px;right:-4px;width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:var(--fs-3);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mv-tour-controles{display:flex;align-items:center;gap:8px;}
.mv-tour-controles button{background:var(--panel2);border:1px solid var(--line);border-radius:99px;width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:transform var(--dur-0) var(--ease);}
.mv-tour-controles button:active{transform:scale(.9);}
.mv-tour-controles button svg{width:16px;height:16px;}
.mv-tour-contador{margin-left:auto;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);white-space:nowrap;}
/* Parte 4.1: pin de la base del usuario -- casa en teal, mismo lenguaje
   visual que el resto de pines propios del mapa (borde --panel, sombra). */
/* La esquina en pico es la inferior-izquierda (border-radius ... 0); girada
   -45deg queda apuntando ABAJO, a 25,5 px del centro del cuadro de 36x36 --
   de ahí el iconAnchor [18,43] de pintarBaseEnMapa(). Con +45deg (como
   estaba) el pico señalaba a la izquierda. */
.mv-base-pin{width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--teal);color:var(--on-teal);border:2px solid var(--panel);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;}
.mv-base-pin svg{width:16px;height:16px;transform:rotate(45deg);}
/* Parte 4.2: etiqueta discreta de un viaje sobre su traza. */
.mv-viaje-etiqueta{background:color-mix(in srgb, var(--panel) 90%, transparent);border:1px solid var(--gold);border-radius:var(--r-sm);padding:2px 7px;font-family:var(--mono);font-size:var(--fs-0);color:var(--gold);box-shadow:var(--sh-1);}
@supports not (backdrop-filter:blur(1px)){.mv-viaje-etiqueta{background:var(--panel);}}
.mv-sky-bird{position:absolute;pointer-events:none;z-index:201;}
@keyframes skyBirdFlap{0%{transform:scaleY(1);}100%{transform:scaleY(.72);}}
.mv-sheet-list{display:flex;flex-direction:column;}
.mv-sheet-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity var(--dur-0);}
.mv-sheet-row:last-child{border-bottom:none;}
.mv-sheet-row:active{opacity:.7;}
.mv-sheet-row.mv-anim{animation:mvRowEnter var(--dur-1) var(--ease) backwards;}
@keyframes mvRowEnter{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
.mv-sheet-thumb{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel2);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;}
.mv-sheet-thumb img{width:100%;height:100%;object-fit:cover;}
.mv-sheet-thumb-icon{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-4);background:var(--panel2);border:2px solid var(--line);}
/* NUEVO -- envuelve la miniatura de la fila con la misma chapa (pokéball/ojo)
   que lleva el pin del mapa, para que la lista y el mapa cuenten lo mismo. */
.mv-sheet-thumb-wrap{position:relative; flex-shrink:0; width:38px; height:38px; --pin-ring:var(--gold);}
.mv-sheet-thumb-wrap.avi{--pin-ring:var(--teal);}
.mv-sheet-thumb-wrap .mv-sheet-thumb{border-color:var(--pin-ring);}
.mv-sheet-thumb-wrap.avi .mv-sheet-thumb img{filter:grayscale(.65) brightness(.85);}
.mv-sheet-thumb-wrap .reg-badge{position:absolute; right:-4px; bottom:-3px; top:auto; width:17px; height:17px;}
.mv-sheet-thumb-wrap .reg-badge svg{width:11px; height:11px;}
.mv-sheet-thumb.sin-foto{background:var(--panel2); color:var(--muted);}
.mv-sheet-thumb.sin-foto svg{width:18px; height:18px;}
.mv-sheet-body{line-height:var(--lh);flex:1 1 auto;min-width:0;}
.mv-sheet-name{font-family:var(--display);font-weight:600;font-size:var(--fs-2);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mv-sheet-sub{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mv-sheet-right{flex-shrink:0;text-align:right;}
.mv-sheet-tag{font-family:var(--mono);font-size:var(--fs-1);border-radius:var(--r-sm);padding:3px 7px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);}
/* NUEVO -- etiqueta "Foto"/"Visto" a la derecha de cada fila del diario. */
.mv-sheet-tag.cap{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 55%, var(--line));}
.mv-sheet-tag.avi{color:var(--teal); border-color:color-mix(in srgb, var(--teal) 45%, var(--line));}
.mv-sheet-fresh{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);animation:freshDot 1.4s ease-in-out infinite;vertical-align:middle;margin-right:3px;}
@keyframes freshDot{0%,100%{box-shadow:0 0 0 0 rgba(46,182,164,.7);}70%{box-shadow:0 0 0 5px rgba(46,182,164,0);}}
.mv-sheet-prog{height:4px;border-radius:99px;background:var(--panel2);margin-top:5px;overflow:hidden;}
.mv-sheet-prog-fill{height:100%;border-radius:99px;background:var(--teal);}
.mv-sheet-estado{font-family:var(--mono);font-size:var(--fs-1);border-radius:99px;padding:2px 8px;display:inline-block;margin-top:4px;border:1px solid var(--teal);color:var(--teal);}
.mv-sheet-estado.cool{color:var(--muted);border-color:var(--line);}
/* ==== VIAJES DE MI DIARIO ====
   La hoja de Mi diario tiene dos pestañas: los registros de siempre y los
   viajes. Un viaje es un puñado de días seguidos lejos de casa (ver
   AveTerritorio.calcularViajesYRadio); al abrirlo, el mapa se queda solo con
   sus fotos y dibuja el recorrido en el orden en que las hiciste.
   Antes, cada viaje llevaba una etiqueta permanente clavada en mitad de su
   trazo, que caía justo encima de las aves. Ahora el mapa no lleva ni una
   letra: los nombres viven aquí. */
.mv-pest{display:flex; gap:4px; background:var(--panel2); border-radius:var(--r-full); padding:3px; margin:0 0 12px;}
.mv-pest-btn{flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:0; border-radius:var(--r-full); padding:8px 10px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600; color:var(--muted);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); min-height:38px;}
.mv-pest-btn.active{background:var(--panel); color:var(--text); box-shadow:var(--sh-1);}
.mv-pest-btn svg{width:14px; height:14px; flex:0 0 auto;}
.mv-pest-n{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; color:var(--muted);
  background:color-mix(in srgb, var(--muted) 16%, transparent); border-radius:var(--r-full); padding:1px 6px;}
.mv-pest-btn.active .mv-pest-n{color:var(--gold); background:color-mix(in srgb, var(--gold) 18%, transparent);}

/* ---- tarjeta de un viaje ---- */
.mv-viajes{display:flex; flex-direction:column; gap:10px;}
.mv-viaje{position:relative;}
.mv-viaje-abrir{display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 46px 12px 14px; transition:border-color var(--dur-1) var(--ease), transform var(--dur-0) var(--ease);}
.mv-viaje-abrir:active{transform:scale(.99);}
@media (hover:hover){ .mv-viaje-abrir:hover{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));} }
.mv-viaje-head{display:flex; align-items:center; gap:8px;}
.mv-viaje-punto{width:9px; height:9px; border-radius:var(--r-full); background:var(--gold); flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);}
.mv-viaje-nombre{margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.mv-viaje-dias{margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-1); font-weight:700;
  color:var(--gold); background:color-mix(in srgb, var(--gold) 15%, transparent);
  border-radius:var(--r-full); padding:2px 8px;}
.mv-viaje-sub{margin:7px 0 0; font-family:var(--mono); font-size:var(--fs-1); line-height:1.5; color:var(--muted);}
.mv-viaje-sub .nuevas{color:var(--teal); font-weight:700;}
.mv-viaje-tiras{display:flex; margin-top:9px; padding-left:6px;}
.mv-viaje-tira{width:30px; height:30px; border-radius:var(--r-full); overflow:hidden; margin-left:-6px;
  background:var(--panel); border:2px solid var(--panel2); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.mv-viaje-tira img{width:100%; height:100%; object-fit:cover; display:block;}
.mv-viaje-tira svg{width:16px; height:16px; color:var(--muted);}
.mv-viaje-tira.mas{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; color:var(--muted); background:var(--panel2); border-color:var(--line);}
/* Lápiz: encima de la tarjeta, pero botón aparte -- renombrar no puede abrir
   el viaje por accidente. 38px de zona táctil. */
.mv-viaje-editar{position:absolute; top:9px; right:9px; width:38px; height:38px; display:flex;
  align-items:center; justify-content:center; background:none; border:0; border-radius:var(--r-full);
  color:var(--muted); cursor:pointer; transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.mv-viaje-editar svg{width:15px; height:15px;}
.mv-viaje-editar:active{background:var(--panel); color:var(--gold);}
@media (hover:hover){ .mv-viaje-editar:hover{color:var(--gold);} }
/* Papelera: debajo del lápiz, en la esquina de abajo, igual de separada
   del resto de la tarjeta (01/10/2026). En rojo al tocarla, no antes. */
.mv-viaje-borrar{top:auto; bottom:9px;}
.mv-viaje-borrar:active{color:var(--err-text);}
@media (hover:hover){ .mv-viaje-borrar:hover{color:var(--err-text);} }

/* ---- renombrar, ahí mismo ---- */
.mv-viaje-editor{display:flex; align-items:center; gap:7px; background:var(--panel2);
  border:1px solid var(--gold); border-radius:var(--r-lg); padding:9px 10px;}
.mv-viaje-input{flex:1 1 auto; min-width:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:9px 11px; color:var(--text); font-family:var(--display);
  font-weight:600; font-size:var(--fs-3); min-height:40px;}
.mv-viaje-input:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.mv-viaje-ok, .mv-viaje-no{flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel);
  color:var(--muted); cursor:pointer;}
.mv-viaje-ok{background:var(--gold); border-color:var(--gold); color:var(--on-teal);}
.mv-viaje-ok svg, .mv-viaje-no svg{width:17px; height:17px;}

/* ---- la cronografía: un viaje abierto, día a día ---- */
.mv-viaje-cab{display:flex; align-items:center; gap:9px; margin:0 0 12px;}
.mv-viaje-atras{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; min-height:38px;
  padding:0 11px 0 8px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font-family:var(--mono); font-size:var(--fs-1); font-weight:600; cursor:pointer;}
.mv-viaje-atras svg{width:14px; height:14px;}
.mv-viaje-cab-txt{min-width:0; flex:1 1 auto;}
.mv-viaje-cab-txt h3{margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-3);
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-viaje-cab-txt p{margin:1px 0 0; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-dias{display:flex; flex-direction:column;}
.mv-dia{position:relative; display:flex; gap:12px; padding:0 0 4px 0; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;}
.mv-dia-col{position:relative; flex:0 0 auto; width:28px; display:flex; justify-content:center;}
/* El hilo que une un día con el siguiente: es lo que convierte una lista en
   un recorrido. El último día no lo lleva. */
.mv-dia:not(:last-child) .mv-dia-col::after{content:''; position:absolute; top:28px; bottom:-4px; left:50%;
  width:2px; margin-left:-1px; background:color-mix(in srgb, var(--gold) 40%, transparent);}
.mv-dia-n{position:relative; z-index:1; width:28px; height:28px; border-radius:var(--r-full);
  background:var(--panel2); border:2px solid var(--gold); color:var(--gold); display:flex;
  align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:var(--fs-1);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);}
.mv-dia.sel .mv-dia-n{background:var(--gold); color:var(--on-teal);}
.mv-dia-cuerpo{flex:1 1 auto; min-width:0; padding-bottom:14px;}
.mv-dia-fecha{font-family:var(--display); font-weight:600; font-size:var(--fs-2); color:var(--text);}
.mv-dia-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:2px;}
.mv-dia-sub .nuevas{color:var(--teal); font-weight:700;}
.mv-dia .mv-viaje-tiras{margin-top:7px;}
.mv-dia:active .mv-dia-cuerpo{opacity:.7;}

/* ---- parada del recorrido, sobre el mapa ---- */
/* Va 27px POR ENCIMA de su punto (iconAnchor), no encima: si se clavara en el
   centro del día, en un día de una sola foto taparía justo esa foto. */
.mv-parada{width:26px; height:26px; border-radius:var(--r-full); background:var(--gold);
  border:2px solid #fff; box-shadow:var(--sh-2); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:var(--fs-1); color:#3A2A08; cursor:pointer;}
.mv-parada.sel{background:var(--teal); color:#062520; transform:scale(1.14);}
.mv-parada-flecha{color:var(--gold); opacity:.9; display:flex;}
.mv-parada-flecha svg{width:13px; height:13px;}

.mv-dif-toggle{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:5px 10px;font-family:var(--mono);font-size:var(--fs-1);font-weight:600;cursor:pointer;margin:0 0 8px;display:inline-flex;align-items:center;gap:5px;}
.mv-dif-toggle:active{border-color:var(--teal);}
.mv-dif-box{background:var(--panel2);border-radius:var(--r-md);padding:8px 10px;margin-bottom:8px;display:none;}
.mv-dif-box.open{display:block;}
.mv-dif-fuente{font-family:var(--mono);font-size:var(--fs-1);line-height:1.45;color:var(--muted);margin:8px 0 0;}
.mv-dif-chips-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.mv-dif-chip{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:4px 8px;font-size:var(--fs-1);font-family:var(--mono);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:3px;}
.mv-dif-chip.active{background:var(--teal);color:var(--on-teal);border-color:var(--teal);}
.mv-dif-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.mv-foto-popup{overflow:hidden;margin:-12px -14px;min-width:190px;max-width:240px;}
.mv-foto-popup-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.mv-foto-popup-body{line-height:var(--lh);padding:10px 14px 0;}
/* NUEVO -- etiqueta de tipo dentro del popup, con el mismo icono que el pin. */
.mv-popup-badge{display:inline-flex; align-items:center; gap:5px; margin-bottom:5px; padding:3px 8px 3px 6px;
  border-radius:99px; background:color-mix(in srgb, var(--gold) 16%, transparent); border:1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  color:var(--gold); font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase;}
.mv-popup-badge.avi{background:color-mix(in srgb, var(--teal) 14%, transparent); border-color:color-mix(in srgb, var(--teal) 50%, var(--line)); color:var(--teal);}
.mv-popup-badge svg{width:12px; height:12px;}
.mv-foto-popup-name{font-family:var(--display);font-weight:700;font-size:var(--fs-3);color:var(--text);}
.mv-foto-popup-sci{font-family:var(--display);font-style:italic;font-size:var(--fs-1);color:var(--muted);margin-bottom:5px;}
.mv-foto-popup-row{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);margin-bottom:8px;}
.mv-foto-popup-btn{display:block;width:calc(100% + 28px);margin:0 -14px;padding:10px 14px;background:var(--gold);color:var(--on-gold);border:none;font-family:var(--display);font-weight:700;font-size:var(--fs-2);cursor:pointer;text-align:center;}
.mv-foto-popup-btn:active{opacity:.85;}
/* Segunda fila de acción del popup de captura ("Volver a este sitio"). Comparte
   la forma de barra a sangre del botón principal, pero en tono apagado para que
   siga mandando "Ver especie". */
.mv-foto-popup-btn.sec{background:var(--panel2);color:var(--teal);border-top:1px solid var(--line);font-family:var(--mono);font-weight:400;font-size:var(--fs-1);}
.mv-sheet .explo-sheet-handle{padding:10px 16px 10px; touch-action:none;}
.mv-sheet .explo-sheet-title{font-size:var(--fs-3); letter-spacing:-.01em;}
.mv-sheet-head-text{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
/* mv-sheet-row.mv-anim (entrada escalonada de la hoja) añadida aquí: con la
   lista del diario ahora sin tope de 5, sin esto habría más filas animando a
   la vez con movimiento reducido activado. */
@media (prefers-reduced-motion:reduce){.foto-pin-halo,.avi-ping-ring,.avi-ping-ring2,.mv-sheet-fresh,.mv-sheet-row.mv-anim{animation:none !important;}}
[data-motion="reducido"] .foto-pin-halo,[data-motion="reducido"] .avi-ping-ring,[data-motion="reducido"] .avi-ping-ring2,[data-motion="reducido"] .mv-sheet-row.mv-anim{animation:none !important;}

/* ==== EN VIVO v2: viñeta, marcadores cuadrados, cluster "baraja", resumen,
   hoja con orden/filtro y ficha de avistamiento (ver pintarCapaExploracion,
   recalcExploEscalaYClusters, renderSheetEnVivo). Solo var(--teal), var(--gold),
   var(--panel), var(--line) y los colores de RAREZA_INFO (via --rz inline). */
.mv-vineta{position:absolute; inset:0; z-index:400; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--ink) 70%,transparent) 0%, transparent 20%),
             linear-gradient(to top, color-mix(in srgb,var(--ink) 45%,transparent) 0%, transparent 24%);}
.ev-resumen{display:flex; pointer-events:auto; border-radius:var(--r-md); overflow:hidden; margin-top:1px;
  background:color-mix(in srgb,var(--panel) 86%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:var(--sh-3);}
@supports not (backdrop-filter:blur(1px)){ .ev-resumen{background:var(--panel);} }
.ev-resumen div{line-height:var(--lh);padding:6px 12px; text-align:center; border-right:1px solid var(--line);}
.ev-resumen div:last-child{line-height:var(--lh);border-right:none;}
.ev-resumen b{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-3); line-height:1.1; color:var(--text);}
.ev-resumen span{line-height:var(--lh);font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.ev-resumen .nuevas b{line-height:var(--lh);color:var(--teal);}

.ev-pin{position:relative; width:36px; height:36px; border-radius:var(--r-md); cursor:pointer;
  border:2px solid var(--rz); background:var(--panel); box-shadow:var(--sh-2);
  display:flex; align-items:center; justify-content:center; transition:transform var(--dur-1) var(--ease-pop);}
.ev-pin img{width:100%; height:100%; object-fit:cover; border-radius:var(--r-sm); filter:saturate(.9);}
.ev-pin .interro{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--rz);}
.ev-pin.activo{transform:scale(1.16); z-index:650;}
.ev-pin .nueva{position:absolute; left:-6px; bottom:-6px; width:17px; height:17px; border-radius:50%;
  background:var(--teal); color:var(--on-teal); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--panel);}
.ev-pin .nueva svg{width:10px; height:10px;}
.ev-onda{position:absolute; inset:-4px; border-radius:var(--r-lg); border:1.5px solid var(--rz); opacity:0; animation:evOnda 2.8s ease-out infinite; pointer-events:none;}
@keyframes evOnda{0%{transform:scale(.85); opacity:.65;} 70%{opacity:.05;} 100%{transform:scale(1.75); opacity:0;}}
@media (prefers-reduced-motion:reduce){ .ev-onda{animation:none; opacity:.22;} }
[data-motion="reducido"] .ev-onda{animation:none !important; opacity:.22;}

/* Clúster de En vivo: la baraja de fichas por rareza. Habla el lenguaje
   común de clústeres (.cl-grupo: entrada, halo de densidad, pastilla del
   número) con --cl-mc puesto al color de la rareza más alta del grupo, que
   es lo que de verdad interesa mirar aquí. */
.ev-cluster{position:relative; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 10px 0 8px;
  --cl-radio:var(--r-md);
  border-radius:var(--r-md); cursor:pointer; background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--cl-mc,var(--line)); box-shadow:var(--sh-3);
  transition:transform var(--dur-0) var(--ease);}
@supports not (backdrop-filter:blur(1px)){ .ev-cluster{background:var(--panel);} }
.ev-cluster:active{transform:scale(.96);}
.ev-cluster .baraja{display:flex;}
.ev-cluster .baraja i{width:15px; height:20px; border-radius:4px; display:block; margin-left:-6px; font-style:normal;
  border:1.5px solid var(--panel); box-shadow:var(--sh-1);}
.ev-cluster .baraja i:first-child{margin-left:0;}
.ev-cluster .n{display:flex; align-items:center; gap:6px;}
.ev-cluster .n .cl-n{font-size:var(--fs-3); padding:3px 8px;}
.ev-cluster .n small{font-family:var(--mono); font-weight:400; font-size:var(--fs-1); color:var(--muted); display:block; line-height:1.15;}
.ev-cluster .n small.nuevas{color:var(--teal);}

.ev-titulo{display:flex; align-items:baseline; justify-content:space-between; padding:2px 0 8px;}
.ev-titulo h2{font-family:var(--display); font-weight:600; font-size:var(--fs-3); margin:0; color:var(--text);}
.ev-titulo .ct{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.ev-controles{display:flex; align-items:center; gap:6px; padding:0 0 9px; flex-wrap:wrap;}
.ev-chip{font-family:var(--mono); font-size:var(--fs-1); padding:5px 10px; border-radius:99px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); cursor:pointer; transition:var(--dur-1);}
.ev-chip.active{background:color-mix(in srgb,var(--teal) 18%,transparent); border-color:var(--teal); color:var(--teal);}
.ev-toggle{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-1);
  color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:5px 10px; cursor:pointer;}
.ev-toggle .sw{width:22px; height:12px; border-radius:99px; background:var(--line); position:relative; transition:var(--dur-1); flex-shrink:0;}
.ev-toggle .sw::after{content:''; position:absolute; top:2px; left:2px; width:8px; height:8px; border-radius:50%; background:var(--muted); transition:var(--dur-1);}
.ev-toggle.on{border-color:var(--teal); color:var(--teal); background:color-mix(in srgb,var(--teal) 16%,transparent);}
.ev-toggle.on .sw{background:color-mix(in srgb,var(--teal) 55%,transparent);}
.ev-toggle.on .sw::after{left:12px; background:var(--teal);}

.ev-row{display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--line); cursor:pointer;}
.ev-row:last-child{border-bottom:none;}
.ev-row:active{opacity:.75;}
.ev-thumb{width:44px; height:44px; border-radius:var(--r-md); flex:0 0 auto; overflow:hidden; border:1.5px solid var(--rz);
  background:var(--panel2); display:flex; align-items:center; justify-content:center; position:relative;}
.ev-thumb img{width:100%; height:100%; object-fit:cover;}
.ev-thumb .interro{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--rz);}
.ev-info{line-height:var(--lh);flex:1; min-width:0;}
.ev-nombre{font-family:var(--display); font-weight:600; font-size:var(--fs-2); display:flex; align-items:center; gap:6px; color:var(--text);}
.badge-nueva{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--teal);
  border:1px solid color-mix(in srgb,var(--teal) 45%,var(--line)); border-radius:99px; padding:1px 6px;}
.badge-pista{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:1px 6px;}
/* «Sin foto»: discreta a propósito (Jon). Solo texto apagado, sin borde ni
   relleno, para que no compita con «NUEVA». */
.badge-sinfoto{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); opacity:.8; font-weight:400;}
.ev-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ev-tipo{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; margin-right:.35em; color:var(--muted);}
.ev-tipo svg{width:100%; height:100%; display:block;}
/* Lista de un grupo que no se puede separar acercándose (22/09/2026):
   varios sitios en las mismas coordenadas o a pocos metros. Se abre como
   globo del mapa, así que hereda el ancho de .leaflet-popup-content. */
.mc-popup .leaflet-popup-content{margin:10px 12px; min-width:170px;}
.mc-lista-t{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; color:var(--muted);
  margin-bottom:7px; text-transform:uppercase;}
.mc-li{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent;
  border:none; border-top:1px solid var(--line); padding:9px 2px; cursor:pointer; color:var(--text);
  font-family:inherit; font-size:var(--fs-2);}
.mc-li:first-of-type{border-top:none;}
.mc-li:active{opacity:.6;}
.mc-li .pt{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.mc-li .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Aviso de "ahora mismo" (22/09/2026): un solo hueco arriba de la hoja de
   En vivo, compartido por la hora buena y la ventana del mes. Sin fondo
   llamativo salvo el filo dorado: tiene que leerse, no gritar. */
.ev-titulo-f{align-items:center; gap:10px;}
.ev-titulo-f .ct{display:block; margin-top:2px;}
/* «Filtros» de En vivo: el mismo botón de embudo que Mi colección, en pequeño */
.ev-fbtn{position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-full); padding:6px 12px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; touch-action:manipulation;}
.ev-fbtn svg{width:14px; height:14px;}
.ev-fbtn.con, .ev-fbtn.abierto{border-color:var(--teal); color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, var(--panel));}
.ev-fbadge{background:var(--teal); color:var(--on-teal); border-radius:var(--r-full); min-width:16px; height:16px; padding:0 4px; font-size:var(--fs-0); font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.fl-cap-fila{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.fl-mini{display:flex; align-items:center; gap:10px; padding:0 2px 8px;}
.fl-mini-t{font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.fl-mini-t b{color:var(--text); font-weight:600;}
.fl-barra-fina{flex:1 1 auto; height:3px; margin:0;}

/* Rareza local (22/09/2026): mismo hueco que la etiqueta de rareza
   nacional, pero con el color del tramo local. Se nota más porque lleva
   fondo: es lo que hace que un experto pare el scroll. */
.ev-aqui{background:color-mix(in srgb,var(--rz) 16%,transparent); border:1px solid var(--rz);
  border-radius:var(--r-full); padding:3px 7px; line-height:1.2; text-align:center; max-width:76px;}
.ev-chip-aqui.active{background:color-mix(in srgb,var(--gold) 20%,transparent); border-color:var(--gold); color:var(--gold);}
.ev-mas{display:block; width:100%; margin:12px 0 4px; text-align:center; font-size:var(--fs-2); font-weight:600;
  color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px; cursor:pointer; font-family:inherit;}
.ev-aqui-nota{margin:10px 0 0; padding:10px 12px; border-left:2px solid var(--rz);
  background:color-mix(in srgb,var(--rz) 9%,transparent); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-1); color:var(--muted); line-height:1.55;}
.ev-aqui-nota b{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.09em;
  color:var(--rz); margin-bottom:3px;}
.ev-rz{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--rz);
  border:1px solid color-mix(in srgb,var(--rz) 45%,var(--line)); border-radius:99px; padding:2px 7px; flex:0 0 auto;}
.ev-sec{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 0 5px;}
.ev-vacio{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; padding:26px 8px; line-height:1.7;}

.ev-volver{display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--teal);
  font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; padding:2px 0 10px; margin:0;}
.ev-volver svg{width:13px; height:13px;}
.ev-ficha-hero{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rz); height:132px;
  background:var(--panel2); display:flex; align-items:center; justify-content:center;}
.ev-ficha-hero img{width:100%; height:100%; object-fit:cover;}
.ev-ficha-hero.mist{background:color-mix(in srgb,var(--rz) 22%,var(--panel2));}
.ev-ficha-hero.mist img{filter:blur(14px) brightness(.45);}
.ev-ficha-hero .silueta{position:absolute; inset:0; width:100%; height:100%; padding:30px; color:var(--rz); opacity:.9; display:flex;}
.ev-ficha-hero .silueta svg{width:100%; height:100%;}
.ev-ficha-hero .interro{line-height:var(--lh-tight);position:relative; z-index:1; font-family:var(--display); font-weight:600; font-size:var(--fs-7); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55);}
.ev-ficha-hero .rzt{position:absolute; top:9px; left:9px; z-index:2; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em;
  text-transform:uppercase; color:#0e1a17; background:var(--rz); border-radius:99px; padding:3px 9px;}
.ev-ficha-nombre{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-5); margin-top:11px; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ev-ficha-sci{font-family:var(--display); font-style:italic; font-size:var(--fs-2); color:var(--muted);}
.ev-datos{display:flex; gap:8px; margin:12px 0 2px;}
.ev-dato{flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:9px 6px; text-align:center;}
.ev-dato b{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.ev-dato span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.ev-quien{display:flex; align-items:center; gap:8px; margin-top:11px; font-size:var(--fs-2); color:var(--text);}
.ev-quien .av{width:26px; height:26px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:var(--fs-1); color:var(--muted);}
.ev-acciones{display:flex; gap:8px; margin:13px 0 2px;}
.ev-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; border-radius:var(--r-md);
  padding:11px 10px; font-family:var(--display); font-weight:600; font-size:var(--fs-2); cursor:pointer;}
.ev-btn svg{width:15px; height:15px;}
.ev-btn.pri{background:var(--teal); color:var(--on-teal);}
.ev-btn.sec{background:transparent; color:var(--teal); border:1px solid var(--teal);}
.ev-aprox{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); text-align:center; margin:10px 0 2px; line-height:1.55;}
.cv2-dex-counts{display:flex;align-items:center;gap:7px;margin-top:5px;
  font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.cv2-stat{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.cv2-stat svg{width:12px;height:12px;display:block;}
.cv2-stat b{font-weight:600;color:var(--text);}
.cv2-stat.is-vistas svg{color:var(--teal);}
.cv2-stat.is-cap b{color:var(--gold);}
.cv2-dex-sep{opacity:.4;}
.cv2-dex-tot{margin-left:auto;opacity:.75;}
.home-pill-coleccion #homePillColeccionLabel{display:inline-flex;align-items:center;gap:5px;}
.home-pill-coleccion svg{width:13px;height:13px;display:block;color:var(--teal);}
.reg-hero-cap .cap-ball{display:inline-flex;vertical-align:-2px;margin-right:5px;}
.reg-hero-cap .cap-ball svg{width:14px;height:14px;display:block;}
@keyframes cv2ShineSwipe{0%,55%{transform:translateX(-100%);}100%{transform:translateX(220%);}}
@keyframes cv2DotPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,169,90,.7);}70%{box-shadow:0 0 0 5px rgba(214,169,90,0);}}
.cv2-casi-section{margin:0 0 4px;animation:cv2In var(--dur-2) var(--ease) .16s backwards;}
.cv2-casi-title{font-family:var(--display);font-size:var(--fs-2);font-weight:600;color:var(--text);padding:0 16px 8px;}
.cv2-casi-row{display:flex;flex-direction:row;gap:10px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.cv2-casi-row::-webkit-scrollbar{display:none;}
.cv2-casi-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.cv2-casi-pista{font:600 var(--fs-1) var(--mono);letter-spacing:.04em;color:var(--muted);white-space:nowrap;}
.cv2-casi-row.mas{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);}
.cv2-casi-card{flex-shrink:0;width:128px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;text-align:left;cursor:pointer;transition:opacity var(--dur-0);display:flex;flex-direction:column;gap:3px;-webkit-tap-highlight-color:transparent;}
.cv2-casi-card:active{opacity:.72;}
.cv2-casi-familia{border-color:color-mix(in srgb,var(--acc-lilac) 38%,transparent);background:color-mix(in srgb,var(--acc-lilac) 7%,var(--panel));}
.cv2-casi-dom{border-color:color-mix(in srgb,var(--gold) 38%,transparent);background:color-mix(in srgb,var(--gold) 5%,var(--panel));}
.cv2-casi-thumb{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--panel2);margin-bottom:3px;display:flex;align-items:center;justify-content:center;}
.cv2-casi-thumb img{width:100%;height:100%;object-fit:cover;}
.cv2-casi-fam-icon{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--acc-lilac) 18%,var(--panel));display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:var(--fs-2);font-weight:700;color:var(--acc-lilac);margin-bottom:3px;}
.cv2-casi-name{font-size:var(--fs-1);font-weight:600;font-family:var(--display);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:108px;}
.cv2-casi-sub{font-size:var(--fs-1);color:var(--muted);font-family:var(--mono);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.poke-thumb{position:relative; display:block; flex:0 0 auto; line-height:0}
.poke-dex-num{position:absolute;top:3px;left:3px;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);z-index:2;pointer-events:none;line-height:1;background:color-mix(in srgb,var(--panel) 72%,transparent);border-radius:3px;padding:1px 2px;}
.poke-card.rareza-border{
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rareza-color) 45%, transparent);
}
.poke-card.rareza-border.undiscovered{
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--rareza-color) 22%, transparent);
}
.poke-status-sub{display:block;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;max-width:100%;}
.poke-hint{display:flex;align-items:center;gap:3px;margin-top:3px;overflow:hidden;}
.poke-hint-hab{line-height:var(--lh);display:flex;align-items:center;flex-shrink:0;}
.poke-hint-habname{font-size:var(--fs-1);color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poke-hint-ahora{font-size:var(--fs-1);color:var(--gold);font-family:var(--mono);font-weight:600;white-space:nowrap;flex-shrink:0;}
.size-pequena .poke-dex-num,.size-pequena .poke-status-sub,.size-pequena .poke-hint{line-height:var(--lh);display:none;}
/* ==== COLECCIÓN V2 · Fase 1: cabecera fina (contador + interruptor + barra 2px) ==== */
.cv2-head{padding:8px 0 4px;}
.cv2-head-row{display:flex; align-items:center; gap:8px;}
.cv2-head-row .search-wrap{flex:1 1 auto; min-width:0;}
.cv2-head-counter{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-4); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; color:var(--text);}
.cv2-head-counter strong{color:var(--gold); font-weight:600;}
.cv2-head-counter s{text-decoration:none; color:var(--muted); font-weight:400; font-size:var(--fs-2);}
.cv2-head-seg{flex:0 0 auto; display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-full); padding:2px; gap:2px;}
.cv2-head-seg button{border:0; background:none; font-family:inherit; font-size:var(--fs-1); font-weight:600; color:var(--muted); padding:5px 11px; border-radius:var(--r-full); cursor:pointer; line-height:1; transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); white-space:nowrap;}
.cv2-head-seg button.on{background:var(--teal); color:var(--on-teal);}
.cv2-head-prog{display:flex; height:6px; background:var(--panel2); border-radius:99px; overflow:hidden; position:relative; margin-top:6px;}
.cv2-head-prog > span{display:block; position:absolute; left:0; top:0; height:100%; width:0; transition:width var(--dur-3) var(--ease);}
#bar{background:var(--gold); z-index:2;}
#barVistas{background:var(--teal); opacity:.5; z-index:1;}

/* ==== COLECCIÓN V2 · Fase 1: píldora flotante "Casi lo tienes" ==== */
/* La píldora va SIEMPRE por encima de la barra inferior.
   Antes tenía `bottom:76px` a pelo, que solo cuadraba en un móvil sin barra de
   gestos: en cuanto el sistema añade su franja inferior (safe-area-inset-bottom)
   la píldora quedaba pisada por la barra de navegación de la app y no se leía.
   Se usa el mismo cálculo que ya siguen el toast y el botón de subir, así que
   si algún día cambia la altura de la barra, esto se mueve solo.
   z-index por debajo de .bottom-nav a propósito: si alguna vez llegaran a
   tocarse, manda la barra de navegación. */
.cv2-floatpill{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bottom-nav-h,78px) + 12px + var(--sab)); z-index:40; display:flex; align-items:center; gap:9px; padding:10px 15px 10px 12px; border-radius:var(--r-full); background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); box-shadow:var(--sh-3); color:var(--text); cursor:pointer; font-size:var(--fs-2); touch-action:manipulation; max-width:calc(100vw - 32px); transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.cv2-floatpill:hover{transform:translateX(-50%) translateY(-1px); box-shadow:var(--sh-4);}
.cv2-floatpill:active{transform:translateX(-50%) scale(.97);}
.cv2-floatpill-dots{display:flex;}
.cv2-floatpill-dot{width:17px; height:17px; border-radius:50%; border:1.5px solid var(--panel); margin-left:-6px; background:linear-gradient(155deg, var(--gold), var(--teal));}
.cv2-floatpill-dot:first-child{margin-left:0;}
.cv2-floatpill b{font-weight:600; white-space:nowrap;}
.cv2-floatpill-count{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); background:var(--panel2); border-radius:var(--r-full); padding:1px 7px; line-height:1.5;}
@keyframes famRwLatido{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 50%,transparent);}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 0%,transparent);}}
@keyframes famRwLatidoVista{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 50%,transparent);}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--teal) 0%,transparent);}}
.cv2-letter{display:flex;align-items:center;gap:8px;padding:10px 0 4px;}
.cv2-letter-char{font-family:var(--display);font-size:var(--fs-3);font-weight:700;color:var(--text);flex-shrink:0;}
.cv2-letter-line{flex:1;height:1px;background:var(--line);}
.cv2-letter-count{font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);flex-shrink:0;}
@keyframes cv2In{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.cv2-casi-section{animation:none !important;}}

/* ==== PULIDO PREMIUM GLOBAL ====
   Detalles transversales de acabado: nada de esto cambia maquetación ni
   lógica, solo la sensación táctil y de calidad. Todo respeta el apagado
   global de animaciones ([data-motion="reducido"] / prefers-reduced-motion). */

/* 1. Sin destello gris del sistema al tocar (Android/iOS): el feedback ya
   lo dan los estados :active propios de cada botón. */
*{-webkit-tap-highlight-color:transparent; box-sizing:border-box}

/* 2. Selección de texto con el acento del tema. */
::selection{background:color-mix(in srgb, var(--teal) 30%, transparent);}

/* 3. Scrollbars finas y del tema, solo en escritorio (puntero fino). */
@media (pointer:fine){
  *{scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
  *::-webkit-scrollbar{width:9px; height:9px;}
  *::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px; border:2px solid transparent; background-clip:padding-box;}
  *::-webkit-scrollbar-track{background:transparent;}
}

/* 4. Entrada suave y unificada de TODOS los modales: velo que funde +
   sheet que sube y asienta. El sheet de la ficha de ave durante la
   transición "carta" (.carta-en-stage) queda fuera: ya lo anima el JS. */
.overlay, .tarot-overlay{animation:ovBackdropIn var(--dur-1) var(--ease);}
.overlay > .sheet:not(.carta-en-stage), .tarot-overlay > .tarot-sheet{animation:ovSheetIn var(--dur-2) var(--ease) backwards;}
@keyframes ovBackdropIn{from{opacity:0;} to{opacity:1;}}
@keyframes ovSheetIn{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
/* Repintar una ficha que ya está abierta no es abrirla (showDetail y
   moverDetalle, 01/10/2026): sin la entrada del fondo y de la hoja, y con
   las tarjetas a la vista sin su fundido. */
.overlay.sin-entrada, .overlay.sin-entrada > .sheet{animation:none !important;}
.sd-quieta .sd-card{opacity:1; transform:none; animation:none !important;}

/* 5. Hairline superior en los sheets: capta la luz, da sensación de pieza
   física (invisible sobre fondos claros, sutil en oscuros). */
.sheet{box-shadow:var(--sh-5), inset 0 1px 0 rgba(255,255,255,.06); position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); width:100%; max-width:460px;
  max-height:min(92dvh, calc(100dvh - 32px - var(--sat) - var(--sab)));
  overflow:auto; padding:22px 20px 24px}
.tarot-sheet{box-shadow:var(--sh-5), inset 0 1px 0 rgba(255,255,255,.06); position:relative; background:linear-gradient(160deg,var(--panel2),var(--panel)); color:var(--text); border:1px solid var(--line); border-radius:var(--r-xl); width:100%; max-width:480px;
  /* Antes 95dvh a secas: con muesca, la hoja se salía por arriba. */
  max-height:min(95dvh, calc(100dvh - 32px - var(--sat) - var(--sab)));
  overflow-y:auto; padding:26px 22px 28px}

/* ===================================================================
   A3 · PANTALLAS Y HOJAS (21/09/2026)
   -------------------------------------------------------------------
   El problema: treinta ventanas de la app aparecían como una tarjeta
   flotando en medio con el fondo difuminado y una "x" arriba a la
   derecha. Eso es una web. Una app de Android abre una PANTALLA (con
   flecha atrás) o una HOJA que sube desde abajo y se cierra arrastrando.

   No hace falta inventar nada, porque los dos patrones ya vivían aquí:
   .tarot-overlay.reg-fullscreen lo usa la pantalla de registrar un ave,
   y .explo-sheet lo usa Explorar en el mapa. Esto los generaliza para
   que cualquier overlay pueda pedirlos añadiendo UNA palabra a su clase:

     class="tarot-overlay pantalla"   -> pantalla completa con flecha atrás
     class="tarot-overlay hoja-inf"   -> hoja inferior arrastrable
     class="tarot-overlay"            -> tarjeta centrada de siempre

   Los DIÁLOGOS (confirmar, contraseña, denuncia, reporte, subir de
   nivel...) se quedan centrados A PROPÓSITO: una pregunta que bloquea es
   un diálogo centrado también en Android. Llevan la clase `top` y no se
   tocan.

   Quitar la palabra de la clase devuelve la ventana a como estaba, sin
   deshacer nada más: por eso se puede ir pantalla a pantalla.
   =================================================================== */

/* ---- Pantalla completa ---- */
.tarot-overlay.pantalla{align-items:stretch; justify-content:stretch; padding:0; background:var(--bg2); backdrop-filter:none; -webkit-backdrop-filter:none;}
.tarot-overlay.pantalla > .tarot-sheet{
  width:100%; max-width:none; height:100%; max-height:none;
  border:none; border-radius:0; box-shadow:none; background:var(--bg2);
  padding:0; overflow:hidden;              /* rueda el cuerpo, no la hoja */
  display:flex; flex-direction:column;
  animation:pantEntra var(--dur-2) var(--ease);
}
/* Cabecera fija: flecha atrás + titulillo + título, alineados a la
   izquierda como en Android (y como ya hace la pantalla de registrar). */
.pant-cab{display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:calc(var(--sat) + 10px) 14px 10px;
  background:var(--panel); border-bottom:1px solid var(--line);}
.pant-cab-txt{flex:1 1 auto; min-width:0;}
.pant-cab .tarot-eyebrow{text-align:left; margin:0 0 1px;}
.pant-cab .tarot-title{text-align:left; margin:0; font-size:var(--fs-4);}
/* La "x" se convierte en flecha atrás: mismo botón, mismo manejador de
   cierre, distinto sitio y distinto dibujo. Y 44px, que es lo que pide
   un dedo (antes eran 34). */
.pantalla .tarot-close{position:static; flex:0 0 auto; width:44px; height:44px;
  border-radius:var(--r-md); font-size:0;}
.pantalla .tarot-close:hover{transform:none; border-color:var(--teal);}
.pantalla .tarot-close:active{transform:translateX(-2px);}
.pantalla .tarot-close svg{width:19px; height:19px;}
.pant-cuerpo{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 18px calc(18px + var(--sab));}
.pant-cuerpo > .tarot-sub{text-align:left;}
@keyframes pantEntra{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;}}

/* ---- Hoja inferior arrastrable ---- */
.tarot-overlay.hoja-inf{align-items:flex-end; padding:0;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.tarot-overlay.hoja-inf > .tarot-sheet{
  width:100%; max-width:none;
  max-height:min(78dvh, calc(100dvh - 72px - var(--sat)));
  border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:none;
  padding:24px 20px calc(24px + var(--sab));
  overscroll-behavior:contain;
  animation:hojaSube var(--dur-2) var(--ease);
  will-change:transform;
}
/* Tirador. Es la señal de "esto se arrastra"; sin él nadie lo intenta. */
.tarot-overlay.hoja-inf > .tarot-sheet::before{
  content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:38px; height:4px; border-radius:var(--r-full);
  background:var(--muted); opacity:.3; pointer-events:none;}
.hoja-inf .tarot-close{top:14px; right:12px;}
.hoja-inf.arrastrando > .tarot-sheet{animation:none; transition:none;}
@keyframes hojaSube{from{transform:translateY(100%);} to{transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .tarot-overlay.pantalla > .tarot-sheet, .tarot-overlay.hoja-inf > .tarot-sheet{animation:none;}
}
html[data-motion="reducido"] .tarot-overlay.pantalla > .tarot-sheet,
html[data-motion="reducido"] .tarot-overlay.hoja-inf > .tarot-sheet{animation:none;}

/* 6. Respuesta táctil homogénea en botones que aún no la tenían. */
.add:active, .auth-btn:active, .tarot-btn-primary:active, .tarot-btn-sec:active,
.filtros-btn:active, .iobtn:active, .btn-mini:active, .toggle-chip:active,
.identificar-btn:active, .io button:active, .home-pill:active, .comm-card:active,
.theme-swatch:active, .home-link:active{transform:scale(.975);}

/* 7. Brillo ocasional en la barra de progreso de la colección: mismo
   lenguaje que los segmentos de dominación de la ficha (sd-domina-seg). */
#bar{overflow:hidden; background:var(--gold)}
#bar::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform:translateX(-100%); animation:barSheen 5s ease-in-out infinite;}
@keyframes barSheen{0%,60%{transform:translateX(-100%);} 85%,100%{transform:translateX(100%);}}

/* 8. Foco visible coherente para navegación por teclado. */
/* Foco visible coherente para navegación por teclado/mando. La base se envuelve
   en :where() para que su especificidad sea 0: cualquier componente puede
   personalizar su foco sin pelear con ella. Los campos de texto muestran el
   foco SIEMPRE (:focus), también al tocarlos, para que se sepa en qué campo
   se está escribiendo. */
:where(button, a[href], input, select, textarea, [role="button"], [role="switch"], [role="tab"], [tabindex]:not([tabindex="-1"]), summary):focus-visible{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea):focus{
  outline:var(--focus-w) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}

/* Miniaturas y celdas que recortan su contenido con overflow:hidden: el anillo
   hacia fuera podría quedar oculto, así que se sustituye por un anillo hacia
   dentro (box-shadow inset), que nunca se recorta. */
.thumb:focus-visible, .sd-photo-cell:focus-visible, .poke-foto-picker button:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 var(--focus-w) var(--focus-color);
}

/* 9. Tipografía: mejores ligaduras/kerning en los títulos display. */
body{text-rendering:optimizeLegibility; margin:0; background:radial-gradient(120% 70% at 50% -10%, var(--bg1) 0%, var(--bg2) 60%) fixed; color:var(--text); min-height:100dvh; overflow-x:hidden; font-family:system-ui,-apple-system,Segoe UI,sans-serif; -webkit-font-smoothing:antialiased}

/* 11. Panel "Explorar" del mapa: cabeceras de sección (observatorios y
   comunidad separados de las aves cercanas) y tarjeta de ruta cercana. */
.mv-sheet-sec{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:12px 0 4px; padding-bottom:4px; border-bottom:1px solid var(--line);}
.mv-sheet-sec:first-child{margin-top:2px;}

/* ===== Correcciones de la comunidad sobre los puntos del mapa ===== */
.poi-corr-cta{margin:18px 0 4px;}
.poi-corr-btn{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:11px 12px; border-radius:var(--r-md); border:1px dashed var(--line); background:var(--panel2); color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);}
.poi-corr-btn:hover{border-color:var(--teal); color:var(--teal);}
.poi-corr-btn:active{transform:scale(.985);}
.poi-corr-btn svg{width:14px; height:14px; flex:0 0 auto;}
.poi-corr-ayuda{margin:0 0 14px; font-size:var(--fs-2); line-height:1.5; color:var(--muted);}
.poi-corr-estado{min-height:16px; margin-top:8px; font-family:var(--mono); font-size:var(--fs-1); color:var(--gold);}
/* --- Pantalla de moderación --- */
.poi-corr-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:10px; box-shadow:var(--sh-2);}
.poi-corr-head{display:flex; flex-direction:column; gap:1px; margin-bottom:9px;}
.poi-corr-head b{font-family:var(--display); font-size:var(--fs-3); font-weight:600;}
.poi-corr-head span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.poi-corr-fila{display:grid; grid-template-columns:1fr; gap:2px; padding:7px 0; border-top:1px solid var(--line); font-size:var(--fs-2);}
.poi-corr-campo{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.poi-corr-antes{color:var(--muted); text-decoration:line-through; word-break:break-word;}
.poi-corr-ahora{color:var(--teal); font-weight:600; word-break:break-word;}
.poi-corr-antes i, .poi-corr-ahora i{opacity:.6; font-style:italic; text-decoration:none;}
.poi-corr-nota{margin-top:9px; padding:8px 10px; border-radius:var(--r-sm); background:var(--panel2); font-size:var(--fs-2); line-height:1.45;}
.poi-corr-meta{margin-top:9px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.poi-corr-acciones{display:flex; gap:8px; margin-top:11px;}
.poi-corr-acciones .popbtn{flex:1;}

/* ===== Proponer un punto nuevo para el mapa (poiPropuestas) =====
   Mismo lenguaje que el resto: tokens, radios y sombras de la escala.
   La hoja vive dentro de .tarot-sheet, así que aquí solo va lo propio. */
.pnp-meter{background:linear-gradient(158deg,var(--panel2),var(--panel) 72%); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px 14px; margin-bottom:12px; box-shadow:var(--sh-1);}
.pnp-meter-t{display:flex; align-items:baseline; gap:8px; margin-bottom:8px;}
.pnp-meter-t b{font-size:var(--fs-2); font-weight:600;}
.pnp-meter-t em{font-style:normal; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);
  margin-left:auto; font-variant-numeric:tabular-nums;}
.pnp-bar{height:7px; border-radius:var(--r-full); background:var(--line); overflow:hidden; position:relative;}
.pnp-bar > i{display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width var(--dur-3) var(--ease);}
.pnp-bar > u{position:absolute; top:0; width:1.5px; height:100%; background:var(--panel); opacity:.9;}
.pnp-meter-msg{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); margin-top:6px; line-height:1.45;}
.pnp-meter-msg b{color:var(--gold); font-weight:700;}

.pnp-sec{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:9px; overflow:hidden; box-shadow:var(--sh-1);}
.pnp-sec-h{display:flex; align-items:center; gap:11px; width:100%; padding:12px 13px; background:none;
  border:0; text-align:left; font:inherit; color:inherit; cursor:pointer;}
.pnp-sec-h:hover{background:var(--panel2);}
.pnp-sec-n{width:28px; height:28px; flex:0 0 auto; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--panel2); color:var(--muted);}
.pnp-sec-n svg{width:15px; height:15px;}
.pnp-sec.hecha .pnp-sec-n{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok);}
.pnp-sec-t{flex:1; min-width:0;}
.pnp-sec-t b{display:block; font-size:var(--fs-2); font-weight:600;}
.pnp-sec-t em{display:block; font-style:normal; font-size:var(--fs-0); color:var(--muted); margin-top:2px;
  font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnp-req{font:700 8.5px/1 var(--mono); letter-spacing:.08em; background:var(--teal); color:#fff;
  border-radius:4px; padding:3px 5px; flex:0 0 auto;}
.pnp-xp{font:700 9.5px/1 var(--mono); color:var(--gold); flex:0 0 auto;}
.pnp-caret{color:var(--muted); flex:0 0 auto; width:16px; height:16px;
  transition:transform var(--dur-2) var(--ease);}
.pnp-sec.closed .pnp-caret{transform:rotate(-90deg);}
.pnp-sec-body{border-top:1px solid var(--line); padding:13px; background:var(--ink);}
.pnp-sec.closed .pnp-sec-body{display:none;}

.pnp-f{margin-bottom:12px;}
.pnp-f:last-child{margin-bottom:0;}
.pnp-f > label{display:block; font-size:var(--fs-1); font-weight:600; margin-bottom:5px;}
.pnp-f > label span{font-weight:400; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0);}
.pnp-hint{font-size:var(--fs-0); color:var(--muted); margin:4px 0 0; line-height:1.45;}
.pnp-count{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); text-align:right; margin-top:3px;}
.pnp-count.bien{color:#3E9E6B;}
.pnp-row{display:grid; grid-template-columns:1fr 1fr; gap:9px;}

.pnp-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pnp-cat{background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:11px 6px 9px; text-align:center; cursor:pointer; font:inherit; color:inherit;
  transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);}
.pnp-cat:active{transform:scale(.97);}
.pnp-cat-ic{width:34px; height:34px; margin:0 auto 6px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c);}
.pnp-cat-ic svg{width:18px; height:18px;}
.pnp-cat b{display:block; font-size:10.5px; font-weight:600; line-height:1.25;}
.pnp-cat.on{border-color:var(--c); background:color-mix(in srgb,var(--c) 7%,var(--panel));}
.pnp-cat.on .pnp-cat-ic{background:var(--c); color:#fff;}

.pnp-chips{display:flex; flex-wrap:wrap; gap:6px;}
.pnp-chip{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-full);
  padding:7px 12px; font:600 11.5px/1 inherit; color:var(--muted); cursor:pointer;
  transition:all var(--dur-1) var(--ease);}
.pnp-chip.on{background:var(--c,var(--teal)); border-color:var(--c,var(--teal)); color:#fff;}

.pnp-seg{display:flex; background:var(--panel2); border-radius:var(--r-md); padding:3px; gap:2px;}
.pnp-seg button{flex:1; border:0; background:none; border-radius:var(--r-sm); padding:8px 4px;
  font:600 11.5px/1.3 inherit; color:var(--muted); cursor:pointer; transition:all var(--dur-1) var(--ease);}
.pnp-seg button.on{background:var(--panel); color:var(--text); box-shadow:var(--sh-1);}

.pnp-ll{display:flex; align-items:center; gap:8px; background:var(--panel2); border-radius:var(--r-md);
  padding:9px 11px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.pnp-ll svg{width:15px; height:15px; flex:0 0 auto; color:var(--c,var(--teal));}
.pnp-ll b{color:var(--text); font-weight:600; letter-spacing:.02em;}

.pnp-esp-sel{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px;}
.pnp-esp-tag{display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb,var(--teal) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 32%,transparent); border-radius:var(--r-full);
  padding:5px 6px 5px 11px; font-size:11.5px; font-weight:600; color:var(--teal);}
.pnp-esp-tag button{width:17px; height:17px; border:0; border-radius:50%;
  background:color-mix(in srgb,var(--teal) 18%,transparent); color:var(--teal); font-size:12px;
  line-height:1; cursor:pointer; padding:0; display:grid; place-items:center;}
.pnp-esp-lista{max-height:170px; overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--panel);}
.pnp-esp-row{display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; background:none;
  border:0; border-bottom:1px solid var(--panel2); text-align:left; font:inherit; color:inherit; cursor:pointer;}
.pnp-esp-row:last-child{border-bottom:0;}
.pnp-esp-row:hover{background:var(--panel2);}
.pnp-esp-row b{flex:1; font-size:12.5px; font-weight:600;}
.pnp-esp-row i{font-style:italic; font-family:var(--display); font-size:11px; color:var(--muted);}

.pnp-aviso{display:flex; gap:9px; background:color-mix(in srgb,var(--gold) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent); border-left:3px solid var(--gold);
  border-radius:var(--r-md); padding:11px 12px; margin-top:10px;}
.pnp-aviso svg{width:17px; height:17px; flex:0 0 auto; color:var(--gold); margin-top:1px;}
.pnp-aviso p{margin:0; font-size:11.8px; line-height:1.5;}
.pnp-dup{background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent); border-radius:var(--r-md);
  padding:11px 12px; margin-bottom:12px;}
.pnp-dup-t{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--gold); margin-bottom:8px;}
.pnp-dup-t svg{width:15px; height:15px; flex:0 0 auto;}
.pnp-dup-row{display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 10px; margin-bottom:6px;}
.pnp-dup-b{flex:1; min-width:0;}
.pnp-dup-b b{display:block; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.pnp-dup-b em{display:block; font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted);}
.pnp-dup-km{font:700 10px/1 var(--mono); color:var(--gold); flex:0 0 auto;}
.pnp-dup p{margin:0; font-size:11.5px; line-height:1.45; color:var(--muted);}

/* --- estado de mis propuestas --- */
.pnp-est{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:13px; margin-bottom:10px; box-shadow:var(--sh-1);}
.pnp-est-h{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.pnp-est-ic{width:32px; height:32px; flex:0 0 auto; border-radius:var(--r-sm); display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c);}
.pnp-est-ic svg{width:17px; height:17px;}
.pnp-est-t{flex:1; min-width:0;}
.pnp-est-t b{display:block; font-family:var(--display); font-size:var(--fs-2); font-weight:600; line-height:1.25;}
.pnp-est-t em{display:block; font-style:normal; font-family:var(--mono); font-size:var(--fs-0);
  color:var(--muted); margin-top:2px;}
.pnp-badge{font:700 9px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase;
  border-radius:var(--r-full); padding:5px 9px; flex:0 0 auto; white-space:nowrap;}
.pnp-b-pend{background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--gold);}
.pnp-b-ok{background:color-mix(in srgb,#3E9E6B 18%,transparent); color:#3E9E6B;}
.pnp-b-no{background:color-mix(in srgb,#C0524A 16%,transparent); color:#C0524A;}
.pnp-b-cam{background:color-mix(in srgb,var(--teal) 16%,transparent); color:var(--teal);}
.pnp-pasos{display:flex; align-items:flex-start; margin:6px 0 2px;}
.pnp-paso{flex:1; text-align:center; position:relative;}
.pnp-paso-p{width:19px; height:19px; margin:0 auto 5px; border-radius:50%; background:var(--line);
  display:grid; place-items:center; color:var(--panel); position:relative; z-index:2;}
.pnp-paso-p svg{width:11px; height:11px;}
.pnp-paso span{font-family:var(--mono); font-size:9px; color:var(--muted); display:block; line-height:1.3;}
.pnp-paso::before{content:''; position:absolute; top:9px; left:-50%; width:100%; height:2px;
  background:var(--line); z-index:1;}
.pnp-paso:first-child::before{display:none;}
.pnp-paso.on .pnp-paso-p{background:#3E9E6B; color:#fff;}
.pnp-paso.on::before{background:#3E9E6B;}
.pnp-paso.act .pnp-paso-p{background:var(--gold); color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent);}
.pnp-paso.act span{color:var(--gold); font-weight:700;}
.pnp-nota{background:var(--panel2); border-radius:var(--r-sm); padding:9px 11px; margin-top:10px;
  font-size:11.8px; line-height:1.5;}
.pnp-nota b{font-family:var(--display);}

/* --- tarjeta del panel de validación --- */
.pnp-mod-cab{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.pnp-mod-ic{width:34px; height:34px; flex:0 0 auto; border-radius:var(--r-sm); display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent); color:var(--c);}
.pnp-mod-ic svg{width:18px; height:18px;}
.pnp-mod-cal{display:flex; gap:1.5px; flex:0 0 auto;}
.pnp-mod-cal i{width:4px; height:10px; border-radius:1px; background:var(--line); display:block;}
.pnp-mod-cal i.on{background:var(--gold);}
.pnp-flag{display:flex; gap:8px; border-radius:var(--r-sm); padding:8px 10px; font-size:11.6px;
  line-height:1.45; margin-bottom:6px;}
.pnp-flag svg{width:15px; height:15px; flex:0 0 auto; margin-top:1px;}
.pnp-flag.ok{background:color-mix(in srgb,#3E9E6B 12%,transparent); color:#3E9E6B;}
.pnp-flag.warn{background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold);}
.pnp-flag.err{background:color-mix(in srgb,#C0524A 12%,transparent); color:#C0524A;}
.pnp-mod-campo{padding:7px 0; border-top:1px solid var(--line);}
.pnp-mod-campo > b{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
.pnp-mod-campo p{margin:0; font-size:var(--fs-2); line-height:1.5;}
.pnp-mod-campo p.vacio{color:var(--muted); font-style:italic;}
.pnp-mod-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
.pnp-com-badge{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono);
  font-size:var(--fs-0); color:var(--teal);}
.pnp-com-badge svg{width:12px; height:12px;}
/* ===== Progreso de premium por aportaciones ===== */
.aportes-prog{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px 13px; margin:12px 0;}
.aportes-prog-t{display:flex; align-items:baseline; gap:8px; margin-bottom:7px;}
.aportes-prog-t b{font-family:var(--mono); font-size:var(--fs-3); font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums;}
.aportes-prog-t em{font-style:normal; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-left:auto;}
.aportes-prog-bar{height:6px; border-radius:var(--r-full); background:var(--line); overflow:hidden;}
.aportes-prog-bar > i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--gold));}
.aportes-prog-pie{margin-top:7px; font-size:var(--fs-1); line-height:1.45; color:var(--muted);}
.admin-pend-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-left:8px; padding:0 6px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700;}
/* Campo editable del diff: es lo que se publica al aprobar, no lo que mandó
   el usuario, así que tiene que verse claramente como algo que se puede tocar. */
.poi-corr-edit{margin-top:3px; font-size:var(--fs-2);}
.inf-seg{margin-bottom:12px; width:100%;}
.inf-seg button{flex:1; justify-content:center;}
.inf-n{font-family:var(--mono); font-size:var(--fs-0); opacity:.75; margin-left:4px;}

/* ==== LOGROS PREMIUM ==== */
.ach-hero{display:flex; align-items:center; gap:16px; background:linear-gradient(150deg, var(--panel2), var(--panel) 78%); border:1px solid var(--line); border-radius:var(--r-xl); padding:16px 18px; margin-bottom:14px; box-shadow:var(--sh-3); animation:cv2In var(--dur-2) var(--ease) backwards;}
.ach-ring{position:relative; width:74px; height:74px; flex:0 0 auto;}
.ach-ring svg{transform:rotate(-90deg); display:block;}
.ach-ring .ach-ring-bg{stroke:var(--panel2);}
.ach-ring .ach-ring-fg{stroke:url(#achGrad); stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease);}
.ach-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ach-ring-pct{font-family:var(--display); font-weight:800; font-size:var(--fs-4); color:var(--text); line-height:1;}
.ach-ring-lbl{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-top:2px;}
.ach-hero-body{line-height:var(--lh);flex:1; min-width:0;}
.ach-hero-title{line-height:var(--lh-tight);font-family:var(--display); font-weight:800; font-size:var(--fs-5); color:var(--text); margin:0 0 2px;}
.ach-hero-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.5;}
.ach-hero-sub b{line-height:var(--lh);color:var(--gold);}
.ach-block{margin:0 0 8px;}
.ach-block-head{display:flex; align-items:center; gap:8px; margin:18px 2px 10px;}
.ach-block-ico{width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--gold);}
.ach-block-ico svg{width:100%; height:100%;}
.ach-block-title{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); flex:1 1 auto; min-width:0;}
.ach-block-count{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); white-space:nowrap;}
.ach-block-head.gold .ach-block-title{color:var(--gold);}
.ach-list{display:flex; flex-direction:column; gap:8px;}
.ach-card{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; cursor:pointer; color:inherit; font:inherit; position:relative; overflow:hidden; transition:transform var(--dur-0) var(--ease), border-color var(--dur-0) var(--ease), box-shadow var(--dur-0) var(--ease); animation:achCardIn var(--dur-2) var(--ease-pop) backwards;}
@keyframes achCardIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.ach-card:hover{border-color:var(--teal); transform:translateY(-1px); box-shadow:var(--sh-3);}
.ach-card:active{transform:scale(.99);}
.ach-ico{flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background:var(--panel2); border:1px solid var(--line); color:var(--muted); font-size:var(--fs-6);}
.ach-ico svg{width:22px; height:22px;}
.ach-card.done .ach-ico{background:linear-gradient(135deg, rgba(214,169,90,.9), rgba(184,132,62,.9)); border-color:transparent; color:var(--on-gold); box-shadow:0 6px 14px -6px rgba(214,169,90,.6);}
.ach-card.claim{border-color:var(--gold); background:linear-gradient(160deg, color-mix(in srgb,var(--gold) 12%, var(--panel)), var(--panel) 80%); box-shadow:0 10px 26px -14px rgba(214,169,90,.5);}
.ach-card.claim .ach-ico{background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 75%, white), var(--gold)); border-color:transparent; color:var(--on-gold);}
.ach-main{flex:1 1 auto; min-width:0;}
.ach-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.ach-name{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ach-xp{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; color:var(--gold); white-space:nowrap;}
.ach-desc{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.4; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ach-bar-row{display:flex; align-items:center; gap:8px; margin-top:7px;}
.ach-bar{flex:1 1 auto; height:6px; border-radius:99px; background:var(--panel2); overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 60%, transparent);}
.ach-bar > span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--teal), var(--gold)); transition:width .8s var(--ease);}
.ach-frac{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums;}
.ach-done-line{display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-family:var(--mono); font-size:var(--fs-1); color:var(--gold);}
.ach-done-line svg{width:13px; height:13px;}
.ach-claim-btn{flex:0 0 auto; align-self:center; border:none; background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 75%, white), var(--gold)); color:var(--on-gold); font-family:var(--display); font-weight:700; font-size:var(--fs-2); padding:9px 15px; border-radius:99px; cursor:pointer; box-shadow:0 8px 18px -8px rgba(214,169,90,.7); transition:transform var(--dur-0) var(--ease);}
.ach-claim-btn:active{transform:scale(.94);}
.ach-card.claim::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform:translateX(-100%); animation:achClaimSheen 3.2s ease-in-out infinite; pointer-events:none;}
@keyframes achClaimSheen{0%,60%{transform:translateX(-100%);} 85%,100%{transform:translateX(120%);}}
.ach-card.big{padding:14px 16px;}
.ach-card.big .ach-ico{width:50px; height:50px;}
.ach-card.big .ach-name{font-size:var(--fs-3); white-space:normal;}
.ach-card.big .ach-bar{height:8px;}
.ach-card.locked{opacity:.72;}
.ach-card.locked .ach-bar > span{background:var(--muted); opacity:.5;}
@media (prefers-reduced-motion:reduce){ .ach-card,.ach-hero{animation:none !important;} .ach-card.claim::after{display:none;} .ach-bar>span,.ach-ring-fg{transition:none !important;} }

/* ===================== REDISEÑO NAVEGACIÓN (solo aspecto) ===================== */

/* Barra inferior estilo Instagram */
/* Alto real de la barra sin contar el safe-area: borde 1 + padding 8+8 +
   item 61 (icono 24 + etiqueta ~14 + punto 5 + 2 huecos de 4 + padding 10).
   Lo usa .scroll-top-btn para colocarse justo encima. */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:45;
  width:100%; max-width:760px;            /* mismo ancho que .main */
  display:flex; align-items:stretch;
  padding:8px 6px calc(8px + var(--sab));
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.bottom-nav-item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:none; cursor:pointer; padding:6px 2px 4px; color:var(--muted);
  font-family:var(--display); font-weight:600; font-size:var(--fs-1); touch-action:manipulation;
  transition:color var(--dur-1) var(--ease), transform var(--dur-0) var(--ease);
}
.bottom-nav-item:active{ transform:scale(.9); }
.bottom-nav-item svg{ width:24px; height:24px; transition:transform var(--dur-1) var(--ease); }
.bottom-nav-item .bn-dot{ width:5px; height:5px; border-radius:50%; background:transparent; transition:background var(--dur-1) var(--ease); }
.bottom-nav-item.on{ color:var(--teal); }
.bottom-nav-item.on svg{ transform:translateY(-1px); }
.bottom-nav-item.on .bn-dot{ background:var(--teal); }
/* (El número de premios de Logros sobre su icono de la barra se fue con
   Logros, 07/10/2026: ahora es la píldora de la fila Logros del menú de tu
   foto, .pmenu-pill.) */

/* Deja hueco para que el contenido no quede tapado por la barra */
.main{padding-bottom:calc(92px + var(--sab)) !important; max-width:760px; margin:0 auto; padding:12px 18px 90px}
body.home-active .main{padding-bottom:calc(86px + var(--sab)) !important}
@media (min-width:1024px){ body.home-active .main{ padding-bottom:calc(86px + var(--sab)) !important; } }

/* Las secciones ahora viven en la barra inferior: se ocultan del inicio las tarjetas
   duplicadas y la fila de "Acerca de mí" + "Informar de un error" (los elementos
   siguen en el DOM, solo se ocultan; NO se eliminan). Logros/Misiones también se
   oculta aquí: ya se accede desde el perfil (btnLogrosPerfil / ppStatLogros). */
#homeGrid #btnColeccion,
#homeGrid #btnMapa,
#homeGrid #btnJuegos,
#homeGrid #btnMisionesHome,
#homeGrid .home-bottom-row{ display:none !important; }
/* Con esos cuatro ocultos y Pendientes ya movido a la lista de tarjetas, la
   fila de círculos queda vacía: si no se oculta, sigue ocupando una fila del
   grid y deja un hueco de la nada bajo las tarjetas. */
#homeGrid #homeSectionsGrid{ display:none !important; }

/* Topbar: grupo izquierdo (perfil + amigos) y botón "Acerca de mí" con logo */
.topbar-left{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.topbar-btn-acerca{ padding:0; overflow:hidden; }
.topbar-btn-acerca img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
/* FIX QA: en los anchos de móvil más habituales (360-412px CSS) los seis
   botones de 42px con sus huecos no dejaban sitio al logotipo, que salía
   cortado ("eD" en un Galaxy de 360px, "AveDe" en un Pixel de 412px). Se
   compactan botones, huecos y márgenes y se baja un punto el logotipo; por
   debajo de 350px (iPhone SE de primera generación) un escalón más. */
@media (max-width:440px){
  .head{ padding-left:12px; padding-right:12px; }
  .topbar{ gap:6px; }
  .topbar-left, .topbar-right{ gap:5px; }
  .topbar-btn{ width:38px; height:38px; font-size:var(--fs-4); }
  .topbar-title{ font-size:20px; }
}
@media (max-width:350px){
  .topbar-left, .topbar-right{ gap:4px; }
  .topbar-btn{ width:34px; height:34px; font-size:var(--fs-3); }
  .topbar-title{ font-size:17px; }
}

/* ===================================================================
   COMPONENTES DE INICIO, JUEGOS Y LOGROS
   ===================================================================
   Tarjetas de registro del inicio ("Tengo una foto / ...la añado luego /
   Lo he visto / No sé qué ave era"), chips de nivel/racha/colección,
   pantalla de Juegos y cuadrícula de Logros.

   Antes estas cuatro zonas tenían paleta y tipografía propias, con su
   prefijo de variables aparte: blanco fijo con tinta azul y dos familias
   descargadas solo para ellas. Por eso se quedaban igual en los 12 fondos
   y 8 acentos de Ajustes, y en tema oscuro eran tarjetas blancas flotando
   sobre verde oscuro. Ahora todo sale de
   los tokens del tema (--panel, --line, --text, --muted, --teal,
   --acc-*, --on-*, --sh-*), y por eso obedecen al ajuste como el resto.

   Se conserva lo que el rediseño trajo de bueno: radio grande (--r-xl),
   sombra en dos capas (contacto --sh-1 + ambiente --sh-2), título de
   17px sobre subtítulo de 13px, iconos en contenedor con tinte y
   degradado en la tarjeta primaria. Los tintes se construyen con
   color-mix sobre 'transparent' para que se compongan encima de la
   superficie que haya detrás y funcionen igual en los 12 fondos.
   Ningún selector, id, atributo data-* ni JS cambia: solo de dónde
   salen los colores y las fuentes. */

/* -- Tarjetas del inicio (.reg-path-card): base compartida -- */
.reg-path-card{position:relative; overflow:visible; border-radius:var(--r-xl); transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); display:flex; align-items:center; gap:14px; background:var(--panel); border:1.5px solid var(--line); padding:18px 16px; cursor:pointer; color:var(--text); text-align:left; touch-action:manipulation; min-height:96px; box-sizing:border-box; opacity:0; transform:translateY(10px); animation:regCardIn var(--dur-3) var(--ease) forwards; -webkit-tap-highlight-color:transparent}




.reg-path-chev{transition:transform var(--dur-1) var(--ease); flex:0 0 auto; color:var(--muted); opacity:.3; margin-left:4px; width:16px; height:16px}
.reg-path-card:hover .reg-path-chev{ transform:translateX(3px); }
.reg-path-icon{width:48px; height:48px; border-radius:var(--r-lg); flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.reg-path-icon svg{width:24px; height:24px; stroke-width:1.9}
.reg-path-title{line-height:var(--lh-tight); font-family:var(--display); font-weight:500; font-size:var(--fs-4); display:flex; align-items:center; gap:8px; color:var(--text)}
.reg-path-sub{font-family:var(--sans); font-size:var(--fs-2); line-height:1.5; color:var(--muted); margin-top:4px; font-weight:400; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* -- Secundarias: Tengo la foto luego / Lo he visto / No sé qué ave era -- */
.reg-path-card:not(.reg-path-foto){
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--sh-1), var(--sh-2);
}
.reg-path-card:not(.reg-path-foto):hover{
  border-color:var(--teal);
  box-shadow:var(--sh-1), var(--sh-3);
}
.reg-path-card:not(.reg-path-foto) .reg-path-title{ color:var(--text); }
.reg-path-card:not(.reg-path-foto) .reg-path-sub{line-height:var(--lh); color:var(--muted); }
.reg-path-card:not(.reg-path-foto) .reg-path-chev{ color:var(--muted); opacity:1; }
/* Un tinte distinto por tarjeta secundaria (ámbar / celeste / lila) */
.reg-path-card:not(.reg-path-foto) .reg-path-icon-amber{ background:color-mix(in srgb, var(--acc-amber) 16%, transparent); color:var(--acc-amber); }
.reg-path-card:not(.reg-path-foto) .reg-path-icon-teal{ background:color-mix(in srgb, var(--acc-sky) 16%, transparent); color:var(--acc-sky); }
.reg-path-card:not(.reg-path-foto) .reg-path-icon-violet{ background:color-mix(in srgb, var(--acc-lilac) 16%, transparent); color:var(--acc-lilac); }

/* -- Primaria: Tengo una foto -- */
.reg-path-card.reg-path-foto{background:var(--grad-primary); border-color:transparent; box-shadow:0 4px 10px color-mix(in srgb, var(--teal-deep) 22%, transparent),
             0 18px 36px -14px color-mix(in srgb, var(--teal-deep) 48%, transparent)}







.reg-path-card.reg-path-foto .reg-path-title{ font-family:var(--display); color:var(--on-teal); }
.reg-path-card.reg-path-foto .reg-path-sub{line-height:var(--lh); font-family:var(--sans); color:color-mix(in srgb, var(--on-teal) 80%, transparent); }
.reg-path-card.reg-path-foto .reg-path-icon-gold{ background:color-mix(in srgb, var(--on-teal) 20%, transparent); color:var(--on-teal); }
.reg-path-card.reg-path-foto .reg-path-chip{
  background:var(--acc-amber); color:var(--on-amber); border:none; font-family:var(--mono); font-weight:700;
}
.reg-path-card.reg-path-foto .reg-path-chev{ color:color-mix(in srgb, var(--on-teal) 85%, transparent); opacity:1; }
.reg-path-card.reg-path-foto::before{
  content:"Recomendado";
  position:absolute; top:-9px; left:20px;
  background:var(--acc-amber); color:var(--on-amber);
  font-family:var(--mono); font-size:var(--fs-0); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-full);
  box-shadow:0 2px 6px color-mix(in srgb, var(--acc-amber) 45%, transparent);
}

/* -- Micro-interacción compartida: elevar tarjeta en hover -- */
.reg-path-card:hover{transform:translateY(-2px); box-shadow:var(--sh-4)}

/* -- Chips de estadística (nivel / racha / colección) -- */
.home-pill{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); display:flex; align-items:center; gap:6px; padding:6px 10px; color:var(--text); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; white-space:nowrap; flex:0 0 auto}




.home-pill:hover{ transform:translateY(-1px); }
.home-pill-label, #homePillColeccionLabel{
  font-family:var(--mono); font-weight:700; color:var(--text);
}
/* El distintivo de racha se sale del patrón: no va sobre --panel sino sobre un
   fondo --gold, así que su tinta es --on-gold (la fija su propia regla más
   arriba) y NO --text, que sobre dorado se quedaría en 1.7:1. Aquí solo se
   unifica la tipografía. */
#homePillRachaLabel{font-family:var(--mono); font-weight:700; position:absolute; top:-1px; right:-1px; min-width:19px; height:17px; padding:0 5px; border-radius:0 0 0 var(--r-sm); background:var(--gold); color:var(--on-gold); font-size:var(--fs-1); display:flex; align-items:center; justify-content:center; gap:2px; z-index:2}
.home-pill-racha svg{stroke-width:1.9; width:14px; height:14px; color:#E8703A; flex:0 0 auto}

@media (prefers-reduced-motion: reduce){
  .reg-path-card, .reg-path-card:hover, .reg-path-chev, .reg-path-card:hover .reg-path-chev,
  .home-pill, .home-pill:hover{
    transition:none !important; animation:none !important; transform:none !important;
  }
}

/* -- Pantalla "Juegos": mismo sistema, con un puntito más juguetón -- */
.juegos-screen{ gap:14px; }
.juegos-title{ font-family:var(--display); font-weight:500; }
.juegos-intro{
  font-family:var(--sans); font-size:var(--fs-2); color:var(--muted);
  text-align:center; margin:-8px 0 6px;
}
.juego-card{
  position:relative; overflow:visible;
  border-radius:var(--r-xl);
  background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--sh-1), var(--sh-2);
  /* 16 + los 5 del riel de estado, para que el contenido no se le monte. */
  padding:14px 16px 14px 21px;
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.juego-card:hover{
  transform:translateY(-2px) scale(1.008);
  border-color:var(--teal);
  box-shadow:var(--sh-1), var(--sh-3);
}
.juego-card:active{ transform:translateY(-1px) scale(.995); }
.juego-card:hover .juego-chev{ transform:translateX(3px); color:var(--teal-on-panel); }
.juego-icon.juego-icon{
  width:52px; height:52px; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--teal) 15%, transparent); font-size:var(--fs-6);
}
.juego-icon svg{ width:28px; height:28px; }
.juego-card-trivia .juego-icon{ background:color-mix(in srgb, var(--acc-amber) 16%, transparent); }
.juego-card-fotomes .juego-icon{ background:color-mix(in srgb, var(--acc-sky) 16%, transparent); }
.juego-card-proximo .juego-icon{ background:color-mix(in srgb, var(--acc-lilac) 16%, transparent); }
.juego-body{line-height:var(--lh); display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.juego-title-txt{
  font-family:var(--display); font-weight:500; font-size:var(--fs-3); color:var(--text);
}
.juego-sub{
  font-family:var(--sans); font-size:var(--fs-2); color:var(--muted);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.juego-sub.on-fire{line-height:var(--lh); color:var(--acc-amber); font-weight:600; }
.juego-chev{ color:var(--muted); flex:0 0 auto; transition:transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.juego-badge-soon{
  font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acc-amber); background:color-mix(in srgb, var(--acc-amber) 16%, transparent);
  border-radius:var(--r-full); padding:4px 10px; flex:0 0 auto; white-space:nowrap;
}
/* Distintivo de estado (pendiente/hecho) de cada tarjeta de juego: mismo
   patrón visual que .juego-badge-soon, con dos variantes de color para que
   se distinga de un vistazo si el reto de hoy sigue por hacer o ya se hizo. */
.juego-estado-badge{
  font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; border-radius:var(--r-full); padding:4px 10px; flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px;
}
.juego-estado-badge.pendiente{ color:var(--acc-amber); background:color-mix(in srgb, var(--acc-amber) 16%, transparent); }
/* El fondo se tiñe con --teal (el acento vivo) pero el texto usa
   --teal-on-panel: sobre panel claro el acento a secas no llega al contraste
   que pide un texto de 9.5px. */
.juego-estado-badge.hecho{ color:var(--teal-on-panel); background:color-mix(in srgb, var(--teal) 15%, transparent); }
.juego-card.locked{ cursor:not-allowed; }
.juego-card.locked .juego-icon{ filter:grayscale(.5); opacity:.7; }
.juego-card.locked .juego-title-txt, .juego-card.locked .juego-sub{line-height:var(--lh); opacity:.65; }
.juego-card.locked:hover{ transform:none; border-color:var(--line); box-shadow:var(--sh-1), var(--sh-2); }

/* ===== Estado de la tarjeta: riel lateral + tinte =====
   El riel es un ::before absoluto, NO un borde recortado con overflow:hidden:
   .juego-card lleva overflow:visible a propósito. El radio solo en el lado
   izquierdo, para que siga la esquina de la tarjeta.
   Sin animación en todo el bloque, a propósito: así no hay nada que apagar
   con prefers-reduced-motion ni que gaste batería en una lista. */
.juego-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  background:var(--line);
}
/* Un 9% sobre --panel: por encima de eso empieza a pelearse con los fondos de
   color de los iconos (.juego-card-trivia .juego-icon y compañía). */
.juego-card.pend{ background:linear-gradient(135deg, color-mix(in srgb, var(--acc-amber) 9%, var(--panel)), var(--panel) 70%); }
.juego-card.pend::before{ background:var(--acc-amber); }
.juego-card.hecho{ background:linear-gradient(135deg, color-mix(in srgb, var(--ok) 9%, var(--panel)), var(--panel) 70%); }
.juego-card.hecho::before{ background:var(--ok); }
/* :not(.on-fire) para no pisar el resaltado ámbar de racha, que tiene su
   propio significado y menos especificidad que esto. */
.juego-card.hecho .juego-sub:not(.on-fire){ color:var(--ok); font-weight:600; }
/* Lo que no se puede jugar no es "pendiente": ni riel ni tinte, y sin el
   hueco del riel, para que queden exactamente como estaban. */
.juego-card.locked::before, .juego-card.juego-card-proximo::before{ display:none; }
.juego-card.locked, .juego-card.juego-card-proximo{ padding-left:16px; }

/* ===== Puntos, en dos líneas, a la derecha =====
   OJO con la especificidad: este bloque es el último <span> del botón, así que
   compite con .identificar-btn > span:last-child, que es (0,2,1). Con dos
   clases (0,2,0) se pierde; por eso van TRES clases -> (0,3,0). */
.identificar-btn.juego-card .juego-pts{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:2px; margin-left:auto; padding-left:10px; flex:0 0 auto; text-align:right;
}
.identificar-btn.juego-card .juego-pts b{
  font-family:var(--mono); font-size:var(--fs-5); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.identificar-btn.juego-card .juego-pts em{
  font-style:normal; font-family:var(--mono); font-size:var(--fs-0); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); line-height:1;
}
.identificar-btn.juego-card.pend .juego-pts b{ color:var(--acc-amber); }
.identificar-btn.juego-card.hecho .juego-pts b{ color:var(--ok); }
@media (prefers-reduced-motion: reduce){
  .juego-card, .juego-card:hover, .juego-card:active, .juego-chev, .juego-card:hover .juego-chev{
    transition:none !important; animation:none !important; transform:none !important;
  }
}

/* ===================================================================
   LIGA · clasificación de amigos en la pantalla de Juegos
   ===================================================================
   La pantalla dejó de ser un lanzador de cuatro filas iguales y pasó a ser
   una clasificación: arriba en qué puesto vas, abajo cómo sumar más. Los
   tres juegos comparten una sola moneda (puntos), así que resolver el
   Birdle y acertar en el Trivial compiten en la misma tabla.

   Todo sale de los tokens del tema, así que funciona en los 12 fondos y
   los 8 acentos sin ningún color fijo. */

.liga-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 13px;
}
.liga-cab-k{ font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.liga-cab-t{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--acc-amber); font-variant-numeric:tabular-nums; white-space:nowrap; }

.liga-segs{ display:flex; gap:3px; background:var(--panel2); border-radius:var(--r-full); padding:3px; }
.liga-seg{
  flex:1; border:none; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600;
  padding:7px 0; border-radius:var(--r-full); color:var(--muted);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.liga-seg.on{ background:var(--teal); color:var(--on-teal); }
.liga-seg:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.liga-tabla{ display:flex; flex-direction:column; gap:4px; min-height:120px; }
.liga-fila{
  display:flex; align-items:center; gap:9px;
  background:var(--panel); border:1px solid transparent; border-radius:var(--r-md);
  padding:9px 11px;
}
/* Tu fila es la única con relleno y borde de acento: en una lista de siete
   nombres, encontrarte a ti mismo tiene que costar cero esfuerzo. */
.liga-fila.yo{
  background:rgba(47,143,122,.11);
  border-color:rgba(47,143,122,.42);
}
@supports (background:color-mix(in srgb, red 10%, transparent)){
.liga-fila.yo{
  background:color-mix(in srgb, var(--teal) 11%, transparent);
  border-color:color-mix(in srgb, var(--teal) 42%, transparent);
}
}
.liga-pos{ font-family:var(--mono); font-size:var(--fs-2); font-weight:700; width:17px; flex:0 0 17px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; }
.liga-fila.yo .liga-pos{ color:var(--teal-on-panel); }
.liga-pos.oro{ color:var(--acc-amber); }
.liga-av{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:700;
  background:var(--panel2); color:var(--text); overflow:hidden;
}
.liga-av img{ width:100%; height:100%; object-fit:cover; }
.liga-quien{ flex:1; min-width:0; }
.liga-quien b{ display:block; font-size:var(--fs-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.liga-quien span{ display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); margin-top:1px; }
.liga-pts{ font-family:var(--mono); font-size:var(--fs-3); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }

.liga-vacio{
  background:var(--panel); border:1px dashed var(--line); border-radius:var(--r-lg);
  padding:18px 16px; text-align:center;
}
.liga-vacio p{ font-size:var(--fs-2); color:var(--muted); line-height:var(--lh); margin:0; }
.liga-vacio b{ color:var(--text); font-weight:600; }
/* Botón de reintento del ranking. Vive dentro de .liga-vacio: cuando la
   clasificación no llega, la pantalla lo DICE y deja volver a intentarlo,
   en vez de quedarse con el esqueleto puesto para siempre. */
.liga-reintentar{
  margin-top:10px; background:none; border:1px solid var(--line);
  border-radius:var(--r-full); padding:7px 16px; font-family:var(--mono);
  font-size:var(--fs-1); color:var(--teal); cursor:pointer;
}
.liga-reintentar:hover{ border-color:var(--teal); }
/* Amigos a cero en Hoy/Semana: no desaparecen, van en una línea debajo. */
.lg-sinjugar{ margin:0; padding:10px 14px 12px; border-top:1px solid var(--lg-suave, var(--line)); font-size:var(--fs-1); color:var(--muted); line-height:var(--lh); }
.lg-sinjugar b{ color:var(--text); font-weight:600; }

.liga-lbl{
  font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin:4px 0 0;
}
/* La insignia de puntos del borde (.liga-gana) se retiró junto con
   ligaGanaHTML: 12 px en la esquina donde menos mira el ojo. Ahora el estado
   lo dice la tarjeta entera -- riel, tinte y el bloque .juego-pts de arriba. */
/* Temporada: cabecera + racha + separador de vecindario */
.liga-temporada-cab{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:10px; }
.liga-temporada-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.liga-temporada-tit{ font-family:var(--display); font-weight:800; font-size:var(--fs-3); color:var(--text); }
.liga-temporada-pts{ font-family:var(--mono); font-size:var(--fs-3); font-weight:700; color:var(--acc-amber); font-variant-numeric:tabular-nums; white-space:nowrap; }
.liga-temporada-lema{ font-family:var(--display); font-style:italic; font-size:var(--fs-2); line-height:1.35; color:var(--text); margin-top:3px; }
.liga-temporada-sub{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:3px; }
.liga-temporada-prog{ height:6px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden; margin-top:10px; }
.liga-temporada-prog span{ display:block; height:100%; background:var(--teal); border-radius:var(--r-full); transition:width var(--dur-2) var(--ease); }
.liga-racha{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:10px; }
.liga-racha-row{ display:flex; gap:3px; }
.liga-racha-seg{ flex:1; height:8px; border-radius:2px; background:var(--panel2); }
.liga-racha-seg.on{ background:var(--teal); }
.liga-racha-seg.hoy{ outline:2px solid var(--acc-amber); outline-offset:1px; }
.liga-racha-txt{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:8px; font-variant-numeric:tabular-nums; }
.liga-sep{ height:1px; background:var(--line); margin:6px 0; }
/* Marcador de Liga: resultado completo en una sola hoja. */
.liga-resumen{ position:relative; overflow:hidden; padding:25px 20px calc(22px + var(--sab)); text-align:center; }
.liga-resumen .tarot-close{ top:14px; right:14px; }
.liga-resumen .tarot-eyebrow{ margin:0 34px 7px; }
.liga-resumen-titulo{ margin:0 24px 7px; color:var(--text); font-family:var(--display); font-size:clamp(23px,6vw,29px); line-height:1.15; }
.liga-resumen-pts{ color:var(--teal-on-panel); font-family:var(--display); font-size:clamp(48px,14vw,61px); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; animation:ligaMarcadorEntra .38s var(--ease-pop) both; }
.liga-resumen-sub{ margin:3px 0 0; color:var(--muted); font-size:12px; }
.liga-resumen-desglose{ margin:17px 0 12px; text-align:left; border-top:1px solid var(--line); }
.liga-resumen-desglose > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 1px; border-bottom:1px solid var(--line); font-size:13px; }
.liga-resumen-desglose b{ flex:none; color:var(--text); font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.liga-resumen-total{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:12px; border-radius:var(--r-md); background:color-mix(in srgb, var(--teal) 10%, var(--panel)); text-align:left; }
.liga-resumen-total span{ color:var(--text); font-size:12px; font-weight:700; }
.liga-resumen-total b{ color:var(--teal-on-panel); font-family:var(--display); font-size:22px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.liga-resumen-puesto{ min-height:20px; margin-top:10px; color:var(--muted); font-family:var(--mono); font-size:11px; line-height:1.4; }
.liga-resumen-puesto b{ color:var(--teal-on-panel); }
.liga-resumen-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.liga-resumen-acciones button{ min-height:46px; margin:0; border-radius:var(--r-md); font:700 12px var(--mono); cursor:pointer; }
.liga-resumen-acciones #ligaResumenSeguir{ border:1px solid var(--line); background:var(--panel); color:var(--teal-on-panel); }
.liga-resumen-acciones .tarot-btn-primary{ width:100%; }
@keyframes ligaMarcadorEntra{ from{ opacity:.2; transform:translateY(8px) scale(.92); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .liga-resumen-pts{ animation:none; } }
/* .juego-sub va a una línea con puntos suspensivos en el resto de la app.
   Aquí las tarjetas comparten fila con la insignia de puntos y el texto se
   quedaba cortado a media palabra ("Reto de hoy disponibl..."), así que en
   esta pantalla se le permiten dos líneas. */
.juegos-screen .juego-sub{
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; line-height:1.35;
}

/* ===================================================================
   LOGROS: cuadrícula de trofeos (antes lista) -- un color por sección
   temática (--ach-color, fijado por .ach-tile--<seccion>), gris cuando
   el logro sigue bloqueado y a todo color en cuanto se consigue. */
/* Los colores de sección se definen dos veces: su versión viva (ya en el :root
   principal, más arriba), que es la que se lee sobre los paneles oscuros, y aquí
   abajo la apagada para los temas claros. Antes solo existía la apagada, que
   valía porque el trofeo era siempre blanco; ahora el trofeo es --panel y sobre
   panel oscuro esos tonos se quedaban en 2.8-4.2:1. Aclarados suben a 5.2-7.4:1. */
html[data-bg^="claro"]{
  --ach-habitats:#3F8F5C; --ach-campo:#C2703C;
  --ach-viajes:#2C6FA6; --ach-minijuegos:#A6467E; --ach-rutas:#4C8B7F; --ach-competicion:#B5477A;
}
/* ════════════════════════════════════════════════════════════════
   LOGROS v2 — sustituye el bloque .ach-tile* actual (~4362-4406)
   y añade .ach-medal*, .ach-camino*. Todo sale de tokens que ya
   existen; los únicos nuevos son los cinco pares --met-*.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. LA MEDALLA ───────────────────────────────────────────
   Un componente para los 78 logros. El aro exterior ES la barra
   de progreso, así que .ach-tile-bar desaparece. El metal del aro
   dice en qué peldaño de su escalera está el logro. */
.ach-medal{ width:100%; height:100%; display:block; overflow:visible; }
.ach-medal .m-halo{ fill:transparent; }
.ach-medal .m-base{ stroke:transparent; }
.ach-medal .m-track{ stroke:var(--line); }
.ach-medal .m-prog{ stroke:var(--ach-color,var(--teal)); stroke-linecap:round;
  transition:stroke-dasharray var(--dur-3) var(--ease); }
.ach-medal .m-field{ fill:var(--panel2); transition:fill var(--dur-3) var(--ease); }
.ach-medal .m-bevel{ stroke:var(--panel); stroke-width:1; fill:none; opacity:.6; }
.ach-medal .m-glyph{ stroke:var(--muted); fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; opacity:.42;
  transition:stroke var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease); }
.ach-medal .m-pip{ fill:var(--line); stroke:var(--panel); stroke-width:1;
  transition:fill var(--dur-3) var(--ease); }
.ach-medal .m-shine{ opacity:0; }

/* conseguido */
.ach-tile.done .ach-medal .m-track{ stroke:transparent; }
.ach-tile.done .ach-medal .m-base{ stroke:color-mix(in srgb,var(--ach-color,var(--teal)) 20%,transparent); }
.ach-tile.done .ach-medal .m-field{ fill:color-mix(in srgb,var(--ach-color,var(--teal)) 14%,var(--panel)); }
.ach-tile.done .ach-medal .m-glyph{ stroke:var(--ach-color,var(--teal)); opacity:1; stroke-width:2; }
.ach-tile.done .ach-medal .m-halo{ fill:color-mix(in srgb,var(--ach-color,var(--teal)) 7%,transparent); }

/* el metal lo pone el PELDAÑO, no el estado: por eso va en su propia clase */
.ach-tile.t-bronce.done .ach-medal .m-prog{ stroke:url(#met-bronce); }
.ach-tile.t-bronce.done .ach-medal .m-pip{ fill:var(--met-bronce-2); }
.ach-tile.t-plata.done  .ach-medal .m-prog{ stroke:url(#met-plata); }
.ach-tile.t-plata.done  .ach-medal .m-pip{ fill:var(--met-plata-2); }
.ach-tile.t-oro.done    .ach-medal .m-prog{ stroke:url(#met-oro); }
.ach-tile.t-oro.done    .ach-medal .m-pip{ fill:var(--met-oro-2); }
.ach-tile.t-diam.done   .ach-medal .m-prog{ stroke:url(#met-diam); }
.ach-tile.t-diam.done   .ach-medal .m-pip{ fill:var(--met-diam-2); }
.ach-tile.t-prisma.done .ach-medal .m-prog{ stroke:url(#met-prisma); stroke-width:4; }
.ach-tile.t-prisma.done .ach-medal .m-pip{ fill:var(--met-prisma-2); }
.ach-tile.t-prisma.done .ach-medal .m-field{ fill:color-mix(in srgb,var(--acc-lilac) 17%,var(--panel)); }
.ach-tile.t-prisma.done .ach-medal .m-glyph{ stroke:var(--acc-lilac); }

/* ─── 2. LA BALDOSA ───────────────────────────────────────────
   Misma rejilla y mismo tamaño que hoy: se sustituye sin tocar
   nada del layout de alrededor. */
.ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.ach-tile{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:9px 6px 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
  cursor:pointer; overflow:visible; box-shadow:var(--sh-1),var(--sh-2); font:inherit; color:inherit;
  transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
  animation:achCardIn var(--dur-2) var(--ease-pop) backwards;
}
.ach-tile:hover{ transform:translateY(-2px); border-color:var(--ach-color,var(--teal));
  box-shadow:var(--sh-1),var(--sh-3); }
.ach-tile:active{ transform:scale(.97); }
.ach-tile:focus-visible{ outline:2px solid var(--ach-color,var(--teal)); outline-offset:2px; }
.ach-tile-ico{ width:52px; height:52px; flex:0 0 auto; }
.ach-tile-frac{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700;
  color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.ach-tile.done .ach-tile-frac{ color:var(--ach-color,var(--acc-amber)); }
.ach-tile-dot{ position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%;
  background:var(--acc-amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-amber) 25%,transparent);
  animation:achDotPulse 1.6s ease-in-out infinite; }
@keyframes achDotPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
@keyframes achCardIn{ from{opacity:0; transform:translateY(6px) scale(.96)} to{opacity:1} }

.ach-tile--coleccion{--ach-color:var(--ach-coleccion)} .ach-tile--habitats{--ach-color:var(--ach-habitats)}
.ach-tile--familias{--ach-color:var(--ach-familias)}   .ach-tile--rarezas{--ach-color:var(--ach-rarezas)}
.ach-tile--campo{--ach-color:var(--ach-campo)}         .ach-tile--fotografia{--ach-color:var(--ach-fotografia)}
.ach-tile--viajes{--ach-color:var(--ach-viajes)}       .ach-tile--minijuegos{--ach-color:var(--ach-minijuegos)}
.ach-tile--rutas{--ach-color:var(--ach-rutas)}         .ach-tile--competicion{--ach-color:var(--ach-competicion)}
.ach-tile--maestria{--ach-color:var(--ach-maestria)}

/* ─── 3. LA CELEBRACIÓN ───────────────────────────────────────
   Se encadena con celebrarLogrosEnCola(), que ya existe: basta
   cambiar la clase 'lighting-up' por 'claiming'. */
@keyframes achPop{ 0%{transform:scale(.72) rotate(-8deg)} 55%{transform:scale(1.2) rotate(3deg)}
  100%{transform:scale(1) rotate(0)} }
@keyframes achShine{ 0%{opacity:0; transform:translateX(-130%)} 25%{opacity:.85}
  100%{opacity:0; transform:translateX(130%)} }
@keyframes achWave{ 0%{opacity:.65; transform:scale(.55)} 100%{opacity:0; transform:scale(1.65)} }
@keyframes achSpark{ 0%{opacity:1; transform:translate(0,0) scale(1)}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.2)} }
@keyframes achXpUp{ 0%{opacity:0; transform:translate(-50%,4px) scale(.8)}
  22%{opacity:1; transform:translate(-50%,-10px) scale(1)}
  100%{opacity:0; transform:translate(-50%,-34px) scale(1)} }
.ach-tile.claiming{ z-index:4; }
.ach-tile.claiming .ach-tile-ico{ animation:achPop .72s var(--ease-pop) both; }
.ach-tile.claiming .m-shine{ animation:achShine .9s var(--ease) .12s both; }
.ach-tile.claiming::after{ content:''; position:absolute; inset:2px; border-radius:50%;
  pointer-events:none; z-index:-1; border:2px solid var(--ach-color,var(--acc-amber));
  animation:achWave .8s var(--ease) both; }
.ach-spark{ position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
  background:var(--ach-color,var(--acc-amber)); pointer-events:none;
  animation:achSpark .78s var(--ease) both; }
.ach-xp-float{ position:absolute; top:8px; left:50%; font:700 13px/1 var(--mono);
  color:var(--gold); pointer-events:none; white-space:nowrap;
  text-shadow:0 1px 3px var(--panel); animation:achXpUp 1.1s var(--ease) both; }

/* ─── 4. EL CAMINO AL 100 % ───────────────────────────────────
   Bloque nuevo bajo el héroe. Cada vía lleva su barra con muescas
   en los peldaños y, debajo, cuánto falta para el SIGUIENTE. */
.ach-camino{ background:linear-gradient(158deg,var(--panel2),var(--panel) 70%);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:14px 15px 11px;
  margin:12px 0 4px; box-shadow:var(--sh-2); }
.ach-camino-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.ach-camino-h b{ font-family:var(--display); font-weight:600; font-size:var(--fs-3); }
.ach-camino-h em{ font-style:normal; font-family:var(--mono); font-size:var(--fs-0);
  color:var(--muted); margin-left:auto; }
.ach-via{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; }
.ach-via + .ach-via{ border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.ach-via-ic{ width:27px; height:27px; flex:0 0 auto; border-radius:var(--r-sm); margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--via-c,var(--teal)) 14%,transparent); color:var(--via-c,var(--teal)); }
.ach-via-ic svg{ width:15px; height:15px; }
.ach-via-b{ display:block; flex:1; min-width:0; }
.ach-via-t{ display:flex; align-items:baseline; gap:6px; }
.ach-via-t b{ font-size:var(--fs-2); font-weight:600; }
.ach-via-t em{ font-style:normal; font-family:var(--mono); font-size:var(--fs-0);
  color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; }
.ach-via-bar{ display:block; height:7px; border-radius:var(--r-full); background:var(--line);
  overflow:hidden; margin-top:5px; position:relative; }
.ach-via-bar > i{ display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--via-c) 55%,transparent),var(--via-c));
  transition:width var(--dur-3) var(--ease); }
.ach-via-bar > u{ position:absolute; top:0; width:1.5px; height:100%; background:var(--panel); opacity:.85; }
.ach-via-next{ display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);
  margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ach-via-next b{ color:var(--via-c); font-weight:700; }
.ach-via.full .ach-via-ic{ background:color-mix(in srgb,var(--gold) 20%,transparent); color:var(--gold); }
.ach-via.full .ach-via-t b{ color:var(--gold); }
.ach-via.full .ach-via-next b{ color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .ach-tile,.ach-tile:hover{ animation:none!important; transform:none!important; }
  .ach-tile-dot,.ach-tile.claiming .ach-tile-ico,.ach-tile.claiming .m-shine,
  .ach-tile.claiming::after{ animation:none!important; }
  .ach-spark,.ach-xp-float{ display:none!important; }
}

/* Botón flotante "Omitir animación" (cancelarCelebracionLogros): visible y
   enfocable por teclado mientras _achCelebrando esté activo. Mismo tramo que
   el toast (--z-aviso): tiene que verse por encima de la propia celebración. */
.ach-omitir-btn{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + var(--bottom-nav-h,78px) + var(--sab));
  z-index:var(--z-aviso); display:flex; align-items:center; gap:7px;
  background:var(--panel); color:var(--text); border:1px solid var(--gold);
  border-radius:var(--r-full); padding:9px 16px; font-family:var(--mono); font-size:var(--fs-1);
  box-shadow:var(--sh-1), var(--sh-3); cursor:pointer;
}
.ach-omitir-btn:hover, .ach-omitir-btn:focus-visible{ border-color:var(--teal); outline:2px solid var(--teal); outline-offset:2px; }
.ach-omitir-btn svg{ width:1em; height:1em; }

/* Alias heredado: avanzarCelebracionLogro() usaba .lighting-up. Se mantiene
   apuntando a la misma animación para que nada que la use por fuera se rompa. */
.ach-tile.lighting-up{ z-index:4; }
.ach-tile.lighting-up .ach-tile-ico{ animation:achPop .72s var(--ease-pop) both; }
.ach-tile.lighting-up .m-shine{ animation:achShine .9s var(--ease) .12s both; }
@media (prefers-reduced-motion: reduce){
  .ach-tile.lighting-up .ach-tile-ico, .ach-tile.lighting-up .m-shine{ animation:none !important; }
}

@keyframes famHighlightPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(214,169,90,0); }
  50%{ box-shadow:0 0 0 6px rgba(214,169,90,.45); }
}
.cv2-fam-highlight{ animation:famHighlightPulse 1s var(--ease) 2; border-color:var(--gold) !important; }
@media (prefers-reduced-motion:reduce){
  .cv2-fam-highlight{ animation:none; box-shadow:0 0 0 3px rgba(214,169,90,.5); }
}
.logros-reclamar-todo{ margin:0 0 12px; }
/* Tarjeta "carta especial": una especie dominada (DIAS_DOMINAR días con
   foto) recibe marco e imagen con toque dorado, más un brillo animado
   tipo carta holográfica sobre la miniatura. */
.poke-card.dominada{
  background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 16%, var(--panel)), var(--panel) 60%);
  border-color:color-mix(in srgb, var(--gold) 55%, var(--line));
}
.poke-card.dominada .poke-name{ color:var(--gold); }
.poke-card.dominada .ref{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 65%, transparent), 0 0 14px color-mix(in srgb, var(--gold) 50%, transparent);
}
.poke-card.dominada .ref::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%);
  transform:translateX(-120%);
  animation:pokeCardShine 3.6s ease-in-out infinite;
}
@keyframes pokeCardShine{
  0%,55%{ transform:translateX(-120%); }
  75%{ transform:translateX(120%); }
  100%{ transform:translateX(120%); }
}
@media (prefers-reduced-motion:reduce){
  .poke-card.dominada .ref::before{ animation:none; display:none; }
}
/* Sí / No / No sé del identificador: mismo tamaño y tipografía, sin
   pictogramas, diferenciados solo por color. */
.akin-opciones{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px;}
.akin-opt{
  border-radius:var(--r-lg); padding:14px 6px; font-family:var(--display); font-weight:700; font-size:var(--fs-3);
  cursor:pointer; text-align:center; border:1.5px solid transparent;
  transition:transform var(--dur-1), box-shadow var(--dur-1), border-color var(--dur-1);
}
.akin-opt:active{ transform:scale(.96); }
.akin-opt-si{
  background:linear-gradient(135deg, var(--teal-deep), var(--teal)); color:var(--on-teal);
  box-shadow:0 10px 22px -12px rgba(46,182,164,.55);
}
.akin-opt-no{
  background:color-mix(in srgb, var(--err-text) 12%, var(--panel));
  border-color:var(--err-border); color:var(--err-text);
}
.akin-opt-nose{
  background:color-mix(in srgb, var(--gold) 14%, var(--panel));
  border-color:color-mix(in srgb, var(--gold) 45%, transparent); color:var(--gold);
}
.akin-opt-si.akin-clicked{ animation:akinPulseYes var(--dur-3) var(--ease); }
.akin-opt-no.akin-clicked{ animation:akinPulseNo var(--dur-3) var(--ease); }
.akin-opt-nose.akin-clicked{ animation:akinPulseNose var(--dur-3) var(--ease); }

/* ===== Vista de mapa a pantalla completa (cambio 17) =====
   El mapa ocupa exactamente el hueco entre la cabecera y la barra inferior,
   y la página deja de hacer scroll: el único gesto posible sobre el mapa es
   interactuar con él (o arrastrar el panel de "aves cercanas").
   --head-h la fija showGlobalMap() midiendo la cabecera real; el 78px de
   respaldo solo actúa si esa medida fallara. position:fixed en el body es
   lo único que bloquea el rebote de Safari en iOS. */
/* La versión anterior daba altura a .main y esperaba que .map-screen la
   heredara con height:100%, pero entre medias está #app, que no tiene altura
   propia: un porcentaje contra un padre `auto` no resuelve, así que #gmap se
   quedaba en 0 y el mapa desaparecía (solo se veían los paneles, que van en
   position:absolute). Ahora la pantalla del mapa se ancla ella misma al
   viewport y no depende de esa cadena.
   El respaldo de --head-h no es un número a ojo: es la altura que da el CSS
   de .head (padding 24 + botón 42 + padding 6) más su safe-area. */
body.mapa-fullscreen{ overflow:hidden; overscroll-behavior:none; }
body.mapa-fullscreen .main{ padding-bottom:0 !important; }
/* Seguro: si --head-h se quedara corta, el mapa (posicionado) taparía los
   botones de la cabecera y se los comería los clics. Así siempre queda encima. */
body.mapa-fullscreen .head{ position:relative; z-index:10; }
body.mapa-fullscreen .map-screen{
  position:fixed;
  top:var(--head-h, calc(72px + var(--sat)));
  bottom:calc(var(--bottom-nav-h, 78px) + var(--sab));
  left:0; right:0; margin:0 auto;      /* mismo ancho tope que .main y .bottom-nav */
  width:100%; max-width:760px;
  z-index:5;
}
body.mapa-fullscreen #gmap{
  height:100% !important; min-height:0 !important;
  border:none !important; border-radius:0 !important;
}

/* Corona premium junto al nombre del saludo del inicio. No se le fija `color`:
   coronaPremiumSVG() es un medallón con sus propios degradados (corona dorada
   sobre fondo morado), no un icono monocromo que herede currentColor. */
.home-crown{ display:inline-flex; align-items:center; margin-left:7px; vertical-align:-0.16em; }
/* La corona es apaisada (76x64): se fija la ALTURA y el ancho va solo, que si
   no se aplasta. */
.home-crown svg{ width:auto; height:17px; display:block; }

/* ===== Barra de almacenamiento (Ajustes) ===== */
.stor-box{ margin:4px 0 14px; }
.stor-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.stor-title{ font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); }
.stor-nums{ font-family:var(--mono); font-size:var(--fs-2); color:var(--muted); }
.stor-track{ height:9px; border-radius:99px; background:var(--panel2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.stor-fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--teal), var(--teal-deep)); transition:width var(--dur-3) var(--ease); }
.stor-fill.warn{ background:linear-gradient(90deg, var(--gold), #c1934a); }
.stor-fill.full{ background:linear-gradient(90deg, #e8776a, #d64c3c); }
.stor-foot{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:8px; line-height:1.5; }
.stor-upsell{ color:var(--gold); font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-top:2px; }

/* ===== Ventajas en la pantalla de Premium ===== */
/* ===== Muro de pago: bloque de mecenazgo ===== */
.premium-mecenas{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 15px; margin:0 0 16px;}
.premium-mecenas p{margin:0 0 9px; font-size:var(--fs-2); line-height:1.55; color:var(--text);}
.premium-mecenas p:last-child{margin-bottom:0; color:var(--muted);}
.premium-mecenas b{font-family:var(--display); font-weight:600;}
.premium-vent-lbl{margin:0 0 8px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center;}
.premium-ganar{display:flex; flex-direction:column; gap:4px; margin:16px 0 12px; padding:12px 14px; border-radius:var(--r-lg); border:1px dashed color-mix(in srgb,var(--teal) 45%,var(--line)); background:color-mix(in srgb,var(--teal) 7%,transparent);}
.premium-ganar-t{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--teal);}
.premium-ganar-d{font-size:var(--fs-2); line-height:1.5; color:var(--text);}
.premium-ganar-d b{font-weight:600;}
.premium-benefits{ display:flex; flex-direction:column; gap:12px; margin:6px 0 18px; text-align:left; }
.pben{ display:flex; align-items:flex-start; gap:12px; }
.pben-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, var(--panel2)); }
.pben-ic svg{ width:20px; height:20px; }
.pben-txt{ display:flex; flex-direction:column; gap:2px; }
.pben-txt b{ font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text); }
.pben-txt span{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.4; }

/* ===== Almacenamiento en el perfil ===== */
.pp-almacen{ cursor:default; align-items:flex-start; }
.pp-almacen-bar{ display:block; height:6px; border-radius:99px; background:var(--panel2); overflow:hidden; margin:2px 0 1px; }
.pp-almacen-fill{ display:block; height:100%; border-radius:99px; background:var(--teal); transition:width var(--dur-2) var(--ease); }
.pp-almacen-fill.casi{ background:var(--gold); }
.pp-almacen-fill.lleno{ background:#d9534f; }

/* ===== Editor de recorte (cambio 30) ===== */
.cropper2-stage-wrap{ padding:12px 2px 0; }
.cropper2-stage{
  position:relative; width:100%; margin:0 auto;
  background:#0c1420; border-radius:var(--r-lg); overflow:hidden;
  touch-action:none; cursor:grab; aspect-ratio:4/3;
  transition:aspect-ratio var(--dur-2) var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.cropper2-stage.dragging{ cursor:grabbing; }
.cropper2-img{
  position:absolute; top:50%; left:50%;
  transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.cropper2-grid{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--dur-1); }
.cropper2-stage.dragging .cropper2-grid{ opacity:1; }
.cropper2-grid::before{ content:''; position:absolute; left:33.33%; right:33.33%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.28); border-right:1px solid rgba(255,255,255,.28); }
.cropper2-grid::after{ content:''; position:absolute; top:33.33%; bottom:33.33%; left:0; right:0; border-top:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28); }
.cropper2-frame{ position:absolute; inset:0; pointer-events:none; border-radius:var(--r-lg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.cropper2-corner{ position:absolute; width:16px; height:16px; border:3px solid #fff; }
.cropper2-corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; border-radius:var(--r-sm) 0 0 0; }
.cropper2-corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; border-radius:0 var(--r-sm) 0 0; }
.cropper2-corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; border-radius:0 0 0 var(--r-sm); }
.cropper2-corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 var(--r-sm) 0; }

.cropper2-aspects{ display:flex; gap:8px; overflow-x:auto; padding:14px 2px 2px; scrollbar-width:none; }
.cropper2-aspects::-webkit-scrollbar{ display:none; }
.cropper2-asp{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:8px 12px; cursor:pointer; color:var(--muted); min-width:58px;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600; transition:var(--dur-1);
}
.cropper2-asp:active{ transform:scale(.95); }
.cropper2-asp.on{ border-color:var(--teal); color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, var(--panel)); }
.cropper2-asp .ico{ width:24px; height:20px; display:flex; align-items:center; justify-content:center; }
.cropper2-asp .ico div{ border:1.6px solid currentColor; border-radius:3px; }

.cropper2-zoom{ display:flex; align-items:center; gap:12px; padding:12px 4px 2px; }
.cropper2-zoom svg{ width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
.cropper2-zoom input[type=range]{
  -webkit-appearance:none; appearance:none; height:5px; border-radius:99px; flex:1;
  background:linear-gradient(90deg, var(--teal), var(--gold));
}
.cropper2-zoom input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--teal); cursor:pointer; box-shadow:var(--sh-2); }
.cropper2-zoom input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--teal); cursor:pointer; }
/* El pulgar del deslizador no recibe el outline del elemento padre (es un
   pseudoelemento), así que lleva su propio anillo de foco con box-shadow. */
.cropper2-zoom input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 var(--focus-w) var(--focus-color), var(--sh-2); }
.cropper2-zoom input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 var(--focus-w) var(--focus-color); }

.cropper2-minirow{ display:flex; gap:10px; margin-top:12px; }
.cropper2-mini{ flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:11px; cursor:pointer; font-family:var(--mono); font-size:var(--fs-2); font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center; gap:7px; }
.cropper2-mini svg{ width:15px; height:15px; }
.cropper2-mini:active{ transform:scale(.97); }

/* ===== Resumen del día en el calendario (cambio 24) ===== */
.cal-day-detail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-top:12px; }
.cal-day-detail-title{ font-family:var(--display); font-weight:600; font-size:var(--fs-3); margin-bottom:8px; text-transform:capitalize; }
.cal-dd-sec{ margin-top:8px; }
.cal-dd-label{ display:inline-block; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-radius:99px; padding:3px 9px; }
/* El texto va mezclado hacia --text: el color de marca a secas se quedaba en
   2.36:1 sobre su propio tinte en los temas claros. Así sube a 4.6-5.2. */
.cal-dd-label.cap{ background:color-mix(in srgb,var(--ok) 20%,var(--panel2)); color:color-mix(in srgb, var(--ok) 50%, var(--text)); }
.cal-dd-label.obs{ background:color-mix(in srgb,var(--warn) 22%,var(--panel2)); color:color-mix(in srgb, var(--warn) 50%, var(--text)); }
.cal-dd-sec ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cal-dd-sec li{ font-size:var(--fs-2); background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:4px 10px; }

/* ===== Hábitats clicables en la ficha (cambio 21) =====
   .sd-hab-chip ya existe y da la forma de píldora; aquí solo se le quita el
   aspecto de botón y se añade el desplegable de explicación. */
.sd-hab-btn{font:inherit; color:var(--text); cursor:pointer; text-align:left;}
.sd-hab-btn:active{transform:scale(.96);}
.sd-hab-explain{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; margin-top:8px; font-size:var(--fs-2); line-height:1.5; color:var(--text); display:none;}
.sd-hab-explain.on{display:block;}
.sd-hab-explain b{font-family:var(--display);}

/* ===== Mini-mapa de una foto: consulta primero (cambio 18) ===== */
.minimap-wrap{position:relative;}
.minimap-veil{position:absolute; inset:0; z-index:2; background:none; border:none; padding:0; margin:0; cursor:pointer;}
.minimap-wrap.editing .minimap-veil{display:none;}
.minimap-wrap.editing .minimap{outline:2px solid var(--teal); outline-offset:-2px;}
.coords-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.minimap-edit-btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:99px; padding:6px 12px; font-family:var(--display); font-weight:600; font-size:var(--fs-2); cursor:pointer;}
.minimap-edit-btn.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}

/* Ficha total: secciones de datos definitivos y trazabilidad. */
.sd-data-section{overflow:hidden}.sd-data-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0}.sd-data-section>summary::-webkit-details-marker{display:none}.sd-data-section>summary:after{content:'⌄';font-size:18px;color:var(--muted);transition:transform .2s}.sd-data-section[open]>summary:after{transform:rotate(180deg)}.sd-data-body{margin-top:12px}.sd-fact{padding:10px 0;border-top:1px solid var(--line)}.sd-fact:first-child{border-top:0}.sd-fact-k{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.sd-fact-v{display:block;font-size:13px;line-height:1.45;color:var(--text)}.sd-fact.missing .sd-fact-v{color:var(--muted);font-style:italic}.sd-source-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}.sd-source-list a{font-size:12px;color:var(--teal);overflow-wrap:anywhere}.sd-map-img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:var(--r-md);background:#fff;margin-top:10px}.sd-map-leyenda{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:8px}.sd-map-leyenda li{display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:baseline}.sd-map-leyenda i{grid-row:1/3;align-self:center;width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.4);box-shadow:0 0 0 1px rgba(255,255,255,.16)}.sd-map-leyenda i.blanco{background:#fff}.sd-map-l1{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.25}.sd-map-l2{font-size:11px;color:var(--muted);line-height:1.3}.sd-map-nota{font-size:10.5px;line-height:1.45;color:var(--muted);margin-top:10px}.sd-status-code{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:900;margin-right:6px}.sd-tech-source{font-size:10px;color:var(--teal);text-decoration:none;margin-left:6px}.sd-complete-note{font-size:11px;line-height:1.4;color:var(--muted);margin-top:10px}.sd-load-final{font-size:13px;color:var(--muted);padding:6px 0}

/* ===================================================================
   CABECERA B + INICIO v5 (22/09/2026)
   Prototipos en www/Claude outputs/prototipo-inicio-v5. Elegido: piel
   "Aurora" con los Aleteos encima de las acciones.
   =================================================================== */
/* ---- Cabecera B: marca a la izquierda, cápsula de acciones a la derecha ---- */
.topbar{justify-content:space-between; gap:12px;}
.topbar-title{flex:0 1 auto; justify-content:flex-start; gap:8px; align-items:center; min-height:32px;}
.tb-glifo{width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
/* El logo de AveDex (el martín pescador con gafas, www/logo.png reducido a
   img/logo-avedex.png) sustituye al pájaro dibujado a trazo que había aquí. */
.tb-glifo img{width:36px; height:36px; object-fit:contain; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));}
.tb-nombre{font-size:21px; line-height:1;}
.tb-capsula{display:flex; align-items:center; gap:2px; padding:4px; border-radius:99px; flex:0 0 auto;
  background:color-mix(in srgb,var(--panel) 55%,transparent); border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--sh-1);}
/* 24/09/2026: botones de 38-44 px (antes 32): con el dedo se fallaba. El
   tamaño crece con la pantalla y en PC se queda en 44. */
.topbar{--tb-b:clamp(38px, 10.6vw, 44px);}
.tb-capsula .topbar-btn{width:var(--tb-b); height:var(--tb-b); border:none; background:none; color:var(--text); font-size:calc(var(--tb-b) * .5); overflow:visible;}
.tb-capsula .topbar-btn:hover,.tb-capsula .topbar-btn:active{color:var(--text); background:var(--panel2); transform:none;}
.tb-capsula .topbar-btn-acerca{overflow:hidden; width:var(--tb-b); height:var(--tb-b); margin:0;}
.tb-capsula #btnPerfilTop{position:relative; overflow:visible; width:var(--tb-b); height:var(--tb-b); margin:0;}
.tb-capsula #btnPerfilTop #topbarAv{display:grid; place-items:center; width:calc(var(--tb-b) - 4px); height:calc(var(--tb-b) - 4px); border-radius:50%; overflow:hidden;}
.tb-capsula #btnPerfilTop .sync-chip{width:12px; height:12px; right:-2px; bottom:-2px; border-width:2px;}
/* en móviles estrechos la marca cede sitio antes que los botones */
@media (max-width:374px){ .tb-nombre{font-size:18px;} .tb-glifo,.tb-glifo img{width:30px; height:30px;} .topbar{gap:8px;} }
.tb-capsula .topbar-btn-badge{top:-1px; right:-1px;}
html.sin-blur .tb-capsula{background:var(--panel);}

/* ---- El inicio no se desplaza: cabe entero ---- */
body.home-active{overflow:hidden; display:flex; flex-direction:column; height:100dvh;}
body.home-active .head{flex:0 0 auto; padding-top:calc(12px + var(--sat)); padding-bottom:4px;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0;}
body.home-active .main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:6px 16px calc(86px + var(--sab)) !important; margin:0 auto; width:100%;}
body.home-active .home-grid.show{display:flex !important; flex-direction:column; justify-content:flex-start; gap:clamp(10px, 1.6vh, 16px); flex:1 1 auto; min-height:0; margin-top:0; grid-template-rows:none !important;}
body.home-active .home-grid > *{flex:0 0 auto;}
body.home-active .home-grid > .f-acc{flex:1 1 auto; min-height:0;}
/* La luz de amanecer detrás de la cabecera: sale de --teal y --gold, así
   que cambia con el acento elegido en Ajustes. Solo en el inicio. */
body.home-active::before{content:''; position:fixed; left:0; right:0; top:0; height:340px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 90% at 18% -10%, color-mix(in srgb,var(--teal) 34%,transparent) 0%, transparent 60%),
             radial-gradient(50% 70% at 92% -5%, color-mix(in srgb,var(--gold) 26%,transparent) 0%, transparent 55%);}
html[data-bg^="claro"] body.home-active::before{
  background:radial-gradient(60% 90% at 18% -10%, color-mix(in srgb,var(--teal) 22%,transparent) 0%, transparent 60%),
             radial-gradient(50% 70% at 92% -5%, color-mix(in srgb,var(--gold) 20%,transparent) 0%, transparent 55%);}
html.perf-bajo body.home-active::before{display:none;}

/* ---- Cuenta: saludo + nivel (pieza real) + calendario (pieza real) ---- */
.f-cuenta{display:flex; align-items:center; gap:9px; padding:0 0 0 2px;}
.f-hola{flex:1 1 auto; min-width:0; line-height:1.1;}
.f-cuenta .home-pill-nivel{flex:0 1 auto; max-width:56%;} .f-cuenta .home-pill-rango{width:32px; height:32px;}
.f-cuenta .home-pill-bar{width:100%;} .f-cuenta .home-pill-racha{width:50px;}

/* ---- El héroe: dos acciones grandes, icono arriba, con su secundaria debajo ---- */
.f-acc{display:flex; gap:10px;}
.f-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px;}
.f-btn{flex:1 1 auto; min-height:118px; max-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 8px;
  border-radius:20px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; text-align:center; position:relative; box-shadow:var(--sh-3);
  touch-action:manipulation; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow var(--dur-1) var(--ease);}
.f-btn:active{transform:scale(.96);}
.f-btn .ic{width:clamp(48px, 8vh, 68px); height:clamp(48px, 8vh, 68px); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:6px;} .f-btn .ic svg{width:52%; height:52%;}
.f-btn b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-5); line-height:1.05;}
.f-btn > span:not(.ic):not(.chip){display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.f-btn.ver{border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); background:linear-gradient(180deg, color-mix(in srgb,var(--teal) 10%,var(--panel)), var(--panel) 70%);}
.f-btn.ver .ic{background:var(--teal); color:var(--on-teal); box-shadow:0 8px 20px -8px var(--teal);}
.f-btn.foto{border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 10%,var(--panel)), var(--panel) 70%);}
.f-btn.foto .ic{background:var(--gold); color:var(--on-gold); box-shadow:0 8px 20px -8px var(--gold);}
.f-btn .chip{position:absolute; top:9px; right:9px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.05em; font-weight:700; background:var(--gold); color:var(--on-gold); border-radius:99px; padding:2px 7px;}
.f-sec{display:flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 8px; background:none; border:1px dashed var(--line); border-radius:var(--r-md); color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; white-space:nowrap; touch-action:manipulation;}
.f-sec:active{transform:scale(.97);}
.f-sec .ic{width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0;} .f-sec .ic svg{width:13px; height:13px;}
#homeRegAkin .ic{background:color-mix(in srgb,var(--acc-lilac) 16%,transparent); color:var(--acc-lilac);} #homeRegPendiente .ic{background:color-mix(in srgb,var(--acc-amber) 16%,transparent); color:var(--acc-amber);}

/* ---- Aleteos: la fila de siempre, sin márgenes extra ---- */
body.home-active .home-historias-row{padding:2px 2px 2px; margin:0;}

/* ---- Hoy: una sola tira de tres celdas ---- */
.f-hoy{display:flex; gap:7px;}
.f-hoy:empty{display:none;}
.f-celda{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:64px; padding:8px 6px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; text-align:center; touch-action:manipulation;}
.f-celda:active{transform:scale(.97);}
.f-celda .tx{min-width:0; max-width:100%; line-height:1.1;} .f-celda .tx b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.f-celda .tx span{display:block; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
.f-celda.luz .ic{width:28px; height:28px; border-radius:50%; background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .f-celda.luz .ic svg{width:17px; height:17px;}
.f-celda.luz.viva{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));} .f-celda.luz.viva .tx b{color:var(--gold);}
.f-celda .aves,.f-celda .ths{display:flex; flex-shrink:0;}
.f-celda .aves .cara{width:28px; height:28px; border-radius:50%; overflow:hidden; border:2px solid var(--panel); margin-left:-10px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted);}
.f-celda .aves .cara:first-child{margin-left:0;} .f-celda .aves .cara img{width:100%; height:100%; object-fit:cover;}
.f-celda .ths .cara{width:26px; height:26px; border-radius:7px; overflow:hidden; border:2px solid var(--panel); margin-left:-12px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted);}
.f-celda .ths .cara:first-child{margin-left:0;} .f-celda .ths .cara img{width:100%; height:100%; object-fit:cover;}
.f-celda.cerca .tx b{color:var(--teal-on-panel);}
#btnPendientes{display:none;} #btnPendientes.show{display:flex;}
#btnDesconocidas{display:none;} #btnDesconocidas.show{display:flex;}

/* ---- Piel Aurora: cristal sobre la luz ---- */
.f-btn,.f-celda,.f-cuenta .home-pill-nivel,.f-cuenta .home-pill-racha{background:color-mix(in srgb,var(--panel) 62%,transparent); border-color:color-mix(in srgb,var(--line) 70%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
.f-btn.ver{background:linear-gradient(180deg, color-mix(in srgb,var(--teal) 12%,transparent), color-mix(in srgb,var(--panel) 62%,transparent) 70%);}
.f-btn.foto{background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 12%,transparent), color-mix(in srgb,var(--panel) 62%,transparent) 70%);}
/* En perf-bajo el desenfoque ya no existe (regla global): fondo sólido. */
html.sin-blur .f-btn,html.sin-blur .f-celda,html.sin-blur .f-cuenta .home-pill-nivel,html.sin-blur .f-cuenta .home-pill-racha{background:var(--panel);}
html.sin-blur .f-btn.ver{background:linear-gradient(180deg, color-mix(in srgb,var(--teal) 10%,var(--panel)), var(--panel) 70%);}
html.sin-blur .f-btn.foto{background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 10%,var(--panel)), var(--panel) 70%);}
html[data-motion="reducido"] .f-btn,html[data-motion="reducido"] .f-sec,html[data-motion="reducido"] .f-celda{transition:none;}
@media (prefers-reduced-motion: reduce){ .f-btn,.f-sec,.f-celda{transition:none;} }

/* ===================================================================
   INICIO v6 (23/09/2026) -- "cuaderno de campo"
   Va DESPUÉS de v5 y la corrige: mismos ids, mismo JS, otra piel.
   Tres ideas:
   1) Un solo ancho para todo el inicio (cabecera, contenido y barra), también
      en escritorio. Antes la cabecera encogía a su contenido y el resto no.
   2) Las dos acciones son lo único con color lleno de la pantalla: se ven
      desde lejos. Todo lo demás es tinta y papel.
   3) El fondo es un mapa de curvas de nivel, fijo y muy tenue: dice «campo»
      sin pesar nada (un SVG, sin foto difuminada ni desenfoques).
   =================================================================== */
body.home-active{--f6-gut:16px;}
/* ---- 1. el mismo ancho para todo ---- */
body.home-active .head{width:100%; max-width:760px; margin:0 auto; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-radius:0; padding-left:var(--f6-gut); padding-right:var(--f6-gut);}
body.home-active .main{max-width:760px; padding-left:var(--f6-gut) !important; padding-right:var(--f6-gut) !important;}
/* El fondo difuminado con tu última foto se quita del inicio: en claro
   dejaba manchas grises y en oscuro manchas marrones detrás de todo. */
body.home-active .home-ambient-photo{display:none !important;}
body.home-active .home-ambient-bg::after{opacity:0;}

/* ---- 2. el fondo: curvas de nivel ---- */
body.home-active::before{content:''; position:fixed; left:0; right:0; top:0; height:min(62vh,520px); z-index:-1; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M-20 52C62 18 138 96 226 58S380 6 500 44'/%3E%3Cpath d='M-20 84C70 50 150 128 236 90S388 38 500 78'/%3E%3Cpath d='M-20 118C76 86 160 160 246 124S392 74 500 114'/%3E%3Cpath d='M-20 154C84 124 168 192 254 160S396 112 500 152'/%3E%3Cpath d='M-20 192C90 164 176 224 262 198S400 152 500 190'/%3E%3Cpath d='M-20 232C96 206 184 258 270 238S404 196 500 230'/%3E%3Cpath d='M-20 274C102 250 192 294 278 280S408 242 500 272'/%3E%3Cpath d='M-20 318C108 296 200 332 286 324S412 290 500 316'/%3E%3Cpath d='M344 84c26-16 66-8 70 12s-34 34-66 26-30-26-4-38z'/%3E%3Cpath d='M330 76c38-24 96-12 100 20s-50 50-96 40-44-40-4-60z'/%3E%3Cpath d='M92 214c20-10 50-4 52 10s-26 24-50 18-22-20-2-28z'/%3E%3C/svg%3E") 0 0 / 480px 360px repeat;
  opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);}
html:not([data-bg^="claro"]) body.home-active::before{filter:invert(1); opacity:.06;}
/* Un poco de luz del acento arriba a la izquierda, por debajo de las curvas. */
body.home-active::after{content:''; position:fixed; left:0; right:0; top:0; height:380px; z-index:-2; pointer-events:none;
  background:radial-gradient(70% 100% at 0% 0%, color-mix(in srgb,var(--teal) 14%,transparent), transparent 70%);}
html.perf-bajo body.home-active::before{display:block;}

/* ---- 3. la cabecera de la página: sello, saludo y estado ---- */
.f6-hero{display:flex; flex-direction:column; gap:10px; padding:4px 2px 0;}
.f6-sello{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.4;}
.f6-sello-lugar{display:inline-flex; align-items:center; gap:8px; color:var(--text);}
.f6-sello-lugar::before{content:''; width:4px; height:4px; border-radius:50%; background:var(--gold);}
.f6-sello-lugar[hidden]{display:none;}
.f6-hola{margin:-4px 0 0; font-family:var(--display); font-weight:600; font-size:clamp(24px, 7.2vw, 32px); line-height:1.08; letter-spacing:-.01em; color:var(--text); text-wrap:balance;}
.f6-hola .home-identity-saludo{display:inline; font:inherit; letter-spacing:inherit; text-transform:none; color:var(--muted); margin:0;}
.f6-hola .home-identity-hello{display:inline; font:inherit; color:var(--text);}
.f6-hola .home-crown svg{height:.62em;}
.f6-coma{color:var(--muted);}
.f6-estado{display:flex; gap:8px; align-items:stretch;}
.f6-estado .home-pill-nivel{flex:1 1 auto; min-width:0; min-height:54px; padding:8px 12px 8px 8px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent); backdrop-filter:none; -webkit-backdrop-filter:none;}
.f6-estado .home-pill-rango{width:38px; height:38px; border-radius:0; background:transparent; overflow:visible;}
.f6-estado .home-pill-bar{width:100%; height:5px;}
.f6-estado .home-pill-racha{width:54px; border-radius:16px; background:var(--panel); border:1px solid var(--line); backdrop-filter:none; -webkit-backdrop-filter:none;}
.f6-estado .home-pill-racha::before{background:var(--teal);}

/* ---- 4. cabeceras de sección: antetítulo + título ---- */
.f6-cab{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 2px 8px;}
.f6-kicker{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.f6-tit{display:none;}
.f6-registro{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-height:400px;}
body.home-active .home-grid > .f6-registro{flex:1 1 auto; min-height:0; max-height:400px;}
body.home-active .home-grid > .f-acc{flex:initial;}

/* ---- 5. las dos acciones: color lleno, grandes, con su marca de agua ---- */
.f6-registro .f-acc{flex:1 1 auto; min-height:0; display:flex; gap:10px;}
.f6-registro .f-col{gap:8px;}
#homeRegistrarRow .f-btn{flex:1 1 auto; min-height:128px; max-height:none; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 14px 15px;
  border:none; border-radius:22px; text-align:left; overflow:hidden; isolation:isolate; color:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;}
#homeRegistrarRow .f-btn.ver{background:linear-gradient(155deg, color-mix(in srgb,var(--teal) 88%,#fff) 0%, var(--teal) 42%, var(--teal-deep) 100%);
  box-shadow:0 18px 34px -18px color-mix(in srgb,var(--teal-deep) 80%,transparent), inset 0 1px 0 rgba(255,255,255,.25);}
#homeRegistrarRow .f-btn.foto{background:linear-gradient(155deg, color-mix(in srgb,var(--gold) 80%,#fff) 0%, var(--gold) 45%, color-mix(in srgb,var(--gold) 62%,#3a2204) 100%);
  box-shadow:0 18px 34px -18px color-mix(in srgb,var(--gold) 70%,#000), inset 0 1px 0 rgba(255,255,255,.3);}
#homeRegistrarRow .f-btn .ic{width:44px; height:44px; margin:0; border-radius:14px; background:rgba(255,255,255,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
#homeRegistrarRow .f-btn .ic svg{width:24px; height:24px;}
.f6-bt{display:flex; flex-direction:column; gap:3px; min-width:0; position:relative; z-index:1;}
#homeRegistrarRow .f-btn .f6-bt b{font-family:var(--display); font-weight:700; font-size:clamp(24px, 7vw, 30px); line-height:1; letter-spacing:-.01em; color:#fff;}
#homeRegistrarRow .f-btn .f6-bt > span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.04em; color:rgba(255,255,255,.86); line-height:1.3; text-wrap:balance;}
.f6-marca{position:absolute; right:-18px; bottom:-22px; width:118px; height:118px; color:#fff; opacity:.16; transform:rotate(-10deg); z-index:0; pointer-events:none;}
#homeRegistrarRow .f-btn .chip{top:14px; right:14px; background:rgba(255,255,255,.24); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); padding:3px 8px;}
#homeRegistrarRow .f-btn:focus-visible{outline:3px solid var(--text); outline-offset:3px;}
/* Las secundarias: botones de verdad, no enlaces punteados. */
#homeRegistrarRow .f-sec{height:42px; border:1px solid var(--line); border-style:solid; background:var(--panel); color:var(--text); border-radius:14px;
  font-family:var(--display); font-weight:600; font-size:var(--fs-2); gap:8px; justify-content:flex-start; padding:0 12px; box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent);}
#homeRegistrarRow .f-sec .ic{width:24px; height:24px; border-radius:8px;}
#homeRegistrarRow .f-sec .ic svg{width:15px; height:15px;}

/* ---- 6. hoy en tu zona: una lista, no tres cajas sueltas ---- */
#homeHoy.f-hoy{display:flex; flex-direction:column; gap:0; background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent);}
#homeHoy .f-celda{flex:0 0 auto; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; min-height:56px; padding:9px 12px 9px 14px;
  border:none; border-top:1px solid var(--line); margin-top:-1px; border-radius:0; background:transparent; text-align:left; backdrop-filter:none; -webkit-backdrop-filter:none;}
#homeHoy .f-celda .tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;}
#homeHoy .f-celda .tx b{font-family:var(--display); font-weight:700; font-size:var(--fs-3); color:var(--text);}
#homeHoy .f-celda .tx b span{display:inline; font:inherit; color:inherit; margin:0;}
#homeHoy .f-celda .tx > span{font-family:var(--body, inherit); font-size:var(--fs-1); color:var(--muted); margin:0; letter-spacing:0;}
#homeHoy .f-celda.luz .ic{width:34px; height:34px;}
#homeHoy .f-celda.luz.viva .tx b{color:var(--gold);}
html[data-bg^="claro"] #homeHoy .f-celda.luz.viva .tx b{color:var(--acc-amber);}
#homeHoy .f-celda.cerca .tx b{color:var(--text);}
#homeHoy .f-celda .aves,#homeHoy .f-celda .ths{min-width:34px;}
#homeHoy .f-celda .aves .cara{width:30px; height:30px;}
#homeHoy .f-celda .ths .cara{width:30px; height:30px; border-radius:9px;}
.f6-ir{width:16px; height:16px; flex:0 0 auto; color:var(--muted);}
#homeHoy .f-celda:active{background:var(--panel2); transform:none;}
/* Sin ninguna fila que enseñar, fuera la sección entera. */
.f6-hoy:has(#homeLuz[style*="none"]):has(#homeContCerca[style*="none"]):has(#btnPendientes:not(.show)):has(#btnDesconocidas:not(.show)){display:none;}

/* ---- 7. pantallas bajas: se recorta lo accesorio, nunca las acciones ---- */
@media (max-height:760px){
  .f6-registro .f6-cab{display:none;}
  .f6-hero{gap:8px;}
  .f6-hola{font-size:clamp(22px,6.4vw,27px);}
  #homeRegistrarRow .f-btn{min-height:112px;}
}
@media (max-height:690px){
  .f6-sello{display:none;}
  .f6-hoy .f6-cab{display:none;}
  #homeHoy .f-celda{min-height:50px;}
}
/* ---- 8. escritorio: la misma columna, con más aire ---- */
@media (min-width:700px){
  body.home-active{--f6-gut:24px;}
  body.home-active .home-grid > .f6-registro{max-height:430px;}
  .f6-marca{width:150px; height:150px;}
}
/* INICIO v6b: lo último que viste, de fondo en cada acción. «La vi» enseña
   el ave de tu último avistamiento y «Con foto», la de tu última captura,
   las dos con la foto de ejemplo de la ficha. Un velo ligero del color de cada acción arriba y uno más
   hondo abajo, para que se lea el texto sin tapar el ave. Sin registros,
   se queda el degradado de color de siempre. */
#homeRegistrarRow .f-btn.ver{--f6-tinte:var(--teal); --f6-hondo:color-mix(in srgb,var(--teal-deep) 82%,#000);}
#homeRegistrarRow .f-btn.foto{--f6-tinte:var(--gold); --f6-hondo:color-mix(in srgb,var(--gold) 48%,#1c1002);}
#homeRegistrarRow .f6-foto{position:absolute; inset:0; z-index:0; display:none; background:var(--f6-hondo); pointer-events:none;}
#homeRegistrarRow .f-btn.con-ave .f6-foto{display:block;}
#homeRegistrarRow .f6-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block;}
#homeRegistrarRow .f6-foto::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--f6-tinte) 30%,transparent) 0%, color-mix(in srgb,var(--f6-tinte) 10%,transparent) 32%, color-mix(in srgb,var(--f6-tinte) 8%,transparent) 50%, color-mix(in srgb,var(--f6-hondo) 88%,transparent) 100%);}
#homeRegistrarRow .f-btn.con-ave .f6-marca{display:none;}
#homeRegistrarRow .f-btn .ic{position:relative; z-index:1;}
#homeRegistrarRow .f-btn .chip{z-index:2;}
#homeRegistrarRow .f-btn.con-ave .ic{background:color-mix(in srgb,var(--f6-hondo) 38%,transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
#homeRegistrarRow .f-btn.con-ave .f6-bt{text-shadow:0 1px 10px rgba(0,0,0,.45);}
#homeRegistrarRow .f-btn.con-ave .f6-bt > span{color:#fff;}
html.sin-blur #homeRegistrarRow .f-btn.con-ave .ic{backdrop-filter:none; -webkit-backdrop-filter:none; background:color-mix(in srgb,var(--f6-hondo) 55%,transparent);}
/* v6c: el rango de muestra (ilustración sin fondo) sobre un papel suave del
   color de la acción, entero y centrado, sin recortar. */
#homeRegistrarRow .f-btn.es-rango .f6-foto{background:linear-gradient(180deg, color-mix(in srgb,var(--f6-tinte) 14%,var(--panel)) 0%, color-mix(in srgb,var(--f6-tinte) 30%,var(--panel)) 55%, var(--f6-hondo) 100%);}
#homeRegistrarRow .f-btn.es-rango .f6-foto img{inset:auto; left:8%; right:8%; top:12%; width:84%; height:58%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));}
#homeRegistrarRow .f-btn.con-ave .chip{background:color-mix(in srgb,var(--f6-hondo) 55%,transparent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
#homeRegistrarRow .f-btn.es-rango .ic{background:color-mix(in srgb,var(--f6-hondo) 55%,transparent);}
/* Sin nada en «Hoy en tu zona» (típico el primer día), las acciones usan ese hueco. */
body.home-active .home-grid:has(> .f6-hoy #homeLuz[style*="none"]):has(> .f6-hoy #homeContCerca[style*="none"]):has(> .f6-hoy #btnPendientes:not(.show)):has(> .f6-hoy #btnDesconocidas:not(.show)) > .f6-registro{max-height:520px;}
#homeRegistrarRow .f-btn.es-rango .f6-foto::after{background:linear-gradient(180deg, transparent 0%, transparent 58%, color-mix(in srgb,var(--f6-hondo) 92%,transparent) 100%);}
@media (max-width:379px){ body.home-active{--f6-gut:12px;} }
@media (hover:hover){
  #homeRegistrarRow .f-btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow var(--dur-2) var(--ease);}
  #homeRegistrarRow .f-btn:hover{transform:translateY(-2px);}
  #homeRegistrarRow .f-sec:hover,#homeHoy .f-celda:hover{background:var(--panel2);}
}
/* En oscuro el acento ya es claro: sin mezclar con blanco arriba, que
   dejaba las tarjetas lavadas. */
html:not([data-bg^="claro"]) #homeRegistrarRow .f-btn.ver{background:linear-gradient(155deg, color-mix(in srgb,var(--teal) 78%,var(--teal-deep)) 0%, var(--teal-deep) 58%, color-mix(in srgb,var(--teal-deep) 70%,#000) 100%);}
html:not([data-bg^="claro"]) #homeRegistrarRow .f-btn.foto{background:linear-gradient(155deg, var(--gold) 0%, color-mix(in srgb,var(--gold) 72%,#3a2204) 55%, color-mix(in srgb,var(--gold) 45%,#1c1002) 100%);}

/* ---------- «A tiro» en la colección (22/09/2026) ---------- */
.cv2-atiro{display:flex; align-items:center; gap:9px; width:100%; margin-top:9px; min-height:40px; padding:8px 12px;
  border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
  background:color-mix(in srgb,var(--gold) 10%,var(--panel)); color:var(--text); font:inherit; font-size:var(--fs-2);
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.cv2-atiro[hidden]{display:none;}
.cv2-atiro:active{opacity:.75;}
.cv2-atiro .pt{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.cv2-atiro .tx{flex:1 1 auto; min-width:0; line-height:1.3;}
.cv2-atiro .tx b{font-family:var(--mono); color:var(--gold); font-weight:700;}
.cv2-atiro svg{width:16px; height:16px; flex-shrink:0; color:var(--muted);}
.cv2-atiro.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.cv2-atiro.on .pt{background:var(--on-teal);}
.cv2-atiro.on svg{color:var(--on-teal);}
html[data-bg^="claro"] .cv2-atiro:not(.on) .tx b{color:var(--acc-amber);}
.atiro-nota{font-size:var(--fs-1); color:var(--muted); margin:10px 2px 0; line-height:1.4;}
.letter.atiro-sep{display:flex; align-items:center; gap:7px;}
.letter.atiro-sep .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.letter.atiro-sep .n{margin-left:auto; color:var(--muted); letter-spacing:0;}

/* ---------- Aviso de rareza local al registrar (22/09/2026) ---------- */
.rzl{display:flex; gap:10px; align-items:flex-start; margin:0 0 12px; padding:10px 12px; border-radius:var(--r-md);
  background:color-mix(in srgb,var(--acc-lilac) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--acc-lilac) 42%,transparent);
  text-align:left; color:var(--text);}
.rzl[hidden]{display:none;}
.rzl.fuera{background:color-mix(in srgb,var(--gold) 11%,var(--panel)); border-color:color-mix(in srgb,var(--gold) 42%,transparent);}
.rzl-ic{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--acc-lilac) 20%,transparent); color:var(--acc-lilac);}
.rzl.fuera .rzl-ic{background:color-mix(in srgb,var(--gold) 20%,transparent); color:var(--gold);}
html[data-bg^="claro"] .rzl.fuera .rzl-ic{color:var(--acc-amber);}
.rzl-ic svg{width:17px; height:17px;}
.rzl-tx{display:flex; flex-direction:column; gap:2px; min-width:0; font-size:var(--fs-1); line-height:1.4; color:var(--muted);}
.rzl-tx b{font-family:var(--display); font-size:var(--fs-2); font-weight:600; color:var(--text);}

/* ---------- Calendario local de la ficha (22/09/2026) ---------- */
.fcal{margin:2px 0 4px;}
.fcal-cab{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.fcal-tit{font-size:var(--fs-2); color:var(--text); font-weight:600;}
.fcal-badge{background:var(--teal); color:var(--on-teal); border:none;}
.fcal-fila{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.fcal-m{display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; margin:0; border:0; background:none; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; min-width:0;}
.fcal-m i{display:block; width:100%; height:34px; border-radius:6px; background:var(--fcal-c); box-sizing:border-box;}
.fcal-m span{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); line-height:1; position:relative; padding-bottom:6px;}
.fcal-m.hoy span{color:var(--text); font-weight:700;}
.fcal-m.hoy i{outline:2px solid var(--text); outline-offset:2px;}
.fcal-m.sel:not(.hoy) i{outline:2px solid var(--muted); outline-offset:2px;}
.fcal-m.mia span::after{content:""; position:absolute; left:50%; bottom:0; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--gold);}
.fcal-m:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:6px;}
.fcal-m.t0, .fcal-sw.t0{--fcal-c:var(--teal);}
.fcal-m.t1, .fcal-sw.t1{--fcal-c:color-mix(in srgb,var(--teal) 66%,var(--panel));}
.fcal-m.t2, .fcal-sw.t2{--fcal-c:color-mix(in srgb,var(--teal) 42%,var(--panel));}
.fcal-m.t3, .fcal-sw.t3{--fcal-c:color-mix(in srgb,var(--teal) 24%,var(--panel));}
.fcal-m.t4, .fcal-sw.t4{--fcal-c:color-mix(in srgb,var(--teal) 11%,var(--panel));}
.fcal-m.tx i{background:transparent; border:1px dashed var(--line);}
/* En los temas oscuros los dos tramos flojos se pierden contra el panel: sus
   propios pasos, un poco más altos (la rampa sigue siendo monótona). */
html:not([data-bg^="claro"]) .fcal-m.t3, html:not([data-bg^="claro"]) .fcal-sw.t3{--fcal-c:color-mix(in srgb,var(--teal) 30%,var(--panel));}
html:not([data-bg^="claro"]) .fcal-m.t4, html:not([data-bg^="claro"]) .fcal-sw.t4{--fcal-c:color-mix(in srgb,var(--teal) 18%,var(--panel));}
.fcal-info{margin:10px 0 8px; font-size:var(--fs-2); color:var(--text); line-height:1.4; min-height:1.4em;}
.fcal-info .fcal-dato{color:var(--muted);}
.fcal-info .fcal-tuya{color:var(--gold);}
html[data-bg^="claro"] .fcal-info .fcal-tuya{color:var(--acc-amber);}
.fcal-ley{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:var(--fs-0); color:var(--muted); font-family:var(--mono);}
.fcal-ley span{display:inline-flex; align-items:center; gap:5px;}
.fcal-sw{display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--fcal-c);}
.fcal-sw.tx{background:transparent; border:1px dashed var(--line); box-sizing:border-box;}
.fcal-sw.mia{width:6px; height:6px; border-radius:50%; background:var(--gold);}
.fcal-nota{margin:10px 0 0; font-size:var(--fs-1); color:var(--muted); line-height:1.45;}

/* ---------- IA + zona (22/09/2026) ---------- */
.ia-zona{margin:8px 2px 0; font-size:var(--fs-1); color:var(--muted); line-height:1.45; text-align:center;}
.ia-zona b{color:var(--text); font-weight:600;}
.ia-zona.rara{color:var(--text);}
.ia-zona.rara b{color:var(--acc-lilac);}
.reg-alt-zona{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.reg-alt-zona.z0, .reg-alt-zona.z1, .reg-alt-zona.z2{color:var(--teal-on-panel, var(--teal));}
.reg-alt-zona.z4, .reg-alt-zona.z5{color:var(--acc-lilac);}
/* RENDIMIENTO paso 1 (24/09/2026): igual que ya hacía la colección
   (.pokedex-grid .poke-card), las cuadrículas de logros (192) y los mazos del
   álbum solo calculan estilos, posición y pintado de lo que está a la vista;
   el resto reserva su alto y se calcula al acercarse. Medido: abrir Mi álbum
   pasa de ~0,7 s de bloqueo a ~0,1 s en un móvil medio. overflow-clip-margin:
   content-visibility recorta lo que sobresale (sombras); con ese margen se
   sigue viendo igual que antes. El álbum (24/09/2026) ya no usa mazos: sus
   rejillas van en trozos de 12, ver «MI ÁLBUM · rediseño» en
   app-tras-leaflet.css. */
.ach-tile{content-visibility:auto; contain-intrinsic-size:auto 111px; overflow-clip-margin:24px;}

/* ===================================================================
   PERFIL v3 (24/09/2026) — sale del prototipo www/Claude outputs/
   prototipo-perfil. Mismo diseño para tu perfil, para el de otro jugador
   y para la "vista pública" (tu perfil como lo ven los demás):
   portada con tu foto destacada, anillo de XP, frase, tres cifras,
   vitrina, y dos pestañas: Escaparate (fotos elegidas) y Colección
   (la AveDex entera del jugador).
   =================================================================== */
.pf3{--pf3-faint:color-mix(in srgb, var(--muted) 62%, var(--panel)); --pf3-sticky:var(--sat,0px); --pf3-heart:#F0616D;
  position:relative; color:var(--text); margin:-12px -18px 0; padding-bottom:28px}
:where(.pf3) button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.pf3-btn,.pf3-cristal,.pf3-elegible,.pf3-gusta,.pf3-chip,.pf3-pestana,.pf3-pildora,.pf3-enlace{font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.pf3-btn{color:var(--text)}
.pf3 svg{display:block}
.pf3-anim{animation:pf3Sube .5s var(--ease) both; animation-delay:calc(var(--i,0)*45ms)}
@keyframes pf3Sube{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* portada: tu foto destacada, desenfocada */
.pf3-portada{position:relative; height:176px; overflow:hidden}
.pf3-portada-img{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(22px) saturate(1.25); opacity:.85; transform:scale(1.1)}
.pf3-portada::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--bg2) 70%, transparent) 70%, var(--bg2) 100%)}
.pf3-cristal{position:absolute; z-index:2; top:calc(12px + var(--sat,0px)); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(10,16,14,.42); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#EEF3EF; transition:transform var(--dur-0)}
.pf3-cristal:active{transform:scale(.92)}
.pf3-cristal svg{width:20px; height:20px}
.pf3-cristal.izq{left:14px} .pf3-cristal.der{right:14px}

.pf3-cabeza{position:relative; margin-top:-64px; padding:0 20px; display:flex; flex-direction:column; align-items:center; text-align:center}
.pf3-avatar{position:relative; width:104px; height:104px; border-radius:50%; padding:3px; border:0; background:conic-gradient(var(--rc) calc(var(--xp,1)*1turn), color-mix(in srgb, var(--rc) 25%, var(--line)) 0)}
.pf3-avatar-in{width:100%; height:100%; border-radius:50%; border:3px solid var(--bg2); background:var(--panel2) center/cover; display:grid; place-items:center; font-family:var(--display); font-size:40px; font-weight:600; overflow:hidden}
.pf3-avatar-in img{width:100%; height:100%; object-fit:cover}
.pf3-medallon{position:absolute; right:-6px; bottom:0; width:40px; height:40px; border-radius:50%; border:3px solid var(--bg2); background:color-mix(in srgb, var(--rc) 35%, var(--panel2)); display:grid; place-items:end center; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pf3-medallon img,.pf3-medallon svg{width:auto!important; height:30px!important; max-width:none; margin-bottom:1px}
.pf3-nombre{margin:12px 0 0; font-family:var(--display); font-weight:700; font-size:30px; line-height:1.05; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; text-wrap:balance}
.pf3-rango{margin-top:6px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted); background:none; border:0; padding:0}
.pf3-rango i{width:8px; height:8px; border-radius:50%; background:var(--rc); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 30%, transparent)}
.pf3-rango b{color:var(--text); font-weight:600}
.pf3-xp{margin-top:10px; width:min(240px,100%)}
.pf3-xp-barra{height:5px; border-radius:99px; background:var(--panel2); overflow:hidden}
.pf3-xp-barra i{display:block; height:100%; width:calc(var(--xp)*100%); border-radius:inherit; background:linear-gradient(90deg, var(--rc), var(--gold))}
.pf3-xp-t{margin-top:5px; font-family:var(--mono); font-size:10.5px; color:var(--pf3-faint)}
.pf3-reclamar{margin-top:8px; padding:6px 14px; border-radius:99px; border:0; background:var(--gold); color:var(--on-gold); font-size:12.5px; font-weight:700}
.pf3-bio{margin:12px 0 0; max-width:31ch; font-size:14.5px; line-height:1.45; text-wrap:balance; overflow-wrap:anywhere}
.pf3-meta{margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.pf3-meta > *{display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0}
.pf3-meta svg{width:13px; height:13px}

.pf3-acciones{display:flex; gap:8px; margin:16px 20px 0}
.pf3-btn{flex:1; min-height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:14px; font-weight:650; border:1px solid var(--line); background:var(--panel); transition:transform var(--dur-0)}
.pf3-btn:active{transform:scale(.97)}
.pf3-btn:disabled{opacity:.55; cursor:default; transform:none}
.pf3-btn svg{width:17px; height:17px}
.pf3-btn.oro{background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #fff), var(--gold)); color:var(--on-gold); border-color:transparent; box-shadow:0 8px 20px -12px var(--gold)}
.pf3-btn.ico{flex:0 0 42px}

/* las tres cifras, con las mismas insignias que en el resto de la app */
.pf3-cifras{display:grid; grid-template-columns:repeat(3,1fr); margin:18px 20px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pf3-cifra{display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; background:none; border:0; padding:0}
.pf3-cifra+.pf3-cifra::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line)}
.pf3-cifra .stat-badge{width:32px; height:32px; border-radius:var(--r-md); border:none}
.pf3-cifra .stat-badge svg{width:17px; height:17px}
.pf3-cifra .stat-badge.badge-eye{background:rgba(46,182,164,.16); color:var(--teal)}
.pf3-cifra .stat-badge.badge-pokeball{background:rgba(214,169,90,.16); color:var(--gold)}
.pf3-cifra .stat-badge.badge-medal{background:color-mix(in srgb, var(--acc-lilac, #9B6DD6) 16%, transparent); color:var(--acc-lilac, #9B6DD6)}
.pf3-cifra b{font-family:var(--display); font-weight:600; font-size:23px; line-height:1; font-variant-numeric:tabular-nums}
.pf3-cifra b small{font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--pf3-faint); margin-left:2px}
.pf3-cifra span.k{font-size:11.5px; color:var(--muted)}

/* Mi perfil · estilo «Instagram pro» (28/10/2026): foto a la izquierda y cifras a la
   derecha, resumen de progreso debajo. Va después de lo anterior para ganarle. */
.pf3-portada{height:124px}
.pf3-portada::after{background:linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--bg2) 55%, transparent) 75%, var(--bg2) 100%)}
.pf3-cabeza{margin-top:-44px; padding:0 18px; align-items:stretch; text-align:left}
.pf3-id{display:flex; align-items:flex-end; gap:14px; min-width:0}
.pf3-avatar{width:88px; height:88px; flex:none}
.pf3-avatar-in{font-size:34px}
.pf3-medallon{width:34px; height:34px; right:-5px}
.pf3-medallon img,.pf3-medallon svg{height:26px!important}
.pf3-cifras{flex:1; min-width:0; display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0 0 2px; border:0}
.pf3-cifra{gap:2px}
.pf3-cifra+.pf3-cifra::before{display:none}
.pf3-cifra b{font-size:20px}
.pf3-cifra b small{font-size:10px}
.pf3-cifra span.k{font-size:11px}
.pf3-cifra:disabled{opacity:1; cursor:default}
.pf3-nombre{justify-content:flex-start; font-size:24px; margin-top:12px; text-align:left}
.pf3-rango{align-self:flex-start; margin-top:4px}
.pf3-rango:disabled{opacity:1}
.pf3-bio{margin:8px 0 0; max-width:none; text-wrap:pretty}
.pf3-meta{justify-content:flex-start; margin-top:8px}
.pf3-meta button:disabled{opacity:1}
.pf3-acciones{margin:14px 18px 0}
.pf3-resumen{margin:14px 18px 0; padding:12px 14px; display:flex; gap:14px; align-items:center; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.pf3-anillo{width:72px; height:72px; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--panel2) 0)}
.pf3-anillo>div{width:calc(100% - 10px); height:calc(100% - 10px); border-radius:50%; background:var(--panel); display:grid; place-content:center; text-align:center}
.pf3-anillo b{font-family:var(--display); font-weight:700; font-size:16px; line-height:1}
.pf3-anillo small{display:block; margin-top:2px; font-family:var(--mono); font-size:8.5px; color:var(--muted)}
.pf3-res-d{flex:1; min-width:0; display:grid; gap:9px}
.pf3-resumen .pf3-xp{width:auto; margin-top:0}
.pf3-pills{display:flex; flex-wrap:wrap; gap:6px}
.pf3-pill{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; border:0; background:var(--panel2); font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--text)}
.pf3-pill svg{width:12px; height:12px}
.pf3-pill:disabled{opacity:1; cursor:default}
.pf3-reclamar{display:block; margin:10px 18px 0; width:calc(100% - 36px); padding:10px 14px}
.pf3-vs{margin:10px 18px 0; padding:12px; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; text-align:center; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.pf3-vs b{display:block; font-family:var(--display); font-weight:700; font-size:22px; line-height:1.1}
.pf3-vs small{display:block; font-size:11px; color:var(--muted)}
.pf3-vs span{font-family:var(--mono); font-size:10px; color:var(--muted)}
.pf3-rejilla{gap:2px}
.pf3-esc-cab{padding-left:18px; padding-right:18px}

/* vitrina */
.pf3-seccion{margin-top:20px}
.pf3-eti{padding:0 20px; margin:0 0 10px; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.pf3-vitrina{display:flex; gap:10px; overflow-x:auto; padding:2px 20px 4px; scroll-padding-inline:20px; scrollbar-width:none}
.pf3-vitrina::-webkit-scrollbar{display:none}
.pf3-trofeo{flex:none; min-width:140px; max-width:200px; display:flex; gap:10px; align-items:center; padding:10px 12px 10px 10px; border-radius:16px; background:var(--panel); border:1px solid var(--line); text-align:left}
.pf3-trofeo-m{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mc) 60%, #fff), var(--mc) 60%, color-mix(in srgb, var(--mc) 70%, #000)); color:#1b1408; box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 25%, transparent)}
.pf3-trofeo-m svg{width:19px; height:19px}
.pf3-trofeo b{display:block; font-size:12.5px; line-height:1.2}
.pf3-trofeo small{display:block; margin-top:2px; font-family:var(--mono); font-size:10.5px; color:var(--muted)}

/* pestañas */
.pf3-pestanas{position:sticky; top:var(--pf3-sticky); z-index:6; display:grid; grid-template-columns:1fr 1fr; margin-top:18px; background:var(--bg2); border-bottom:1px solid var(--line)}
.pf3-pestana{padding:13px 0 11px; display:flex; gap:7px; justify-content:center; align-items:center; font-size:13.5px; font-weight:650; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur-1),border-color var(--dur-1)}
.pf3-pestana svg{width:17px; height:17px}
.pf3-pestana small{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--pf3-faint)}
.pf3-pestana[aria-selected="true"]{color:var(--text); border-bottom-color:var(--text)}

/* escaparate: destacada + 2 a la derecha + 2 abajo + la sexta (o "+N") */
.pf3-esc-cab{display:flex; align-items:center; gap:10px; padding:12px 20px 10px; font-size:12.5px; color:var(--muted)}
.pf3-esc-cab .sp{flex:1}
.pf3-pildora{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:99px; border:1px solid var(--line); background:var(--panel); font-size:12px; font-weight:600; color:var(--muted)}
.pf3-pildora svg{width:13px; height:13px}
.pf3-enlace{font-size:13px; font-weight:650; color:var(--teal); background:none; border:0; padding:4px 0}
.pf3-rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; grid-auto-flow:dense}
.pf3-tesela{position:relative; aspect-ratio:1; overflow:hidden; background:var(--panel2); border:0; padding:0; max-width:100%}
.pf3-tesela img{width:100%; height:100%; object-fit:cover; display:block}
.pf3-tesela.grande{grid-column:span 2; grid-row:span 2}
.pf3-tesela.grande::after{content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events:none}
.pf3-tesela-et{position:absolute; left:12px; right:12px; bottom:10px; z-index:1; text-align:left; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pf3-tesela-et b{display:block; font-family:var(--display); font-weight:600; font-size:17px}
.pf3-tesela-et small{font-family:var(--mono); font-size:10.5px; opacity:.88; display:inline-flex; align-items:center; gap:4px}
.pf3-tesela-et svg{width:11px; height:11px}
.pf3-tesela-dest{position:absolute; top:10px; left:10px; z-index:1; padding:4px 9px; border-radius:99px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.pf3-tesela.mas img{filter:blur(2px) brightness(.42); transform:scale(1.08)}
.pf3-tesela-mas{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:2px}
.pf3-tesela-mas b{font-family:var(--display); font-weight:600; font-size:28px; line-height:1}
.pf3-tesela-mas small{font-family:var(--mono); font-size:10px; letter-spacing:.06em; opacity:.85}
.pf3-vacio,.pf3-candado{margin:6px 20px 0; padding:22px 18px; border-radius:18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px}
.pf3-vacio{border:1.5px dashed var(--line)}
.pf3-vacio img{width:84px; height:auto}
.pf3-vacio h3,.pf3-candado h3{margin:0; font-family:var(--display); font-weight:600; font-size:19px}
.pf3-vacio p,.pf3-candado p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.45; max-width:30ch}
.pf3-vacio .pf3-btn,.pf3-candado .pf3-btn{flex:none; padding:0 18px; margin-top:4px}
.pf3-candado{position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); padding-top:26px}
.pf3-candado-f{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:100%; margin-bottom:10px; border-radius:12px; overflow:hidden}
.pf3-candado-f i{aspect-ratio:1; background:var(--panel2)}
.pf3-candado-f i:nth-child(2n){background:color-mix(in srgb, var(--panel2) 70%, var(--line))}
.pf3-candado-ic{position:absolute; top:56px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--bg2); border:1px solid var(--line); box-shadow:var(--sh-3)}
.pf3-candado-ic svg{width:24px; height:24px}

/* colección */
.pf3-col-res{margin:16px 20px 0; padding:16px 16px 14px; border-radius:18px; background:var(--panel); border:1px solid var(--line)}
.pf3-col-num{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.pf3-col-num b{font-family:var(--display); font-weight:600; font-size:36px; line-height:1; font-variant-numeric:tabular-nums}
.pf3-col-num span{font-size:13px; color:var(--muted)}
.pf3-col-barra{display:flex; gap:2px; height:10px; margin-top:12px; border-radius:99px; overflow:hidden; background:var(--panel2)}
.pf3-col-barra i{display:block; height:100%}
.pf3-col-ley{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:12px; font-size:12.5px; color:var(--muted)}
.pf3-col-ley span{display:flex; align-items:center; gap:7px}
.pf3-col-ley b{color:var(--text); font-variant-numeric:tabular-nums}
.pf3-col-ley svg{width:16px; height:16px; flex:none}
.pf3-aro{width:14px; height:14px; border-radius:5px; border:2.5px solid var(--gold); flex:none}
.pf3-chips{display:flex; gap:6px; overflow-x:auto; padding:14px 20px 12px; scroll-padding-inline:20px; scrollbar-width:none}
.pf3-chips::-webkit-scrollbar{display:none}
.pf3-chip{flex:none; padding:7px 12px; border-radius:99px; border:1px solid var(--line); background:var(--panel); font-size:12.5px; font-weight:600; color:var(--muted); display:inline-flex; gap:6px; align-items:center}
.pf3-chip small{font-family:var(--mono); font-size:11px; font-weight:400; opacity:.8}
.pf3-chip[aria-pressed="true"]{background:var(--text); color:var(--bg2); border-color:var(--text)}
.pf3-chip.clave{border-color:color-mix(in srgb, var(--gold) 55%, var(--line)); color:var(--gold)}
.pf3-chip.clave[aria-pressed="true"]{background:var(--gold); color:var(--on-gold); border-color:var(--gold)}
.pf3-aves{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 8px; padding:2px 14px 0}
@media (min-width:560px){ .pf3-aves{grid-template-columns:repeat(5,minmax(0,1fr))} }
.pf3-ave{display:flex; flex-direction:column; gap:6px; min-width:0; text-align:center; background:none; border:0; padding:0; content-visibility:auto; contain-intrinsic-size:auto 118px}
.pf3-ave-img{position:relative; display:block; aspect-ratio:1; border-radius:14px}
.pf3-ave-img .ref{width:100%!important; height:100%!important; border-radius:14px}
.pf3-ave-b{position:absolute; right:4px; bottom:4px; z-index:2; width:19px; height:19px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.pf3-ave-b svg{width:19px; height:19px}
.pf3-ave-n{font-size:11px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em}
.pf3-ave.e1 .ref img{filter:saturate(.55) brightness(.92)}
.pf3-ave.e0 .pf3-ave-img{display:grid; place-items:center; border:1px solid var(--line); background:repeating-linear-gradient(135deg, var(--panel) 0 7px, color-mix(in srgb, var(--panel2) 70%, var(--panel)) 7px 14px)}
.pf3-ave.e0 .pf3-ave-img b{font-family:var(--display); font-weight:600; font-size:22px; color:var(--pf3-faint)}
.pf3-ave-num{position:absolute; left:7px; top:5px; font-family:var(--mono); font-size:9.5px; color:var(--pf3-faint)}
.pf3-ave.e0 .pf3-ave-n{color:var(--pf3-faint)}
.pf3-aves-vacio{grid-column:1/-1; padding:30px 10px; text-align:center; color:var(--muted); font-size:13.5px}

/* aviso de "vista pública" */
.pf3-aviso{position:sticky; bottom:calc(86px + var(--sab,0px)); z-index:7; margin:18px auto 0; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:99px; background:var(--teal); color:#062520; font-size:13px; font-weight:650; box-shadow:var(--sh-4); width:max-content; max-width:calc(100% - 32px)}
.pf3-aviso svg{width:18px; height:18px; flex:none}
.pf3-aviso button{padding:6px 12px; border-radius:99px; border:0; background:rgba(0,0,0,.18); font-size:12.5px; font-weight:650; color:inherit}

/* la ficha de un ave abierta desde el perfil de otro jugador va por encima */
body:has(> .pf3-pant) > #ov{z-index:var(--z-hoja-top)}
/* perfil de otro jugador: pantalla completa sobre lo que haya */
.overlay.pf3-pant{padding:0; display:block; background:var(--bg2); backdrop-filter:none}
.pf3-error{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:80px 28px 40px; text-align:center}
.pf3-error img{width:96px; height:auto; margin-bottom:4px}
.pf3-error h2{margin:0; font:600 var(--fs-5,22px) var(--display); color:var(--text); text-wrap:balance}
.pf3-error p{margin:0 0 10px; max-width:30ch; font-size:var(--fs-3); line-height:1.5; color:var(--muted)}
.pf3-error .add{min-width:200px}
.pf3-error-volver{border:0; background:none; padding:10px 14px; font:600 var(--fs-3) var(--sans,system-ui); color:var(--muted); cursor:pointer}
.pf3-pant-scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain}
.pf3-pant .pf3{margin:0 auto; max-width:640px; --pf3-sticky:calc(var(--sat,0px) + 64px); padding-bottom:calc(28px + var(--sab,0px))}
.pf3-barra{position:absolute; top:0; left:0; right:0; max-width:640px; margin:0 auto; z-index:8; display:flex; align-items:center; gap:10px; padding:calc(12px + var(--sat,0px)) 14px 12px; transition:background var(--dur-2),border-color var(--dur-2); border-bottom:1px solid transparent}
.pf3-barra.solida{background:color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.pf3-barra .pf3-cristal{position:static}
.pf3-barra.solida .pf3-cristal{background:transparent; border-color:transparent; color:var(--text)}
.pf3-barra-t{flex:1; min-width:0; font-family:var(--display); font-weight:600; font-size:17px; opacity:0; transform:translateY(6px); transition:opacity var(--dur-1),transform var(--dur-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf3-barra.solida .pf3-barra-t{opacity:1; transform:none}

/* hojas inferiores del perfil (menú, editar, estado de un ave) */
.overlay.pf3-hoja-ov{padding:0; align-items:flex-end; background:rgba(0,0,0,.5); backdrop-filter:none}
.pf3-hoja{width:100%; max-width:560px; margin:0 auto; max-height:88dvh; overflow:auto; background:var(--panel); border-radius:24px 24px 0 0; border:1px solid var(--line); border-bottom:0; padding:8px 18px calc(22px + var(--sab,0px)); box-shadow:var(--sh-4); animation:pf3HojaIn var(--dur-2) var(--ease)}
@keyframes pf3HojaIn{from{transform:translateY(40%); opacity:.4}to{transform:none; opacity:1}}
.pf3-asa{width:40px; height:4px; border-radius:99px; background:var(--line); margin:4px auto 14px}
.pf3-hoja h3{margin:0 0 4px; font-family:var(--display); font-weight:600; font-size:21px}
.pf3-hoja-sub{margin:0 0 14px; color:var(--muted); font-size:13px}
.pf3-fila{width:100%; display:flex; align-items:center; gap:14px; padding:13px 4px; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; color:var(--text); font:inherit; cursor:pointer}
.pf3-fila:last-child{border-bottom:0}
.pf3-fila-ic{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--panel2); flex:none}
.pf3-fila-ic svg{width:18px; height:18px}
.pf3-fila b{display:block; font-size:14.5px; font-weight:600}
.pf3-fila small{display:block; margin-top:1px; font-size:12px; color:var(--muted)}
.pf3-fila .pf3-flecha{margin-left:auto; color:var(--pf3-faint, var(--muted)); width:16px; height:16px; flex:none}
.pf3-fila.peligro b{color:var(--err-text)}
.pf3-fila-badge{margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-size:12px; font-weight:700; display:grid; place-items:center}
.pf3-hoja .pp-almacen-bar{margin-top:6px; width:160px}
.pf3-campo{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.pf3-campo label,.pf3-campo .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pf3-campo textarea{width:100%; font:inherit; font-size:14.5px; color:var(--text); background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; resize:none}
.pf3-campo-n{align-self:flex-end; font-family:var(--mono); font-size:10.5px; color:var(--muted)}
.pf3-opcion{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); text-align:left; width:100%; color:var(--text); font:inherit; cursor:pointer}
.pf3-opcion + .pf3-opcion{margin-top:6px}
.pf3-opcion[aria-checked="true"]{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 12%, var(--bg2))}
.pf3-opcion i{width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; display:grid; place-items:center}
.pf3-opcion[aria-checked="true"] i{border-color:var(--teal)}
.pf3-opcion[aria-checked="true"] i::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal)}
.pf3-opcion b{display:block; font-size:14px}
.pf3-opcion small{display:block; font-size:12px; color:var(--muted)}
.pf3-hoja-pie{display:flex; gap:8px; margin-top:18px}
.pf3-ficha-mini{display:flex; gap:14px; align-items:center; margin-bottom:6px}
.pf3-ficha-mini .pf3-ave-img{width:84px; flex:none}
.pf3-ficha-mini .pf3-ave-img .ref{border-radius:14px}
.pf3-ficha-mini em{display:block; font-family:var(--display); font-style:italic; color:var(--muted); font-size:14px}
.pf3-estado{display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); font-size:14px}
.pf3-estado:last-of-type{border-bottom:0}
.pf3-estado > span:first-child{width:62px; flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.pf3-estado svg{width:20px; height:20px; flex:none}
.pf3-estado small{color:var(--muted); font-size:12px}

/* editor del escaparate */
.overlay.pf3-editor-ov{padding:0; display:block; background:var(--bg2); backdrop-filter:none}
.pf3-editor{position:absolute; inset:0; display:flex; flex-direction:column; max-width:640px; margin:0 auto; color:var(--text)}
.pf3-editor-cab{display:flex; align-items:center; gap:12px; padding:calc(14px + var(--sat,0px)) 14px 10px}
.pf3-editor-cab div{flex:1; min-width:0}
.pf3-editor-cab h3{margin:0; font-family:var(--display); font-weight:600; font-size:20px}
.pf3-editor-cab p{margin:1px 0 0; font-size:12.5px; color:var(--muted)}
.pf3-editor-cab .pf3-cristal{position:static; background:var(--panel); border-color:var(--line); color:var(--text)}
.pf3-contador{font-family:var(--mono); font-size:13px; padding:6px 10px; border-radius:99px; background:var(--panel); border:1px solid var(--line); font-variant-numeric:tabular-nums; flex:none}
.pf3-contador b{color:var(--gold)}
.pf3-editor-scroll{flex:1; overflow:auto}
.pf3-elegible{position:relative; aspect-ratio:1; overflow:hidden; background:var(--panel2); border:0; padding:0}
.pf3-elegible img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-2) var(--ease), filter var(--dur-2)}
.pf3-elegible.sel img{transform:scale(.9); border-radius:10px}
.pf3-elegible:not(.sel).lleno img{filter:grayscale(.6) brightness(.65)}
.pf3-num{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(0,0,0,.25); display:grid; place-items:center; font-size:12.5px; font-weight:700; color:#fff}
.pf3-elegible.sel .pf3-num{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.pf3-elegible .pf3-dest{position:absolute; left:8px; bottom:8px; padding:3px 7px; border-radius:99px; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase}
.pf3-elegible-n{position:absolute; left:0; right:0; bottom:0; padding:14px 6px 5px; background:linear-gradient(transparent, rgba(0,0,0,.65)); color:#fff; font-size:10.5px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf3-elegible.sel .pf3-elegible-n{display:none}
.pf3-editor-pie{padding:12px 14px calc(16px + var(--sab,0px)); border-top:1px solid var(--line); display:flex; gap:8px; background:var(--bg2)}

/* visor de las fotos del escaparate */
.overlay.pf3-visor-ov{padding:0; display:block; background:#050807; backdrop-filter:none; z-index:var(--z-visor)}
.pf3-visor{position:absolute; inset:0; display:flex; flex-direction:column; color:#EEF3EF; max-width:760px; margin:0 auto}
.pf3-visor-cab{display:flex; align-items:center; gap:10px; padding:calc(14px + var(--sat,0px)) 14px 14px}
.pf3-visor-cab .av{width:34px; height:34px; border-radius:50%; background:#1b2622 center/cover; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:600}
.pf3-visor-cab div{flex:1; min-width:0}
.pf3-visor-cab b{display:block; font-size:14px}
.pf3-visor-cab small{font-family:var(--mono); font-size:10.5px; color:#93A69D}
.pf3-visor .pf3-cristal{position:static; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#EEF3EF}
.pf3-visor-escena{flex:1; position:relative; overflow:hidden; touch-action:pan-y}
.pf3-visor-pista{position:absolute; inset:0; display:flex; transition:transform .35s var(--ease)}
.pf3-visor-foto{flex:0 0 100%; display:grid; place-items:center; padding:0 6px}
.pf3-visor-foto img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; user-select:none; -webkit-user-drag:none}
.pf3-corazon{position:absolute; left:50%; top:50%; width:110px; height:110px; margin:-55px 0 0 -55px; color:#fff; opacity:0; pointer-events:none; filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))}
.pf3-corazon svg{width:100%; height:100%}
.pf3-corazon.late{animation:pf3Late .8s var(--ease)}
@keyframes pf3Late{0%{opacity:0; transform:scale(.3)}25%{opacity:1; transform:scale(1.1)}45%{transform:scale(.95)}75%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1.1) translateY(-20px)}}
.pf3-visor-flecha{position:absolute!important; top:50%; margin-top:-20px; z-index:2}
.pf3-visor-flecha.izq{left:10px}.pf3-visor-flecha.der{right:10px}
.pf3-visor-info{padding:14px 18px calc(20px + var(--sab,0px))}
.pf3-visor-fila{display:flex; align-items:flex-start; gap:12px}
.pf3-visor-fila > div{flex:1; min-width:0}
.pf3-visor-info h3{margin:0; font-family:var(--display); font-weight:600; font-size:24px; line-height:1.1}
.pf3-visor-info em{display:block; margin-top:2px; font-family:var(--display); font-style:italic; font-size:14px; color:#93A69D}
.pf3-visor-info p{margin:8px 0 0; font-family:var(--mono); font-size:11.5px; color:#93A69D; display:flex; flex-wrap:wrap; gap:4px 12px}
.pf3-gusta{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:48px; background:none; border:0; color:#EEF3EF; padding:0}
.pf3-gusta svg{width:28px; height:28px; transition:transform .2s var(--ease-pop)}
.pf3-gusta.on svg{color:var(--pf3-heart, #F0616D); transform:scale(1.12)}
.pf3-gusta span{font-family:var(--mono); font-size:11px; color:#93A69D; font-variant-numeric:tabular-nums}
.pf3-gusta:disabled{cursor:default}
.pf3-puntos{display:flex; justify-content:center; gap:5px; margin-top:14px}
.pf3-puntos i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22); transition:background .2s, width .2s}
.pf3-puntos i.on{background:#fff; width:16px; border-radius:99px}
.pf3-visor-cont{display:block; text-align:center; margin-top:12px; font-family:var(--mono); font-size:11.5px; color:#93A69D}
.pf3-visor-btn{margin-top:14px; width:100%; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:none; color:#EEF3EF; font:inherit; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer}
.pf3-visor-btn svg{width:16px; height:16px}
@media (prefers-reduced-motion:reduce){ .pf3-anim,.pf3-corazon.late,.pf3-hoja{animation:none} .pf3-visor-pista{transition:none} }
html.perf-bajo .pf3-anim{animation:none}


/* =====================================================================
   AJUSTES · rediseño 24/09/2026 (prototipo avedex-ajustes-prototipo.html)
   Seis secciones plegables por intención (una abierta cada vez), filas de
   etiqueta + control y cuatro subpantallas para lo que no es de diario.
   Todo sale de los tokens del tema, así que vale en claro y en oscuro.
   --aj-tinta: el acento de los iconos; en claro baja a --teal-deep para
   aguantar sobre blanco, en oscuro se queda en --teal.
   ===================================================================== */
#ajustesOverlay{--aj-tinta:var(--teal);}
html[data-bg^="claro"] #ajustesOverlay{--aj-tinta:var(--teal-deep);}
#ajustesOverlay .pant-cuerpo{padding:16px 14px calc(28px + var(--sab));}
#ajustesOverlay .aj-vista{max-width:640px; margin:0 auto;}
.aj-lista{display:grid; gap:10px;}
.aj-sec-ico svg, .aj-accion-ico svg, .aj-chevron, .aj-flecha{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.aj-sec{overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.aj-sec.abierta{border-color:color-mix(in srgb, var(--teal) 40%, var(--line)); box-shadow:var(--sh-3);}
.aj-sec-btn{width:100%; min-height:72px; padding:12px 14px; border:0; background:transparent; color:var(--text); font:inherit;
  display:grid; grid-template-columns:42px 1fr 22px; gap:12px; align-items:center; text-align:left; cursor:pointer; touch-action:manipulation;}
.aj-sec-ico{width:42px; height:42px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--aj-tinta);
  background:color-mix(in srgb, var(--teal) 12%, var(--panel)); border:1px solid color-mix(in srgb, var(--teal) 22%, var(--line));}
.aj-sec-ico svg{width:21px; height:21px;}
.aj-sec-txt{min-width:0;}
.aj-sec-tit{display:block; font-family:var(--display); font-weight:650; font-size:var(--fs-4); line-height:1.25;}
.aj-sec-res{display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); line-height:1.35; white-space:nowrap; text-overflow:ellipsis;}
.aj-chevron{width:18px; height:18px; color:var(--muted); transition:transform var(--dur-2) var(--ease);}
.aj-sec.abierta > .aj-sec-btn .aj-chevron{transform:rotate(180deg);}
/* Plegado con grid-template-rows 0fr -> 1fr: anima la altura real sin
   medirla. visibility saca del foco lo que está plegado. */
.aj-sec-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-2) var(--ease);}
.aj-sec.abierta > .aj-sec-panel{grid-template-rows:1fr;}
.aj-sec-inner{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s linear var(--dur-2);}
.aj-sec.abierta > .aj-sec-panel > .aj-sec-inner{visibility:visible; transition-delay:0s;}
.aj-sec-cont{padding:0 14px 4px;}
.aj-sec-cont::before{content:""; display:block; border-top:1px solid var(--line); margin-bottom:2px;}

.aj-fila{min-height:66px; padding:12px 2px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
/* La raya va ARRIBA de cada fila que sigue a otra, no debajo de la última:
   así una fila escondida al final (la base del mapa) no deja raya suelta. */
.aj-fila + .aj-fila, .aj-accion + .aj-accion, .aj-accion + .aj-fila, .aj-fila + .aj-accion,
.aj-tarjeta > #diagSettingsRow{border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);}
.aj-fila-apilada{flex-wrap:wrap; gap:10px 14px;}
.aj-fila-apilada > .aj-etq{flex-basis:100%;}
.aj-etq{flex:1 1 auto; min-width:0; color:var(--text); font-size:var(--fs-3); font-weight:600; line-height:1.3;}
.aj-etq small{display:block; margin-top:3px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); font-weight:500; line-height:1.4;}
.aj-select{flex:0 1 auto; max-width:47%; min-height:38px; padding:0 30px 0 11px; color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-md); font-family:var(--mono); font-size:var(--fs-1); font-weight:600; cursor:pointer;}
#ajustesOverlay .aj-seg{flex:0 0 auto; display:flex; gap:2px; padding:3px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md);}
#ajustesOverlay .aj-seg button{min-height:31px; padding:0 10px; border-radius:9px; font-size:var(--fs-1); font-weight:700;}
#ajustesOverlay .aj-seg button.on{box-shadow:0 2px 7px color-mix(in srgb, var(--teal) 24%, transparent);}
#ajustesOverlay .aj-seg-ancho{width:100%;}
#ajustesOverlay .aj-seg-ancho button{flex:1 1 0;}
#ajustesOverlay .simple-switch{width:46px; height:26px;}
#ajustesOverlay .simple-switch .simple-switch-knob{top:3px; left:3px; box-shadow:0 2px 6px rgba(0,0,0,.15);}
#ajustesOverlay .simple-switch.on{background:color-mix(in srgb, var(--teal) 20%, var(--panel)); border-color:var(--teal);}
.aj-boton-mini{flex:0 0 auto; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel2);
  color:var(--text); font-family:var(--mono); font-size:var(--fs-1); font-weight:600; cursor:pointer;}

.aj-accion{width:100%; min-height:58px; padding:10px 2px; border:0;
  background:transparent; color:var(--text); font:inherit; display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; touch-action:manipulation;}
.aj-accion-ico{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--panel2); color:var(--aj-tinta);}
.aj-accion-ico svg{width:17px; height:17px;}
.aj-accion-txt{flex:1 1 auto; min-width:0;}
.aj-accion-tit{display:block; font-size:var(--fs-2); font-weight:700; transition:color var(--dur-1) var(--ease);}
.aj-accion-sub{display:block; margin-top:2px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); line-height:1.35;}
.aj-flecha{flex:0 0 auto; width:17px; height:17px; color:var(--muted);}
.aj-accion:active .aj-accion-tit{color:var(--aj-tinta);}
@media (hover:hover){ .aj-accion:hover .aj-accion-tit{color:var(--aj-tinta);} }
.aj-accion-peligro .aj-accion-ico{color:var(--err-text); background:var(--err-bg);}
.aj-accion-peligro .aj-accion-tit, .aj-accion-peligro:hover .aj-accion-tit{color:var(--err-text);}
/* La sección de Administración conserva su envoltorio .acc-section (las
   pruebas lo buscan por ese marcado): aquí no debe pintar un segundo marco. */
#ajustesOverlay #accSecAdmin{border:0; border-radius:0; box-shadow:none; margin:0; overflow:visible;}

/* Subpantallas */
.aj-sub:not([hidden]){animation:pantEntra var(--dur-2) var(--ease);}
.aj-grupo{margin-bottom:20px;}
.aj-grupo-tit{margin:0 4px 8px; color:var(--aj-tinta); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.aj-grupo-tit-peligro{color:var(--err-text);}
.aj-tarjeta{padding:0 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);}
.aj-tarjeta-pad{padding:14px;}
.aj-nota{margin:0 0 12px; color:var(--muted); font-size:var(--fs-2); line-height:var(--lh);}
.aj-grupo > .aj-nota{margin:8px 4px 0;}
.aj-nota-estado{color:var(--text);}
.aj-nota-sep{margin-top:18px;}
.aj-botones{display:grid; gap:8px;}
.aj-boton{width:100%; min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel2);
  color:var(--text); font-family:var(--mono); font-size:var(--fs-2); font-weight:600; cursor:pointer; touch-action:manipulation;}
.aj-boton-pri{background:var(--teal); border-color:transparent; color:var(--on-teal);}
.aj-boton:disabled{opacity:.55; cursor:default;}
#ajustesOverlay .aj-tarjeta .danger{margin-top:0;}
#ajustesOverlay .aj-tarjeta .stor-box{margin-top:0;}
#ajustesOverlay .aj-sub .settings-version{display:block; margin:6px auto 0;}

html[data-motion="reducido"] .aj-sub, html[data-motion="reducido"] .aj-sec-panel, html[data-motion="reducido"] .aj-chevron{animation:none; transition:none;}
@media (prefers-reduced-motion: reduce){ .aj-sub:not([hidden]){animation:none;} .aj-sec-panel, .aj-chevron{transition:none;} }
html[data-text="grande"] .aj-etq{font-size:var(--fs-4);}
html[data-text="grande"] .aj-etq small, html[data-text="grande"] .aj-accion-sub{font-size:var(--fs-2);}
html[data-text="grande"] .aj-nota, html[data-text="grande"] .aj-accion-tit{font-size:var(--fs-3);}

/* =====================================================================
   LIGA · PREMIOS, PODIO Y SALÓN DE CAMPEONES (27/09/2026)
   Estilos de la Liga nueva (bloque del mismo nombre en app.js). Prefijo
   lg-. Todo sale de los tokens del tema (--panel, --line, --text, --muted,
   --teal...) para que funcione igual en los temas claros y en los oscuros;
   los tintes se sacan con color-mix sobre --panel. Los únicos colores fijos
   son los de las medallas y la portada/podio, que van sobre foto o sobre
   fondo oscuro propio en cualquier tema.
   ===================================================================== */
.lg{
  --lg-oro:#D9A441;
  --lg-oro-txt:color-mix(in srgb, #B07E2A 72%, var(--text));
  --lg-ambar-txt:color-mix(in srgb, #C26A12 72%, var(--text));
  --lg-verde-txt:color-mix(in srgb, #217A43 72%, var(--text));
  --lg-suave:color-mix(in srgb, var(--line) 55%, var(--panel));
  gap:14px; padding-bottom:18px;
}
.lg .lg-ico, .lg-ov .lg-ico{ width:20px; height:20px; flex:none; }
.lg .lg-ico-s, .lg-ov .lg-ico-s{ width:12px; height:12px; }
.lg-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lg-top .juegos-title{ margin:4px 0; text-align:left; font-size:var(--fs-6); }
.lg-campeones{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px 0 11px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--panel); color:var(--text); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer; box-shadow:var(--sh-1); }
.lg .lg-campeones .lg-ico{ width:18px; height:18px; color:var(--lg-oro); }
.lg-eti{ display:block; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---- portada ---- */
.lg-portada{ position:relative; height:256px; border-radius:var(--r-xl); overflow:hidden; background:#1B2B40; color:#FFFFFF; isolation:isolate;
  box-shadow:0 16px 32px -18px rgba(16,40,70,.6); }
.lg-portada > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:-2; }
.lg-portada-velo{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,16,28,.55) 0%, rgba(8,16,28,.06) 36%, rgba(8,16,28,.9) 100%); }
.lg-portada-arriba{ position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lg-chip{ min-width:0; padding:6px 10px; border-radius:var(--r-full); background:rgba(8,16,28,.55); border:1px solid rgba(255,255,255,.22);
  font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-reloj{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:6px 10px 6px 8px; border-radius:var(--r-full); background:rgba(8,16,28,.55);
  border:1px solid rgba(255,255,255,.22); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-2) var(--ease); }
.lg .lg-reloj .lg-ico{ width:13px; height:13px; }
.lg-reloj.urgente{ background:#C2410C; border-color:rgba(255,255,255,.35); }
.lg-portada-abajo{ position:absolute; left:16px; right:16px; bottom:12px; }
.lg-ave{ margin:0; font-family:var(--display); font-weight:700; font-size:46px; line-height:.95; letter-spacing:-.01em; color:#FFFFFF; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.lg-lema{ margin:7px 0 0; font-family:var(--display); font-style:italic; font-weight:500; font-size:var(--fs-3); line-height:1.35; color:rgba(255,255,255,.94); }
.lg-prog{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.lg-prog-barra{ flex:1; height:6px; border-radius:var(--r-full); background:rgba(255,255,255,.22); overflow:hidden; }
.lg-prog-barra i{ display:block; height:100%; background:#FFFFFF; border-radius:inherit; }
.lg-prog-txt{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; color:rgba(255,255,255,.88); white-space:nowrap; }
.lg-portada-pie{ display:flex; justify-content:space-between; align-items:flex-end; gap:8px; margin-top:10px; }
.lg-premio-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 8px; border-radius:var(--r-full); background:#F2C66D; color:#3A2A0E;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:700; white-space:nowrap; }
.lg .lg-premio-pill .lg-ico{ width:14px; height:14px; }
.lg-credito{ font-size:9px; line-height:1.3; color:rgba(255,255,255,.72); text-align:right; }

/* ---- aviso ---- */
#lgAviso[hidden]{ display:none; }
.lg-aviso{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-lg); border:1px solid var(--av-borde);
  background:var(--av-bg); text-align:left; color:var(--text); font:inherit; cursor:default; }
.lg-aviso.tocable{ cursor:pointer; }
.lg-aviso.tocable:active{ transform:scale(.99); }
.lg-aviso-ico{ width:38px; height:38px; flex:none; border-radius:var(--r-md); background:var(--av-ico); color:var(--av-c); display:flex; align-items:center; justify-content:center; }
.lg-aviso-txt{ flex:1; min-width:0; }
.lg-aviso-txt b{ display:block; font-size:14px; color:var(--av-c); }
.lg-aviso-txt span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--muted); }
.lg .lg-aviso .lg-flecha{ width:18px; height:18px; color:var(--av-c); }
.lg-aviso.info{ --av-c:var(--teal-on-panel); --av-bg:color-mix(in srgb, var(--teal) 9%, var(--panel)); --av-borde:color-mix(in srgb, var(--teal) 26%, var(--panel)); --av-ico:color-mix(in srgb, var(--teal) 16%, var(--panel)); }
.lg-aviso.urgente{ --av-c:var(--lg-ambar-txt); --av-bg:color-mix(in srgb, #E08C28 11%, var(--panel)); --av-borde:color-mix(in srgb, #E08C28 40%, var(--panel)); --av-ico:color-mix(in srgb, #E08C28 22%, var(--panel)); }
.lg-aviso.exito{ --av-c:var(--lg-verde-txt); --av-bg:color-mix(in srgb, #2E9E57 10%, var(--panel)); --av-borde:color-mix(in srgb, #2E9E57 30%, var(--panel)); --av-ico:color-mix(in srgb, #2E9E57 18%, var(--panel)); }
.lg-aviso.oro{ --av-c:var(--lg-oro-txt); --av-bg:color-mix(in srgb, #D9A441 12%, var(--panel)); --av-borde:color-mix(in srgb, #D9A441 40%, var(--panel)); --av-ico:color-mix(in srgb, #D9A441 24%, var(--panel)); }

/* ---- tarjetas ---- */
.lg-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-1); }
.lg-yo{ padding:14px; }
.lg-yo-fila{ display:flex; align-items:center; gap:14px; }
.lg-yo-pos{ flex:none; width:80px; height:80px; border-radius:20px; background:var(--panel2); border:2px solid var(--line); display:flex; flex-direction:column;
  align-items:center; justify-content:center; transition:background-color .4s var(--ease), border-color .4s var(--ease); }
.lg-yo-pos b{ font-family:var(--display); font-weight:700; font-size:32px; line-height:1; color:var(--muted); }
.lg-yo-pos span{ margin-top:4px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); }
.lg-yo-pos.premio{ background:color-mix(in srgb, var(--teal) 11%, var(--panel)); border-color:color-mix(in srgb, var(--teal) 40%, var(--panel)); }
.lg-yo-pos.premio b{ color:var(--teal-on-panel); }
.lg-yo-pos.m1{ --mc:#D9A441; } .lg-yo-pos.m2{ --mc:#AEB6C0; } .lg-yo-pos.m3{ --mc:#C3845A; }
.lg-yo-pos.m1, .lg-yo-pos.m2, .lg-yo-pos.m3{ background:color-mix(in srgb, var(--mc) 24%, var(--panel)); border-color:var(--mc); }
.lg-yo-pos.m1 b, .lg-yo-pos.m2 b, .lg-yo-pos.m3 b{ color:color-mix(in srgb, var(--mc) 40%, var(--text)); }
.lg-yo-datos{ flex:1; min-width:0; }
.lg-yo-pts{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.lg-yo-pts b{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; }
.lg-yo-pts span{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.lg-pildoras{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.lg-pildora{ display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:var(--r-full); background:var(--panel2); color:var(--text);
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600; }
.lg-pildora.racha{ background:color-mix(in srgb, #E08C28 16%, var(--panel)); color:var(--lg-ambar-txt); font-weight:700; }
.lg .lg-pildora .lg-ico{ width:13px; height:13px; }
.lg-estado{ margin-top:12px; padding:10px 12px; border-radius:var(--r-md); display:flex; gap:10px; align-items:center; background:var(--es-bg); }
.lg-estado b{ display:block; font-size:14px; color:var(--es-c); }
.lg-estado span{ display:block; margin-top:1px; font-size:12px; line-height:1.35; color:var(--muted); }
.lg .lg-estado .lg-ico{ color:var(--es-c); }
.lg-estado.info{ --es-c:var(--teal-on-panel); --es-bg:color-mix(in srgb, var(--teal) 9%, var(--panel)); }
.lg-estado.oro{ --es-c:var(--lg-oro-txt); --es-bg:color-mix(in srgb, #D9A441 14%, var(--panel)); }
.lg-estado.ambar{ --es-c:var(--lg-ambar-txt); --es-bg:color-mix(in srgb, #E08C28 12%, var(--panel)); }
.lg-sig{ margin-top:11px; }
.lg-sig-txt{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.lg-sig-txt b{ color:var(--text); font-family:var(--mono); font-size:var(--fs-1); white-space:nowrap; }
.lg-barra{ display:block; margin-top:6px; height:8px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden; }
.lg-barra i{ display:block; height:100%; background:var(--teal); border-radius:inherit; transition:width .6s var(--ease); }
.lg-tira{ display:flex; gap:2px; margin-top:13px; }
.lg-tira i{ flex:1; height:9px; border-radius:2px; background:var(--panel2); }
.lg-tira i.perdido{ background:color-mix(in srgb, var(--muted) 28%, var(--panel)); }
.lg-tira i.on{ background:var(--teal); }
.lg-tira i.hoy{ box-shadow:0 0 0 2px var(--panel), 0 0 0 3.5px #E08C28; }
.lg-tira-txt{ margin:6px 0 0; font-family:var(--mono); font-size:10.5px; line-height:1.4; color:var(--muted); }

.lg-invitado{ display:flex; gap:10px; align-items:center; padding:16px 14px 16px 16px; }
.lg-invitado > div{ flex:1; min-width:0; }
.lg-invitado h3{ margin:0; font-family:var(--display); font-weight:700; font-size:var(--fs-5); line-height:1.2; }
.lg-invitado p{ margin:6px 0 12px; font-size:var(--fs-2); line-height:1.45; color:var(--muted); }
.lg-invitado > img{ width:104px; height:156px; object-fit:contain; flex:none; }
.lg-btn{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; touch-action:manipulation; }
.lg-btn + .lg-btn{ margin-top:8px; }
.lg-btn.primario{ background:var(--teal); border-color:transparent; color:var(--on-teal); }
.lg-btn.oro{ background:#F2C66D; border-color:transparent; color:#3A2A0E; font-weight:800; font-size:15px; min-height:50px; }
.lg-btn:disabled{ opacity:.6; cursor:default; }

/* ---- secciones: juegos de hoy ---- */
.lg-sec-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:6px 4px 8px; }
.lg-sec-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-5); }
.lg-sec-cab span{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:right; }
.lg-juegos{ overflow:hidden; }
.lg-juego{ width:100%; min-height:66px; display:flex; align-items:center; gap:12px; padding:11px 14px; border:0; background:transparent; text-align:left;
  color:var(--text); font:inherit; cursor:pointer; transition:background-color var(--dur-1) var(--ease); }
.lg-juego + .lg-juego{ border-top:1px solid var(--lg-suave); }
.lg-juego.pend{ background:color-mix(in srgb, var(--teal) 5%, var(--panel)); }
.lg-juego:active{ background:color-mix(in srgb, var(--teal) 10%, var(--panel)); }
.lg-juego-ico{ width:42px; height:42px; flex:none; border-radius:var(--r-md); background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:24px; }
.lg-juego-txt{ flex:1; min-width:0; }
.lg-juego-txt b{ display:block; font-size:15px; }
.lg-juego-txt span{ display:block; margin-top:2px; font-size:12px; line-height:1.35; color:var(--muted); }
.lg-juego-pts{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.lg-pill{ display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:var(--r-full); background:var(--teal); color:var(--on-teal);
  font-family:var(--mono); font-size:12px; font-weight:700; white-space:nowrap; }
.lg-juego-pts em{ font-family:var(--mono); font-size:9.5px; font-weight:700; font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-on-panel); }
.lg-juego.hecho .lg-pill{ background:color-mix(in srgb, #2E9E57 16%, var(--panel)); color:var(--lg-verde-txt); }
.lg-juego.hecho .lg-juego-pts em{ color:var(--lg-verde-txt); }
.lg-juego.bloq .lg-pill{ background:var(--panel2); color:var(--muted); }
.lg-juego.bloq .lg-juego-pts em{ color:var(--muted); }
.lg-juego.bloq .lg-juego-ico{ filter:grayscale(.6); opacity:.8; }

/* ---- clasificación ---- */
.lg-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); padding:3px; margin-bottom:10px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); }
.lg-tab{ min-height:40px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-family:var(--mono); font-weight:700; font-size:12px; cursor:pointer;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.lg-tab.on{ background:var(--teal); color:var(--on-teal); }
.lg-tab:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.lg-tabla{ overflow:hidden; }
.lg-tabla > .liga-vacio{ border:0; border-radius:0; }
.lg-tabla > .comm-list{ margin:0; padding:8px 12px; }
.lg-av{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--c); color:#22303D; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:15px; }
.lg-av.yo{ color:var(--on-teal); }
.lg-mini-podio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; align-items:end; padding:16px 14px 0; background:var(--bg1); border-bottom:1px solid var(--line); }
.lg-mp-col{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.lg-mp-col .lg-corona{ width:26px; height:20px; fill:#D9A441; margin-bottom:2px; }
.lg-av-podio{ width:48px; height:48px; font-size:20px; border:3px solid var(--mc); box-shadow:0 6px 14px -8px rgba(16,40,70,.5); }
.lg-mp-1 .lg-av-podio{ width:58px; height:58px; font-size:24px; }
.lg-mp-nombre{ max-width:100%; margin-top:6px; font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-mp-nombre.yo{ color:var(--teal-on-panel); }
.lg-mp-pts{ font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); font-variant-numeric:tabular-nums; }
.lg-mp-escalon{ width:100%; height:46px; margin-top:6px; border-radius:12px 12px 0 0; background:color-mix(in srgb, var(--mc) 62%, #FFFFFF); color:var(--mt);
  display:flex; flex-direction:column; align-items:center; padding-top:7px; box-sizing:border-box; }
.lg-mp-1 .lg-mp-escalon{ height:72px; }
.lg-mp-2 .lg-mp-escalon{ height:56px; }
.lg-mp-escalon b{ font-family:var(--display); font-weight:700; font-size:22px; line-height:1; }
.lg-mp-escalon small{ margin-top:3px; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; }
.lg-fila{ display:flex; align-items:center; gap:10px; min-height:54px; padding:7px 14px; border-top:1px solid var(--lg-suave); transition:background-color .4s var(--ease); }
.lg-tabla > .lg-fila:first-child, .lg-mini-podio + .lg-fila{ border-top:0; }
.lg-fila.yo{ background:color-mix(in srgb, var(--teal) 10%, var(--panel)); }
.lg-pos{ width:26px; flex:none; text-align:center; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--muted); }
.lg-fila.yo .lg-pos{ color:var(--teal-on-panel); }
.lg-quien{ flex:1; min-width:0; }
.lg-quien b{ display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-quien span{ display:block; font-size:11.5px; color:var(--muted); }
.lg-pts{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.lg-pts b{ font-family:var(--mono); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.lg-pts em{ padding:2px 7px; border-radius:var(--r-full); background:color-mix(in srgb, #D9A441 18%, var(--panel)); color:var(--lg-oro-txt);
  font-family:var(--mono); font-size:var(--fs-0); font-weight:700; font-style:normal; white-space:nowrap; }
.lg-sep{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--lg-suave); }
.lg-sep::before, .lg-sep::after{ content:''; flex:1; border-top:1px dashed color-mix(in srgb, var(--muted) 60%, var(--panel)); }
.lg-sep span{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.lg-sep.oro{ background:color-mix(in srgb, #D9A441 7%, var(--panel)); }
.lg-sep.oro::before, .lg-sep.oro::after{ border-top-color:#D9A441; }
.lg-sep.oro span{ color:var(--lg-oro-txt); }
.lg-vertodo{ width:100%; min-height:48px; border:0; border-top:1px solid var(--lg-suave); background:var(--panel); color:var(--teal-on-panel);
  font-family:var(--mono); font-weight:700; font-size:12px; cursor:pointer; }
.lg-rk-nota{ margin:8px 4px 0; font-size:12px; line-height:1.4; color:var(--muted); }
.lg-rk-nota[hidden]{ display:none; }
.lg-tabla .lg-rk-nota{ margin:0; padding:14px; border-top:1px solid var(--lg-suave); font-size:13px; line-height:1.45; }

/* ---- premios y reglas ---- */
.lg-premios{ padding:16px; }
.lg-premios-cab{ display:flex; align-items:center; gap:10px; }
.lg-premios-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:19px; }
.lg-premios-cab span{ font-size:12px; color:var(--muted); }
.lg-caja-ico{ width:38px; height:38px; flex:none; border-radius:var(--r-md); background:color-mix(in srgb, var(--teal) 12%, var(--panel)); color:var(--teal-on-panel);
  display:flex; align-items:center; justify-content:center; }
.lg-caja-ico.oro{ background:color-mix(in srgb, #D9A441 18%, var(--panel)); color:var(--lg-oro-txt); }
.lg-premios-top{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:14px; }
.lg-premio-top{ padding:12px 6px 10px; border-radius:14px; background:color-mix(in srgb, var(--mc) 16%, var(--panel)); display:flex; flex-direction:column; align-items:center; gap:4px; }
.lg-premio-top b{ font-family:var(--display); font-weight:700; font-size:18px; }
.lg-premio-top small{ font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--muted); }
.lg-medalla{ width:34px; height:34px; border-radius:50%; background:var(--mc); color:var(--mt); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:17px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
.lg-premios-resto{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 18px; margin-top:10px; }
.lg-premios-resto div{ display:flex; justify-content:space-between; align-items:center; min-height:34px; border-bottom:1px solid var(--lg-suave); }
.lg-premios-resto span{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--muted); }
.lg-premios-resto b{ font-family:var(--mono); font-size:12px; font-weight:700; }
.lg-letra{ margin:10px 0 0; font-size:12px; line-height:1.45; color:var(--muted); }
.lg-reglas{ overflow:hidden; }
.lg-reglas-btn{ width:100%; min-height:54px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 16px; border:0; background:none;
  color:var(--text); font:inherit; cursor:pointer; }
.lg-reglas-btn span{ font-family:var(--display); font-weight:600; font-size:var(--fs-4); }
.lg .lg-giro{ width:18px; height:18px; color:var(--muted); transition:transform var(--dur-2) var(--ease); }
.lg-reglas.abierta .lg-giro{ transform:rotate(180deg); }
.lg-reglas-cuerpo{ display:none; padding:0 16px 8px; }
.lg-reglas.abierta .lg-reglas-cuerpo{ display:block; }
.lg-regla{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--lg-suave); }
.lg-regla .lg-caja-ico{ width:32px; height:32px; border-radius:10px; }
.lg .lg-regla .lg-ico{ width:17px; height:17px; }
.lg-regla > div{ flex:1; min-width:0; }
.lg-regla-cab{ display:flex; justify-content:space-between; gap:8px; }
.lg-regla-cab b{ font-size:14px; }
.lg-regla-cab span{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--teal-on-panel); white-space:nowrap; }
.lg-regla p{ margin:2px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); }
.lg-salon-btn{ width:100%; min-height:72px; padding:12px 14px; border-radius:18px; border:0; background:#16263D; color:#FFFFFF; display:flex; align-items:center; gap:12px;
  text-align:left; font:inherit; cursor:pointer; box-shadow:var(--sh-2); }
.lg-salon-ico{ width:44px; height:44px; flex:none; border-radius:14px; background:rgba(242,198,109,.16); color:#F2C66D; display:flex; align-items:center; justify-content:center; }
.lg .lg-salon-ico .lg-ico{ width:24px; height:24px; }
.lg-salon-txt{ flex:1; min-width:0; }
.lg-salon-txt b{ display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-4); }
.lg-salon-txt span{ display:block; margin-top:2px; font-size:12px; line-height:1.35; color:rgba(255,255,255,.75); }
.lg .lg-salon-btn .lg-flecha{ width:18px; height:18px; color:rgba(255,255,255,.7); }

/* ---- pantallas encima: Salón y podio ---- */
.overlay.lg-ov{ display:block; padding:0; background:var(--bg1); -webkit-backdrop-filter:none; backdrop-filter:none; z-index:var(--z-hoja-top); overflow:hidden; color:var(--text);
  --lg-oro-txt:color-mix(in srgb, #B07E2A 72%, var(--text)); --lg-suave:color-mix(in srgb, var(--line) 55%, var(--panel)); }
.lg-ov .lg-eti{ display:block; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* podio */
.overlay.lg-podio-ov{ z-index:var(--z-dialogo); background:#0E1A2B; color:#FFFFFF; display:flex; flex-direction:column; }
.lg-pd-luz{ position:absolute; top:-120px; width:150px; height:620px; transform-origin:top center; opacity:0; pointer-events:none; transition:opacity 1.2s var(--ease); }
.lg-pd-luz.l1{ left:30px; background:rgba(242,198,109,.07); transform:rotate(18deg); }
.lg-pd-luz.l2{ right:30px; background:rgba(155,190,255,.07); transform:rotate(-18deg); }
.lg-podio-ov.f1 .lg-pd-luz{ opacity:1; }
.lg-pd-confeti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.lg-pd-top{ position:relative; z-index:2; flex:none; display:flex; justify-content:flex-end; padding:calc(10px + var(--sat)) 10px 0; }
.lg-pd-saltar{ min-height:44px; padding:0 16px; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#FFFFFF;
  font-family:var(--mono); font-size:12px; font-weight:700; cursor:pointer; }
.lg-pd-scroll{ position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; width:100%; max-width:520px; margin:0 auto; box-sizing:border-box;
  padding:0 18px calc(28px + var(--sab)); scrollbar-width:none; }
.lg-pd-cab{ text-align:center; }
.lg-pd-eye{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#F2C66D; }
.lg-pd-cab h2{ margin:4px 0 0; font-family:var(--display); font-weight:700; font-size:40px; line-height:1; color:#FFFFFF; }
.lg-pd-cab p{ margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.75); }
.lg-pd-escena{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; align-items:end; margin-top:22px; min-height:250px; }
.lg-pd-col{ display:flex; flex-direction:column; align-items:center; min-width:0; opacity:0; transform:translateY(40px);
  transition:opacity .6s var(--ease), transform .7s cubic-bezier(.2,.8,.2,1); }
.lg-podio-ov.f1 .lg-pd-c3, .lg-podio-ov.f2 .lg-pd-c2, .lg-podio-ov.f4 .lg-pd-c1{ opacity:1; transform:none; }
.lg-pd-col .lg-corona{ width:38px; height:28px; fill:#F2C66D; margin-bottom:4px; }
.lg-av-pd{ width:60px; height:60px; font-size:24px; border:4px solid var(--mc); box-shadow:0 0 0 6px rgba(255,255,255,.06); }
.lg-pd-c1 .lg-av-pd{ width:76px; height:76px; font-size:30px; box-shadow:0 0 0 6px rgba(242,198,109,.18); }
.lg-pd-nombre{ max-width:100%; margin-top:8px; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-pd-pts{ font-family:var(--mono); font-size:var(--fs-1); color:rgba(255,255,255,.7); }
.lg-pd-escalon{ width:100%; height:64px; margin-top:8px; border-radius:12px 12px 0 0; background:var(--mc); color:#0E1A2B; display:flex; flex-direction:column;
  align-items:center; padding-top:10px; box-sizing:border-box; }
.lg-pd-c1 .lg-pd-escalon{ height:118px; background:#F2C66D; }
.lg-pd-c2 .lg-pd-escalon{ height:86px; background:#C9D1DA; }
.lg-pd-c3 .lg-pd-escalon{ background:#D9A07A; }
.lg-pd-escalon b{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1; }
.lg-pd-escalon small{ margin-top:4px; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; }
.lg-pd-redoble{ margin:14px 0 0; text-align:center; font-family:var(--display); font-style:italic; font-size:18px; color:#F2C66D; opacity:0; transition:opacity .5s var(--ease); }
.lg-podio-ov.f3:not(.f4) .lg-pd-redoble{ opacity:1; }
.lg-pd-nadie{ margin:40px 0 0; text-align:center; font-size:15px; color:rgba(255,255,255,.8); }
.lg-pd-resto{ opacity:0; transform:translateY(24px); pointer-events:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.lg-podio-ov.f5 .lg-pd-resto{ opacity:1; transform:none; pointer-events:auto; }
.lg-pd-lista{ margin-top:14px; border-radius:var(--r-lg); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.lg-pd-fila{ display:flex; align-items:center; gap:10px; min-height:44px; padding:5px 12px; border-top:1px solid rgba(255,255,255,.07); }
.lg-pd-fila:first-child{ border-top:0; }
.lg-pd-fila.yo{ background:rgba(52,120,204,.25); }
.lg-pd-fila .n{ width:22px; text-align:center; font-family:var(--mono); font-weight:700; font-size:12px; color:rgba(255,255,255,.7); }
.lg-pd-fila .lg-av{ width:28px; height:28px; font-size:13px; }
.lg-pd-fila .nom{ flex:1; min-width:0; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-pd-fila .pts{ font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.7); }
.lg-pd-fila b{ width:72px; text-align:right; font-family:var(--mono); font-size:11.5px; font-weight:700; color:#F2C66D; }
.lg-pd-tu{ margin-top:16px; padding:18px 16px; border-radius:20px; background:#FFFFFF; color:#22303D; }
.lg-pd-tu .lg-eti{ color:#5E6D7D; }
.lg-pd-tu-fila{ display:flex; gap:12px; align-items:center; }
.lg-pd-tu-fila > div{ flex:1; min-width:0; }
.lg-pd-tu h3{ margin:2px 0 0; font-family:var(--display); font-weight:700; font-size:28px; line-height:1.1; color:#22303D; }
.lg-pd-tu p{ margin:4px 0 0; font-size:13px; line-height:1.4; color:#4D5B69; }
.lg-pd-tu-fila > img{ width:78px; height:117px; object-fit:contain; flex:none; }
.lg-pd-botin{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.lg-xp-chip{ padding:7px 12px; border-radius:var(--r-full); background:#FBF1DC; color:#7A5A1F; font-family:var(--mono); font-size:13px; font-weight:700; }
.lg-insignia{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 4px; border-radius:var(--r-full); background:#F3F6FA; border:1px solid #D2DEEA; font-size:12.5px; font-weight:700; }
.lg-insignia img{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid var(--mc); }
.lg-pd-tu .lg-btn.oro{ margin-top:14px; }
.lg-pd-hecho{ margin-top:12px; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#217A43; }
.lg-ov .lg-pd-hecho .lg-ico{ width:16px; height:16px; }
.lg-pd-error{ margin:10px 0 0; font-size:12.5px; line-height:1.4; color:#B23A3A; }
.lg-pd-error[hidden], .lg-pd-nivel[hidden], .lg-pd-sigue[hidden]{ display:none; }
.lg-pd-nivel{ margin-top:14px; padding:12px; border-radius:14px; background:#F3F6FA; }
.lg-pd-nivel-cab{ display:flex; justify-content:space-between; align-items:baseline; }
.lg-pd-nivel-cab b{ font-family:var(--display); font-size:18px; color:#22303D; }
.lg-pd-cont{ font-family:var(--mono); font-size:12px; font-weight:700; color:#7A5A1F; }
.lg-pd-nivel .lg-barra{ margin-top:8px; height:10px; background:#DCE5EF; }
.lg-pd-nivel .lg-barra i{ background:#3478CC; transition:width .12s linear; }
.lg-pd-nivel-pie{ margin-top:6px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-1); color:#5E6D7D; }
.lg-pd-sube{ color:#217A43; }
.lg-pd-fuera{ margin-top:16px; padding:16px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:flex; gap:12px; align-items:center; }
.lg-pd-fuera img{ width:70px; height:105px; object-fit:contain; flex:none; }
.lg-pd-fuera h3{ margin:0; font-family:var(--display); font-weight:700; font-size:22px; color:#FFFFFF; }
.lg-pd-fuera p{ margin:4px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.8); }
.lg-pd-prox{ margin-top:16px; border-radius:20px; overflow:hidden; background:#FFFFFF; color:#22303D; }
.lg-pd-prox-foto{ position:relative; height:120px; }
.lg-pd-prox-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.lg-pd-prox-foto > div{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 14px 10px; color:#FFFFFF;
  background:linear-gradient(180deg, rgba(8,16,28,0) 30%, rgba(8,16,28,.8) 100%); }
.lg-pd-prox-foto span{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.lg-pd-prox-foto b{ font-family:var(--display); font-weight:700; font-size:26px; line-height:1.05; }
.lg-pd-prox p{ margin:0; padding:12px 14px 0; font-family:var(--display); font-style:italic; font-size:15px; line-height:1.4; }
.lg-pd-prox .lg-btn{ margin:12px 14px 14px; width:calc(100% - 28px); }
.lg-pd-sigue > .lg-btn{ margin-top:16px; }
.lg-pd-fin{ display:flex; gap:10px; margin-top:16px; }
.lg-pd-fin .lg-btn{ margin:0; }
.lg-btn.claro{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); color:#FFFFFF; }
.lg-btn.blanco{ background:#FFFFFF; border-color:transparent; color:#16263D; font-weight:800; }

/* Salón */
.lg-salon{ height:100%; display:flex; flex-direction:column; max-width:640px; margin:0 auto; }
.lg-salon-cab{ flex:none; display:flex; align-items:center; gap:6px; padding:calc(8px + var(--sat)) 12px 8px 6px; }
.lg-salon-cab h2{ margin:0; font-family:var(--display); font-weight:600; font-size:22px; }
.lg-atras{ width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lg-ov .lg-atras .lg-ico{ width:22px; height:22px; }
.lg-salon-cuerpo{ flex:1; min-height:0; overflow-y:auto; padding:0 16px calc(28px + var(--sab)); scrollbar-width:none; }
.lg-salon-cuerpo > .comm-list{ margin:0; }
.lg-salon-numeros{ padding:18px 16px; border-radius:22px; background:#16263D; color:#FFFFFF; display:flex; align-items:center; gap:14px; }
.lg-salon-numeros > div{ flex:1; min-width:0; }
.lg-ov .lg-salon-numeros .lg-eti{ color:#F2C66D; }
.lg-salon-stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 10px; margin-top:12px; }
.lg-salon-stats b{ display:block; font-family:var(--display); font-weight:700; font-size:24px; line-height:1.1; }
.lg-salon-stats span{ font-size:11.5px; color:rgba(255,255,255,.72); }
.lg-ov .lg-salon-trofeo{ width:64px; height:64px; color:#F2C66D; opacity:.9; stroke-width:1.3; }
.lg-salon-sec{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:20px 4px 8px; }
.lg-salon-sec h3{ margin:0; font-family:var(--display); font-weight:600; font-size:19px; }
.lg-salon-sec span{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:right; }
.lg-vitrina, .lg-proximas{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; }
.lg-vit{ flex:none; width:92px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.lg-vit-med{ position:relative; width:72px; height:72px; border-radius:50%; padding:4px; background:var(--mc); box-shadow:0 8px 18px -10px rgba(16,40,70,.6); box-sizing:border-box; }
.lg-vit-med img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.lg-vit-med i{ position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%; background:var(--mc); border:2px solid var(--panel); color:var(--mt);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:13px; font-style:normal; box-sizing:border-box; }
.lg-vit b{ margin-top:7px; font-size:12.5px; line-height:1.2; }
.lg-vit > span:last-child{ font-size:var(--fs-1); color:var(--muted); }
.lg-vit.hueco{ --mc:var(--line); --mt:var(--muted); opacity:.75; }
.lg-vit.hueco img{ filter:grayscale(1); }
.lg-temporadas{ display:flex; flex-direction:column; gap:10px; }
.lg-temp{ width:100%; display:flex; gap:12px; align-items:stretch; padding:10px; border-radius:18px; border:1px solid var(--line); background:var(--panel); text-align:left;
  color:var(--text); font:inherit; cursor:pointer; box-shadow:var(--sh-1); }
.lg-temp > img{ width:74px; height:92px; flex:none; border-radius:var(--r-md); object-fit:cover; display:block; }
.lg-temp-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lg-temp-txt > b{ font-family:var(--display); font-weight:700; font-size:17px; line-height:1.2; }
.lg-temp-campeon{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:13px; min-width:0; }
.lg-temp-campeon .lg-corona{ width:16px; height:12px; fill:#D9A441; flex:none; }
.lg-temp-campeon b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg-temp-campeon em{ font-family:var(--mono); font-size:var(--fs-1); font-style:normal; color:var(--muted); white-space:nowrap; }
.lg-temp-tu{ margin-top:auto; align-self:flex-start; padding:3px 8px; border-radius:var(--r-full); background:var(--panel2); color:var(--muted); font-family:var(--mono); font-size:10.5px; font-weight:700; }
.lg-temp-txt .lg-temp-campeon + .lg-temp-tu{ margin-top:auto; }
.lg-temp-tu.premio{ background:color-mix(in srgb, var(--teal) 12%, var(--panel)); color:var(--teal-on-panel); }
.lg-temp-tu.m1{ --mc:#D9A441; } .lg-temp-tu.m2{ --mc:#AEB6C0; } .lg-temp-tu.m3{ --mc:#C3845A; }
.lg-temp-tu.m1, .lg-temp-tu.m2, .lg-temp-tu.m3{ background:color-mix(in srgb, var(--mc) 26%, var(--panel)); color:color-mix(in srgb, var(--mc) 35%, var(--text)); }
.lg-temp-tu.pendiente{ background:#F2C66D; color:#3A2A0E; }
.lg-ov .lg-temp .lg-flecha{ align-self:center; width:16px; height:16px; color:var(--muted); }
.lg-salon-vacio{ display:flex; gap:12px; align-items:center; padding:14px; }
.lg-salon-vacio img{ width:70px; height:105px; object-fit:contain; flex:none; }
.lg-salon-vacio p{ margin:0; font-size:13px; line-height:1.45; color:var(--muted); }
.lg-salon-vacio b{ color:var(--text); }
.lg-prox{ flex:none; width:150px; border-radius:var(--r-lg); overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.lg-prox img{ width:100%; height:96px; object-fit:cover; display:block; }
.lg-prox > div{ padding:9px 10px 11px; }
.lg-prox b{ display:block; font-family:var(--display); font-weight:700; font-size:16px; }
.lg-prox p{ margin:3px 0 0; font-family:var(--display); font-style:italic; font-size:12px; line-height:1.35; color:var(--muted); }
.lg-ov .lg-invitado{ margin-top:4px; }
.lg-admin{ margin-top:20px; padding:14px; }
.lg-admin p{ margin:6px 0 10px; font-size:12.5px; line-height:1.45; color:var(--muted); }
.lg-admin-res{ margin:10px 0 0; padding:10px; border-radius:10px; background:var(--panel2); font-family:var(--mono); font-size:12px; white-space:pre-wrap; }
.lg-admin-res[hidden]{ display:none; }

html[data-motion="reducido"] .lg-pd-col, html[data-motion="reducido"] .lg-pd-resto, html[data-motion="reducido"] .lg-pd-redoble,
html[data-motion="reducido"] .lg-pd-luz, html[data-motion="reducido"] .lg-barra i{ transition:none; }
@media (prefers-reduced-motion: reduce){ .lg-pd-col, .lg-pd-resto, .lg-pd-redoble, .lg-pd-luz, .lg-barra i{ transition:none; } }
html[data-text="grande"] .lg-quien b, html[data-text="grande"] .lg-juego-txt b{ font-size:var(--fs-4); }
html[data-text="grande"] .lg-quien span, html[data-text="grande"] .lg-juego-txt span, html[data-text="grande"] .lg-aviso-txt span{ font-size:var(--fs-3); }

/* ---- juegos bloqueados por nivel (28/09/2026): barrita en la fila y hoja
   «Se abre en el nivel N» (abrirBloqueoJuego en app.js) ---- */
.lg-juego-txt .lg-juego-prog{ display:block; margin-top:7px; height:4px; max-width:190px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden; }
.lg-juego-txt .lg-juego-prog i{ display:block; height:100%; border-radius:inherit; background:color-mix(in srgb, var(--teal) 75%, var(--panel2)); }
.lg-juego.bloq .lg-juego-pts em{ color:var(--teal-on-panel); }
.overlay.lg-bloq-ov{ align-items:flex-end; padding:0; z-index:var(--z-hoja-top); background:rgba(6,11,9,0); transition:background .18s var(--ease); }
.overlay.lg-bloq-ov.on{ background:rgba(6,11,9,.55); }
.lg-bq-hoja{ position:relative; width:100%; max-width:480px; max-height:calc(100% - 24px - var(--sat)); display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); color:var(--text); border-radius:22px 22px 0 0; box-shadow:0 -12px 32px rgba(0,0,0,.25);
  transform:translateY(24px); opacity:0; transition:transform .22s var(--ease), opacity .18s var(--ease); }
.lg-bq-cuerpo{ flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:22px 18px 4px; }
.lg-bq-acc{ flex:none; display:grid; grid-template-columns:1.35fr 1fr; gap:8px; padding:10px 18px calc(12px + var(--sab)); border-top:1px solid color-mix(in srgb, var(--line) 55%, var(--panel)); background:var(--panel); }
.lg-bq-acc .lg-btn + .lg-btn{ margin-top:0; }
.lg-bloq-ov.on .lg-bq-hoja{ transform:none; opacity:1; }
.lg-bq-hoja .lg-ico{ width:20px; height:20px; flex:none; }
.lg-bq-hoja .lg-ico-s{ width:12px; height:12px; }
.lg-bq-x{ position:absolute; z-index:1; top:12px; right:12px; width:36px; height:36px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel2); color:var(--text);
  font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lg-bq-cab{ text-align:center; padding:4px 26px 0; }
.lg-bq-ico{ position:relative; width:66px; height:66px; margin:0 auto 12px; border-radius:18px; background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:34px; }
.lg-bq-ico i{ position:absolute; right:-7px; bottom:-7px; width:28px; height:28px; border-radius:var(--r-full); background:var(--text); color:var(--panel);
  display:flex; align-items:center; justify-content:center; border:2px solid var(--panel); }
.lg-bq-ico i .lg-ico-s{ width:14px; height:14px; }
.lg-bq-cab h2{ margin:4px 0 6px; font-family:var(--display); font-weight:700; font-size:var(--fs-6); line-height:1.15; }
.lg-bq-cab p{ margin:0; font-size:var(--fs-2); line-height:1.45; color:var(--muted); }
.lg-bq-prog{ margin:16px 0 4px; padding:12px 14px; border-radius:var(--r-lg); background:color-mix(in srgb, var(--teal) 8%, var(--panel)); border:1px solid color-mix(in srgb, var(--teal) 22%, var(--panel)); }
.lg-bq-prog-cab, .lg-bq-prog-pie{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.lg-bq-prog-cab span, .lg-bq-prog-cab b{ font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.lg-bq-prog-cab b{ color:var(--teal-on-panel); }
.lg-bq-prog .lg-barra{ height:10px; margin:8px 0; }
.lg-bq-prog-pie span{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lg-bq-prog-pie b{ font-size:14px; color:var(--teal-on-panel); }
.lg-bq-h{ margin:18px 2px 8px; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lg-bq-como, .lg-bq-esc{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.lg-bq-como li, .lg-bq-esc li{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
.lg-bq-como li + li, .lg-bq-esc li + li{ border-top:1px solid color-mix(in srgb, var(--line) 55%, var(--panel)); }
.lg-bq-como-ico, .lg-bq-esc-ico{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.lg-bq-como-ico{ background:color-mix(in srgb, var(--teal) 12%, var(--panel)); color:var(--teal-on-panel); }
.lg-bq-esc-ico{ background:var(--panel2); font-size:20px; }
.lg-bq-como li > span:nth-child(2), .lg-bq-esc-txt{ flex:1; min-width:0; }
.lg-bq-como b, .lg-bq-esc-txt b{ display:block; font-size:14px; }
.lg-bq-como li > span:nth-child(2) > span, .lg-bq-esc-txt span{ display:block; margin-top:1px; font-size:12px; line-height:1.35; color:var(--muted); }
.lg-bq-como em{ flex:none; font-style:normal; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--teal-on-panel); }
.lg-bq-esc li:not(.abierto) .lg-bq-esc-ico{ filter:grayscale(.6); opacity:.75; }
.lg-bq-esc-est{ flex:none; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:var(--r-full); background:var(--panel2); color:var(--muted);
  font-family:var(--mono); font-size:10.5px; font-weight:700; }
.lg-bq-esc li.abierto .lg-bq-esc-est{ background:color-mix(in srgb, #2E9E57 16%, var(--panel)); color:color-mix(in srgb, #217A43 72%, var(--text)); }
.lg-bq-esc li.este{ background:color-mix(in srgb, var(--teal) 7%, var(--panel)); }
.lg-bq-esc li.este .lg-bq-esc-est{ background:var(--teal); color:var(--on-teal); }
.lg-bq-por{ margin:14px 2px; font-size:12.5px; line-height:1.45; color:var(--muted); text-align:center; }
@media (min-width:600px){ .overlay.lg-bloq-ov{ align-items:center; } .lg-bq-hoja{ border-radius:22px; } }
html[data-motion="reducido"] .lg-bq-hoja, html[data-motion="reducido"] .overlay.lg-bloq-ov{ transition:none; }
@media (prefers-reduced-motion: reduce){ .lg-bq-hoja, .overlay.lg-bloq-ov{ transition:none; } }
html[data-text="grande"] .lg-bq-como b, html[data-text="grande"] .lg-bq-esc-txt b{ font-size:var(--fs-4); }

/* ---- Liga: avatar neutro de «Sin anilla», «Anónimo» y «Cuenta borrada»
   (28/09/2026; ligaAvatarHTML en app.js) ---- */
.lg-av.anon{ background:var(--panel2); color:var(--muted); }
.lg-av.anon:not(.lg-av-podio):not(.lg-av-pd){ border:1px dashed color-mix(in srgb, var(--muted) 45%, var(--panel)); }
.lg-av.anon svg{ width:58%; height:58%; }

/* ---- Liga: punto dorado en la pestaña de abajo mientras haya un premio sin
   cobrar (28/09/2026; ligaPintarPuntoNav en app.js) ---- */
.bottom-nav-item[data-nav="juegos"]{ position:relative; }
.lg-nav-premio{ position:absolute; top:3px; left:calc(50% + 7px); width:11px; height:11px; border-radius:50%; background:#E0A93B;
  box-shadow:0 0 0 2px var(--panel), 0 0 0 5px color-mix(in srgb, #E0A93B 25%, transparent); pointer-events:none; animation:lg-nav-latido 2.6s ease-in-out infinite; }
@keyframes lg-nav-latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
html[data-motion="reducido"] .lg-nav-premio{ animation:none; }
@media (prefers-reduced-motion: reduce){ .lg-nav-premio{ animation:none; } }

/* ---- Liga: créditos de las fotos de cada mes, al final de «Cómo se suman
   puntos» (28/09/2026; ligaCreditosFotosHTML en app.js) ---- */
.lg-creditos{ padding:12px 0 6px; border-top:1px solid var(--lg-suave); }
.lg-creditos > b{ display:block; font-size:13px; }
.lg-creditos ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.lg-creditos li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; font-size:12px; line-height:1.35; }
.lg-creditos li span{ color:var(--text); }
.lg-creditos li a{ color:var(--teal-on-panel); text-decoration:none; overflow-wrap:anywhere; }
.lg-creditos p{ margin:10px 0 0; font-size:11.5px; line-height:1.4; color:var(--muted); }
/* ==== MAPA DE DISTRIBUCIÓN POR PROVINCIAS (dpv, 28/09/2026) ====
   Ver dpvMapaHTML() en app.js. El color es la época y sale de los acentos
   semánticos de la app, que ya tienen su versión para los temas claros:
   verde (--ok) todo el año, ámbar (--acc-amber) primavera y verano, azul
   (--acc-sky) invierno y lila (--acc-lilac) de paso. Tres intensidades por
   época: llena, mezclada con el fondo y a puntos («solo en puntos»). Cada
   provincia o isla lleva el color de su época ahí, así que en un mismo mapa
   puede haber varios (el petirrojo: verde en el norte, azul en el sur). */
.dpv{--dpv-fondo:color-mix(in srgb,var(--line) 45%,var(--panel2));--dpv-mar:color-mix(in srgb,var(--acc-sky) 10%,var(--panel))}
.dpv-h-res{--dpv-c:var(--ok)}.dpv-h-cria{--dpv-c:var(--acc-amber)}.dpv-h-inv{--dpv-c:var(--acc-sky)}.dpv-h-paso{--dpv-c:var(--acc-lilac)}
.dpv-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dpv-cab .sd-fact-k{margin-bottom:0}
.dpv-chip{flex-shrink:0;font-size:11px;font-weight:800;padding:3px 9px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--panel2);color:var(--dpv-c)}
.dpv-chip.dpv-chip-neutro{color:var(--muted)}
.dpv-frase{margin:8px 0 10px;font-size:13.5px;line-height:1.5;color:var(--text)}
.dpv-sin-mapa .dpv-frase{margin-bottom:4px}
.dpv-mapa{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--dpv-mar)}
.dpv-mar{fill:var(--dpv-mar)}
.dpv-vecinos{fill:color-mix(in srgb,var(--dpv-fondo) 45%,var(--dpv-mar));stroke:color-mix(in srgb,var(--line) 60%,var(--dpv-mar));stroke-width:.6}
.dpv-caja{fill:var(--dpv-mar);stroke:var(--line);stroke-width:1}
.dpv-prov path{stroke:var(--panel);stroke-width:.9;stroke-linejoin:round;cursor:pointer}
.dpv-prov path.sel{stroke:var(--text);stroke-width:1.8}
.dpv-mapa-islas .dpv-prov path{stroke-width:1.2}
.dpv-isla-n{font-size:16px;font-weight:700;fill:var(--muted);stroke:var(--dpv-mar);stroke-width:3px;paint-order:stroke;stroke-linejoin:round;pointer-events:none}
.dpv-k-comun{fill:var(--dpv-c)}
.dpv-k-parte{fill:color-mix(in srgb,var(--dpv-c) 50%,var(--dpv-fondo))}
.dpv-h-res.dpv-k-puntos{fill:url(#dpv-pt-res)}.dpv-h-cria.dpv-k-puntos{fill:url(#dpv-pt-cria)}.dpv-h-inv.dpv-k-puntos{fill:url(#dpv-pt-inv)}.dpv-h-paso.dpv-k-puntos{fill:url(#dpv-pt-paso)}
.dpv-k-ocasional{fill:color-mix(in srgb,var(--muted) 42%,var(--dpv-fondo))}
.dpv-k-no{fill:var(--dpv-fondo)}
.dpv-k-sindatos{fill:url(#dpv-rayas)}
.dpv-pt-fondo{fill:var(--dpv-fondo)}.dpv-pt-punto{fill:var(--dpv-c)}
.dpv-raya{stroke:color-mix(in srgb,var(--muted) 45%,var(--dpv-fondo));stroke-width:1.4}
.dpv-info{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--muted);min-height:17px}
.dpv-info.on{color:var(--text);font-weight:700}
.dpv-ley-t{margin:12px 0 0;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dpv-ley-sub{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--text)}
.dpv-leyenda{margin-top:6px}
.dpv-leyenda i.dpv-sw{border:1px solid var(--line);box-shadow:none}
.dpv-sw.dpv-k-comun{background:var(--dpv-c)}
.dpv-sw.dpv-k-parte{background:color-mix(in srgb,var(--dpv-c) 50%,var(--dpv-fondo))}
.dpv-sw.dpv-k-puntos{background:radial-gradient(circle,var(--dpv-c) 1.6px,var(--dpv-fondo) 1.9px) 0 0/5px 5px}
.dpv-sw.dpv-k-ocasional{background:color-mix(in srgb,var(--muted) 42%,var(--dpv-fondo))}
.dpv-sw.dpv-k-no{background:var(--dpv-fondo)}
.dpv-sw.dpv-k-sindatos{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--muted) 45%,var(--dpv-fondo)) 0 1.4px,var(--dpv-fondo) 1.4px 5px)}

/* ==== FICHA LIGERA (29/09/2026) ==== */
.sd-otros-nombres{display:flex;flex-wrap:wrap;gap:4px 10px}
.sd-otros-nombres abbr{text-decoration:none;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-right:2px}
.sd-subtit{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sd-leer-mas{margin:6px 0 0}
.sd-leer-mas>summary{cursor:pointer;list-style:none;display:inline-block;font-size:13px;font-weight:700;color:var(--gold);padding:4px 0}
.sd-leer-mas>summary::-webkit-details-marker{display:none}
.sd-leer-mas>summary::after{content:' ▾'}
.sd-leer-mas[open]>summary::after{content:' ▴'}
.sd-leer-mas .sd-resto{margin-top:6px}
.sd-leer-mas .sd-desc.sd-resto::first-letter{font-size:inherit;float:none;padding:0;color:inherit;font-weight:inherit}
.sd-card>.sd-presencia-tuya:first-child{margin-top:0}
.sd-presencia-tuya p{margin:0;font-size:14px;line-height:1.45;color:var(--text)}
.sd-card .sd-hab-titulo{margin:12px 0 2px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sd-card .sd-hab-texto{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.dpv-clave{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:12px;color:var(--text)}
.dpv-clave span{display:inline-flex;align-items:center;gap:6px}
.dpv-clave i{width:11px;height:11px;border-radius:3px;background:var(--dpv-c)}
.dpv-ley{margin:6px 0 0}
.dpv-ley>summary{cursor:pointer;list-style:none;margin:6px 0 0}
.dpv-ley>summary::-webkit-details-marker{display:none}
.dpv-ley>summary::after{content:' ▾'}
.dpv-ley[open]>summary::after{content:' ▴'}
.sd-sin-parecidas{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--text)}

/* =====================================================================
   COLECCIÓN V3 (02/10/2026) — el diseño elegido en el laboratorio de la
   colección: tarjeta «cromo» (retrato 4:5, nombre sobre la foto), número
   en pestaña, sin ver en silueta, rareza en franja, dominadas «negro y
   oro», cabecera compacta con «Ordenar por», tarjeta «En temporada»,
   tablero de familias con logros de laurel y tabla de Taxonomía.
   Todo va bajo .cv3 / .cv3-* para no tocar a nadie más.
   ===================================================================== */
:root{
  /* Materiales de los logros de familia y de las dominadas. Son colores de
     material (oro, plata, laurel), no de tema: no cambian con el fondo. */
  --cv3-oro:#D6A95A; --cv3-oro-ink:#E2B866;
  --cv3-oro-grad:linear-gradient(135deg,#8A6420 0%,#F6E3A1 22%,#B8892F 42%,#FFF2C2 55%,#A77A28 72%,#F0D68A 88%,#8A6420 100%);
  --cv3-oro-boton:linear-gradient(180deg,#FFE7A6,#E2B04F);
  --cv3-on-oro:#3A2A0E;
  --cv3-plata:#9AA6B2; --cv3-plata-ink:#D5DEE6;
  --cv3-plata-grad:linear-gradient(135deg,#6F7B88 0%,#F4F7FA 28%,#9AA6B2 50%,#FFFFFF 64%,#7D8996 100%);
  --cv3-verde:#3F8A4E; --cv3-verde-ink:#86C893;
  --cv3-dom:#7B4FD6;
  --cv3-lau1a:#3F8A4E; --cv3-lau1b:#6DBA7C;
  --cv3-lau2a:#8592A0; --cv3-lau2b:#D5DDE5;
  --cv3-lau3a:#B8892F; --cv3-lau3b:#F1D184;
  /* Edición negra y oro (dominadas) */
  --cv3-negro:#0E0D0B; --cv3-filete:#D6A95A; --cv3-filete-osc:#B8892F; --cv3-nombre-oro:#EBCB80;
  /* Velo bajo el nombre en la foto: tinta casi negra, igual en los dos temas */
  --cv3-tinta:#080E0C;
}
html[data-bg^="claro"]{ --cv3-oro-ink:#8A6420; --cv3-plata-ink:#56626F; --cv3-verde-ink:#2F6E3C; }

/* ---------- cabecera compacta: buscador · Ordenar por · filtros · tamaño ---------- */
.cv3-head .cv2-head-row{flex-wrap:nowrap; row-gap:0; gap:8px;}
.cv3-head .cv2-head-counter{display:none;}
.cv3-head .cv2-head-row .search-wrap{order:0; flex:1 1 auto; min-width:0;}
.cv3-head .search{height:40px; padding-top:0; padding-bottom:0; font-size:var(--fs-2); box-shadow:var(--sh-1);}
.cv3-head .cv2-head-row .filtros-btn{width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:var(--sh-1);}
.cv3-head .cv2-head-row .filtros-btn svg{width:19px; height:19px; vertical-align:0;}
.cv3-head .filtros-btn-txt{display:none;}
.cv3-orden-btn{flex:0 0 auto; height:40px; display:inline-flex; align-items:center; gap:5px; padding:0 12px 0 14px; border-radius:var(--r-full); border:1px solid var(--teal); background:var(--teal); color:var(--on-teal); font:inherit; font-size:var(--fs-2); font-weight:700; line-height:1; cursor:pointer; white-space:nowrap; touch-action:manipulation; box-shadow:var(--sh-1); -webkit-tap-highlight-color:transparent; transition:transform var(--dur-0) var(--ease);}
.cv3-orden-btn svg{width:13px; height:13px; flex:0 0 auto;}
.cv3-orden-btn:active{transform:scale(.96);}
.cv3-head .cv2-head-prog{height:3px; margin-top:9px;}
.cv3-head .cv2-dex-counts{font-size:var(--fs-0); margin-top:5px;}
.cv3-head .cv2-stat svg{width:12px; height:12px;}
/* «En temporada» encendido: barra de filtro activo con su «Quitar» */
.cv3-head .cv2-atiro.on{margin-top:10px; gap:10px; padding:9px 8px 9px 14px; border-radius:var(--r-lg); background:color-mix(in srgb, var(--gold) 14%, var(--panel)); border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); color:var(--text);}
.cv3-head .cv2-atiro.on .pt{position:relative; width:7px; height:7px; background:var(--gold);}
.cv3-head .cv2-atiro.on .pt::after, .cv3-tmp-live::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--gold); opacity:0; animation:cv3Pulso 2.4s ease-out infinite;}
@keyframes cv3Pulso{0%{transform:scale(.5); opacity:.8} 80%,100%{transform:scale(1.35); opacity:0}}
.cv3-head .cv2-atiro.on .tx{display:flex; flex-direction:column; line-height:1.25;}
.cv3-head .cv2-atiro.on .tx b{font-family:var(--display); font-size:var(--fs-3); font-weight:700; color:var(--text);}
.cv3-head .cv2-atiro.on .tx span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.cv3-quitar{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:var(--r-full); padding:7px 10px; font-size:var(--fs-1); font-weight:700;}
.cv3-head .cv2-atiro.on .cv3-quitar svg{width:13px; height:13px; color:var(--text);}
.ajustes-sec[hidden]{display:none !important;}
/* La lámina de una familia es una página: fuera la cabecera de la colección */
body.cv3-lamina-on #avesTools{display:none !important;}

/* ---------- rejilla ---------- */
.pokedex-grid.cv3{display:grid; grid-template-columns:repeat(var(--cv3-cols,4), minmax(0,1fr)); gap:8px; margin-top:10px;}
.pokedex-grid.cv3.size-pequena{--cv3-cols:4; gap:8px;}
.pokedex-grid.cv3.size-mediana{--cv3-cols:3; gap:10px;}
.pokedex-grid.cv3.size-grande{--cv3-cols:2; gap:12px;}
@media (min-width:600px){
  .pokedex-grid.cv3.size-pequena{grid-template-columns:repeat(auto-fill, minmax(112px,1fr));}
  .pokedex-grid.cv3.size-mediana{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
  .pokedex-grid.cv3.size-grande{grid-template-columns:repeat(auto-fill, minmax(210px,1fr));}
}
.pokedex-grid.cv3.size-lista{display:flex; flex-direction:column; gap:6px;}

/* ---------- tarjeta «cromo» ---------- */
.pokedex-grid.cv3 .poke-card{display:block; position:relative; min-width:0; padding:0; gap:0; border:0; border-radius:var(--r-md); background:var(--panel); box-shadow:var(--sh-2); text-align:left; overflow:visible; contain-intrinsic-size:auto 104px; transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);}
.pokedex-grid.cv3.size-mediana .poke-card{border-radius:var(--r-lg); contain-intrinsic-size:auto 140px;}
.pokedex-grid.cv3.size-grande .poke-card{border-radius:var(--r-lg); contain-intrinsic-size:auto 215px;}
.pokedex-grid.cv3 .poke-card:hover{border-color:transparent; box-shadow:var(--sh-3);}
.pokedex-grid.cv3 .poke-card:active{transform:scale(.97);}
.pokedex-grid.cv3 .poke-thumb{position:relative; display:block; width:100%; aspect-ratio:4/5; max-width:100%; border-radius:inherit; overflow:hidden; background:var(--panel2); line-height:0;}
.pokedex-grid.cv3 .refwrap{position:absolute; inset:0; display:block; overflow:hidden; border-radius:inherit; background:var(--panel2);}
.pokedex-grid.cv3 .refwrap .ref{position:absolute; inset:0; width:100% !important; height:100% !important; margin:0; border:0; border-radius:0; box-shadow:none; background:var(--panel2);}
.pokedex-grid.cv3 .refwrap .ref img{width:100%; height:100%; object-fit:cover; display:block;}
.pokedex-grid.cv3 .refwrap .ref.lazy > svg{width:58%; height:auto; color:var(--muted); opacity:.45;}
.pokedex-grid.cv3 .ref-placeholder-inicial{display:none;}
/* «Sin red» / «Reintento pendiente»: arriba, bajo la pestaña, para no
   pisar el nombre que va al pie de la foto */
.pokedex-grid.cv3 .refwrap .ref[data-load-state]::after{inset:24px 4px auto 4px;}
.pokedex-grid.cv3.size-lista .refwrap .ref[data-load-state]::after{display:none;}
/* velo para que el nombre se lea sobre cualquier foto */
.pokedex-grid.cv3 .poke-thumb::after{content:''; position:absolute; inset:auto 0 0 0; height:58%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--cv3-tinta) 92%, transparent) 0%, color-mix(in srgb, var(--cv3-tinta) 55%, transparent) 45%, transparent 100%);}
.pokedex-grid.cv3 .poke-name{position:absolute; left:6px; right:6px; bottom:7px; z-index:2; max-width:none; margin:0; padding:0; color:#fff; text-align:left; font-family:var(--display); font-weight:600; font-size:10.5px; line-height:1.12; letter-spacing:-.005em; text-shadow:0 1px 2px rgba(0,0,0,.5); white-space:normal; text-overflow:clip; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; -webkit-hyphens:auto; hyphens:auto; pointer-events:none;}
.pokedex-grid.cv3.size-mediana .poke-name{left:8px; right:8px; bottom:9px; font-size:var(--fs-2); line-height:1.15;}
.pokedex-grid.cv3.size-grande .poke-name{left:10px; right:10px; bottom:11px; font-size:var(--fs-3); line-height:1.15;}
/* número en pestaña (001) */
.pokedex-grid.cv3 .poke-dex-num{position:absolute; top:-1px; left:-1px; z-index:5; display:block; padding:3px 5px; border-radius:var(--r-md) 0 var(--r-sm) 0; background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:9px; font-weight:700; line-height:1; letter-spacing:.04em; font-variant-numeric:tabular-nums; box-shadow:var(--sh-1); pointer-events:none;}
.pokedex-grid.cv3.size-mediana .poke-dex-num, .pokedex-grid.cv3.size-grande .poke-dex-num{padding:4px 7px 4px 6px; font-size:var(--fs-0); border-radius:var(--r-lg) 0 var(--r-sm) 0;}
.pokedex-grid.cv3 .poke-card.undiscovered .poke-dex-num{background:var(--panel2); color:var(--muted); border:1px solid var(--line); border-top:0; border-left:0;}
/* insignia de estado */
.pokedex-grid.cv3 .poke-status{position:absolute; top:5px; right:5px; z-index:3; width:18px; height:18px; border-radius:var(--r-full); background:color-mix(in srgb, var(--cv3-tinta) 55%, transparent); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); font-size:0;}
.pokedex-grid.cv3 .poke-status svg{width:13px; height:13px; display:block;}
.pokedex-grid.cv3.size-mediana .poke-status, .pokedex-grid.cv3.size-grande .poke-status{top:7px; right:7px; width:22px; height:22px;}
.pokedex-grid.cv3.size-mediana .poke-status svg, .pokedex-grid.cv3.size-grande .poke-status svg{width:16px; height:16px;}
.pokedex-grid.cv3 .poke-status.v svg path{stroke:var(--teal);}
.pokedex-grid.cv3 .poke-status.v svg circle:last-child{fill:var(--teal);}
.pokedex-grid.cv3 .ruta-status{top:28px; right:5px; left:auto; width:18px; height:18px;}
.pokedex-grid.cv3 .ruta-status svg{width:11px; height:11px;}
/* rareza: franja al pie de la foto */
.pokedex-grid.cv3 .rz-mark{position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3; display:block; background:var(--rc); pointer-events:none;}
.pokedex-grid.cv3 .poke-card.undiscovered .rz-mark{opacity:.8;}
/* sin ver: la silueta de su familia, sin foto */
.pokedex-grid.cv3 .poke-card.undiscovered .refwrap{background:color-mix(in srgb, var(--panel2) 60%, #0b1210);}
html:not([data-bg^="claro"]) .pokedex-grid.cv3 .poke-card.undiscovered .refwrap{background:color-mix(in srgb, var(--panel2) 70%, var(--ink));}
.pokedex-grid.cv3 .cv3-sil{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); opacity:.55;}
.pokedex-grid.cv3 .cv3-sil svg{width:62%; height:62%;}
.pokedex-grid.cv3 .poke-card.undiscovered .poke-thumb::after{background:linear-gradient(to top, color-mix(in srgb, var(--cv3-tinta) 85%, transparent), transparent);}
.pokedex-grid.cv3 .poke-card.undiscovered .poke-name{color:rgba(255,255,255,.74); font-weight:500;}
/* vista sin foto: la foto de referencia algo apagada, para no confundirla con capturada */
.pokedex-grid.cv3 .poke-card.vista .ref{filter:saturate(.55) brightness(.92);}
/* dominada: edición negra y oro -- la foto queda enmarcada con filete dorado */
.pokedex-grid.cv3 .poke-card.dominada{background:var(--panel); border:0; box-shadow:0 0 0 1px var(--cv3-filete-osc), 0 6px 16px -8px rgba(0,0,0,.6), var(--sh-2);}
.pokedex-grid.cv3 .poke-card.dominada:hover{box-shadow:0 0 0 1px var(--cv3-filete-osc), var(--sh-3);}
.pokedex-grid.cv3 .poke-card.dominada .poke-thumb{background:var(--cv3-negro);}
.pokedex-grid.cv3 .poke-card.dominada .refwrap{inset:4px; border-radius:6px;}
.pokedex-grid.cv3 .dm-ring{position:absolute; inset:2.5px; z-index:2; border-radius:8px; box-shadow:0 0 0 1px var(--cv3-filete); pointer-events:none;}
.pokedex-grid.cv3.size-mediana .poke-card.dominada .refwrap, .pokedex-grid.cv3.size-grande .poke-card.dominada .refwrap{inset:5px; border-radius:8px;}
.pokedex-grid.cv3.size-mediana .dm-ring, .pokedex-grid.cv3.size-grande .dm-ring{inset:3px; border-radius:10px;}
.pokedex-grid.cv3 .poke-card.dominada .poke-thumb::after{z-index:2; background:linear-gradient(to top, color-mix(in srgb, var(--cv3-negro) 97%, transparent) 0%, color-mix(in srgb, var(--cv3-negro) 78%, transparent) 36%, transparent 100%);}
.pokedex-grid.cv3 .poke-card.dominada .poke-name{color:var(--cv3-nombre-oro);}
.pokedex-grid.cv3 .poke-card.dominada .ref{box-shadow:none;}
.pokedex-grid.cv3 .poke-card.dominada .ref::before{display:none; animation:none;}
.pokedex-grid.cv3 .ref.gold{box-shadow:none; border:0;}
html[data-densidad="compacta"] .pokedex-grid.cv3 .refwrap .ref{width:100% !important; height:100% !important;}
html[data-contraste="1"] .pokedex-grid.cv3 .refwrap .ref{border:0;}
/* vista de lista */
.pokedex-grid.cv3.size-lista .poke-card{display:flex; flex-direction:row; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--sh-2); contain-intrinsic-size:auto 74px;}
.pokedex-grid.cv3.size-lista .poke-thumb{width:56px; flex:0 0 auto; aspect-ratio:1/1; border-radius:var(--r-sm);}
.pokedex-grid.cv3.size-lista .poke-thumb::after{display:none;}
.pokedex-grid.cv3.size-lista .poke-dex-num{position:static; order:-1; flex:0 0 auto; width:30px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--muted); font-size:var(--fs-1); font-weight:400; letter-spacing:0; text-align:right;}
.pokedex-grid.cv3.size-lista .poke-card.undiscovered .poke-dex-num{background:none; border:0;}
.pokedex-grid.cv3.size-lista .poke-info{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; line-height:1.25;}
.pokedex-grid.cv3.size-lista .poke-name{position:static; display:block; color:var(--text); text-shadow:none; font-size:var(--fs-3); -webkit-line-clamp:unset; pointer-events:auto;}
.pokedex-grid.cv3.size-lista .poke-sci{display:block; font-family:var(--display); font-style:italic; font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pokedex-grid.cv3.size-lista .poke-sub{display:block; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pokedex-grid.cv3.size-lista .poke-status{position:static; flex:0 0 auto; margin-left:auto; width:24px; height:24px; background:var(--panel2); border-color:var(--line);}
.pokedex-grid.cv3.size-lista .poke-status svg{width:16px; height:16px;}
.pokedex-grid.cv3.size-lista .rz-mark{height:3px;}
.pokedex-grid.cv3.size-lista .poke-card.undiscovered .poke-name{color:var(--muted); font-weight:500;}
.pokedex-grid.cv3.size-lista .poke-card.dominada .poke-name{color:var(--gold);}
.pokedex-grid.cv3.size-lista .poke-card.dominada .refwrap{inset:3px; border-radius:5px;}
.pokedex-grid.cv3.size-lista .dm-ring{inset:1.5px; border-radius:6px;}
.pokedex-grid.cv3.size-lista .ruta-status{top:auto; bottom:4px; right:4px;}
/* separadores de letra (A–Z) */
.pokedex-grid.cv3 .letter.cv2-letter{grid-column:1/-1; display:flex; align-items:baseline; gap:10px; padding:16px 2px 6px; margin:4px 0 2px; border-bottom:1px solid var(--line); letter-spacing:0; color:var(--text);}
.pokedex-grid.cv3 .cv2-letter-char{font-family:var(--display); font-weight:700; font-size:var(--fs-5); color:var(--text); line-height:1;}
.pokedex-grid.cv3 .cv2-letter-line{flex:1; height:1px; background:transparent;}
.pokedex-grid.cv3 .cv2-letter-count{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); letter-spacing:.14em;}
.pokedex-grid.cv3 .cv2-letter-count b{color:var(--text); font-weight:600;}
/* cabecera de cada rareza (orden «Rareza») */
.cv3-rz-h{grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:18px 0 8px; min-width:0;}
.cv3-rz-ico{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--rc) 18%, var(--panel)); border:1px solid color-mix(in srgb, var(--rc) 55%, var(--line));}
.cv3-rz-ico i{display:block; width:12px; height:12px; border-radius:50%; background:var(--rc); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 25%, transparent);}
.cv3-rz-t{min-width:0; flex:1 1 auto; display:flex; flex-direction:column;}
.cv3-rz-title{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-family:var(--display); font-weight:600; font-size:var(--fs-4); line-height:1.2; letter-spacing:-.01em; color:color-mix(in srgb, var(--rc) 72%, var(--text));}
.cv3-rz-xp{font-family:var(--mono); font-size:var(--fs-0); font-weight:400; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-full); padding:2px 7px; letter-spacing:0;}
.cv3-rz-sub{margin-top:3px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cv3-rz-sub b{color:var(--text); font-weight:600;}
.cv3-rz-sub .faltan{color:var(--gold);}
html[data-bg^="claro"] .cv3-rz-sub .faltan{color:var(--acc-amber);}
.cv3-rz-bar{position:relative; display:block; height:4px; margin-top:6px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.cv3-rz-bar i{position:absolute; left:0; top:0; height:100%;}
.cv3-rz-bar .v{background:var(--teal); opacity:.5;}
.cv3-rz-bar .c{background:var(--gold);}

/* ---------- tarjeta «En temporada» ---------- */
.cv3-tmp{display:block; width:100%; margin:10px 0 2px; padding:12px 14px 14px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  background:radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--gold) 15%, transparent) 0%, transparent 58%), var(--panel);
  box-shadow:var(--sh-2); color:var(--text); font:inherit; text-align:left; cursor:pointer; position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent; container-type:inline-size; transition:transform var(--dur-1) var(--ease);}
.cv3-tmp:active{transform:scale(.99);}
.cv3-tmp-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cv3-tmp-kick{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-0); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--gold) 60%, var(--text));}
.cv3-tmp-live{position:relative; flex:0 0 auto; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold);}
.cv3-tmp-ver{display:inline-flex; align-items:center; gap:2px; font-size:var(--fs-1); font-weight:700; color:var(--teal); white-space:nowrap;}
.cv3-tmp-ver svg{width:14px; height:14px;}
.cv3-tmp-main{display:flex; align-items:flex-end; gap:14px; margin-top:8px;}
.cv3-tmp-txt{display:block; flex:1 1 auto; min-width:0;}
.cv3-tmp-num{display:block; font-family:var(--display); font-weight:700; font-size:36px; line-height:.95; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums;}
.cv3-tmp-lede{display:block; margin-top:4px; font-family:var(--display); font-size:var(--fs-2); line-height:1.3; color:var(--text); text-wrap:balance;}
.cv3-tmp-histo{flex:0 0 auto; display:grid; grid-template-columns:repeat(12, 7px); gap:2px; height:40px; margin-bottom:13px;}
.cv3-tmp-histo .hb{position:relative; height:100%; display:flex; align-items:flex-end;}
.cv3-tmp-histo .hb i{display:block; width:100%; min-height:3px; border-radius:2px 2px 1px 1px; background:color-mix(in srgb, var(--muted) 34%, transparent);}
.cv3-tmp-histo .hb.on i{background:var(--gold);}
.cv3-tmp-histo .hb b{position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:8px; font-weight:500; line-height:1; color:var(--muted);}
.cv3-tmp-histo .hb.on b{color:var(--text); font-weight:700;}
.cv3-tmp-histo .hb::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:4; padding:3px 6px; border-radius:6px; background:var(--text); color:var(--panel); font-family:var(--mono); font-size:10px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s;}
.cv3-tmp-histo .hb:nth-child(n+9)::after{left:auto; right:0; transform:none;}
@media (hover:hover){
  .cv3-tmp-histo .hb:hover::after{opacity:1;}
  .cv3-tmp-histo .hb:hover i{background:color-mix(in srgb, var(--muted) 60%, transparent);}
  .cv3-tmp-histo .hb.on:hover i{background:var(--gold);}
}
.cv3-tmp-strip{display:flex; align-items:center; gap:7px; margin-top:12px; padding-left:2px;}
.cv3-tmp-av{position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:color-mix(in srgb, var(--panel2) 70%, var(--line)); box-shadow:0 0 0 2px var(--panel), 0 0 0 3.5px var(--rc); overflow:hidden;}
.cv3-tmp-av svg{width:72%; height:72%; opacity:.7;}
.cv3-tmp-mas{height:38px; min-width:40px; padding:0 9px; border-radius:var(--r-full); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--muted); background:var(--panel2); border:1px dashed var(--line);}
@container (max-width:320px){ .cv3-tmp-strip{gap:5px;} .cv3-tmp-strip .cv3-tmp-av, .cv3-tmp-strip .cv3-tmp-mas{width:34px; height:34px;} .cv3-tmp-strip .cv3-tmp-mas{width:auto; min-width:36px;} }
@container (max-width:280px){ .cv3-tmp-strip .cv3-tmp-av, .cv3-tmp-strip .cv3-tmp-mas{width:30px; height:30px;} }

/* ---------- hoja «Ordenar por» ---------- */
.cv3-agr-lista{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.cv3-agr-op{display:grid; grid-template-columns:1fr auto; align-items:center; width:100%; text-align:left; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; font:inherit;}
.cv3-agr-op > b{font-weight:700; font-size:var(--fs-3);}
.cv3-agr-op > span{grid-column:1; font-size:var(--fs-1); color:var(--muted);}
.cv3-agr-op > svg{grid-row:1 / 3; grid-column:2; width:20px; height:20px; color:var(--teal);}
.cv3-agr-op.on{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 10%, var(--panel));}
.cv3-agr-op.cv3-agr-rz{cursor:default;}
.cv3-agr-seg{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px;}
.cv3-agr-seg button{display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:var(--r-sm); padding:9px 6px; font:inherit; font-size:var(--fs-1); font-weight:700; cursor:pointer; min-height:40px;}
.cv3-agr-seg button i{width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto;}
.cv3-agr-seg button.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}

/* ---------- familias: superficie y niveles (laurel) ---------- */
.cv3-fam-el{--fe-bd:var(--line); --fe-bw:1px; --fe-bg:var(--panel); --fe-ink:var(--text); --fe-sh:var(--sh-2);
  position:relative; border:var(--fe-bw) solid transparent;
  background:linear-gradient(var(--fe-bg),var(--fe-bg)) padding-box, var(--fe-bgrad, linear-gradient(var(--fe-bd),var(--fe-bd))) border-box;
  box-shadow:var(--fe-sh); transition:box-shadow .3s;}
.cv3-fam-t1{--fe-bd:color-mix(in srgb, var(--cv3-verde) 70%, var(--line)); --fe-bw:1.5px; --fe-bg:color-mix(in srgb, var(--cv3-verde) 9%, var(--panel)); --fe-ink:var(--cv3-verde-ink);}
.cv3-fam-t2{--fe-bgrad:var(--cv3-plata-grad); --fe-bw:2px; --fe-bg:color-mix(in srgb, var(--cv3-plata) 11%, var(--panel)); --fe-ink:var(--cv3-plata-ink); --fe-sh:0 0 0 1px rgba(154,166,178,.25), 0 8px 22px -10px rgba(110,125,140,.8);}
.cv3-fam-t3{--fe-bgrad:var(--cv3-oro-grad); --fe-bw:2.5px; --fe-bg:color-mix(in srgb, var(--cv3-oro) 15%, var(--panel)); --fe-ink:var(--cv3-oro-ink); --fe-sh:0 0 0 1px rgba(214,169,90,.35), 0 10px 26px -10px rgba(214,169,90,.85);}
.cv3-fx-oro, .cv3-fx-t2{position:absolute; inset:0; pointer-events:none; display:none; z-index:1;}
.cv3-fam-t2 .cv3-fx-t2{display:block; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 44%, rgba(255,255,255,.12) 52%, transparent 62%); background-size:100% 260%; background-position:0 calc(var(--gy,.4) * 100%);}
.cv3-fam-t3 .cv3-fx-oro{display:block; background:linear-gradient(118deg, transparent 30%, rgba(255,236,170,.32) 42%, rgba(255,250,225,.62) 48%, rgba(255,205,110,.32) 54%, transparent 64%); background-size:100% 300%; background-position:0 calc(var(--gy,.4) * 100%); mix-blend-mode:screen;}
.cv3-revela{animation:cv3Revela 1.25s ease both;}
@keyframes cv3Revela{0%{transform:scale(.96); filter:brightness(1.7) saturate(1.3)} 35%{transform:scale(1.025)} 100%{transform:none; filter:none}}
/* barra de tres tramos: vistas, capturadas, dominadas */
.cv3-fbar{position:relative; display:block; height:5px; margin-top:6px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.cv3-fbar i{position:absolute; left:0; top:0; height:100%; border-radius:var(--r-full);}
.cv3-fbar .v{background:var(--teal); opacity:.45;}
.cv3-fbar .c{background:var(--gold);}
.cv3-fbar .d{background:var(--cv3-dom);}
.cv3-fam-t3 .cv3-fbar .c, .cv3-fam-t3 .cv3-fbar .d{background:var(--cv3-oro-grad);}

/* emblemas de laurel: ramita verde → corona plateada → corona de oro */
.cv3-emb{position:relative; display:inline-grid; place-items:center; flex:0 0 auto; width:var(--es,30px); height:var(--es,30px); border-radius:50%; vertical-align:middle;}
.cv3-emb .lau{position:absolute; inset:-8%; width:116%; height:116%; overflow:visible;}
.cv3-emb .emb-ic, .cv3-emb .cv3-emb-ic{position:relative; z-index:1; display:grid; place-items:center; width:38%; height:38%; margin-top:6%;}
.cv3-emb .cv3-emb-ic svg{width:100%; height:100%;}
.cv3-emb.xs{--es:20px;} .cv3-emb.sm{--es:28px;} .cv3-emb.md{--es:36px;} .cv3-emb.fh-emb{--es:56px;} .cv3-emb.xl{--es:116px;}
.cv3-emb.apagado{filter:grayscale(1); opacity:.5;}
.cv3-emb-t1{color:var(--cv3-verde-ink);}
.cv3-emb-t1 .lau-s, .cv3-emb-t1 .lau-a{stroke:var(--cv3-lau1a); fill:var(--cv3-lau1a);} .cv3-emb-t1 .lau-s{fill:none;} .cv3-emb-t1 .lau-b{fill:var(--cv3-lau1b);}
.cv3-emb-t2{color:var(--cv3-plata-ink); filter:drop-shadow(0 0 4px rgba(200,212,224,.7));}
.cv3-emb-t2 .lau-s, .cv3-emb-t2 .lau-a{stroke:var(--cv3-lau2a); fill:var(--cv3-lau2a);} .cv3-emb-t2 .lau-s{fill:none;} .cv3-emb-t2 .lau-b{fill:var(--cv3-lau2b);}
.cv3-emb-t3{color:var(--cv3-oro-ink); filter:drop-shadow(0 0 5px rgba(214,169,90,.55));}
.cv3-emb-t3 .lau-s, .cv3-emb-t3 .lau-a{stroke:var(--cv3-lau3a); fill:var(--cv3-lau3a);} .cv3-emb-t3 .lau-s{fill:none;} .cv3-emb-t3 .lau-b{fill:var(--cv3-lau3b);}
.cv3-emb .lau-a, .cv3-emb .lau-b{stroke:none;}
.cv3-emb.apagado{filter:grayscale(1); opacity:.5;}

/* recompensa pendiente */
.cv3-fpend{display:inline-flex; align-items:center; gap:5px; padding:4px 8px 4px 6px; border-radius:var(--r-full); background:var(--cv3-oro-boton); color:var(--cv3-on-oro); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.3); animation:cv3Latido 2.2s ease-in-out infinite;}
.cv3-fpend svg{width:14px; height:14px;}
.cv3-fpend.mini{padding:3px;}
@keyframes cv3Latido{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}}
.cv3-fclaim{display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; border-radius:var(--r-full); padding:6px 10px; background:var(--cv3-oro-boton); color:var(--cv3-on-oro); font:inherit; font-weight:700; font-size:var(--fs-1); box-shadow:0 3px 10px -2px rgba(214,169,90,.7), inset 0 1px 0 rgba(255,255,255,.6); white-space:nowrap;}
.cv3-fclaim svg{width:16px; height:16px;}
.cv3-fclaim.grande{padding:8px 12px; border-radius:var(--r-md); text-align:left; animation:cv3Latido 2.2s ease-in-out infinite;}
.cv3-fclaim.grande span{display:flex; flex-direction:column; line-height:1.15;}
.cv3-fclaim.grande b{font-family:var(--mono); font-size:var(--fs-1);}
.cv3-fclaim:disabled{filter:grayscale(.85); opacity:.5; animation:none; cursor:not-allowed; box-shadow:none;}

/* resumen «Tus familias» */
.cv3-fres{margin:10px 0 2px; padding:12px 14px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-2);}
.cv3-fres-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cv3-fres-k{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.cv3-fres-n{margin-top:2px; font-family:var(--display); font-size:var(--fs-4); font-weight:600; color:var(--text);}
.cv3-fres-n b{font-weight:700;}
.cv3-fres-pend{display:flex; align-items:center; gap:8px; flex:0 0 auto; border:1px solid color-mix(in srgb, var(--cv3-oro) 55%, var(--line)); background:color-mix(in srgb, var(--cv3-oro) 15%, var(--panel)); color:var(--text); border-radius:var(--r-md); padding:7px 10px; cursor:pointer; text-align:left; font:inherit;}
.cv3-fres-pend svg{width:20px; height:20px; color:var(--cv3-oro-ink); flex:0 0 auto; animation:cv3Regalo 2.6s ease-in-out infinite;}
.cv3-fres-pend span{display:flex; flex-direction:column; line-height:1.2;}
.cv3-fres-pend b{font-size:var(--fs-2);} .cv3-fres-pend small{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
@keyframes cv3Regalo{0%,68%,100%{transform:none} 76%{transform:translateY(-3px) rotate(-9deg)} 84%{transform:rotate(7deg)} 92%{transform:rotate(-3deg)}}
.cv3-fres-tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px;}
.cv3-fres-t{display:flex; align-items:center; gap:7px; min-width:0; padding:7px 8px; border-radius:var(--r-md); background:var(--panel2);}
.cv3-fres-t b{display:block; font-family:var(--display); font-size:var(--fs-4); line-height:1; color:var(--text);}
.cv3-fres-t span{display:block; margin-top:2px; font-family:var(--mono); font-size:9px; letter-spacing:.02em; color:var(--muted);}

/* tablero: una ficha por familia, un punto por especie */
.cv3-ft-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px;}
@media (min-width:600px){ .cv3-ft-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));} }
.cv3-ftile{display:flex; flex-direction:column; gap:5px; width:100%; min-width:0; padding:8px 8px 7px; border-radius:var(--r-md); color:var(--text); font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; content-visibility:auto; contain-intrinsic-block-size:auto 130px;}
.cv3-ftile:active{transform:scale(.985);}
.cv3-ft-top{display:flex; align-items:flex-start; justify-content:space-between; gap:4px; height:22px;}
.cv3-ft-sil{display:grid; width:30px; height:20px; color:color-mix(in srgb, var(--fe-ink) 65%, var(--muted));}
.cv3-ft-sil svg{width:100%; height:100%;}
.cv3-ft-k{display:block; margin-bottom:-3px; font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cv3-ft-t{font-family:var(--display); font-weight:700; font-size:var(--fs-1); line-height:1.15; min-height:2.3em; color:var(--fe-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.cv3-ft-dots{display:flex; flex-wrap:wrap; align-content:flex-start; gap:3px; min-height:16px;}
.cv3-dt{display:block; width:7px; height:7px; border-radius:50%; box-shadow:inset 0 0 0 1.2px color-mix(in srgb, var(--muted) 55%, transparent);}
.cv3-ft-dots.medio .cv3-dt{width:5.5px; height:5.5px;}
.cv3-ft-dots.mucho{gap:2px;} .cv3-ft-dots.mucho .cv3-dt{width:4.5px; height:4.5px;}
.cv3-dt.e1{background:color-mix(in srgb, var(--teal) 55%, transparent); box-shadow:none;}
.cv3-dt.e2{background:var(--gold); box-shadow:none;}
.cv3-dt.e3{background:var(--cv3-dom); box-shadow:none;}
.cv3-fam-t3 .cv3-dt.e3{background:radial-gradient(circle at 35% 30%, #FFF2C2, #D6A95A 60%, #8A6420); box-shadow:0 0 4px rgba(214,169,90,.8);}
.cv3-ft-n{margin-top:auto; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.cv3-ft-n b{color:var(--text);}
.cv3-fam-t3 .cv3-ft-n b{color:var(--cv3-oro-ink);}

/* ---------- lámina de una familia ---------- */
.cv3-fp-bar{position:sticky; top:var(--sat); z-index:6; display:flex; align-items:center; gap:8px; margin:0 -18px; padding:8px 12px; background:color-mix(in srgb, var(--bg2) 94%, transparent);}
.cv3-fp-atras{display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; border:0; background:none; color:var(--teal); font:inherit; font-weight:700; font-size:var(--fs-2); padding:6px 4px; cursor:pointer; min-height:40px;}
.cv3-fp-atras svg{width:20px; height:20px;}
.cv3-fp-bar-t{min-width:0; font-family:var(--display); font-weight:600; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cv3-fh{display:block; margin-top:4px; border-radius:var(--r-xl); overflow:hidden;}
.cv3-fh-img{position:relative; display:block; height:160px; overflow:hidden;}
.cv3-fh-img::after{content:''; position:absolute; inset:auto 0 0 0; height:55%; z-index:2; background:linear-gradient(to top, var(--fe-bg), transparent);}
.cv3-fmos{position:absolute; inset:0; display:flex; gap:2px; background:var(--fe-bg);}
.cv3-fmos-c{position:relative; display:grid; place-items:center; flex:1 1 0; overflow:hidden; background:var(--panel2); color:var(--muted);}
.cv3-fmos-c .ref{position:absolute; inset:0; width:100% !important; height:100% !important; border:0; border-radius:0; margin:0; box-shadow:none;}
.cv3-fmos-c .ref img{width:100%; height:100%; object-fit:cover;}
.cv3-fmos-c .ref-placeholder-inicial, .cv3-fmos-c .ref::after{display:none;}
.cv3-fmos-c.vista .ref{filter:saturate(.55);}
.cv3-fmos-c.vacia svg{width:58%; height:auto; opacity:.42;}
.cv3-fam-t3 .cv3-fmos-c .ref{filter:saturate(1.08) sepia(.14);}
.cv3-fh-body{position:relative; z-index:3; display:block; padding:0 16px 16px; margin-top:-30px;}
.cv3-emb.fh-emb{position:absolute; right:14px; top:-24px;}
.cv3-fh-k{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--fe-ink);}
.cv3-fh.cv3-fam-t0 .cv3-fh-k{color:var(--muted);}
.cv3-fh-t{margin:3px 0 0; font-family:var(--display); font-weight:700; font-size:var(--fs-7); line-height:1.05; letter-spacing:-.02em; color:var(--fe-ink); text-wrap:balance;}
.cv3-fh.cv3-fam-t0 .cv3-fh-t{color:var(--text);}
.cv3-fh-l{display:block; margin-top:4px; font-family:var(--display); font-size:var(--fs-2); color:var(--muted);}
.cv3-fh-ord{display:block; margin-top:6px; font-size:var(--fs-1); color:var(--muted);}
.cv3-fh-habs{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.cv3-fh-hab{font-size:var(--fs-1); background:color-mix(in srgb, var(--panel2) 85%, transparent); border-radius:var(--r-full); padding:4px 9px; color:var(--text);}
.cv3-fh-stats{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:12px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.cv3-fh-stats b{color:var(--text);}
.cv3-fh.cv3-fam-t3 .cv3-fh-stats b{color:var(--cv3-oro-ink);}
.cv3-fh-stats .de{margin-left:auto;}
.cv3-fp-sec{margin:20px 0 0;}
.cv3-fp-h{margin:0 0 6px; font-family:var(--mono); font-size:var(--fs-0); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.cv3-fp-nota{margin:0 0 6px; font-size:var(--fs-1); color:var(--muted);}
.cv3-fp-sec .pokedex-grid.cv3{margin-top:4px;}
.cv3-pasos{list-style:none; margin:0; padding:0;}
.cv3-paso{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0;}
.cv3-paso + .cv3-paso::before{content:''; position:absolute; left:21px; top:-9px; height:18px; width:2px; border-radius:2px; background:var(--line);}
.cv3-paso.ok + .cv3-paso::before{background:var(--cv3-oro);}
.cv3-paso-emb{display:grid; place-items:center; width:44px; height:44px;}
.cv3-emb-lock{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1.5px dashed var(--line); color:var(--muted);}
.cv3-emb-lock svg{width:16px; height:16px;}
.cv3-paso-tx{display:block; min-width:0;}
.cv3-paso-tx b{display:block; font-family:var(--display); font-size:var(--fs-3); color:var(--text);}
.cv3-paso-tx > span{display:block; margin-top:1px; font-size:var(--fs-1); line-height:1.35; color:var(--muted);}
.cv3-paso-tx .cv3-paso-bar{display:block; height:4px; margin-top:6px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.cv3-paso-bar i{display:block; height:100%; border-radius:var(--r-full); background:var(--gold);}
.cv3-paso-t1 .cv3-paso-bar i{background:var(--teal);}
.cv3-paso-t3 .cv3-paso-bar i{background:var(--cv3-dom);}
.cv3-paso.ok .cv3-paso-bar i{background:var(--cv3-oro-grad);}
.cv3-paso-tx small{display:block; margin-top:3px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.cv3-paso.lock .cv3-paso-tx b{color:var(--muted);}
.cv3-xp-ok{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--cv3-oro-ink); white-space:nowrap;}
.cv3-xp-ok svg{width:14px; height:14px;}
.cv3-xp-lock{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.cv3-xp-lock svg{width:13px; height:13px;}

/* ---------- celebración al reclamar ---------- */
.cv3-celebra{position:fixed; inset:0; z-index:var(--z-visor); display:grid; place-items:center; opacity:0; transition:opacity .25s; cursor:pointer;}
.cv3-celebra.on{opacity:1;}
.cv3-cel-fondo{position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(24,30,28,.72), rgba(5,8,7,.94));}
.cv3-cel-t3 .cv3-cel-fondo{background:radial-gradient(circle at 50% 38%, rgba(110,76,14,.72), rgba(12,9,3,.95));}
.cv3-cel-box{position:relative; width:min(320px, calc(100% - 40px)); text-align:center; color:#fff; transform:scale(.9) translateY(12px); transition:transform .4s var(--ease-pop); cursor:default;}
.cv3-celebra.on .cv3-cel-box{transform:none;}
.cv3-cel-centro{position:relative; width:190px; height:190px; margin:0 auto 4px; display:grid; place-items:center;}
.cv3-cel-rayos{position:absolute; inset:-34px; border-radius:50%; background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0deg 8deg, transparent 8deg 22deg); -webkit-mask:radial-gradient(circle, #000 22%, transparent 70%); mask:radial-gradient(circle, #000 22%, transparent 70%); animation:cv3Giro 16s linear infinite;}
.cv3-cel-t2 .cv3-cel-rayos{background:repeating-conic-gradient(from 0deg, rgba(225,235,245,.3) 0deg 7deg, transparent 7deg 19deg);}
.cv3-cel-t3 .cv3-cel-rayos{inset:-60px; background:repeating-conic-gradient(from 0deg, rgba(255,214,120,.5) 0deg 7deg, transparent 7deg 17deg);}
@keyframes cv3Giro{to{transform:rotate(360deg);}}
.cv3-cel-chispas{position:absolute; inset:0;}
.cv3-cel-chispas i{position:absolute; left:50%; top:50%; width:calc(var(--z) * 2px + 3px); height:calc(var(--z) * 2px + 3px); margin:-3px; border-radius:50%; background:#A8E0B2; opacity:0;}
.cv3-cel-t2 .cv3-cel-chispas i{background:#EEF3F7;}
.cv3-cel-t3 .cv3-cel-chispas i{background:#FFE7A6;}
.cv3-celebra.on .cv3-cel-chispas i{animation:cv3Chispa 1.15s cubic-bezier(.2,.8,.3,1) forwards; animation-delay:calc(220ms + var(--t));}
@keyframes cv3Chispa{0%{opacity:1; transform:rotate(var(--a)) translateY(0) scale(1);} 100%{opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.35);}}
.cv3-celebra .cv3-emb.xl{animation:cv3EmbEntra .65s cubic-bezier(.2,1.5,.4,1) both; animation-delay:.08s;}
@keyframes cv3EmbEntra{0%{transform:scale(.2) rotate(-25deg); opacity:0;} 100%{transform:none; opacity:1;}}
.cv3-celebra .cv3-emb-t1{color:#86C893;} .cv3-celebra .cv3-emb-t2{color:#E3EAF0;} .cv3-celebra .cv3-emb-t3{color:#F1D184;}
.cv3-cel-fam{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; color:rgba(255,255,255,.75);}
.cv3-cel-fam em{font-family:var(--display);}
.cv3-cel-t{margin:6px 0 4px; font-family:var(--display); font-weight:700; font-size:28px; line-height:1.1; letter-spacing:-.01em; color:#fff;}
.cv3-cel-t3 .cv3-cel-t{background:linear-gradient(180deg,#FFF2C2,#E2BD6E 60%,#B8892F); -webkit-background-clip:text; background-clip:text; color:transparent;}
.cv3-cel-p{margin:0 auto; max-width:30ch; font-size:var(--fs-2); line-height:1.4; color:rgba(255,255,255,.84);}
.cv3-cel-xp{display:inline-flex; align-items:baseline; gap:3px; margin-top:14px; padding:6px 16px; border-radius:var(--r-full); background:var(--cv3-oro-boton); color:var(--cv3-on-oro); font-family:var(--mono); font-weight:700; font-size:var(--fs-3); box-shadow:0 6px 20px -6px rgba(226,176,79,.8);}
.cv3-cel-xp b{font-size:22px; font-variant-numeric:tabular-nums; min-width:2.2ch; text-align:right;}
.cv3-cel-ok{display:block; margin:16px auto 0; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; border-radius:var(--r-full); padding:11px 26px; font:inherit; font-weight:700; font-size:var(--fs-3); cursor:pointer;}

/* ---------- Taxonomía: tabla de órdenes ---------- */
.cv3-tt{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.cv3-tt-ord{display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; align-items:start;}
.cv3-tt-lab{position:sticky; top:calc(var(--sat) + 8px); z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; padding:10px 10px 9px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-1); color:var(--text);}
.cv3-tt-num{font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--muted);}
.cv3-tt-sil{display:grid; width:46px; height:32px; margin:3px 0 4px; color:var(--text);}
.cv3-tt-sil svg{width:100%; height:100%;}
.cv3-tt-t{font-family:var(--display); font-weight:700; font-size:var(--fs-2); line-height:1.15;}
.cv3-tt-l{max-width:100%; font-family:var(--display); font-style:italic; font-size:var(--fs-0); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cv3-tt-lab .cv3-fbar{width:100%; margin-top:7px;}
.cv3-tt-c{margin-top:3px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.cv3-tt-c b{color:var(--text);}
.cv3-tt-fams{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
@media (min-width:600px){
  .cv3-tt-ord{grid-template-columns:150px minmax(0,1fr);}
  .cv3-tt-fams{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
}

@media (prefers-reduced-motion:reduce){
  .cv3-fpend, .cv3-fclaim.grande, .cv3-fres-pend svg, .cv3-cel-rayos, .cv3-tmp-live::after, .cv3-head .cv2-atiro.on .pt::after{animation:none;}
  .cv3-celebra.on .cv3-cel-chispas i{animation:none;}
  .cv3-revela{animation:none;}
}
html[data-motion="reducido"] .cv3-fpend, html[data-motion="reducido"] .cv3-fclaim.grande, html[data-motion="reducido"] .cv3-fres-pend svg, html[data-motion="reducido"] .cv3-cel-rayos, html[data-motion="reducido"] .cv3-tmp-live::after, html[data-motion="reducido"] .cv3-revela{animation:none;}

/* ==================== PENDIENTES Y DESCONOCIDAS (07/10/2026) ====================
   pnd- = Pendientes (aves apuntadas sin foto); dsc- = Desconocidas (fotos de
   un ave que aún no sabes cuál es). Sale del prototipo aprobado; todo con
   tokens para que aguante los 12 fondos y los 8 acentos. Las pantallas usan
   las de registro (.reg-screen) y el mapa ampliado, las del selector de
   ubicación (.locpicker-*): aquí solo lo que es nuevo. */

/* Inicio: la «?» en la miniatura de la fila de Pendientes. */
.f-celda .ths .cara.dsc-cara{font-family:var(--display); font-weight:700; font-size:var(--fs-2); color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,var(--panel2));}

/* La «?» de lo que aún no se sabe (misma caja que .ref). */
.ref.dsc-ref{background:color-mix(in srgb,var(--gold) 9%,var(--panel2)); border:1.5px dashed color-mix(in srgb,var(--gold) 60%,var(--line)); color:var(--gold); font-family:var(--display); font-weight:700; line-height:1;}
.dsc-chip{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-full); white-space:nowrap;}

/* ---- Pantalla de Pendientes ---- */
.pnd-intro{margin:0 2px 14px; font-size:var(--fs-2); line-height:var(--lh); color:var(--muted);}
.pnd-dia{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:18px 4px 8px;}
.pnd-intro + .pnd-dia{margin-top:2px;}
.pnd-lista{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;}
.pnd-fila{display:flex; align-items:center; gap:12px; width:100%; padding:10px 10px 10px 12px; cursor:pointer; color:var(--text); touch-action:manipulation; content-visibility:auto; contain-intrinsic-block-size:68px;}
.pnd-fila + .pnd-fila{border-top:1px solid var(--line);}
.pnd-fila:active{background:var(--panel2);}
.pnd-fila:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:-2px;}
.pnd-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;}
.pnd-nom{display:flex; align-items:center; gap:6px; min-width:0;}
.pnd-nom b{font-family:var(--display); font-weight:700; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-nom .reg-sp-chip{flex:0 0 auto;}
.pnd-meta{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-cam{flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; padding:0; background:color-mix(in srgb,var(--teal) 12%,var(--panel)); color:var(--teal-deep); border:1px solid color-mix(in srgb,var(--teal) 30%,transparent); cursor:pointer; touch-action:manipulation; transition:transform var(--dur-0) var(--ease);}
html:not([data-bg^="claro"]) .pnd-cam{color:var(--teal);}
.pnd-cam svg{width:20px; height:20px;}
.pnd-cam:active{transform:scale(.94);}

/* ---- Paso a la anterior / siguiente (cabecera) ---- */
.reg-screen-head .pnd-paso{margin-left:auto;}
.pnd-paso{display:flex; align-items:center; flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:var(--r-full); padding:2px;}
.pnd-paso button{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:none; color:var(--text); cursor:pointer;}
.pnd-paso button:disabled{opacity:.28; cursor:default;}
.pnd-paso button svg{width:16px; height:16px;}
.pnd-paso span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); min-width:30px; text-align:center; font-variant-numeric:tabular-nums;}

/* ---- Ficha de una pendiente ---- */
.pnd-hero{position:relative; margin:0 0 10px; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/10; max-height:340px; width:100%; background:var(--panel2); border:1px solid var(--line);}
.pnd-hero > .ref{width:100% !important; height:100% !important; border:0; border-radius:0; background:var(--panel2);}
.pnd-hero > .ref .ref-placeholder-inicial, .pnd-hero > .ref::after{display:none;}
/* El crédito solo cuando la foto de referencia ya está: sobre la silueta
   (sin red o mientras carga) no tendría sentido. */
.pnd-hero:has(> .ref:not([data-load-state="ready"])) > figcaption{display:none;}
.pnd-hero > figcaption{position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px); font-family:var(--mono); font-size:var(--fs-0); color:var(--text); background:color-mix(in srgb,var(--panel) 85%,transparent); padding:4px 9px; border-radius:var(--r-full); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-hero.dsc{aspect-ratio:auto; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 18px; text-align:center; border:1.5px dashed color-mix(in srgb,var(--gold) 60%,var(--line)); background:color-mix(in srgb,var(--gold) 7%,var(--panel));}
.pnd-hero.dsc > figcaption{position:static; max-width:30ch; white-space:normal; background:none; color:var(--muted); font-family:inherit; font-size:var(--fs-2); line-height:var(--lh); padding:0;}
.dsc-q-grande{font-family:var(--display); font-weight:700; font-size:calc(var(--fs-7) * 1.9); line-height:1; color:var(--gold);}
.pnd-sp{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 2px 12px;}
.pnd-sp .sci{font-family:var(--display); font-style:italic; color:var(--muted); font-size:var(--fs-3); margin:0 auto 0 0;}
.pnd-aviso{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); background:color-mix(in srgb,var(--gold) 8%,var(--panel)); margin:0 0 12px; font-size:var(--fs-2); line-height:1.4;}
.pnd-aviso svg{flex:0 0 auto; width:18px; height:18px; color:var(--gold); margin-top:1px;}
.pnd-aviso b{display:block; font-family:var(--display); font-size:var(--fs-3);}
.pnd-aviso span{color:var(--muted);}
.pnd-aviso.ya{border-color:var(--line); background:var(--panel);}
.pnd-aviso.ya svg{color:var(--teal);}
.pnd-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 14px 12px; margin:0 0 12px;}
.pnd-card-cab{display:flex; justify-content:space-between; align-items:center; min-height:32px;}
.pnd-card-cab h3{margin:0; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500;}
.pnd-link{display:inline-flex; align-items:center; gap:6px; padding:6px 0; border:0; background:none; color:var(--teal-deep); font:inherit; font-weight:600; font-size:var(--fs-2); cursor:pointer;}
html:not([data-bg^="claro"]) .pnd-link{color:var(--teal);}
.pnd-link svg{width:16px; height:16px;}
.pnd-link-en{padding:0; margin-left:4px;}
.pnd-datos{margin:0;}
.pnd-dato{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:9px 0; align-items:start;}
.pnd-dato + .pnd-dato{border-top:1px solid var(--line);}
.pnd-dato > svg{width:18px; height:18px; color:var(--muted); margin-top:2px;}
.pnd-dato dt{font-size:var(--fs-1); color:var(--muted); line-height:1.3;}
.pnd-dato dd{margin:0; font-size:var(--fs-3); min-width:0; overflow-wrap:anywhere;}
.pnd-dato dd.pnd-sin{color:var(--muted); font-style:italic;}
.pnd-card .minimap.pnd-minimapa{height:170px; margin-top:4px; cursor:zoom-in;}
.pnd-mapa-pie{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px;}
.pnd-coord{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); font-variant-numeric:tabular-nums;}
.pnd-sin-mapa{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-2);}
.pnd-sin-mapa svg{flex:0 0 auto; width:18px; height:18px;}
.pnd-acciones{display:grid; grid-template-columns:1fr auto auto; gap:8px;}
.pnd-acciones.dos{grid-template-columns:1fr auto;}
.pnd-acciones > button{display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; white-space:nowrap;}
.pnd-acciones .tarot-btn-sec{width:auto; padding:11px 14px;}
.pnd-acciones .pnd-mas{width:50px; padding:0;}
.pnd-acciones svg{width:19px; height:19px; flex:0 0 auto;}

/* ---- Menú «⋯» y editar ---- */
.pnd-menu{display:grid; margin-top:12px; text-align:left;}
.pnd-menu button{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; text-align:left; padding:9px 6px; border:0; background:none; border-radius:var(--r-md); color:var(--text); font:inherit; cursor:pointer;}
.pnd-menu button:active{background:var(--panel2);}
.pnd-menu-ic{width:42px; height:42px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.pnd-menu-ic svg{width:19px; height:19px;}
.pnd-menu b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-3);}
.pnd-menu small{display:block; color:var(--muted); font-size:var(--fs-2); line-height:1.35;}
.pnd-menu hr{border:0; border-top:1px solid var(--line); margin:6px 0; width:100%;}
.pnd-menu .peligro b, .pnd-menu .peligro .pnd-menu-ic{color:var(--alert);}
.pnd-form{display:grid; gap:10px; margin-top:14px; text-align:left;}
.pnd-form-dos{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pnd-form .lbl{margin:0;}
.pnd-form textarea.inp{min-height:76px; resize:vertical;}

/* ---- Mapa a pantalla completa ---- */
.tarot-overlay.pnd-mapa-ov{padding:0; align-items:stretch; justify-content:stretch; background:var(--bg2); backdrop-filter:none; -webkit-backdrop-filter:none;}
.pnd-mapa-caja{flex:1 1 auto; width:100%; min-height:0; display:flex; flex-direction:column;}
.pnd-mapa-caja .locpicker-title{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-mapa-seg{display:flex; flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-full); padding:2px;}
.pnd-mapa-seg button{border:0; background:none; color:var(--muted); font:inherit; font-size:var(--fs-2); padding:6px 12px; border-radius:var(--r-full); cursor:pointer;}
.pnd-mapa-seg button[aria-pressed="true"]{background:var(--teal); color:var(--on-teal); font-weight:600;}
.pnd-mapa-pie{display:flex; align-items:center; gap:12px;}
.pnd-mapa-pie-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.pnd-mapa-pie-tx b{font-family:var(--display); font-size:var(--fs-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-mapa-pie-tx span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pnd-mapa-pie .tarot-btn-sec.pnd-mapa-ir{width:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:10px 12px; font-size:var(--fs-2);}

/* ---- Pantalla de Desconocidas ---- */
.dsc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.dsc-card{position:relative; display:block; width:100%; aspect-ratio:4/5; padding:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--panel2); cursor:pointer; text-align:left; content-visibility:auto; contain-intrinsic-block-size:220px;}
.dsc-card img{width:100%; height:100%; object-fit:cover; display:block;}
.dsc-card-cargando{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:calc(var(--fs-7) * 1.6); color:color-mix(in srgb,var(--gold) 60%,var(--muted));}
.dsc-card .dsc-chip{position:absolute; top:8px; left:8px; color:var(--text); background:color-mix(in srgb,var(--panel) 82%,transparent); border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);}
.dsc-pie{position:absolute; inset:auto 0 0 0; padding:28px 10px 10px; display:grid; gap:2px; color:var(--text); background:linear-gradient(to top, color-mix(in srgb,var(--panel) 92%,transparent), transparent);}
.dsc-pie b{font-family:var(--display); font-size:var(--fs-3); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dsc-pie span{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dsc-registro{margin-top:14px;}
.reg-det-pendiente.dsc-descartar{color:var(--alert);}

/* ---- «Desconocida» en «La subo luego», el pie de «¿Qué ave es?» y la IA ---- */
.dsc-opcion{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; margin:0 0 12px; border:1.5px dashed color-mix(in srgb,var(--gold) 60%,var(--line)); border-radius:var(--r-lg); background:color-mix(in srgb,var(--gold) 6%,var(--panel)); text-align:left; color:var(--text); font:inherit; cursor:pointer; touch-action:manipulation;}
.dsc-opcion b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-4);}
.dsc-opcion small{display:block; color:var(--muted); font-size:var(--fs-2); line-height:1.35;}
.dsc-guardar.idsel-guardar{border-color:color-mix(in srgb,var(--gold) 60%,var(--line)); background:color-mix(in srgb,var(--gold) 6%,transparent);}
.dsc-q{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:var(--fs-4); color:var(--gold); border:1.5px dashed color-mix(in srgb,var(--gold) 70%,transparent);}
.reg-alt-manual.dsc-alt .reg-alt-icon{border-style:dashed; border-color:color-mix(in srgb,var(--gold) 65%,var(--line)); color:var(--gold);}

/* ==== FILTROS DE LA COLECCIÓN (07/10/2026) · fcol ====
   Hoja con tres pestañas (diseño B del prototipo). La hoja ya hace de
   contenedor con scroll (.tarot-sheet), así que las pestañas y el pie quedan
   fijos con position:sticky y no con otro contenedor: el arrastre para cerrar
   (prepararHoja) mira el scroll de la propia hoja. Solo tokens. */
.fcol-hoja .tarot-title{margin-bottom:6px;}
.fcol-tabs-w{position:sticky; top:-26px; z-index:3; margin:0 -22px 14px; padding:8px 22px 10px; background:var(--panel2);}
.fcol-tabs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-full);}
.fcol-tab{display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 4px; border:0; background:transparent; border-radius:var(--r-full); color:var(--muted); font:inherit; font-size:var(--fs-1); font-weight:600; line-height:1.15; cursor:pointer; text-align:center;}
.fcol-tab[aria-selected="true"]{background:var(--panel2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line);}
.fcol-tab em{font-style:normal; display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-full); background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700;}
.fcol-grupo{margin:0 0 22px;}
.fcol-grupo .ajustes-sec-title{font-size:var(--fs-5); margin-bottom:10px;}
.fcol-chip i{font-style:normal; font-size:var(--fs-0); opacity:.65;}
.fcol-chip small{font-size:var(--fs-0); opacity:.7; font-weight:500;}
.fcol-chip.cero:not(.on){opacity:.4;}
.fcol-pt{width:9px; height:9px; border-radius:50%; background:var(--rc); flex:none;}
.fcol-em{font-size:var(--fs-3); line-height:1; flex:none;}
.fcol-nota{margin:10px 0 0; color:var(--muted); font-size:var(--fs-1);}
.fcol-buscar{width:100%; height:42px; margin:0 0 10px; padding:0 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-full); color:var(--text); font:inherit; font-size:var(--fs-2);}
.fcol-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.fcol-tile{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px 12px; background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-md); color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.fcol-tile b{font-family:var(--mono); font-size:var(--fs-6); font-weight:600; line-height:1.1;}
.fcol-tile span{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-1);}
.fcol-tile span svg{width:16px; height:16px; flex:none;}
.fcol-tile.on{background:color-mix(in srgb,var(--gold) 24%,var(--panel)); border-color:var(--gold);}
.fcol-tile.on span{color:var(--text);}
.fcol-tile.cero:not(.on){opacity:.45;}
.fcol-acciones{position:sticky; bottom:-28px; z-index:3; margin:18px -22px -28px; padding:12px 22px calc(14px + var(--sab)); background:var(--panel); border-top:1px solid var(--line);}
.fcol-acciones .toggle-chip:disabled{opacity:.45; cursor:default;}
/* La fila de filtros puestos bajo el buscador: compacta, en dorado como la hoja, y en
   varias líneas si hacen falta (el desplazamiento horizontal escondía lo que había puesto). */
.cv3-head .filtros-chips-row{flex-wrap:wrap; overflow:visible; margin-top:8px; padding-bottom:0; gap:6px;}
.filtros-chips-row .filtro-chip{padding:4px 4px 4px 11px; gap:2px; font-size:var(--fs-1); background:color-mix(in srgb,var(--gold) 24%,var(--panel)); border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); color:var(--text);}
.filtros-chips-row .filtro-chip button{display:inline-flex; width:22px; height:22px; padding:0; align-items:center; justify-content:center; border-radius:var(--r-full); font-size:var(--fs-3); color:var(--muted);}
.filtros-chips-row .filtro-chip-clear{padding:4px 11px; background:transparent; border-color:var(--line); color:var(--muted);}

/* ==== PANEL REGISTROS DE LA FICHA (07/10/2026) ====
   La pestaña que antes se llamaba «Fotos»: «Fotos» en cuadrícula y «Sin foto»
   en lista, sin las tres miradas ni párrafos de explicación. «Enviar una foto
   a la comunidad», una sola fila. Solo tokens. */
.sd-reg-bloque+.sd-reg-bloque{margin-top:22px;}
.sd-reg-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:2px 0 10px;}
.sd-reg-h h3{margin:0; font-family:var(--display); font-weight:700; font-size:var(--fs-4); color:var(--text);}
.sd-reg-h span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.sd-reg-filas{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.sd-reg-fila{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; padding:10px 12px; background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.sd-reg-fila+.sd-reg-fila{border-top:1px solid var(--line);}
.sd-reg-ic{width:34px; height:34px; border-radius:50%; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--muted);}
.sd-reg-ic svg{width:17px; height:17px;}
.sd-reg-tx{min-width:0;}
.sd-reg-tx b{display:block; font-size:var(--fs-2); font-weight:600;}
.sd-reg-tx small{display:block; margin-top:1px; font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-reg-chev{width:16px; height:16px; color:var(--muted); flex:none;}
.sd-reg-vacio{padding:16px; border:1.5px dashed var(--line); border-radius:var(--r-md); text-align:center; color:var(--muted); font-size:var(--fs-2);}
.sd-reg-vacio b{display:block; margin-bottom:2px; color:var(--text); font-size:var(--fs-3);}
.sd-tabpanel2[data-panel="fotos"] .sd-photo-grid{margin-bottom:0;}
.env-foto{padding:0; overflow:hidden; border-radius:var(--r-md); margin:22px 0 4px;}
.env-foto-fila{display:flex; align-items:center; gap:10px; width:100%; padding:12px; background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.env-foto-fila > svg:first-child{width:18px; height:18px; color:var(--teal); flex:none;}
.env-foto-fila span{flex:1; min-width:0;}
.env-foto-fila b{display:block; font-size:var(--fs-2); font-weight:600;}
.env-foto-fila small{display:block; font-size:var(--fs-1); color:var(--muted);}
.env-foto .env-foto-estado{margin:0 12px 12px;}

/* ==== FICHA DEL AVE A PANTALLA COMPLETA (07/10/2026, Jon) ====
   La ficha era una ventana flotante de 460 px sobre la colección. Ahora ocupa
   toda la pantalla (fondo opaco, sin esquinas ni sombra), con una X para
   cerrar y sin flechas: se pasa de ave arrastrando, con la ficha siguiendo al
   dedo (.sd-swipe-pista asoma el nombre de la siguiente). En pantallas anchas
   el contenido va en una columna de 760 px. */
#ov.overlay{padding:0; background:var(--bg1); backdrop-filter:none; -webkit-backdrop-filter:none; align-items:stretch;}
#ov > .sd-sheet, #ov .carta-stage, #ov .carta-stage .sheet.carta-en-stage{max-width:none; width:100%; height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none;}
/* padding:0 aquí y no en .sd-sheet: la regla general .sheet va después en el
   archivo y le volvía a poner 22 px arriba y 20 a los lados. */
#ov > .sd-sheet, #ov .carta-stage .sheet.carta-en-stage{padding:0;}
#ov > .sd-sheet{touch-action:pan-y; overscroll-behavior:contain; will-change:transform;}
#ov .sd-hero{border-radius:0; height:calc(220px + var(--sat));}
/* La cabecera pequeña aparece al bajar, pero mientras está oculta no debe
   dejar su hueco de 52 px bajo la cartela (se veía un espacio en blanco). */
#ov .sd-miniheader{margin-bottom:calc(-52px - var(--sat)); padding-top:var(--sat); height:calc(52px + var(--sat));}
@media (min-width:820px){
  #ov > .sd-sheet, #ov .carta-stage .sheet.carta-en-stage{padding-inline:calc((100% - 760px) / 2);}
  #ov .sd-hero{height:280px; border-radius:0 0 var(--r-xl) var(--r-xl);}
}
.sd-swipe-pista{position:fixed; top:50%; z-index:3; display:flex; flex-direction:column; gap:2px; max-width:42vw; padding:10px 14px; transform:translateY(-50%);
  background:var(--panel); border:1.5px solid var(--line); box-shadow:var(--sh-3); pointer-events:none; transition:border-color var(--dur-1), background var(--dur-1);}
.sd-swipe-pista.der{right:0; border-right:0; border-radius:var(--r-lg) 0 0 var(--r-lg); text-align:right;}
.sd-swipe-pista.izq{left:0; border-left:0; border-radius:0 var(--r-lg) var(--r-lg) 0;}
.sd-swipe-pista span{font-family:var(--mono); font-size:var(--fs-0); text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.sd-swipe-pista b{font-family:var(--display); font-size:var(--fs-3); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-swipe-pista.lista{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,var(--panel));}

/* ==== PANEL DE CONTROL DEL ADMIN (07/10/2026) · adm ====
   Pantalla completa (antes, una hoja con cinco botones apretados). Resumen
   arriba, pestañas fijas y, dentro, las listas de siempre con aspecto de
   tarjeta. En pantallas anchas, una columna de 860 px. Solo tokens. */
.adm-ov{padding:0 !important; align-items:stretch !important; justify-content:stretch !important; background:var(--bg1) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
.adm-pant{width:100%; height:100dvh; display:flex; flex-direction:column; background:var(--bg1); color:var(--text);}
.adm-cab{display:flex; align-items:center; gap:12px; padding:calc(10px + var(--sat)) 16px 10px; border-bottom:1px solid var(--line); background:var(--panel);}
.adm-cab-tx{flex:1; min-width:0;}
.adm-cab-tx p{margin:0; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.adm-cab-tx h2{margin:2px 0 0; font-family:var(--display); font-weight:700; font-size:var(--fs-6); line-height:1.15;}
.adm-cab-tx h2.adm-h-err{font-size:var(--fs-4); overflow-wrap:anywhere;}
.adm-icono{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; padding:0;}
.adm-icono svg{width:18px; height:18px;}
.adm-cuerpo{flex:1; min-height:0; overflow-y:auto; padding:14px 16px calc(28px + var(--sab)); overscroll-behavior:contain;}
@media (min-width:900px){ .adm-cuerpo, .adm-cab{padding-inline:calc((100% - 860px) / 2);} }
.adm-resumen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 14px;}
.adm-resumen-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:420px){ .adm-resumen-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
.adm-kpi{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; padding:11px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); color:var(--text); font:inherit; text-align:left;}
button.adm-kpi{cursor:pointer;}
.adm-kpi span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.adm-kpi b{font-family:var(--mono); font-size:var(--fs-6); font-weight:600; line-height:1.1;}
.adm-kpi b.adm-kpi-p{font-size:var(--fs-2); line-height:1.3; padding-top:4px;}
.adm-kpi small{font-size:var(--fs-0); color:var(--muted); line-height:1.3;}
.adm-kpi.alerta{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 14%,var(--panel));}
.adm-tabs{position:sticky; top:-14px; z-index:2; display:flex; overflow-x:auto; scrollbar-width:none; gap:4px; padding:4px; margin:0 -4px 14px; background:var(--panel2); border-radius:var(--r-full);}
.adm-tab{display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 4px; border:0; border-radius:var(--r-full); background:transparent; color:var(--muted); font:inherit; font-size:var(--fs-1); font-weight:600; cursor:pointer;}
.adm-tab.on{background:var(--panel); color:var(--text); box-shadow:var(--sh-1);}
.adm-n:empty{display:none;}
.adm-n{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-full); background:var(--gold); color:var(--on-gold); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; margin-left:6px;}
.adm-subs, .adm-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px;}
.adm-sub, .adm-chip{display:inline-flex; align-items:center; gap:2px; padding:7px 12px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--panel); color:var(--text); font:inherit; font-size:var(--fs-1); font-weight:600; cursor:pointer;}
.adm-sub.on, .adm-chip.on{background:var(--text); border-color:var(--text); color:var(--bg1);}
.adm-chip i{font-style:normal; font-family:var(--mono); opacity:.6; margin-left:4px;}
.adm-sep{width:1px; align-self:stretch; background:var(--line); margin:0 4px;}
.adm-cargando, .adm-vacio{margin:18px 0; text-align:center; color:var(--muted); font-size:var(--fs-2);}
.adm-aviso{margin:0 0 12px; padding:12px 14px; border:1px solid var(--gold); border-radius:var(--r-md); background:color-mix(in srgb,var(--gold) 12%,var(--panel)); font-size:var(--fs-2); line-height:1.45;}
.adm-aviso b{display:block; margin-bottom:2px;}
.adm-dia{margin:18px 2px 8px; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.adm-dia:first-letter{text-transform:uppercase;}
.adm-lista{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.adm-fila{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; padding:11px 12px; border:0; background:none; color:var(--text); font:inherit; text-align:left;}
button.adm-fila{cursor:pointer;}
.adm-fila+.adm-fila{border-top:1px solid var(--line);}
.adm-fila.on{background:color-mix(in srgb,var(--gold) 12%,var(--panel));}
.adm-ocurr .adm-fila{grid-template-columns:minmax(0,1fr) auto;}
.adm-fila-tx{min-width:0;}
.adm-fila-tx b{display:block; font-size:var(--fs-2); font-weight:600; overflow-wrap:anywhere;}
.adm-fila-tx small{display:block; margin-top:1px; font-size:var(--fs-1); color:var(--muted);}
.adm-fila-tx small.adm-nota{color:var(--text); font-style:italic;}
.adm-fila time{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.adm-estado{display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--r-full); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.03em; white-space:nowrap; border:1px solid var(--line); color:var(--muted);}
.adm-estado.ok{color:var(--ok-text,var(--teal)); border-color:color-mix(in srgb,var(--teal) 50%,var(--line)); background:color-mix(in srgb,var(--teal) 12%,transparent);}
.adm-estado.no{color:var(--err-text); border-color:color-mix(in srgb,var(--err-text) 45%,var(--line)); background:color-mix(in srgb,var(--err-text) 10%,transparent);}
.adm-estado.cambios{color:var(--text); border-color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent);}
.adm-err{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; padding:12px 40px 12px 12px; border:0; background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.adm-err+.adm-err{border-top:1px solid var(--line);}
.adm-err b{font-size:var(--fs-2); font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;}
.adm-err small{font-size:var(--fs-1); color:var(--muted);}
.adm-err.resuelto{opacity:.6;}
.adm-chev{position:absolute; right:12px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--muted);}
.adm-fila .adm-chev{position:static; translate:none;}
.adm-tipo{display:inline-flex; padding:2px 8px; border-radius:var(--r-full); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); color:var(--muted);}
.adm-t-cierre{color:var(--err-text); border-color:color-mix(in srgb,var(--err-text) 50%,var(--line)); background:color-mix(in srgb,var(--err-text) 10%,transparent);}
.adm-t-bloq{color:var(--text); border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,transparent);}
.adm-t-err{color:var(--text); border-color:color-mix(in srgb,var(--text) 35%,var(--line));}
.adm-acciones{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px;}
.adm-btn{display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; font-size:var(--fs-2); font-weight:600; cursor:pointer;}
.adm-btn svg{width:16px; height:16px;}
.adm-btn.pri{background:var(--text); border-color:var(--text); color:var(--bg1);}
.adm-btn.peligro{color:var(--err-text); border-color:color-mix(in srgb,var(--err-text) 45%,var(--line));}
.adm-btn:disabled{opacity:.5;}
.adm-tarjeta{padding:4px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);}
.adm-kv{display:grid; grid-template-columns:minmax(110px,40%) minmax(0,1fr); gap:10px; padding:8px 0; font-size:var(--fs-2);}
.adm-kv+.adm-kv{border-top:1px solid var(--line);}
.adm-kv span{color:var(--muted);}
.adm-kv b{font-weight:600; overflow-wrap:anywhere;}
.adm-pre{margin:0; padding:12px; max-height:340px; overflow:auto; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); font-family:var(--mono); font-size:var(--fs-0); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text);}
.adm-rastro{margin:0; padding:0; list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.adm-rastro li{display:grid; grid-template-columns:58px 64px minmax(0,1fr); gap:8px; align-items:baseline; padding:7px 12px; font-size:var(--fs-1);}
.adm-rastro li+li{border-top:1px solid var(--line);}
.adm-rastro time{font-family:var(--mono); color:var(--muted);}
.adm-rastro span{font-family:var(--mono); font-size:var(--fs-0); text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.adm-rastro p{margin:0; overflow-wrap:anywhere;}
.adm-rastro li.k-fallo, .adm-rastro li.k-consola{background:color-mix(in srgb,var(--err-text) 8%,transparent);}
.adm-rastro li.k-fallo span, .adm-rastro li.k-consola span{color:var(--err-text);}
.adm-rastro li.k-lento span, .adm-rastro li.k-red span{color:var(--text);}
/* Las listas de siempre (correcciones, puntos, fotos, usuarios) dentro del panel nuevo */
.adm-ov .poi-corr-card, .adm-ov .inf-foto{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); margin:0 0 10px; box-shadow:none;}
.adm-ov .poi-corr-card{padding:12px 14px;}
.adm-ov .muted{color:var(--muted); text-align:center; margin:18px 0;}

/* ==================== BUSCADOR DE ESPECIES (07/10/2026) ====================
   Prototipo aprobado «Buscador de especies» (diseño C y hoja abajo). Lo usan
   todos los buscadores donde se elige un ave (bspFilaHTML / bspCampoHTML en
   js/app.js): tarjeta con el cuadradito de la foto y la franja de rareza al pie
   (la misma de Mi colección), lo buscado en el color de acción y subrayado, y
   tu estado junto a la flecha. Solo tokens: vale en claro y en oscuro. */
.bsp-busca{position:relative; margin:4px 0 10px;}
.bsp-busca .bsp-lupa{position:absolute; left:15px; top:50%; width:19px; height:19px; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.bsp-busca .bsp-input{width:100%; height:52px; margin:0; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); color:var(--text);
  padding:0 48px 0 44px; font:500 var(--fs-3) system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; box-shadow:var(--sh-1); outline:none; -webkit-appearance:none; appearance:none;}
.bsp-busca .bsp-input::-webkit-search-cancel-button{display:none;}
.bsp-busca .bsp-input:focus{border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent);}
.bsp-busca .bsp-input::placeholder{color:var(--muted); opacity:.85;}
.bsp-busca .bsp-borrar{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:0; padding:0;
  background:var(--panel2); color:var(--text); display:none; place-items:center; cursor:pointer;}
.bsp-busca.con-texto .bsp-borrar{display:grid;}
.bsp-busca .bsp-borrar svg{width:14px; height:14px;}

.bsp-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.bsp-lista > li{margin:0; padding:0; list-style:none;}
.bsp-fila{display:flex; align-items:center; gap:12px; width:100%; min-width:0; text-align:left; margin:0; padding:8px 10px 8px 8px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); color:var(--text); box-shadow:var(--sh-1); font:inherit;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform var(--dur-0) var(--ease), border-color var(--dur-1) var(--ease);}
.bsp-fila:active{transform:scale(.985);}
@media (hover:hover){ .bsp-fila:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));} }
.bsp-fila:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.bsp-fila.on{border-color:var(--teal); box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 22%,transparent);}
.bsp-mini{position:relative; flex:none; width:54px; height:54px; border-radius:var(--r-md); overflow:hidden; background:var(--panel2);}
.bsp-mini .ref{width:54px !important; height:54px !important; border:0; border-radius:var(--r-md); box-shadow:none;}
.bsp-mini .ref.gold{box-shadow:none;}
/* La foto conserva su aspecto (21/10/2026, Jon: «salen aplastadas»): la regla
   general `.ref img` (object-fit:cover) no llegaba aquí -- la rompe una llave
   suelta justo encima de ella en este mismo archivo -- y la foto se estiraba a
   54x54 (object-fit:fill). Aquí se pide expresamente: se rellena el cuadrado
   recortando un poco (cover), nunca deformando. */
.bsp-mini .ref img{width:100%; height:100%; object-fit:cover; display:block;}
.bsp-mini .ref-placeholder-inicial{display:none;}
/* «Reintento pendiente» sin red: en una lista basta la silueta de su familia. */
.bsp-mini .ref[data-load-state]::after{content:none;}
.bsp-mini .bsp-rz{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--rc); pointer-events:none;}
.bsp-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;}
.bsp-comun{font:600 16px/1.2 var(--display); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bsp-cient{font:italic 500 var(--fs-2)/1.3 var(--display); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
mark.bsp-marca{background:none; color:var(--teal); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--teal) 40%,transparent);}
.bsp-cient mark.bsp-marca{font-weight:700;}
.bsp-der{flex:none; display:flex; align-items:center; gap:4px;}
.bsp-est{width:26px; height:26px; display:grid; place-items:center; flex:none;}
.bsp-est svg{width:24px; height:24px;}
/* La mitad blanca de la pokéball/masterball desaparecía sobre la tarjeta
   blanca: un filete la dibuja (en la colección va sobre la foto). */
.bsp-est-dom svg circle:first-child,.bsp-est-cap svg circle:first-child{stroke:color-mix(in srgb,var(--text) 28%,transparent); stroke-width:1.1;}
.bsp-est-nueva{color:var(--gold);}
.bsp-est-nueva svg{width:18px; height:18px;}
/* el ojo de «vista», en el color de las vistas, como en la colección v3 */
.bsp-est-vis svg path{stroke:var(--teal);}
.bsp-est-vis svg circle:last-child{fill:var(--teal);}
.bsp-chev{width:16px; height:16px; color:var(--muted); opacity:.7; flex:none;}
.bsp-fila > input[type=checkbox]{flex:none; width:20px; height:20px; margin:0 2px 0 4px; accent-color:var(--teal);}
.bsp-seccion{display:flex; align-items:center; gap:6px; margin:6px 2px 0; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.bsp-seccion svg{width:13px; height:13px; color:var(--gold); flex:none;}
.bsp-seccion-todas{margin-top:14px;}
.bsp-vacio{padding:22px 8px; text-align:center; color:var(--muted); font-size:var(--fs-2); line-height:1.5;}
.bsp-vacio b{display:block; font-family:var(--display); font-size:var(--fs-4); color:var(--text); margin-bottom:4px;}
@media (prefers-reduced-motion:reduce){ .bsp-fila{transition:none;} .bsp-fila:active{transform:none;} }
html[data-motion="reducido"] .bsp-fila:active{transform:none;}

/* Barrabás en una hoja propia abajo: la lista termina y empieza otra cosa. */
.reg-screen-foot.bsp-hoja{position:relative; border-top:0; background:var(--panel); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-arriba); padding:8px 16px calc(var(--sab) + 14px);}
.reg-screen-foot.bsp-hoja::before{content:''; display:block; width:38px; height:4px; border-radius:var(--r-full); background:var(--line); margin:0 auto 10px;}
.bsp-barrabas{display:flex; align-items:center; gap:14px; width:100%; text-align:left; margin:0; padding:2px 0; border:0; background:none; color:var(--text); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.bsp-barrabas-av{width:50px; height:50px; border-radius:14px; overflow:hidden; flex:none; background:color-mix(in srgb,var(--teal) 14%,var(--panel2)); border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));}
.bsp-barrabas-av img{width:100%; height:100%; object-fit:cover; object-position:50% 0; transform:scale(1.7); transform-origin:50% 8%;}
.bsp-barrabas-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.bsp-barrabas-tx b{font:600 var(--fs-4)/1.2 var(--display);}
.bsp-barrabas-tx small{font-size:var(--fs-2); font-weight:700; color:var(--teal); margin-top:2px;}
.bsp-barrabas-ir{flex:none; padding:9px 16px; border-radius:var(--r-full); background:var(--teal); color:var(--on-teal); font-weight:600; font-size:var(--fs-2);}
.bsp-barrabas:active .bsp-barrabas-ir{transform:scale(.97);}

/* =====================================================================
   CABECERA CON SOLO TU FOTO + MENÚ DEL PERFIL + LOGROS SECUNDARIA
   (07/10/2026, Jon, prototipo-album-en-barra.html)
   La cápsula mezclaba iconos de trazo con dos fotos a sangre: queda solo tu
   foto, al tamaño de un icono, con un filete fino. Encima, tres avisos:
   filete dorado = premios por cobrar (.has-reward, sustituye al halo de
   antes), número dorado arriba = solicitudes de Comunidad, punto abajo =
   sincronización que NO está al día. Lo demás va en el menú (#pmenuVelo).
   ===================================================================== */
/* 07/10/2026 (Jon, la misma tarde): con un solo botón, el fondo de la
   cápsula era un círculo blanco de más alrededor de la foto. Se quita y la
   foto ocupa su sitio, algo más grande (36 px). */
.tb-capsula{background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none;}
html.sin-blur .tb-capsula{background:none;}
.tb-capsula #btnPerfilTop:hover, .tb-capsula #btnPerfilTop:active{background:none;}
.tb-capsula #btnPerfilTop #topbarAv{width:36px; height:36px; box-shadow:0 0 0 1.5px var(--line); background:var(--panel);}
.tb-capsula #btnPerfilTop #topbarAv svg{width:20px; height:20px;}
/* El halo de antes (borde + sombra en el botón) quedaba lejos de una foto de
   26 px: el aviso es solo el color del filete. (Los marcos de la tienda, que
   ponían un box-shadow de 3px en el botón entero, se retiraron el
   21/10/2026.) */
.tb-capsula #btnPerfilTop, .tb-capsula #btnPerfilTop.has-reward{border-color:transparent; box-shadow:none; animation:none;}
.tb-capsula #btnPerfilTop.has-reward #topbarAv{box-shadow:0 0 0 1.5px var(--gold);}
.tb-capsula #btnPerfilTop .topbar-btn-badge{top:-2px; right:-2px;}
.tb-capsula #btnPerfilTop .sync-chip{width:12px; height:12px; right:0; bottom:0; border-width:2px;}

/* Menú: anclado arriba a la derecha, con velo. Va en --z-hoja-top: encima de
   la pestaña Álbum y de las hojas normales, por debajo de visor y diálogos. */
.pmenu-velo{position:fixed; inset:0; z-index:var(--z-hoja-top); display:flex; justify-content:flex-end; align-items:flex-start;
  padding:calc(var(--sat) + 60px) 10px 10px; background:var(--velo-menu); animation:pmenuVelo var(--dur-2) var(--ease);}
.pmenu-velo[hidden]{display:none;}
@media (min-width:780px){ .pmenu-velo{padding-right:calc(50% - 370px);} }
@keyframes pmenuVelo{from{opacity:0;}}
.pmenu{width:min(292px,100%); max-height:100%; overflow-y:auto; background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-4); padding:6px; animation:pmenuEntra var(--dur-2) var(--ease);}
@keyframes pmenuEntra{from{opacity:0; transform:translateY(-8px) scale(.98);}}
.pmenu-yo{display:flex; align-items:center; gap:12px; padding:12px 10px;}
.pmenu-foto{width:46px; height:46px; flex:0 0 auto; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--panel2); color:var(--muted); box-shadow:0 0 0 2px var(--gold);}
.pmenu-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.pmenu-foto{font-size:24px;}   /* el icono sin foto viene de #topbarAv con width:1em */
.pmenu-yo-txt{min-width:0; flex:1 1 auto;}
.pmenu-yo-txt b{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pmenu-yo-txt small{display:block; color:var(--muted); font-size:var(--fs-1);}
.pmenu-barra{display:block; height:6px; margin-top:6px; width:150px; max-width:100%; border-radius:var(--r-full); background:var(--panel2); overflow:hidden;}
.pmenu-barra i{display:block; height:100%; width:0; background:var(--teal); border-radius:inherit;}
.pmenu-barra.oro i{background:var(--gold);}
.pmenu-sep{height:1px; background:var(--line); margin:4px 8px;}
.pmenu-fila{display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; color:var(--text); font:inherit; font-size:var(--fs-3);
  padding:10px; border-radius:var(--r-md); cursor:pointer; text-align:left; white-space:nowrap; position:static; overflow:visible; touch-action:manipulation;}
.pmenu-fila[hidden]{display:none;}   /* «Sincronización» sin sesión: display:flex le ganaba al hidden (validación, 07/10/2026) */
.pmenu-fila:hover{background:var(--panel2);}
.pmenu-fila:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.pmenu-fila > svg{width:20px; height:20px; flex:0 0 auto;}
.pmenu-mini{width:22px; height:22px; border-radius:50%; overflow:hidden; flex:0 0 auto;}
.pmenu-mini img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
.pmenu-der{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-1);}
.pmenu-pill{display:inline-flex; align-items:center; background:var(--gold); color:var(--on-gold); font-weight:700; border-radius:var(--r-full); padding:1px 7px;}
.pmenu-info{cursor:default;}
.pmenu-info:hover{background:none;}
.pmenu-sync-punto{width:8px; height:8px; border-radius:50%; background:var(--teal);}
.pmenu-sync-punto.ok{display:none;}   /* «Al día» va sin punto, como sobre la foto */
.pmenu-sync-punto.pend{background:var(--gold);}
.pmenu-sync-punto.subiendo{background:var(--teal); opacity:.55;}
/* Logros destacado: el primero, con fondo dorado suave y su progreso debajo. */
.pmenu-logros{flex-wrap:wrap; row-gap:6px; background:color-mix(in srgb,var(--gold) 9%,transparent);}
.pmenu-logros:hover{background:color-mix(in srgb,var(--gold) 16%,transparent);}
.pmenu-logros > svg{color:var(--gold);}
.pmenu-logros .pmenu-barra{flex:1 0 calc(100% - 32px); width:auto; margin:0 0 0 32px; height:4px;}

/* Logros como pantalla secundaria: sin cabecera de la app (su barra
   «‹ Logros» la sustituye) y sin pestaña encendida en la barra. */
body.logros-sub .head{display:none;}
.logros-sub-top{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; margin:-12px -18px 6px;
  padding:calc(var(--sat) + 12px) 14px 12px; background:var(--bg1); border-bottom:1px solid var(--line);}
.logros-sub-top b{font-family:var(--display); font-weight:600; font-size:var(--fs-5);}
.logros-volver{width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text);
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation;}
.logros-volver svg{width:18px; height:18px;}
.logros-volver:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* =====================================================================
   LIGA NUEVA (07/10/2026, Jon: «algo más simple y llamativo; primero los
   juegos, después competir»). Sale de prototipo-liga.html. Solo tokens:
   pueblos-ranking y filtros-coleccion revisan desde su bloque hasta el
   final del fichero que no haya colores a pelo.
   ===================================================================== */
/* La temporada, en una franja */
.lg-franja{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:var(--r-full); background:var(--panel); border:1px solid var(--line);}
.lg-franja img{width:34px; height:34px; flex:0 0 auto; border-radius:50%; object-fit:cover;}
.lg-franja-txt{flex:1 1 auto; min-width:0; font-size:var(--fs-2); color:var(--muted);}
.lg-franja-txt b{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.lg-franja-dias{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.lg-franja-dias.urgente{color:var(--lg-ambar-txt); font-weight:700;}
/* «Juegos de hoy» */
.lg .lg-sec-cab h2{font-weight:700; font-size:var(--fs-6); line-height:1.1; white-space:nowrap;}
.lg .lg-sec-cab .lg-hoy-pts{font-size:var(--fs-1); letter-spacing:0; text-transform:none; color:var(--lg-verde-txt);}
.lg-jt{display:flex; flex-direction:column; gap:12px;}
.lg-jt .lg-juego{position:relative; overflow:hidden; display:block; width:100%; min-height:132px; padding:16px; border:0; border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--c1),var(--c2)); color:var(--sobre-foto); text-align:left; font:inherit; cursor:pointer;
  box-shadow:var(--sh-2); touch-action:manipulation; transition:transform var(--dur-1) var(--ease);}
.lg-jt .lg-juego + .lg-juego{border-top:0;}
.lg-jt .lg-juego:active{transform:scale(.98); background:linear-gradient(135deg,var(--c1),var(--c2));}
.lg-jt .lg-juego:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.lg-j-birdle{--c1:var(--j-birdle); --c2:var(--j-birdle-2);}
.lg-j-trivial{--c1:var(--j-trivial); --c2:var(--j-trivial-2);}
.lg-j-foto{--c1:var(--j-foto); --c2:var(--j-foto-2);}
.lg-jcuerpo{position:relative; z-index:1; display:block; max-width:64%;}
.lg-jtit{display:block; font-family:var(--display); font-weight:800; font-size:24px; line-height:1;}
.lg-jsub{display:block; margin-top:4px; font-size:var(--fs-2); line-height:1.35; opacity:.92;}
.lg-jest{display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:3px 9px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--sobre-foto) 20%, transparent); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; white-space:nowrap;}
.lg .lg-jest .lg-ico{width:12px; height:12px;}
.lg-jbarra{display:block; max-width:160px; height:5px; margin-top:8px; border-radius:var(--r-full); overflow:hidden; background:color-mix(in srgb, var(--sobre-foto) 25%, transparent);}
.lg-jbarra i{display:block; height:100%; border-radius:inherit; background:var(--sobre-foto);}
.lg-jbtn{position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 16px; border-radius:var(--r-full);
  background:var(--sobre-foto); color:var(--j-boton-tinta); font-family:var(--mono); font-size:var(--fs-2); font-weight:700; white-space:nowrap; box-shadow:var(--j-sombra);}
.lg .lg-jbtn .lg-ico{width:14px; height:14px;}
.lg-jt .lg-juego.hecho .lg-jbtn{background:color-mix(in srgb, var(--sobre-foto) 22%, transparent); color:var(--sobre-foto); box-shadow:none;}
.lg-jt .lg-juego.bloq{filter:saturate(.25);}
.lg-jt .lg-juego.bloq .lg-jbtn{background:color-mix(in srgb, var(--velo-pie) 45%, transparent); color:var(--sobre-foto); box-shadow:none;}
/* El dibujo de cada juego */
.lg-arte{position:absolute; right:14px; top:50%; pointer-events:none;}
.lg-arte-birdle{display:grid; grid-template-columns:repeat(5,18px); gap:3px; margin-top:-44px; transform:rotate(-8deg);}
.lg-arte-birdle i{width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-family:var(--mono); font-style:normal; font-weight:700; font-size:12px;
  color:var(--sobre-foto); background:color-mix(in srgb, var(--sobre-foto) 18%, transparent);}
.lg-arte-birdle i.v{background:var(--j-acierto);}
.lg-arte-birdle i.a{background:var(--j-casi); color:var(--j-casi-tinta);}
.lg-arte-trivial{width:92px; height:78px; margin-top:-40px; transform:rotate(8deg);}
.lg-bur{position:absolute; left:0; top:0; width:70px; height:56px; border-radius:18px 18px 18px 4px; background:color-mix(in srgb, var(--sobre-foto) 95%, transparent);
  color:var(--j-trivial-2); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:38px;}
.lg-bur2{position:absolute; left:46px; top:38px; width:44px; height:36px; border-radius:14px 14px 4px 14px; background:var(--j-casi); color:var(--j-casi-tinta);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:20px;}
.lg-arte-foto{margin-top:-46px;}
.lg-pol{display:block; width:78px; padding:5px 5px 14px; border-radius:4px; background:var(--sobre-foto); box-shadow:var(--sh-3); transform:rotate(7deg);}
.lg-pol img{display:block; width:100%; aspect-ratio:1; object-fit:cover;}
.lg-med{position:absolute; left:-14px; bottom:-6px; width:34px; height:34px; border-radius:50%; background:var(--j-casi); color:var(--j-casi-tinta);
  display:grid; place-items:center; font-weight:800; font-size:16px; box-shadow:var(--j-sombra);}
/* Premios: tarjeta con el podio */
.lg-premios-tit{margin:0; font-family:var(--display); font-weight:600; font-size:var(--fs-5);}
.lg-premios .lg-premios-top{margin-top:10px;}
/* Clasificación: lista, salto y tu fila siempre a la vista */
.lg .lg-tabs{grid-template-columns:repeat(2, minmax(0,1fr));}
.lg-tabla{overflow:visible;}
.lg-rk-sub{display:flex; justify-content:space-between; gap:10px; padding:10px 14px 6px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.lg-tabla > .lg-rk-sub + .lg-fila{border-top:0;}
.lg-tabla .lg-fila.yo{position:sticky; top:calc(var(--sat) + 8px); bottom:calc(77px + var(--sab)); /* 77 = alto de la barra de abajo */ z-index:2; background:color-mix(in srgb, var(--teal) 14%, var(--panel));}
.lg-tabla .lg-fila.yo .lg-quien b{font-weight:700;}
.lg-huecos{display:flex; align-items:center; gap:10px; padding:6px 14px; border-top:1px solid var(--lg-suave); color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); white-space:nowrap;}
.lg-huecos::before, .lg-huecos::after{content:''; flex:1 1 auto; border-top:2px dotted var(--line);}
.lg-tabla > .lg-vertodo{border-radius:0 0 18px 18px;}
.lg-sin-amigos{display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px; text-align:center; font-size:var(--fs-2); color:var(--muted);}
.lg-sin-amigos b{font-family:var(--display); font-weight:600; font-size:var(--fs-4); color:var(--text);}
.lg-sin-amigos .lg-btn{width:auto; min-height:40px; margin-top:10px; padding:0 18px; border-radius:var(--r-full);}
/* «Cómo se suman puntos»: cada juego, su color */
.lg .lg-regla .lg-r-birdle{background:var(--j-birdle); color:var(--sobre-foto);}
.lg .lg-regla .lg-r-trivial{background:var(--j-trivial); color:var(--sobre-foto);}
.lg .lg-regla .lg-r-foto{background:var(--j-foto); color:var(--sobre-foto);}
.lg .lg-regla .lg-r-empate{background:var(--panel2); color:var(--muted);}
/* Salón de campeones: un enlace pequeño al final */
.lg .lg-salon-btn{min-height:44px; padding:6px 2px; border-radius:0; background:none; color:var(--muted); box-shadow:none; gap:10px; font-size:var(--fs-2);}
.lg .lg-salon-btn > .lg-ico{width:20px; height:20px; color:var(--gold);}
.lg .lg-salon-btn .lg-salon-txt{display:block;}
.lg .lg-salon-btn .lg-salon-txt b{display:inline; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.lg .lg-salon-btn .lg-salon-txt span{display:inline; margin:0; font-size:var(--fs-2); color:var(--muted);}

/* ==== LIBRO DE PARECIDAS (lbp) — «¿En qué me fijo?» (14/10/2026) ====
   Capa por encima de la hoja de la IA (.tarot-overlay.top, --z-dialogo-top)
   y por debajo de los diálogos modales (--z-dialogo-modal): un mostrarConfirm
   o un aviso tienen que poder salir encima. Las láminas son dibujos sobre
   blanco, así que su fondo es blanco en los dos temas (--lbp-papel); el resto
   usa los tokens de la app. Sin backdrop-filter (§6.3, html.sin-blur). */
.lbp-ov{--lbp-papel:var(--sobre-foto); --lbp-a:var(--acc-sky); --lbp-b:var(--acc-amber);
  position:fixed; inset:0; z-index:calc(var(--z-dialogo-top) + 100); background:var(--bg2); color:var(--text);
  display:flex; flex-direction:column; padding-top:var(--sat); padding-bottom:var(--sab); font-family:var(--sans);
  animation:lbpEntra var(--dur-2) var(--ease);}
@keyframes lbpEntra{from{opacity:0; transform:translateY(16px)}}
.lbp-ov button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
.lbp-ov img{display:block; max-width:100%;}
.lbp-cab{display:flex; align-items:center; gap:8px; padding:10px 12px 8px; border-bottom:1px solid var(--line);}
.lbp-x,.lbp-ayuda{width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--panel); flex:0 0 auto;}
.lbp-ayuda{font-weight:800; font-size:var(--fs-4); border:1px solid var(--line) !important;}
.lbp-tt{flex:1; min-width:0;}
.lbp-tt small{display:block; font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:700;}
.lbp-tt b{display:block; font-family:var(--display); font-size:var(--fs-4); line-height:var(--lh-tight); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lbp-modo{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:8px 12px 0; padding:4px; border-radius:var(--r-md); background:var(--panel);}
.lbp-modo button{display:flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r-sm); padding:9px 6px; font-size:var(--fs-2); font-weight:700; color:var(--muted) !important;}
.lbp-modo button[aria-pressed="true"]{background:var(--teal); color:var(--on-teal) !important;}
.lbp-postura{display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;}
.lbp-postura::-webkit-scrollbar{display:none;}
.lbp-postura>span{font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; flex:0 0 auto;}
.lbp-postura button{white-space:nowrap; font-size:var(--fs-2); border:1px solid var(--line) !important; border-radius:var(--r-full); padding:6px 11px; color:var(--muted) !important; flex:0 0 auto;}
.lbp-postura button[aria-pressed="true"]{background:var(--panel2); border-color:var(--teal) !important; color:var(--text) !important; font-weight:700;}
.lbp-cuerpo{flex:1; overflow:auto; overscroll-behavior:contain; padding-bottom:20px;}

.lbp-coach{margin:12px; border-radius:var(--r-lg); padding:14px; background:var(--panel); border:1.5px solid color-mix(in srgb, var(--teal) 50%, transparent);}
.lbp-coach h3{font-family:var(--display); font-size:var(--fs-5); margin:0 0 8px;}
.lbp-coach ol{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.lbp-coach li{display:grid; grid-template-columns:26px 1fr; gap:8px; font-size:var(--fs-3); line-height:1.35; align-items:start;}
.lbp-coach li>b{width:26px; height:26px; border-radius:50%; background:var(--teal); color:var(--on-teal); display:grid; place-items:center; font-size:var(--fs-2);}
.lbp-coach>button{margin-top:12px; width:100%; border-radius:var(--r-md); padding:11px; background:var(--teal) !important; color:var(--on-teal) !important; font-weight:800;}

.lbp-foto{position:relative; display:block; width:calc(100% - 24px); margin:12px 12px 0; border-radius:var(--r-lg); overflow:hidden; background:var(--ink) !important; height:150px; padding:0;}
.lbp-foto img{width:100%; height:100%; object-fit:contain;}
.lbp-foto.pegada{position:sticky; top:0; z-index:2; width:100%; margin:0; border-radius:0; height:96px; box-shadow:var(--sh-3);}
.lbp-foto-et{position:absolute; left:8px; top:8px; background:var(--velo-pie); color:var(--sobre-foto); font-size:var(--fs-0); font-weight:800; letter-spacing:.06em; border-radius:var(--r-sm); padding:4px 8px;}
.lbp-foto-lupa{position:absolute; right:8px; bottom:8px; background:var(--velo-pie); color:var(--sobre-foto); font-size:var(--fs-1); font-weight:700; border-radius:var(--r-full); padding:6px 10px; display:flex; gap:5px; align-items:center;}

.lbp-lt{display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:5px; color:var(--sobre-foto); font-size:var(--fs-1); font-weight:900; margin-right:5px; vertical-align:1px; padding:0 3px;}
.lbp-lA{background:var(--lbp-a);} .lbp-lB{background:var(--lbp-b);}
.lbp-cA{color:var(--lbp-a);} .lbp-cB{color:var(--lbp-b);}
.lbp-duelo{display:grid; grid-template-columns:1fr auto 1fr; gap:6px; margin:12px 12px 0;}
.lbp-esp{background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; min-width:0;}
.lbp-esp.lbp-a{border-color:var(--lbp-a);} .lbp-esp.lbp-b{border-color:var(--lbp-b);}
.lbp-esp-im{background:var(--lbp-papel); height:62px; display:flex; align-items:center; justify-content:center;}
.lbp-esp-im img{max-height:100%; object-fit:contain;}
.lbp-esp-tx{padding:7px 9px 8px;}
.lbp-esp-tx b{display:block; font-size:var(--fs-2); line-height:1.2;}
.lbp-esp-tx small{display:block; font-size:var(--fs-1); color:var(--muted); margin-top:2px;}
.lbp-cambiar{margin-top:5px; font-size:var(--fs-1) !important; font-weight:800; color:var(--teal) !important; padding:0 !important; min-height:0 !important; text-align:left;}
.lbp-vs{align-self:center; font-family:var(--display); font-style:italic; color:var(--muted);}

.lbp-pasos{display:flex; gap:6px; overflow-x:auto; padding:12px 12px 2px; scrollbar-width:none;}
.lbp-pasos::-webkit-scrollbar{display:none;}
.lbp-pasos button{flex:0 0 auto; display:flex; align-items:center; gap:6px; border:1.5px solid var(--line) !important; background:var(--panel) !important; border-radius:var(--r-full); padding:4px 10px 4px 4px; font-size:var(--fs-2); font-weight:700; color:var(--muted) !important;}
.lbp-pasos button i{width:22px; height:22px; border-radius:50%; color:var(--sobre-foto); font-style:normal; font-size:var(--fs-1); font-weight:900; display:grid; place-items:center;}
.lbp-pasos button[aria-current="true"]{color:var(--text) !important; border-color:var(--text) !important;}
.lbp-pasos .lbp-fin i{background:var(--teal); color:var(--on-teal);}
.lbp-r{font-size:var(--fs-0); font-weight:900; border-radius:5px; padding:1px 4px; color:var(--sobre-foto);}
.lbp-rn{background:var(--muted);}

.lbp-paso{padding:12px;}
.lbp-ojo{font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0;}
.lbp-paso h2,.lbp-veredicto h2{font-family:var(--display); font-size:var(--fs-6); line-height:1.1; display:flex; align-items:center; gap:10px; margin:2px 0 0; text-wrap:balance;}
.lbp-paso h2 span{width:34px; height:34px; border-radius:50%; color:var(--sobre-foto); font-family:var(--sans); font-weight:900; font-size:var(--fs-4); display:grid; place-items:center; flex:0 0 auto;}
.lbp-pista{margin:8px 0 0; font-size:var(--fs-2); line-height:1.4; color:var(--muted);}
.lbp-pista b{color:var(--text);}
.lbp-sep{display:inline-flex; align-items:center; gap:6px; margin-top:10px; border-radius:var(--r-full); padding:5px 10px; font-size:var(--fs-2); font-weight:800;}
.lbp-sep.si{background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok);}
.lbp-sep.no{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn);}
.lbp-sep.nd{background:var(--panel); color:var(--muted);}
.lbp-dos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.lbp-col{min-width:0;}
.lbp-col h4{font-size:var(--fs-2); font-weight:800; display:flex; align-items:center; margin:0 0 5px; line-height:1.15;}
.lbp-det{position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--lbp-papel); border:1.5px solid var(--line); cursor:zoom-in;}
.lbp-det svg,.lbp-lam svg,.lbp-fila .zoomr svg{display:block; width:100%; height:auto;}
.lbp-ent{position:absolute; right:6px; bottom:6px; background:var(--velo-pie); color:var(--sobre-foto); font-size:var(--fs-0); font-weight:700; border-radius:var(--r-full); padding:3px 8px;}
.lbp-txt{margin-top:6px; border-radius:var(--r-sm); padding:9px 10px; background:var(--panel); border:1.5px solid var(--line); border-left-width:5px; font-size:var(--fs-3); font-weight:800; line-height:1.25;}
.lbp-txt.sd{font-weight:600; color:var(--muted);}
.lbp-preg{margin-top:14px;}
.lbp-preg h3{font-size:var(--fs-4); font-weight:800; margin:0 0 8px;}
.lbp-resp{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.lbp-resp button{border-radius:var(--r-md); padding:11px 8px; font-weight:800; font-size:var(--fs-3); border:2px solid var(--line) !important; background:var(--panel) !important; display:flex; align-items:center; justify-content:center; gap:4px; line-height:1.15;}
.lbp-resp button.ns{grid-column:1/-1; font-weight:700; color:var(--muted) !important; padding:9px;}
.lbp-resp button.ra[aria-pressed="true"]{border-color:var(--lbp-a) !important; background:color-mix(in srgb, var(--lbp-a) 18%, var(--panel)) !important;}
.lbp-resp button.rb[aria-pressed="true"]{border-color:var(--lbp-b) !important; background:color-mix(in srgb, var(--lbp-b) 18%, var(--panel)) !important;}
.lbp-resp button.ns[aria-pressed="true"]{border-color:var(--text) !important; color:var(--text) !important;}
.lbp-nav{display:flex; gap:8px; padding:6px 12px 8px;}
.lbp-nav button{flex:1; border-radius:var(--r-md); padding:13px; font-weight:800; border:1.5px solid var(--line) !important; background:var(--panel) !important;}
.lbp-nav button.pri,.lbp-acciones button.pri,.lbp-ficha .pie button.pri{background:var(--teal) !important; border-color:var(--teal) !important; color:var(--on-teal) !important;}
.lbp-nav button:disabled{opacity:.35;}

.lbp-veredicto{margin:12px; border-radius:var(--r-xl); padding:16px; background:var(--panel); border:1.5px solid var(--line);}
.lbp-marcador{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-top:14px;}
.lbp-marcador>div{display:flex; flex-direction:column; gap:3px; min-width:0;}
.lbp-marcador>div:last-child{text-align:right; align-items:flex-end;}
.lbp-marcador .num{font-size:var(--fs-7); font-weight:900; font-variant-numeric:tabular-nums; line-height:1;}
.lbp-marcador small{font-size:var(--fs-1); color:var(--muted); font-weight:600;}
.lbp-marcador .guion{font-size:var(--fs-6); color:var(--muted);}
.lbp-tabla{margin-top:14px; display:grid;}
.lbp-tabla>div{display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; font-size:var(--fs-2); padding:7px 0; border-top:1px solid var(--line);}
.lbp-tabla i{width:22px; height:22px; border-radius:50%; color:var(--sobre-foto); font-style:normal; font-weight:900; font-size:var(--fs-1); display:grid; place-items:center;}
.lbp-tabla em{font-style:normal; font-weight:800; font-size:var(--fs-1); border-radius:var(--r-sm); padding:3px 7px;}
.lbp-tabla em.A{background:color-mix(in srgb, var(--lbp-a) 20%, transparent); color:var(--lbp-a);}
.lbp-tabla em.B{background:color-mix(in srgb, var(--lbp-b) 20%, transparent); color:var(--lbp-b);}
.lbp-tabla em.n,.lbp-tabla em.p{color:var(--muted);}
.lbp-iavs{margin-top:12px; border-radius:var(--r-md); padding:10px 12px; font-size:var(--fs-2); line-height:1.45;}
.lbp-iavs.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);}
.lbp-iavs.mal{background:color-mix(in srgb, var(--warn) 16%, transparent);}
.lbp-iavs.nd{background:var(--panel2);}
.lbp-acciones{display:grid; gap:8px; margin-top:14px;}
.lbp-acciones button{border-radius:var(--r-md); padding:13px; font-weight:800; border:1.5px solid var(--line) !important; background:var(--panel2) !important; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.lbp-acciones button small{font-weight:600; font-size:var(--fs-1); opacity:.8;}

.lbp-indice{display:flex; gap:6px; overflow-x:auto; padding:10px 12px 4px; scrollbar-width:none;}
.lbp-indice::-webkit-scrollbar{display:none;}
.lbp-indice button{flex:0 0 auto; width:80px; border-radius:var(--r-md); border:1.5px solid var(--line) !important; background:var(--panel) !important; overflow:hidden; text-align:left; padding:0;}
.lbp-indice button[aria-current="true"]{border-color:var(--teal) !important;}
.lbp-indice img{width:100%; height:44px; object-fit:contain; background:var(--lbp-papel);}
.lbp-indice span{display:block; font-size:var(--fs-0); font-weight:700; padding:3px 5px 0; line-height:1.15; height:26px; overflow:hidden;}
.lbp-indice em{display:block; font-style:normal; font-size:var(--fs-0); font-weight:800; color:var(--teal); padding:0 5px 4px;}
.lbp-indice em.no{color:var(--muted); font-weight:600;}
.lbp-ref{margin:6px 14px 0; font-size:var(--fs-2); color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.lbp-ref select{font:inherit; font-weight:800; color:var(--text); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:4px 6px; background:var(--panel);}
.lbp-tira{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 14px 6px; scrollbar-width:none;}
.lbp-tira::-webkit-scrollbar{display:none;}
.lbp-ficha{scroll-snap-align:center; flex:0 0 calc(100% - 16px); background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column;}
.lbp-ficha.top{border-color:var(--teal);}
.lbp-ficha .cab{padding:12px 14px 8px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.lbp-ficha .cab h2{font-family:var(--display); font-size:var(--fs-5); line-height:1.1; margin:0;}
.lbp-ficha .cab p{font-size:var(--fs-1); color:var(--muted); margin:3px 0 0;}
.lbp-anillo{flex:0 0 auto; width:50px; height:50px; position:relative;}
.lbp-anillo svg{width:50px; height:50px; transform:rotate(-90deg);}
.lbp-anillo b{position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-2); font-weight:900; font-variant-numeric:tabular-nums;}
.lbp-lam{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--lbp-papel); position:relative; cursor:zoom-in;}
.lbp-reco{padding:10px 10px 4px;}
.lbp-reco h3{font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:0 0 4px; display:flex; justify-content:space-between; gap:6px;}
.lbp-reco h3 span{text-transform:none; letter-spacing:0; font-weight:600;}
.lbp-fila{width:100%; text-align:left; display:grid !important; grid-template-columns:24px 1fr; gap:9px; padding:9px 6px !important; border-radius:var(--r-md); border:1.5px solid transparent !important; align-items:start;}
.lbp-fila[aria-expanded="true"]{border-color:var(--line) !important; background:var(--panel2) !important;}
.lbp-fila>i{width:24px; height:24px; border-radius:50%; color:var(--sobre-foto); font-style:normal; font-weight:900; font-size:var(--fs-1); display:grid; place-items:center;}
.lbp-fila .nm{display:block; font-size:var(--fs-1); color:var(--muted); font-weight:700;}
.lbp-fila .vl{display:block; font-size:var(--fs-3); font-weight:800; line-height:1.25; margin-top:1px;}
.lbp-fila .tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;}
.lbp-tg{font-size:var(--fs-1); font-weight:800; border-radius:6px; padding:2px 6px;}
.lbp-tg.dif{background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok);}
.lbp-tg.igual{background:var(--panel2); color:var(--muted);}
.lbp-fila .zoomr{display:block; margin-top:8px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--lbp-papel);}
.lbp-ficha .pie{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px 14px; margin-top:auto;}
.lbp-ficha .pie button{border-radius:var(--r-md); padding:11px 8px; font-weight:800; font-size:var(--fs-2); border:1.5px solid var(--line) !important; background:var(--panel2) !important; line-height:1.15;}
.lbp-flechas{display:flex; justify-content:space-between; align-items:center; padding:4px 14px 6px; color:var(--muted); font-size:var(--fs-2);}
.lbp-flechas button{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line) !important; display:grid; place-items:center; background:var(--panel) !important;}
.lbp-flechas button:disabled{opacity:.3;}
.lbp-nolose{display:block; margin:6px auto 0; color:var(--muted) !important; font-size:var(--fs-2); text-decoration:underline; padding:8px !important;}
.lbp-mk{transition:opacity var(--dur-1);} .lbp-dim{opacity:.08;}

.lbp-velo{position:absolute; inset:0; background:var(--velo-menu); display:flex; align-items:flex-end; z-index:3;}
.lbp-hoja{width:100%; background:var(--bg1); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:14px 16px calc(24px + var(--sab)); max-height:82%; overflow:auto; box-shadow:var(--sh-arriba); animation:lbpSube var(--dur-2) var(--ease);}
@keyframes lbpSube{from{transform:translateY(40%)}}
.lbp-asa{width:40px; height:4px; border-radius:9px; background:var(--line); margin:0 auto 10px;}
.lbp-hoja h3{font-family:var(--display); font-size:var(--fs-5); margin:0 0 4px;}
.lbp-hoja p{font-size:var(--fs-2); color:var(--muted); line-height:1.45; margin:8px 0 0;}
.lbp-lista{display:grid; gap:6px; margin-top:10px;}
.lbp-lista button{display:grid !important; grid-template-columns:72px 1fr auto; gap:10px; align-items:center; text-align:left; border:1.5px solid var(--line) !important; background:var(--panel) !important; border-radius:var(--r-md); padding:6px 10px 6px 6px !important;}
.lbp-lista button[aria-pressed="true"]{border-color:var(--teal) !important;}
.lbp-lista img{width:72px; height:46px; object-fit:contain; background:var(--lbp-papel); border-radius:var(--r-sm);}
.lbp-lista b{font-size:var(--fs-2);}
.lbp-lista em{font-style:normal; font-size:var(--fs-1); font-weight:800; color:var(--teal);}
.lbp-leyenda{display:grid; gap:10px; margin-top:10px;}
.lbp-leyenda>div{display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; font-size:var(--fs-3); line-height:1.35;}
.lbp-leyenda .s{display:grid; place-items:center; height:30px; border-radius:var(--r-sm); font-weight:900; font-size:var(--fs-2);}
.lbp-leyenda .s.num{background:var(--lbp-marca); color:var(--sobre-foto); border-radius:50%; width:30px;}
.lbp-leyenda .s.dif{background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok);}
.lbp-leyenda .s.igual{background:var(--panel2); color:var(--muted);}
.lbp-leyenda .s.ia{background:var(--teal); color:var(--on-teal); font-size:var(--fs-1);}
.lbp-leyenda .s.pos{border:1.5px solid var(--line); font-size:var(--fs-0);}

.lbp-zoom,.lbp-vfoto{position:absolute; inset:0; z-index:4; background:var(--ink); display:flex; flex-direction:column;}
.lbp-zc{flex:1; overflow:auto; display:flex; align-items:center;}
.lbp-zc>div{width:100%;}
.lbp-zoom p,.lbp-vfoto p{color:var(--muted); text-align:center; font-size:var(--fs-2); padding:10px 12px 18px; margin:0;}
.lbp-zx{position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:50%; background:var(--velo-pie) !important; color:var(--sobre-foto) !important; display:grid; place-items:center; z-index:2;}
.lbp-varea{flex:1; overflow:hidden; position:relative;}
.lbp-varea img{width:100%; height:100%; max-width:none; object-fit:contain; transition:transform var(--dur-2); cursor:zoom-in;}

/* Aviso bajo el resultado de la IA */
.lbp-aviso{margin-top:12px; border-radius:var(--r-lg); padding:12px 14px; background:color-mix(in srgb, var(--gold) 12%, var(--panel)); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);}
.lbp-aviso-tit{margin:0; font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--gold);}
.lbp-aviso-txt{margin:4px 0 0; font-size:var(--fs-2); line-height:1.45; color:var(--text);}
.lbp-aviso-btn{margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-md); padding:11px; font-weight:800; font-size:var(--fs-3); background:var(--panel2); color:var(--text); border:1.5px solid var(--gold); cursor:pointer;}
@media (prefers-reduced-motion:reduce){.lbp-ov,.lbp-hoja{animation:none;} .lbp-varea img{transition:none;}}
/* ==== FIN LIBRO DE PARECIDAS ==== */
/* ==== INICIO v7 (21/10/2026) -- «tablero» ====
   Mismo contenido y mismos ids que v6; cambia la composición:
   - la fecha ya no sale dos veces: el calendario lleva «mié · oct» y el sello
     de arriba se queda solo con el sitio;
   - los Aleteos, cuadrados con esquinas redondeadas;
   - Pendientes / Desconocidas, barras a todo el ancho justo debajo de las
     acciones (solo existen cuando hay algo: la clase .show ya lo gestiona);
   - el Inicio se desplaza: debajo van los módulos de carga perezosa. */
#homeSelloFecha{display:none;}
.f6-sello:not(:has(.f6-sello-lugar:not([hidden]))){display:none;}
.f6-estado .home-pill-racha{width:68px;}
.f6-estado .home-cal-mes{font-size:9px; letter-spacing:.06em; white-space:nowrap;}
.home-historias-row .historia-ring{border-radius:20px;}
.home-historias-row .historia-avatar{border-radius:16px;}
.home-historias-row .historia-ring-add{border-radius:0;}
.home-historias-row .historia-avatar-add{border-radius:16px;}
body.home-active .main{overflow-y:auto; overflow-x:hidden; scrollbar-width:none; overscroll-behavior:contain;}
body.home-active .main::-webkit-scrollbar{display:none;}
body.home-active .home-grid.show{flex:0 0 auto; min-height:auto;}
body.home-active .home-grid.show > .f6-registro{flex:0 0 auto; height:clamp(300px,42vh,400px); max-height:none;}
.f6-hoy{display:flex; flex-direction:column; gap:10px;}
.f6-hoy #homeHoy.f-hoy{display:contents;}
.f6-hoy .f6-cab{order:0; margin-bottom:0;}
.f6-hoy:has(#homeLuz[style*="none"]):has(#homeContCerca[style*="none"]) .f6-cab{display:none;}
#homeHoy .f-celda.luz,#homeHoy .f-celda.cerca{order:1; border:1px solid var(--line); border-radius:16px; background:var(--panel); margin-top:0;}
#homeHoy .f-celda.pend{order:-1; min-height:68px; padding:10px 12px 10px 14px; border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line)); border-radius:18px; margin-top:0;
  background:color-mix(in srgb,var(--gold) 9%,var(--panel));}
#homeHoy .f-celda.pend.dsc-celda{border-color:color-mix(in srgb,var(--teal) 38%,var(--line)); background:color-mix(in srgb,var(--teal) 8%,var(--panel));}
#homeHoy .f-celda.pend .tx b{font-size:var(--fs-4);}
#homeHoy .f-celda.pend .ths{min-width:0;}
#homeHoy .f-celda.pend .ths .cara{width:36px; height:36px; border-radius:50%; margin-left:-12px; border:2px solid var(--panel);}
#homeHoy .f-celda.pend .ths .cara:first-child{margin-left:0;}
#homeHoy .f-celda.pend .f6-ir{width:32px; height:32px; padding:8px; border-radius:50%; background:var(--gold); color:var(--on-gold);}
#homeHoy .f-celda.pend.dsc-celda .f6-ir{background:var(--teal); color:var(--on-teal);}
/* ---- módulos de carga perezosa ---- */
.ini-modulos:empty{display:none;}
.ini-modulos{display:flex; flex-direction:column; gap:18px;}
.ini-mod[hidden]{display:none;}
.ini-sk{height:120px; border-radius:18px; background:linear-gradient(100deg,var(--panel2) 30%,var(--panel) 50%,var(--panel2) 70%); background-size:200% 100%; animation:iniSk 1.4s linear infinite;}
@keyframes iniSk{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.ini-sk{animation:none;}}

/* ---- Misión de la semana (Barrabás) ---- */
.bm-quedan{margin-left:auto; text-transform:none; letter-spacing:.04em;}
.ini-mod[data-ini-mod="mision"] .f6-cab{margin-bottom:8px;}
.bm-card{display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent);}
.bm-cab{display:flex; align-items:flex-end; gap:10px;}
.bm-bar{width:46px; height:68px; object-fit:contain; flex:0 0 auto; margin:-4px 0 -4px;}
.bm-frase{margin:0; flex:1 1 auto; min-width:0; position:relative; padding:10px 12px; border-radius:16px 16px 16px 4px; background:color-mix(in srgb,var(--gold) 12%,var(--panel2)); font-size:var(--fs-2); line-height:1.35; color:var(--text);}
.bm-frase b{display:block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:2px;}
.bm-ave{display:flex; align-items:center; gap:12px; width:100%; padding:10px; text-align:left; color:inherit; cursor:pointer; background:var(--panel2); border:1px solid var(--line); border-radius:18px;}
.bm-ave:active{transform:scale(.985);}
.bm-foto{flex:0 0 auto; width:72px; height:72px; border-radius:16px; overflow:hidden; background:var(--panel); display:flex; align-items:center; justify-content:center;}
.bm-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.bm-info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.bm-info b{font-family:var(--display); font-weight:700; font-size:var(--fs-4); line-height:1.1; color:var(--text);}
.bm-info i{font-size:var(--fs-1); color:var(--muted);}
.bm-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center;}
.bm-dif,.bm-xp{font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted);}
.bm-dif-facil{color:var(--teal-on-panel); border-color:color-mix(in srgb,var(--teal) 50%,var(--line));}
.bm-dif-media{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 50%,var(--line));}
.bm-dif-reto{color:var(--text); border-color:var(--text);}
.bm-xp{background:var(--gold); color:var(--on-gold); border-color:transparent;}
.bm-consejo{margin:0; display:flex; gap:9px; align-items:flex-start; font-size:var(--fs-1); line-height:1.4; color:var(--muted);}
.bm-consejo svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--gold);}
.bm-hecha{border-color:color-mix(in srgb,var(--teal) 50%,var(--line)); background:color-mix(in srgb,var(--teal) 7%,var(--panel));}
.bm-hecha .bm-xp{background:var(--teal); color:var(--on-teal);}
/* ==== INICIO v7c: tipografía y títulos como la opción A del prototipo ====
   Sans en negrita para nombres y cifras, mono para etiquetas, secciones
   numeradas (el número lo pone un contador CSS, así que si una sección se
   esconde la siguiente sube sola: 01, 02, 03…). */
:root{--f7-sans:system-ui,-apple-system,'Segoe UI',sans-serif;}
.home-grid{counter-reset:f7sec;}
.f6-hola{display:none;}
.f6-estado{gap:10px; padding-top:4px;}
.f6-estado .home-pill-nivel{padding:12px 14px; gap:12px; border-radius:18px;}
.f6-estado .home-pill-rango{width:44px; height:44px; border-radius:50%; background:var(--panel2); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.f6-estado .home-pill-top{justify-content:space-between; align-items:baseline;}
.f6-estado #homePillNivelLabel{font:800 16px var(--f7-sans); color:var(--text);}
.f6-estado .home-pill-rango-n{font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold);}
.f6-estado .home-pill-rango-n:not(:empty)::before{content:none;}
.f6-estado .home-pill-nivel .home-pill-bar{height:8px; margin:8px 0 5px;}
.f6-estado .home-pill-xp{font:500 11px var(--mono); margin-top:0;}
.f6-estado .home-pill-racha{width:66px; padding:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; border-radius:14px;}
.f6-estado .home-pill-racha::before{content:none;}
.f6-estado .home-cal-mes{order:-1; margin:0; padding:5px 0 4px; text-align:center; background:var(--teal); color:var(--on-teal); font:700 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;}
.f6-estado .home-cal-dia{flex:1; display:flex; align-items:center; justify-content:center; margin:0; font:800 28px var(--f7-sans); letter-spacing:-.02em;}
.f6-estado #homePillRachaLabel{position:static; order:3; min-width:0; height:auto; padding:0 0 5px; border-radius:0; background:none; color:var(--gold); font:600 10px var(--mono); justify-content:center; gap:3px;}
.f6-estado #homePillRachaLabel svg{color:var(--gold);}
.home-historias-row .historia-label{font:500 10.5px var(--f7-sans); color:var(--muted);}
.f6-cab.f7-sec{display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:22px 2px 10px;}
.f7-sec .f7-n{font:700 11px var(--mono); color:var(--teal);}
.f7-sec .f7-n::before{counter-increment:f7sec; content:counter(f7sec,decimal-leading-zero);}
.f7-sec .f6-kicker{font:700 11px var(--mono); letter-spacing:.18em; color:var(--muted); text-transform:uppercase;}
.f7-sec .f7-l{flex:1; height:1px; background:var(--line);}
.f6-cab.f7-sec .bm-quedan{margin-left:0; font:500 11px var(--mono); letter-spacing:0; text-transform:none;}
#homeRegistrarRow .f-btn .f6-bt b{font:800 24px/1 var(--f7-sans); letter-spacing:-.02em;}
#homeRegistrarRow .f-btn .f6-bt > span{font:500 12px var(--f7-sans); letter-spacing:0; margin-top:4px; opacity:.9;}
#homeRegistrarRow .f-btn .f6-bt > span.f6-ult{font:700 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; opacity:.85; margin:0 0 5px;}
#homeRegistrarRow .f-btn .f6-bt > span.f6-ult[hidden]{display:none;}
#homeRegistrarRow .f-sec{height:52px; border-radius:16px; padding:0 12px; font:600 13.5px var(--f7-sans); gap:10px;}
#homeRegistrarRow .f-sec .ic{width:32px; height:32px; border-radius:10px; background:var(--panel2); color:var(--teal);}
#homeHoy .f-celda.pend .tx b{font:800 16px var(--f7-sans);}
.bm-info b{font:800 17px/1.15 var(--f7-sans); letter-spacing:-.01em;}
.bm-frase{font-family:var(--f7-sans);}

/* ==== MISIÓN · LA REVELACIÓN DE BARRABÁS ==== */
.bm-sorpresa .bm-abrir{display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border-radius:16px; border:1px solid color-mix(in srgb,var(--v7-e8c46a) 55%,var(--line)); background:linear-gradient(135deg,var(--v7-14202b),var(--v7-0c141b)); color:var(--v7-fff); text-align:left; cursor:pointer; font:inherit; position:relative; overflow:hidden;}
.bm-sorpresa .bm-abrir::after{content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,var(--v7-rgba-255-226-150-28) 50%,transparent 65%); transform:translateX(-120%); animation:bmxBrilloBtn 3.6s ease-in-out infinite;}
.bm-abrir-t{display:flex; flex-direction:column; gap:2px; position:relative; z-index:1;}
.bm-abrir-t b{font-size:15px; font-weight:800; letter-spacing:.02em; color:var(--v7-f6d98a);}
.bm-abrir-t i{font-style:normal; font-size:12px; opacity:.75;}
.bmx-d-mini{flex:none; width:40px; height:56px; border-radius:6px; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; background:radial-gradient(circle at 50% 35%,var(--v7-1d3345),var(--v7-0b141c) 70%); border:1.5px solid var(--v7-e8c46a); color:var(--v7-e8c46a); transform:rotate(-6deg); box-shadow:0 4px 10px var(--v7-rgba-0-0-0-4);}
.bmx-d-mini .bmx-d-ave{width:24px; height:24px;} .bmx-d-mini .bmx-d-txt{display:none;} .bmx-d-mini .bmx-d-marco{display:none;}
@keyframes bmxBrilloBtn{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.bmx{position:fixed; inset:0; z-index:var(--z-dialogo-modal,6300); display:flex; flex-direction:column; overflow:hidden; color:var(--v7-fff); background:radial-gradient(ellipse at 50% 38%,var(--v7-122434) 0%,var(--v7-070d13) 55%,var(--v7-000) 100%); opacity:0; transition:opacity .45s ease; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);}
.bmx.bmx-in{opacity:1} .bmx.bmx-sale{opacity:0; transition-duration:.3s}
.bmx-fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.bmx>*:not(.bmx-fx){position:relative; z-index:1}
.bmx-x,.bmx-skip{position:absolute!important; top:calc(10px + env(safe-area-inset-top)); z-index:5!important; background:var(--v7-rgba-255-255-255-08); border:1px solid var(--v7-rgba-255-255-255-18); color:var(--v7-fff); border-radius:999px; font:inherit; cursor:pointer;}
.bmx-x{right:12px; width:38px; height:38px; font-size:22px; line-height:1}
.bmx-skip{left:12px; height:38px; padding:0 16px; font-size:13px; letter-spacing:.04em}
.bmx-logo{align-self:center; margin-top:58px; font-size:34px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; display:flex; gap:.08em; opacity:0; transform:translateY(-10px) scale(.94); transition:opacity 1s ease .2s, transform 1s ease .2s;}
.bmx-logo span:last-child{background:linear-gradient(180deg,var(--v7-fff2c4),var(--v7-e8b94a) 60%,var(--v7-b9862a)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px var(--v7-rgba-232-185-74-5));}
.bmx-sub{align-self:center; margin-top:4px; font-size:11px; letter-spacing:.34em; color:var(--v7-rgba-255-236-190-7); opacity:0; transition:opacity 1s ease .7s}
.bmx-in .bmx-logo,.bmx-in .bmx-sub{opacity:1; transform:none}
.bmx-escena{flex:1; min-height:0; position:relative; perspective:1000px; display:flex; align-items:center; justify-content:center; margin:6px 0}
.bmx-rayos{position:absolute; left:50%; top:50%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; background:repeating-conic-gradient(from 0deg,var(--v7-rgba-255-214-120-22) 0 5deg,transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle,var(--v7-000) 0,transparent 42%); mask-image:radial-gradient(circle,var(--v7-000) 0,transparent 42%); opacity:0; transition:opacity 1s ease; animation:bmxGira 40s linear infinite; pointer-events:none}
.bmx-rayos-on .bmx-rayos,.bmx-final .bmx-rayos{opacity:1}
@keyframes bmxGira{to{transform:rotate(360deg)}}
.bmx{--cw:92px}
@media (min-width:700px){.bmx{--cw:124px}}
.bmx-ring{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; opacity:0; transition:opacity .8s ease}
.bmx-baraja .bmx-ring{opacity:1}
.bmx-c{position:absolute; left:calc(var(--cw)/-2); top:calc(var(--cw)*-.7); width:var(--cw); height:calc(var(--cw)*1.4); transform:rotateY(calc(var(--i)*(360deg/11))) translateZ(calc(var(--cw)*1.78)); transform-style:preserve-3d; transition:opacity .6s ease}
.bmx-cae .bmx-c{opacity:0}
.bmx-dorso,.bmx-frente{position:absolute; inset:0; border-radius:calc(var(--cw)*.08); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden}
.bmx-dorso{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6%; background:radial-gradient(circle at 50% 38%,var(--v7-21425b) 0%,var(--v7-0e1c27) 62%,var(--v7-08121a) 100%); border:2px solid var(--v7-e8c46a); color:var(--v7-e8c46a); box-shadow:0 0 18px var(--v7-rgba-232-185-74-25), inset 0 0 22px var(--v7-rgba-0-0-0-5)}
.bmx-d-marco{position:absolute; inset:5%; border:1px solid var(--v7-rgba-232-196-106-5); border-radius:calc(var(--cw)*.05)}
.bmx-d-ave{width:46%; height:auto; filter:drop-shadow(0 0 6px var(--v7-rgba-232-185-74-6))}
.bmx-d-txt{font-size:calc(var(--cw)*.1); font-weight:900; letter-spacing:.3em; text-indent:.3em}
.bmx-dorso::before{content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,var(--v7-rgba-255-236-170-22) 50%,transparent 60%); transform:translateX(-100%); animation:bmxBrilloBtn 2.8s ease-in-out infinite}
.bmx-el{position:absolute; left:50%; top:50%; height:min(94%,370px); aspect-ratio:5/7; transform:translate(-50%,-50%) scale(.35); opacity:0; transition:transform 1.3s cubic-bezier(.2,.9,.25,1.1), opacity .7s ease; perspective:1100px}
.bmx-el-on .bmx-el{opacity:1; transform:translate(-50%,-50%) scale(1)}
.bmx-el-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1.15s cubic-bezier(.3,.1,.2,1)}
.bmx-el-in.voltea{transform:rotateY(180deg)} .bmx-el-in.ya{transition:none}
.bmx-el .bmx-dorso,.bmx-el .bmx-frente{border-radius:16px}
.bmx-el .bmx-d-txt{font-size:20px}
.bmx-el-on .bmx-el{animation:bmxFlota 3.2s ease-in-out 1.4s infinite}
@keyframes bmxFlota{50%{margin-top:-7px}}
.bmx-frente{transform:rotateY(180deg); display:flex; flex-direction:column; background:linear-gradient(170deg,var(--v7-1a2c3b),var(--v7-0b141c)); border:3px solid var(--rc,var(--v7-e8c46a)); box-shadow:0 0 0 1px var(--v7-rgba-255-255-255-12) inset, 0 0 34px color-mix(in srgb,var(--rc,var(--v7-e8c46a)) 55%,transparent), 0 18px 40px var(--v7-rgba-0-0-0-6)}
.bmx-f-top{display:flex; justify-content:space-between; gap:6px; padding:8px 11px 0; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--v7-rgba-255-255-255-7)}
.bmx-f-top b{color:var(--rc,var(--v7-e8c46a))}
.bmx-f-top span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bmx-f-arte{flex:1; min-height:0; margin:7px 9px; border-radius:10px; overflow:hidden; background:var(--v7-0a1219); display:block; position:relative}
.bmx-f-arte>*,.bmx-f-arte img{width:100%!important; height:100%!important; object-fit:cover; display:block}
.bmx-f-pie{display:flex; flex-direction:column; gap:1px; padding:0 12px 11px}
.bmx-f-pie b{font-size:17px; font-weight:800; line-height:1.15}
.bmx-f-pie i{font-size:11px; opacity:.65}
.bmx-holo{position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 30%,var(--v7-rgba-255-255-255-0) 38%,var(--v7-rgba-150-230-255-22) 46%,var(--v7-rgba-255-220-150-28) 54%,var(--v7-rgba-255-255-255-0) 62%,transparent 70%); mix-blend-mode:screen; transform:translateX(-110%)}
.bmx-el-in.voltea .bmx-holo{animation:bmxBrilloBtn 2.6s ease-in-out .9s infinite}
.bmx-resto{display:flex; flex-direction:column; gap:10px; padding:0 16px 16px; max-width:560px; width:100%; align-self:center; opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.bmx-baraja .bmx-resto,.bmx-final .bmx-resto{opacity:1; transform:none}
.bmx-bar{display:flex; align-items:flex-end; gap:10px}
.bmx-barra{height:clamp(96px,16vh,150px); width:auto; flex:none; filter:drop-shadow(0 6px 14px var(--v7-rgba-0-0-0-6))}
.bmx-frase{margin:0 0 8px; min-height:2.6em; padding:10px 13px; border-radius:14px 14px 14px 4px; background:var(--v7-rgba-255-255-255-1); border:1px solid var(--v7-rgba-255-255-255-16); font-size:14.5px; line-height:1.35; opacity:0}
.bmx-frase.on{opacity:1}
.bmx-panel{display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .6s ease .1s, transform .6s ease .1s}
.bmx-final .bmx-panel{opacity:1; transform:none; pointer-events:auto}
.bmx-chips{display:flex; flex-wrap:wrap; gap:6px}
.bmx-chip{padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.05em; background:var(--v7-rgba-255-255-255-1); border:1px solid var(--v7-rgba-255-255-255-2)}
.bmx-chip[style]{color:var(--rc); border-color:var(--rc)}
.bmx-chip-xp{color:var(--v7-f6d98a); border-color:var(--v7-e8c46a)}
.bmx-tip{margin:0; font-size:13px; line-height:1.4; color:var(--v7-rgba-255-255-255-88)}
.bmx-tip2{color:var(--v7-rgba-255-236-190-82)}
.bmx-ok{margin-top:4px; height:50px; border:0; border-radius:14px; font:inherit; font-size:16px; font-weight:900; letter-spacing:.03em; color:var(--v7-2a1c00); cursor:pointer; background:linear-gradient(180deg,var(--v7-ffe9a8),var(--v7-e8b94a)); box-shadow:0 0 24px var(--v7-rgba-232-185-74-45), 0 6px 14px var(--v7-rgba-0-0-0-4)}
.bmx-no{height:34px; background:none; border:0; color:var(--v7-rgba-255-255-255-6); font:inherit; font-size:13px; cursor:pointer}
.bmx-final .bmx-skip{display:none}
@media (prefers-reduced-motion: reduce){
  .bmx,.bmx *{animation:none!important; transition-duration:.01s!important; transition-delay:0s!important}
}
/* ==== TU GENTE ==== */
.tg-card{background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:2px 0 0; overflow:hidden;}
.tg-lista{list-style:none; margin:0; padding:0;}
.tg-item{border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.tg-item[hidden]{display:none}
.tg-fila{display:flex; align-items:center; gap:13px; width:100%; padding:13px 14px; background:none; border:0; text-align:left; font:inherit; color:var(--text); cursor:pointer;}
.tg-fila:active{background:color-mix(in srgb,var(--line) 35%,transparent)}
.tg-av{flex:none; position:relative; width:44px; height:44px}
.tg-av-c{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden; font-family:var(--display); font-weight:700; font-size:18px; color:var(--v7-fff); background:linear-gradient(145deg,hsl(var(--h) 38% 52%),hsl(var(--h) 42% 34%)); box-shadow:0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent);}
.tg-av-c img{width:100%; height:100%; object-fit:cover; display:block}
.tg-niv{position:absolute; right:-5px; bottom:-4px; min-width:20px; height:20px; padding:0 4px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:999px; font-family:var(--mono); font-size:10px; font-weight:700; line-height:1; color:var(--v7-f6d98a); background:var(--v7-101a22); border:1.5px solid var(--gold); box-shadow:0 0 0 2px var(--panel);}
.tg-cuerpo{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.tg-l1{display:flex; align-items:baseline; gap:8px}
.tg-nom{font-family:var(--display); font-size:var(--fs-3,15px); font-weight:700; line-height:1.1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tg-t{margin-left:auto; flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tg-l2{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.tg-sello{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.tg-sello svg{width:12px; height:12px}
.tg-sello-foto{color:var(--gold)}
.tg-nueva{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:1px 6px; border-radius:4px; color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.tg-sp{display:flex; flex-direction:column; gap:0; min-width:0}
.tg-sp b{font-family:var(--display); font-size:var(--fs-4,16px); font-weight:700; line-height:1.15; color:var(--text)}
.tg-sp i{font-size:var(--fs-1,12px); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tg-foto{flex:none; width:52px; height:52px; border-radius:12px; overflow:hidden; background:var(--panel2); border:1.5px solid var(--rc,var(--line)); box-shadow:0 0 0 2px var(--panel)}
.tg-foto>*,.tg-foto img{width:100%!important; height:100%!important; object-fit:cover; display:block}
.tg-mas{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:13px; background:color-mix(in srgb,var(--panel2) 60%,transparent); border:0; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); cursor:pointer}
.tg-mas::after{content:'›'; font-size:15px; line-height:1}
.tg-mas-cta{color:var(--gold)}
.tg-vacio p{margin:0; padding:16px 16px 14px; font-size:var(--fs-2,14px); line-height:1.4; color:var(--muted)}
.tg-foto-s{width:34px; height:34px; border-radius:9px}
.tg-pila{flex:none; display:flex} .tg-pila .tg-foto{margin-left:-14px} .tg-pila .tg-foto:first-child{margin-left:0}
.tg-pantalla .tg-card{margin-bottom:6px}
.tg-filtros{display:flex; gap:8px; margin:0 0 6px}
.tg-fil{padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
.tg-fil.on{color:var(--v7-2a1c00); background:var(--gold); border-color:var(--gold)}
/* ==== PLANIFICADOR DE SALIDAS (hz-, hzr-): resumen en Inicio + pantalla completa. Usa los tokens del tema (claro u oscuro). ==== */
.hz,.hzr{--hz-au:color-mix(in srgb,var(--gold) 62%,var(--text)); --hz-f1:color-mix(in srgb,var(--text) 6%,transparent); --hz-f2:color-mix(in srgb,var(--text) 10%,transparent); --hz-ln:color-mix(in srgb,var(--text) 14%,transparent); --hz-sub:var(--muted); --hz-agua:color-mix(in srgb,var(--teal) 70%,var(--v7-3b8fd4)); --hz-oro:linear-gradient(180deg,var(--v7-ffe9a8),var(--v7-e1ae45))}
/* ---- resumen en Inicio ---- */
.hzr{position:relative; display:block; width:100%; text-align:left; box-sizing:border-box; padding:16px 16px 14px; border-radius:22px; background:var(--panel); border:1px solid var(--line); color:var(--text); cursor:pointer; overflow:hidden; font:inherit;
  background-image:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 55%)}
.hzr:active{transform:scale(.995)}
.hzr:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.hzr-k{display:block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hz-au)}
.hzr-fila{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:6px}
.hzr-h{font-family:var(--display); font-size:32px; font-weight:700; line-height:1.05; letter-spacing:-.01em; color:var(--hz-au)}
.hzr-z{display:block; margin-top:4px; font-family:var(--display); font-size:16px; font-weight:700}
.hzr-r{margin:4px 0 0; font-size:13.5px; line-height:1.4; color:color-mix(in srgb,var(--text) 88%,transparent)}
.hzr-m{margin:10px 0 0; padding:8px 11px; border-radius:12px; background:var(--hz-f1); border-left:3px solid var(--teal); font-size:12.5px; line-height:1.4; color:var(--text)}
.hzr-m b{font-family:var(--display)}
.hzr-m.temporal{border-left-color:var(--v7-e0803a)}
.hzr-d{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px}
.hzr-dia{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:12px; border:1px solid var(--hz-ln); background:var(--hz-f1); color:var(--text); font:inherit; cursor:pointer}
.hzr-dia b{font-family:var(--display); font-size:12.5px; line-height:1.1} .hzr-dia i{font-style:normal; font-family:var(--mono); font-size:9px; color:var(--hz-sub)}
.hzr-dia .hz-dp{margin-top:2px}
.hzr-ab{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid var(--hz-ln); font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--hz-au)}
.hzr-ab::after{content:''; width:9px; height:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-right:4px}
.hzr-pie{margin:8px 0 0; font-size:10.5px; color:var(--hz-sub)}
.hz-sinpos{padding:16px; border-radius:22px; background:var(--panel); border:1px solid var(--line); color:var(--text)}
.hz-pedir{margin-top:10px; border:0; cursor:pointer; font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; border-radius:999px; background:var(--hz-oro); color:var(--v7-2a1c00)}
.hz-pedir:disabled{opacity:.7}
/* ---- pantalla completa ---- */
.hz-pantalla .reg-screen-body{padding-bottom:30px}
.hz{color:var(--text); position:relative}
.hz-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.hz-tt{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hz-au)}
.hz-ahora{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--hz-sub); text-align:right}
.hz-dias{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px}
.hz-dia{position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px 7px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; font:inherit}
.hz-dia b{font-family:var(--display); font-size:13px; font-weight:700; line-height:1.1}
.hz-dia i{font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--hz-sub); letter-spacing:.04em}
.hz-dia .hz-dp{margin-top:3px}
.hz-dia[aria-selected="true"]{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,var(--panel)); box-shadow:0 0 0 1px var(--gold) inset}
.hz-dia.mejor::after{content:''; position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px color-mix(in srgb,var(--gold) 80%,transparent)}
.hz-vistas{display:flex; gap:4px; margin:0 0 12px; padding:3px; border-radius:999px; background:var(--hz-f2); border:1px solid var(--hz-ln); overflow-x:auto; scrollbar-width:none}
.hz-vistas::-webkit-scrollbar{display:none}
.hz-vistas button{flex:1 0 auto; border:0; background:none; color:var(--hz-sub); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap}
.hz-vistas button[aria-selected="true"]{background:var(--hz-oro); color:var(--v7-2a1c00)}
.hz-k{flex:0 0 100%; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hz-au)}
.hz-k2{display:block; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hz-au); margin:0 0 6px}
.hz-hero{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px}
.hz-hora{font-family:var(--display); font-size:34px; font-weight:700; line-height:1.05; letter-spacing:-.01em; color:var(--hz-au)}
.hz-hora-s{font-size:24px}
.hz-razon{margin:6px 0 0; font-size:14px; line-height:1.4}
.hz-aviso{margin:8px 0 0; font-size:12.5px; color:var(--v7-c9741a)}
.hz-et,.hz-z-p,.hz-dp,.hz-d-n,.hz-seq li em{font-style:normal; font-family:var(--mono); font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; border:1px solid transparent; background:var(--hz-f2); color:var(--muted)}
.hz-et{align-self:center; font-size:10.5px; padding:4px 10px}
.hz-z-p{font-size:12px; min-width:34px; text-align:center; padding:4px 9px; letter-spacing:0}
.hz-dp{font-size:10.5px; min-width:26px; text-align:center; padding:1px 6px; letter-spacing:0}
.hz-d-n{font-size:10px; padding:2px 8px}
.hz-seq li em{font-size:10.5px; padding:2px 8px; letter-spacing:0}
.hz-n-excelente{background:var(--hz-oro)!important; color:var(--v7-2a1c00)!important; border-color:var(--v7-e8c46a)!important}
.hz-n-muybuena{background:color-mix(in srgb,var(--teal) 24%,transparent)!important; color:var(--text)!important; border-color:color-mix(in srgb,var(--teal) 60%,transparent)!important}
.hz-n-buena{background:color-mix(in srgb,var(--v7-4f8fe0) 20%,transparent)!important; color:var(--text)!important; border-color:color-mix(in srgb,var(--v7-4f8fe0) 50%,transparent)!important}
.hz-n-regular,.hz-n-floja{color:var(--muted)!important}
.hz-modo{display:flex; flex-direction:column; gap:2px; margin:12px 0 0; padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--teal)}
.hz-modo b{font-family:var(--display); font-size:14px} .hz-modo span{font-size:12.5px; line-height:1.4; color:color-mix(in srgb,var(--text) 85%,transparent)}
.hz-modo-temporal{border-left-color:var(--v7-e0803a)} .hz-modo-lluvia,.hz-modo-ventoso{border-left-color:var(--v7-8794a1)} .hz-modo-calma{border-left-color:var(--v7-3fbf8f)} .hz-modo-niebla{border-left-color:var(--v7-aab6c0)}
.hz-seq{margin-top:12px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb,var(--gold) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.hz-seq ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.hz-seq li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:13px}
.hz-seq li b{font-family:var(--mono); font-size:12px; color:var(--hz-au)} .hz-seq li span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hz-zonas{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.hz-z{border-radius:16px; background:var(--panel); border:1px solid var(--line); overflow:hidden}
.hz-z.abierta{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.hz-z-cab{width:100%; display:flex; align-items:center; gap:10px; padding:12px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.hz-z-n{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px} .hz-z-n b{font-family:var(--display); font-size:15px; line-height:1.2} .hz-z-n i{font-style:normal; font-size:11.5px; color:var(--hz-sub)}
.hz-z-chev{width:8px; height:8px; border-right:2px solid var(--hz-sub); border-bottom:2px solid var(--hz-sub); transform:rotate(45deg); transition:transform .2s; margin:0 4px 3px 2px}
.hz-z.abierta .hz-z-chev{transform:rotate(-135deg); margin-bottom:-3px}
.hz-z-body{display:none; padding:0 12px 12px} .hz-z.abierta .hz-z-body{display:block}
.hz-z-v{display:flex; align-items:center; gap:10px; margin:2px 0 0} .hz-z-v b{font-family:var(--display); font-size:22px; color:var(--hz-au)}
.hz-z-r{margin:4px 0 0; font-size:12.5px; color:color-mix(in srgb,var(--text) 85%,transparent)}
.hz-z-c{margin:8px 0 0; font-size:13px; line-height:1.45}
.hz-aves{margin-top:10px} .hz-ave{display:inline-block; margin:0 5px 5px 0; padding:3px 9px; border-radius:999px; font-size:11.5px; background:color-mix(in srgb,var(--teal) 16%,transparent); border:1px solid color-mix(in srgb,var(--teal) 40%,transparent); color:var(--text)}
.hz-z-g{margin:6px -4px 0}
.hz-regla{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.hz-regla-doc{background:color-mix(in srgb,var(--teal) 16%,transparent); color:var(--text); border:1px solid color-mix(in srgb,var(--teal) 45%,transparent)} .hz-regla-local{background:color-mix(in srgb,var(--v7-e0a040) 16%,transparent); color:var(--text); border:1px solid color-mix(in srgb,var(--v7-e0a040) 50%,transparent)}
.hz-svg{display:block; width:100%; height:auto; overflow:visible}
.hz-gr{stroke:var(--hz-ln); stroke-width:1}
.hz-ven{fill:color-mix(in srgb,var(--gold) 14%,transparent); stroke:var(--gold); stroke-width:1; stroke-dasharray:3 3}
.hz-bar{transform-box:fill-box; transform-origin:50% 100%; animation:hzCrece .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d,0ms)}
.hz-bar.sel{stroke:var(--text); stroke-width:1.5}
.hz-bar.pasada{opacity:.3!important; animation:none}
@keyframes hzCrece{from{transform:scaleY(.02); opacity:0}to{transform:none; opacity:1}}
.hz-tx{font-family:var(--mono); font-size:9px; fill:var(--hz-sub)}
.hz-tx-m{fill:var(--text); font-weight:700; paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round}
.hz-mar{fill:none; stroke:var(--hz-agua); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hz-mar-p{fill:var(--panel); stroke:var(--hz-agua); stroke-width:1.6}
.hz-noche{fill:color-mix(in srgb,var(--text) 12%,transparent)}
.hz-sol{stroke:color-mix(in srgb,var(--gold) 70%,transparent); stroke-width:1; stroke-dasharray:2 3}
.hz-sol-a{fill:var(--v7-f2b53a)} .hz-sol-p{fill:var(--v7-e8803a)}
.hz-ahora-l{stroke:var(--text); stroke-width:1.2; opacity:.8} .hz-ahora-c{fill:var(--text)}
.hz-hit{fill:transparent; cursor:pointer; outline:none} .hz-hit:focus-visible{stroke:var(--text); stroke-width:1.5}
.hz-det{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:4px; padding:9px 12px; border-radius:12px; background:var(--hz-f1); border:1px solid var(--hz-ln); font-size:12.5px; min-height:20px}
.hz-d-h{font-family:var(--display); font-size:16px}
.hz-d-l{color:color-mix(in srgb,var(--text) 80%,transparent); flex:1 1 100%}
.hz-chart{margin:8px -4px 0}
.hz-vacio{margin:6px 0; font-size:13.5px; line-height:1.45}
.hz-mh{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.hz-tipo{font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 11px; border-radius:999px; background:color-mix(in srgb,var(--hz-agua) 20%,transparent); border:1px solid color-mix(in srgb,var(--hz-agua) 55%,transparent)}
.hz-tipo-vivas{background:var(--hz-oro); color:var(--v7-2a1c00); border-color:var(--v7-e8c46a)}
.hz-rango{font-size:12.5px; color:var(--hz-sub)}
.hz-mar-t{margin-top:6px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.hz-mt{display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:12px; background:color-mix(in srgb,var(--hz-agua) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--hz-agua) 30%,transparent)} .hz-mt.noche{opacity:.55}
.hz-mt i{font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--hz-sub)} .hz-mt b{font-family:var(--display); font-size:15px} .hz-mt em{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--hz-sub)}
.hz-lectura{margin:10px 0 0; font-size:13px; line-height:1.45}
.hz-donde{margin-top:12px; padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--line)}
.hz-donde p{margin:0 0 8px; display:flex; flex-direction:column; gap:1px} .hz-donde p:last-child{margin:0} .hz-donde b{font-family:var(--display); font-size:13.5px; color:var(--hz-au)} .hz-donde span{font-size:12.5px; line-height:1.4}
.hz-pie2{margin:10px 0 0; font-size:10.5px; color:var(--hz-sub)}
.hz-sol-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.hz-c{padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; min-width:0}
.hz-c-k{display:block; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hz-au)}
.hz-c b{font-family:var(--display); font-size:15px; font-weight:700; line-height:1.25} .hz-c i{font-style:normal; font-size:11.5px; color:var(--hz-sub)}
.hz-luna-b{display:flex; align-items:center; gap:12px; margin-top:14px} .hz-luna-b>div{display:flex; flex-direction:column; gap:2px; min-width:0} .hz-luna-b b{font-family:var(--display); font-size:17px} .hz-luna-b i{font-style:normal; font-size:12px; color:var(--hz-sub)}
.hz-luna{flex:none; width:34px; height:34px} .hz-luna-g{width:54px; height:54px}
.hz-luna-o{fill:var(--v7-2a3b4d)} .hz-luna-l{fill:var(--v7-f6efd6)} .hz-luna-c{fill:none; stroke:var(--hz-ln); stroke-width:1}
.hz-luna-p{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px} .hz-luna-p span{display:flex; flex-direction:column; padding:8px 10px; border-radius:12px; background:var(--panel); border:1px solid var(--line)} .hz-luna-p i{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--hz-sub)} .hz-luna-p b{font-family:var(--display); font-size:14px}
.hz-t-res{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hz-t-sc{margin:12px -16px 0; overflow-x:auto; padding:0 16px 4px; scrollbar-width:thin}
.hz-t-tab{display:flex; gap:4px; min-width:max-content}
.hz-t-col{display:flex; flex-direction:column; align-items:center; gap:5px; width:36px; padding:7px 0; border-radius:12px; background:var(--panel); border:1px solid var(--line)}
.hz-t-col b{font-family:var(--mono); font-size:10.5px; color:var(--hz-sub)} .hz-t-col em{font-style:normal; font-family:var(--mono); font-size:11px}
.hz-fl{width:14px; height:14px; fill:var(--hz-agua); display:block} .hz-t-v{font-family:var(--mono); font-size:11px; font-weight:700} .hz-t-v.fuerte{color:var(--v7-d9742a)}
.hz-t-ll{width:14px; height:34px; border-radius:4px; background:var(--hz-f2); display:flex; align-items:flex-end; overflow:hidden} .hz-t-ll u{display:block; width:100%; background:linear-gradient(180deg,var(--v7-7fd0ff),var(--v7-3b8fd4)); border-radius:3px 3px 0 0}
.hz-t-leg{margin:6px 0 0; font-size:10px; color:var(--hz-sub)}
.hz-nota{margin:10px 0 0; font-size:12px; color:var(--v7-c9741a)} .hz-nota-ok{color:var(--hz-au)}
.hz-como{margin-top:12px; border-top:1px solid var(--hz-ln); padding-top:8px; font-size:12px}
.hz-como summary{cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--hz-au)}
.hz-como ul{margin:8px 0 0; padding-left:16px; display:flex; flex-direction:column; gap:5px; line-height:1.4}
.hz-pie{margin:10px 0 0; font-size:10.5px; line-height:1.35; color:var(--hz-sub)}
@media (prefers-reduced-motion: reduce){ .hz-bar{animation:none} }
@media (max-width:360px){ .hz-hora{font-size:30px} .hzr-h{font-size:28px} .hz-mar-t{grid-template-columns:1fr 1fr} }
/* ==== Planificador: iconos del tiempo, arco del sol y limpieza (v7i) ==== */
.hz-ic{width:26px; height:26px; flex:none; display:block; overflow:visible}
.hz-ic-s{width:24px; height:24px} .hz-ic-g{width:48px; height:48px} .hz-ic-m{width:30px; height:30px}
.hz-i-sol{fill:var(--v7-f4b82e); stroke:var(--v7-f4b82e); stroke-width:2; stroke-linecap:round} .hz-i-sol circle{stroke:none}
.hz-i-luna{fill:var(--v7-e4dcc0)}
.hz-i-nube{fill:color-mix(in srgb,var(--v7-aebccb) 88%,var(--text)); stroke:color-mix(in srgb,var(--text) 25%,transparent); stroke-width:.8} .hz-i-nube.osc{fill:color-mix(in srgb,var(--v7-6f7f90) 85%,var(--text))}
.hz-i-gota{stroke:var(--v7-4f9bea); stroke-width:2.2; stroke-linecap:round}
.hz-i-rayo{fill:var(--v7-f6c23e); stroke:var(--v7-d99a12); stroke-width:.6}
.hz-i-niebla{stroke:color-mix(in srgb,var(--v7-9aa8b5) 85%,var(--text)); stroke-width:2.2; stroke-linecap:round}
.hz-i-nieve{fill:var(--v7-cfe3f7); stroke:var(--v7-7fa6cf); stroke-width:.8}
/* resumen en Inicio */
.hzr-zona{display:flex; align-items:center; gap:12px; margin-top:8px}
.hzr-zona>div{min-width:0}
.hzr-m{display:inline-block; margin:10px 0 0; padding:5px 11px; border-radius:999px; font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-left:0; background:color-mix(in srgb,var(--v7-e0803a) 20%,transparent); color:var(--text)}
.hzr-dia{gap:4px; padding:7px 2px 6px}
.hzr-dia .hz-ic-s{width:26px; height:26px}
/* planificador */
.hz-top{justify-content:flex-end; min-height:26px}
.hz-ahora{display:inline-flex; align-items:center; gap:6px}
.hz-dia{gap:3px; padding:8px 2px 7px} .hz-dia .hz-ic-s{width:26px; height:26px}
.hz-dia i{font-size:9px; letter-spacing:0; white-space:nowrap}
.hz-dia.dudoso{border-style:dashed}
.hz-modo{flex-direction:row; align-items:center; gap:10px} .hz-modo>div{display:flex; flex-direction:column; gap:2px; min-width:0}
.hz-nota{margin:14px 0 0; font-size:12px}
.hz-zonas .hz-k2{margin-top:2px}
.hz-donde p{flex-direction:row; align-items:baseline; gap:10px; margin:0 0 6px} .hz-donde p b{font-family:var(--mono); font-size:13px; min-width:44px}
.hz-fl-b{font-style:normal; color:var(--hz-agua); font-size:12px} .hz-fl-a{font-style:normal; color:var(--hz-au); font-size:12px}
/* sol y luna */
.hz-sol-w{margin:2px -2px 10px}
.hz-arc-b{fill:none; stroke:var(--hz-f2); stroke-width:14; stroke-linecap:round}
.hz-arc-p{fill:none; stroke:var(--hz-ln); stroke-width:14; stroke-linecap:round}
.hz-arc-v{fill:none; stroke:var(--gold); stroke-width:14; stroke-linecap:round; opacity:.85}
.hz-arc-h{fill:var(--v7-f4b82e); opacity:.25} .hz-arc-s{fill:var(--v7-f4b82e)}
.hz-arc-n{font-family:var(--display); font-size:26px; font-weight:700; fill:var(--text)}
.hz-arco .hz-tx-m{font-size:11px}
.hz-leyenda{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:11.5px; color:var(--hz-sub)} .hz-leyenda u{display:block; width:22px; height:7px; border-radius:99px; background:var(--gold); opacity:.85}
.hz-luna-b b{font-size:16px}
/* tiempo */
.hz-t-top{display:flex; align-items:center; gap:14px; margin:0 0 12px}
.hz-t-top>div{display:flex; flex-direction:column; gap:2px}
.hz-t-temp{font-family:var(--display); font-size:30px; font-weight:700; line-height:1.05}
.hz-t-cat{font-size:13px; color:var(--hz-sub)}
.hz-t-res .hz-c i{display:flex; align-items:center; gap:5px}
.hz-t-col{width:42px; gap:4px; padding:7px 0 6px} .hz-t-col.pasada{opacity:.5}
.hz-t-col .hz-ic-s{width:24px; height:24px}
.hz-t-ll{width:12px; height:30px} .hz-t-ll u{width:100%}
.hz-t-mm{font-family:var(--mono); font-size:9px; color:var(--v7-3f86d6); min-height:11px}
.hz-pie{margin-top:14px}
/* ==== Planificador: puntos clave de cada zona (22/10/2026) ==== */
.hz-ini{margin-top:12px}
.hz-pt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0}
.hz-pt>span{min-width:0; flex:1; display:flex; flex-direction:column}
.hz-pt b{font-size:13.5px; font-weight:600; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25}
.hz-pt i{font-style:normal; font-size:11.5px; color:var(--muted)}
.hz-ir{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px; font:inherit; font-size:12px; font-weight:600; color:var(--text); background:color-mix(in srgb,var(--gold) 14%,transparent); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); cursor:pointer}
.hz-ir:active{transform:scale(.97)}
.hz-mas{margin-top:4px; border-top:1px solid var(--line)}
.hz-mas summary{cursor:pointer; padding:9px 0 3px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); list-style:none}
.hz-mas summary::-webkit-details-marker{display:none}
.hz-mas summary::after{content:' ▾'}
.hz-mas[open] summary::after{content:' ▴'}
.hz-aprox{margin:10px 0 2px; font-size:12px; color:var(--muted)}
.hz-aves-mes .hz-k2{margin-bottom:6px}


/* ==== Inicio v7b (22/10/2026): la revelación y las cartas siguen el tema; sin «Hoy en tu zona» ==== */
.f6-hoy .f6-cab{display:none;}
html[data-bg^="claro"] .bm-sorpresa .bm-abrir{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,var(--panel)),var(--panel)); color:var(--text); border-color:color-mix(in srgb,var(--gold) 55%,var(--line));}
html[data-bg^="claro"] .bm-sorpresa .bm-abrir::after{background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--gold) 26%,transparent) 50%,transparent 65%);}
html[data-bg^="claro"] .bm-abrir-t b{color:var(--cv3-oro-ink);}
html[data-bg^="claro"] .bmx-d-mini{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--gold) 24%,var(--panel)),var(--panel) 75%); border-color:var(--gold); color:var(--cv3-oro-ink); box-shadow:0 4px 10px color-mix(in srgb,var(--text) 16%,transparent);}
html[data-bg^="claro"] .bmx{color:var(--text); background:radial-gradient(ellipse at 50% 38%,var(--panel) 0%,var(--bg1) 60%,var(--bg2) 100%);}
html[data-bg^="claro"] .bmx-x,html[data-bg^="claro"] .bmx-skip{background:var(--panel); border-color:var(--line); color:var(--text);}
html[data-bg^="claro"] .bmx-logo span:last-child{background:linear-gradient(180deg,var(--gold),var(--cv3-oro-ink)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:none;}
html[data-bg^="claro"] .bmx-sub{color:var(--muted);}
html[data-bg^="claro"] .bmx-dorso{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--gold) 26%,var(--panel)) 0%,var(--panel) 66%,var(--panel2) 100%); border-color:var(--gold); color:var(--cv3-oro-ink); box-shadow:0 0 14px color-mix(in srgb,var(--gold) 35%,transparent), inset 0 0 18px color-mix(in srgb,var(--gold) 12%,transparent);}
html[data-bg^="claro"] .bmx-d-marco{border-color:color-mix(in srgb,var(--gold) 55%,transparent);}
html[data-bg^="claro"] .bmx-d-ave{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold) 40%,transparent));}
html[data-bg^="claro"] .bmx-dorso::before{background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--bg1) 75%,transparent) 50%,transparent 60%);}
html[data-bg^="claro"] .bmx-frente{background:linear-gradient(170deg,var(--panel),var(--panel2)); box-shadow:0 0 0 1px var(--line) inset, 0 0 26px color-mix(in srgb,var(--rc,var(--gold)) 40%,transparent), 0 14px 30px color-mix(in srgb,var(--text) 18%,transparent);}
html[data-bg^="claro"] .bmx-f-top{color:var(--muted);}
html[data-bg^="claro"] .bmx-f-arte{background:var(--panel2);}
html[data-bg^="claro"] .bmx-holo{mix-blend-mode:overlay;}
html[data-bg^="claro"] .bmx-barra{filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--text) 22%,transparent));}
html[data-bg^="claro"] .bmx-frase{background:var(--panel); border-color:var(--line);}
html[data-bg^="claro"] .bmx-chip{background:var(--panel2); border-color:var(--line);}
html[data-bg^="claro"] .bmx-chip-xp{color:var(--cv3-oro-ink); border-color:var(--gold);}
html[data-bg^="claro"] .bmx-tip{color:var(--text);}
html[data-bg^="claro"] .bmx-tip2{color:var(--cv3-oro-ink);}
html[data-bg^="claro"] .bmx-no{color:var(--muted);}

/* ==========================================================================
   INICIO v8 · PANTALLAS (27/10/2026)
   El Inicio se recorre de una pantalla a otra (scroll-snap en .main):
   1) registrar (foto grande + «La vi» / «Con foto»), 2…) cada extra con TODA su
   información, y la última, tu Aleteo. Todo cuelga de body.home-active: el
   resto de la app (ajustes, menú del avatar, otras pantallas) no se toca.
   --ini-ph (alto de una pantalla) lo mide iniPantallasMedir() en app.js.
   ========================================================================== */
body.home-active .main{ padding-bottom:0; scroll-snap-type:y mandatory; scroll-padding-top:6px; overscroll-behavior-y:contain; }
body.home-active .home-grid.show{ display:block !important; min-height:0 !important; margin-top:0; gap:0; flex:none; }
body.home-active .home-grid > *{ flex:none; }
.ini-modulos{ display:contents; }
.ini-pag{ display:flex; flex-direction:column; box-sizing:border-box; position:relative;
  min-height:var(--ini-ph, calc(100dvh - 190px)); padding:6px 0 calc(92px + var(--sab,0px));
  scroll-snap-align:start; scroll-snap-stop:always; }
.ini-pag[hidden]{ display:none !important; }
.ini-pag-in{ display:flex; flex-direction:column; gap:18px; flex:1 1 auto; min-height:0; transform-origin:50% 40%; will-change:transform,opacity; }
.ini-pag .f7-sec{ margin:0; }
/* 1 · registrar */
.ini-pag-reg .ini-pag-in{ gap:14px; }
.ini-pag-reg .f6-hero{ padding:2px 2px 0; }
.ini-pag-reg .f6-registro{ flex:1 1 auto; min-height:0; max-height:none; }
.ini-pag-reg .f6-registro .f6-cab{ display:none; }
.ini-pag-reg .f6-registro .f-acc{ flex:1 1 auto; min-height:300px; display:grid !important; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) auto; gap:10px; }
.ini-pag-reg .f-col{ display:contents; }
.ini-hero-foto{ grid-area:1/1/2/3; position:relative; overflow:hidden; border-radius:var(--r-lg,24px);
  background:linear-gradient(155deg, color-mix(in srgb,var(--teal) 88%,var(--sobre-foto)) 0%, var(--teal) 45%, var(--teal-deep,var(--teal)) 100%);
  box-shadow:0 18px 40px -22px rgba(20,30,60,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.ini-hero-img{ position:absolute; inset:0; }
.ini-hero-img .f6-foto, .ini-hero-img > span{ position:absolute; inset:0; display:block; }
.ini-hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.ini-hero-foto.es-rango .ini-hero-img{ background:linear-gradient(180deg, color-mix(in srgb,var(--teal) 14%,var(--panel)) 0%, color-mix(in srgb,var(--teal) 34%,var(--panel)) 100%); }
.ini-hero-foto.es-rango .ini-hero-img img{ inset:auto; left:12%; right:12%; top:16%; width:76%; height:46%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.ini-hero-foto::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,14,30,.5) 0%, rgba(8,14,30,0) 34%, rgba(8,14,30,0) 52%, rgba(8,14,30,.62) 100%); }
.ini-hero-tit{ position:absolute; left:18px; right:18px; top:16px; z-index:1; font-family:var(--display); font-weight:600; font-size:clamp(24px,7.4vw,32px); line-height:1.05; letter-spacing:-.01em; color:var(--sobre-foto); text-shadow:0 2px 14px rgba(0,0,0,.4); text-wrap:balance; }
.ini-hero-ult{ position:absolute; left:18px; top:calc(16px + clamp(54px,16vw,70px)); z-index:1; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.5); max-width:calc(100% - 36px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-hero-ult:empty{ display:none; }
/* los dos botones principales, encima de la foto, abajo */
body.home-active #homeRegistrarRow .f-btn{ position:relative; z-index:2; align-self:end; justify-self:stretch; grid-row:1; margin:0 10px 10px; height:54px; min-height:0 !important; max-height:none; padding:0 14px !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:9px !important; border-radius:16px !important; overflow:hidden;
  box-shadow:0 10px 24px -12px rgba(10,20,50,.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.home-active #homeRegistrarRow #homeRegVer{ grid-column:1; margin-right:5px; background:var(--panel) !important; color:var(--text) !important; border:1px solid var(--line) !important; }
body.home-active #homeRegistrarRow #homeRegFoto{ grid-column:2; margin-left:5px; background:var(--teal) !important; color:var(--on-teal) !important; border:1px solid transparent !important; }
body.home-active #homeRegistrarRow .f-btn .f6-foto, body.home-active #homeRegistrarRow .f-btn .f6-marca, body.home-active #homeRegistrarRow .f-btn .f6-bt > span{ display:none !important; }
body.home-active #homeRegistrarRow .f-btn .ic{ width:24px !important; height:24px !important; margin:0 !important; padding:0; border-radius:0 !important; background:none !important; box-shadow:none !important; color:inherit !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; flex:none; display:flex; align-items:center; justify-content:center; }
body.home-active #homeRegistrarRow .f-btn .ic svg{ width:22px !important; height:22px !important; }
body.home-active #homeRegistrarRow .f-btn .f6-bt{ display:block; flex:none; width:auto !important; max-width:none !important; overflow:visible !important; color:inherit !important; }
body.home-active #homeRegistrarRow .f-btn .f6-bt b{ font-family:var(--display); font-weight:700; font-size:19px !important; line-height:1; color:inherit !important; text-shadow:none !important; white-space:nowrap; }
body.home-active #homeRegistrarRow .f-btn .chip{ position:static !important; margin:0; padding:2px 7px; font-size:10px; border-radius:999px; background:rgba(255,255,255,.24) !important; color:inherit !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4) !important; flex:none; }
/* Barrabás (tarjeta pequeña) y «La subo luego» (píldora) */
body.home-active #homeRegistrarRow .f-sec{ grid-row:2; align-self:stretch; width:auto; margin:0; }
body.home-active #homeRegistrarRow #homeRegAkin{ grid-column:1; height:56px; justify-content:flex-start; padding:0 12px 0 8px; gap:10px; border-radius:var(--r-md,16px); background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:0 8px 20px -14px rgba(10,20,50,.4); }
body.home-active #homeRegistrarRow #homeRegAkin .ic{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:none; flex:none; }
body.home-active #homeRegistrarRow #homeRegAkin .ic img{ width:100%; height:100%; object-fit:cover; object-position:center 12%; }
body.home-active #homeRegistrarRow #homeRegPendiente{ grid-column:2; height:56px; border-radius:999px; background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:0 8px 20px -14px rgba(10,20,50,.4); }
body.home-active #homeRegistrarRow .f-sec{ font-size:var(--fs-2); font-weight:600; line-height:1.15; text-align:left; }
/* 2…) los extras: pantalla entera, arriba el título, debajo todo */
.ini-mod .ini-mod-cuerpo{ display:flex; flex-direction:column; gap:14px; flex:1 1 auto; min-height:0; }
.ini-mod .ini-sk{ height:240px; }
.ini-pag .bm-card{ flex:1 1 auto; justify-content:flex-start; gap:16px; padding:18px; }
.ini-pag .bm-sorpresa{ justify-content:center; background:none; border:0; box-shadow:none; gap:22px; }
.ini-pag .bm-sorpresa .bm-cab{ flex-direction:column; align-items:center; gap:14px; text-align:center; }
.ini-pag .bm-sorpresa .bm-bar{ width:120px; height:auto; }
.ini-pag .bm-sorpresa .bm-frase{ font-size:var(--fs-4,18px); }
.ini-pag .bm-sorpresa .bm-abrir{ padding:18px; }
.ini-pag .bm-ave{ flex-direction:column; align-items:stretch; gap:12px; padding:12px; position:relative; }
.ini-pag .bm-ave .bm-foto{ width:100%; height:clamp(180px,30vh,260px); border-radius:18px; }

.ini-pag .bm-info{ display:flex; flex-direction:column; gap:3px; }
.ini-pag .bm-info b{ font-family:var(--display); font-size:24px; line-height:1.1; }
.mis-datos{ margin:0; display:grid; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel2,var(--panel)); }
.mis-datos > div{ display:flex; justify-content:space-between; gap:14px; padding:10px 14px; border-top:1px solid var(--line); }
.mis-datos > div:first-child{ border-top:0; }
.mis-datos dt{ font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; align-self:center; }
.mis-datos dd{ margin:0; font-size:var(--fs-2); font-weight:600; text-align:right; }
.mis-ant{ display:flex; flex-direction:column; gap:7px; }
.mis-ant b{ font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.mis-ant span{ display:flex; flex-wrap:wrap; gap:6px; }
.mis-ant i{ font-style:normal; font-size:var(--fs-1); padding:5px 11px; border-radius:999px; background:var(--panel2,var(--panel)); border:1px solid var(--line); }
/* Tu gente completa */
.ini-mod[data-ini-mod="gente"] .tg-resumen{ margin:0; font-size:var(--fs-2); color:var(--muted); }
.ini-mod[data-ini-mod="gente"] .tg-resumen b{ color:var(--text); }
.ini-mod[data-ini-mod="gente"] .tg-filtros{ margin:0; }
.ini-mod[data-ini-mod="gente"] .tg-card{ margin-bottom:6px; }
.ini-mod[data-ini-mod="gente"] .tg-vacio{ padding:22px 18px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.ini-mod[data-ini-mod="gente"] .tg-mas{ align-self:stretch; }
/* Tu Aleteo */
.ini-ale-intro{ margin:0; font-size:var(--fs-3,16px); line-height:1.4; color:var(--muted); }
.ini-pag-ale .home-historias-row{ display:flex !important; flex-wrap:wrap; gap:18px 16px; overflow:visible; padding:6px 0; justify-content:flex-start; }
.ini-pag-ale .home-historias-row[style*="none"]{ display:none !important; }
.ini-ale-resumen{ margin:0; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; color:var(--muted); }
.ini-ale-cta{ align-self:stretch; height:52px; border-radius:16px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-family:var(--display); font-weight:700; font-size:17px; cursor:pointer; }
.ini-ale-cta:active{ transform:scale(.98); }
/* puntos laterales */
.ini-dots{ position:fixed; right:5px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:9px; }
body:not(.home-active) .ini-dots, .ini-dots:empty{ display:none; }
.ini-dot{ position:relative; width:6px; height:6px; padding:0; border:0; border-radius:3px; background:color-mix(in srgb,var(--text) 26%,transparent); cursor:pointer; transition:height .25s var(--ease,ease), background .25s; }
.ini-dot::after{ content:''; position:absolute; inset:-8px -10px; }
.ini-dot.on{ height:20px; background:var(--teal); }
/* barra inferior: solo iconos en el Inicio */
body.home-active .bottom-nav-item > span:not(.bn-dot){ display:none; }
@media (prefers-reduced-motion:reduce){ .ini-pag-in{ will-change:auto; } .ini-dot{ transition:none; } }
/* Créditos del mapa plegados en ⓘ (Mapa): no pisan la hoja «Guía de campo». */
#gmap .leaflet-bottom.leaflet-right{bottom:auto;top:92px}
#gmap .leaflet-control-attribution.av-atrib{margin:0 10px 0 0;min-width:28px;min-height:28px;box-sizing:border-box;border-radius:14px;font-size:0 !important;line-height:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2,0 1px 6px rgba(0,0,0,.2));background:var(--panel) !important;color:var(--teal-deep) !important}
#gmap .av-atrib::before{content:'i';font:700 14px/1 var(--display,Fraunces,serif);color:var(--teal-deep)}
#gmap .av-atrib *{display:none}
#gmap .av-atrib.abierta{max-width:min(78vw,300px);height:auto;padding:7px 10px;border-radius:12px;font-size:10px !important;line-height:1.4;display:block;text-align:left}
#gmap .av-atrib.abierta::before{content:none}
#gmap .av-atrib.abierta *{display:inline}
/* Premium: tabla Gratis / Premium. */
.prem-tabla{width:100%;border-collapse:collapse;margin:4px 0 6px;text-align:center}
.prem-tabla th{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 4px 6px}
.prem-tabla th.p{color:var(--gold)}
.prem-tabla td{padding:9px 6px;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-1);vertical-align:middle}
.prem-tabla td:first-child{text-align:left;font-family:var(--display);font-weight:600;font-size:var(--fs-2);color:var(--text);width:38%}
.prem-tabla td.f{color:var(--muted)}
.prem-tabla td.p{color:var(--gold);font-weight:500;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.prem-tabla-nota{margin:0 0 16px;font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);text-align:center}
/* Panel de control: audiencia, uso y rendimiento (28/10/2026). */
.adm-tabs::-webkit-scrollbar{display:none;}
.adm-tab{flex:0 0 auto; padding-left:12px; padding-right:12px;}
.adm-resumen-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.adm-decs{display:flex; flex-direction:column; gap:8px; margin:0 0 6px;}
.adm-dec{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);}
.adm-dec p{margin:0; font-size:var(--fs-2); line-height:1.45;}
.adm-dec-p{flex:none; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--muted);}
.adm-dec.alerta{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,var(--panel));}
.adm-dec.alerta .adm-dec-p{background:var(--gold);}
.adm-dec.bien .adm-dec-p{background:var(--teal);}
.adm-graf{padding:12px;}
.adm-barras{display:flex; align-items:flex-end; gap:2px; height:84px;}
.adm-barras i{flex:1; min-width:0; border-radius:3px 3px 0 0; background:var(--teal); opacity:.85;}
.adm-barras-eje{display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.adm-hbar{padding:7px 0;}
.adm-hbar+.adm-hbar{border-top:1px solid var(--line);}
.adm-hbar-t{display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-2);}
.adm-hbar-t b{font-weight:600; min-width:0; overflow-wrap:anywhere;}
.adm-hbar-t span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap;}
.adm-hbar-p{height:8px; margin-top:5px; border-radius:4px; background:var(--panel2); overflow:hidden;}
.adm-hbar-p u{display:block; height:100%; border-radius:4px; background:var(--teal); text-decoration:none;}
.adm-hbar small{display:block; margin-top:3px; font-size:var(--fs-1); color:var(--muted);}
.adm-pers{grid-template-columns:minmax(0,1fr) auto;}
.adm-tag{display:inline-block; margin-left:4px; padding:1px 7px; border-radius:var(--r-full); border:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-0); font-weight:600; vertical-align:middle; color:var(--muted);}
.adm-tag.nueva{color:var(--teal); border-color:color-mix(in srgb,var(--teal) 50%,var(--line));}
.adm-exp{margin-top:16px;}
.adm-nota-pie{margin:12px 2px 0; font-size:var(--fs-1); line-height:1.45; color:var(--muted);}


/* Proponer un punto por pasos (28/10/2026) */
.pp-prog{display:flex; gap:6px; margin-top:8px;}
.pp-prog span{flex:1; min-width:0;}
.pp-prog i{display:block; height:5px; border-radius:var(--r-full); background:var(--line);}
.pp-prog em{display:block; font:600 10px/1.2 var(--mono); font-style:normal; color:var(--muted); margin-top:4px; letter-spacing:.04em; text-transform:uppercase;}
.pp-prog .hecho i{background:var(--ok);}
.pp-prog .act i{background:var(--c,var(--teal));}
.pp-prog .act em{color:var(--text);}
.pp-mapa{height:230px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--panel2);}
.pp-pin{background:none; border:0;}
.pp-pin span{display:block; width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:3px solid var(--sobre-foto); box-shadow:var(--sh-2); cursor:grab;}
.pp-pie{position:sticky; bottom:0; z-index:5; margin:16px -14px -4px; padding:10px 14px calc(10px + var(--sab,0px)); background:var(--bg2); border-top:1px solid var(--line);}
.pp-pie .pnp-meter{margin-bottom:8px; padding:9px 12px;}
.pp-btns{display:flex; gap:8px;}
.pp-btns .popbtn{flex:1; margin:0; padding:12px 14px; border-radius:99px; border:none; background:var(--teal); color:var(--on-teal); font-family:var(--mono); font-size:var(--fs-2); cursor:pointer;}
.pp-btns .popbtn.sec{flex:0 0 auto; background:transparent; color:var(--teal); border:1px solid var(--teal);}
.pp-btns .popbtn:disabled{opacity:.45; cursor:default;}
.pp-mas{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden;}
.pp-mas > summary{padding:12px 13px; font-size:var(--fs-2); font-weight:600; cursor:pointer;}
.pp-mas[open] > summary{border-bottom:1px solid var(--line);}
.pp-mas > .pnp-f{padding:0 13px; margin-top:12px;}
.pp-mas > .pnp-f:last-child{margin-bottom:13px;}
.pp-fin{text-align:center; padding-top:24px;}
.pp-fin-ic{width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok);}
.pp-fin-ic svg{width:30px; height:30px;}
.pp-fin .pnp-meter{text-align:left; margin-top:14px;}
.pp-mapa.leaflet-container{background:var(--panel2);}
.pp-mapa .leaflet-control-attribution{background:color-mix(in srgb,var(--panel) 82%,transparent); color:var(--muted);}
.pp-mapa .leaflet-control-attribution a{color:var(--muted);}