/* =========================================
   TIPOGRAFÍA LOCAL (sin Google Fonts: funciona en Modo Avión)
   Atkinson Hyperlegible, subconjunto latino (SIL Open Font License)
========================================= */
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('assets/fonts/atkinson-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('assets/fonts/atkinson-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* =========================================
   VARIABLES Y CONFIGURACIÓN BASE
========================================= */
:root {
    --fondo-app: #1e1e1e; /* Gris grafito oscuro para el fondo general */
    --fondo-paneles: #252526; /* Gris carbón para las tarjetas y paneles */
    --color-texto: #E0E0E0;
    --color-texto-secundario: #CCCCCC;
    --color-bordes: #333333; /* Gris medio para separar elementos suavemente */
    --texto-principal: var(--color-texto);
    --texto-secundario: var(--color-texto-secundario);
    /* Color de acento maestro: esmeralda por defecto; otras paletas con :root[data-tema] (abajo) */
    --color-tema: #10b981; /* Verde esmeralda (Gecko) */
    --color-tema-rgb: 16, 185, 129; /* para rgba(var(--color-tema-rgb), alfa) */
    --color-tema-claro: #34d399;
    --color-tema-neon: #00c896; /* resplandores y títulos (antes --verde-neon) */
    --color-tema-neon-rgb: 0, 200, 150;
    --color-limit-break: #a855f7; /* violeta cósmico del Limit Break */
    --color-xp: var(--color-tema); /* alias heredado: estilos en línea de app.js */
    --color-barra-xp: #10b981; /* la barra de XP NO sigue al tema */
    --color-texto-sobre-tema: #1a1a1a; /* texto sobre fondos sólidos del tema (todas las paletas son claras) */
    --color-peligro: #ef4444; /* Rojo para abortar */
}

/* Temas de color: document.documentElement.dataset.tema = '<tema>' (sin atributo = esmeralda).
   Van en :root para que las variables derivadas (--color-xp, --verde-neon…) se recalculen.
   Todas las paletas son de ALTA LUMINOSIDAD para contrastar sobre el fondo grafito; el violeta
   NO es un tema: queda reservado a la animación del Limit Break (--color-limit-break, fijo) */
:root[data-tema="azul-suave"] { /* Azul Suave · Serenidad */
    --color-tema: #60a5fa;
    --color-tema-rgb: 96, 165, 250;
    --color-tema-claro: #bfdbfe;
    --color-tema-neon: #93c5fd;
    --color-tema-neon-rgb: 147, 197, 253;
}

:root[data-tema="blanco-suave"] { /* Hueso · beige arena cálido y mate (sin blanco puro: menos fatiga ocular) */
    --color-tema: #d4c4b7;
    --color-tema-rgb: 212, 196, 183;
    --color-tema-claro: #e3d5ca;
    --color-tema-neon: #ece3db;
    --color-tema-neon-rgb: 236, 227, 219;
    --color-texto-sobre-tema: #1a1a1a; /* grafito: ~10:1 sobre #d4c4b7 */
}

:root[data-tema="lavanda-claro"] { /* Lavanda · desaturada y tranquila */
    --color-tema: #9f7aea;
    --color-tema-rgb: 159, 122, 234;
    --color-tema-claro: #d6bcfa;
    --color-tema-neon: #b794f4;
    --color-tema-neon-rgb: 183, 148, 244;
}

:root[data-tema="ambar"] { /* Ámbar Tostado */
    --color-tema: #d97706;
    --color-tema-rgb: 217, 119, 6;
    --color-tema-claro: #fcd34d;
    --color-tema-neon: #f59e0b;
    --color-tema-neon-rgb: 245, 158, 11;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    user-select: none; /* Evita que el texto se seleccione al hacer toques rápidos en el móvil */
}

html {
    scroll-behavior: smooth;
}

html,
body {
    background-color: var(--fondo-app);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: clamp(0.95rem, 0.25vw + 0.92rem, 1.15rem);
    color: var(--color-texto);
    line-height: 1.5;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
    background-color: var(--fondo-app);
    overflow-x: hidden;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
    font-size: 1rem;
    padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
}

button, input, select, textarea {
    font-family: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* WCAG 1.4.12: Espaciado de párrafos */
p {
    margin-bottom: 2em;
}

/* =========================================
   MARCO MAESTRO (Diseño Flexible & Responsivo)
========================================= */
#marco-app {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--fondo-app);
    position: relative;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* =========================================
   SISTEMA DE VISTAS Y VISIBILIDAD SPA (LA REGLA MAESTRA)
   Espaciado superior estándar, fluido y elegante idéntico a Ajustes
========================================= */
.vista,
.vista-app {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px);
    margin: 0 auto;
    max-width: 1440px;
    overflow-x: clip;
    transition: opacity 0.3s ease;
}

.vista.activo,
.vista.activa,
.vista-app.activo,
.vista-app.activa,
#vista-principal.activo,
#vista-planificador.activo,
#vista-planificacion.activo,
#vista-ajustes.activo,
#vista-completadas.activo,
#vista-completadas.activa,
#vista-completadas:target,
#vista-planificador:target {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#vista-principal {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
}

/* =========================================
   TÍTULOS MAESTROS DE VISTA (JERARQUÍA PREMIUM - PLACA ESTRUCTURADA)
   Placa con fondo sutil, bordes redondeados, ancla inferior y sombra sólida
========================================= */
h1,
.vista h1,
.vista-app h1,
.cabecera-vista h1,
.header-superior h1,
#vista-campamento h1,
#titulo-planificacion,
#titulo-completadas,
#titulo-ajustes {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9) !important;
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15) !important;
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.4) !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    line-height: 1.2 !important;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: var(--color-tema) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================
   RESETEO VIOLENTO Y AISLAMIENTO: MES DEL CALENDARIO
   Gris claro perla, más legible, sin caja de cristal, sin bordes, centrado absoluto
========================================= */
.calendario-cabecera span,
.calendario-header-mes span,
#mes-anio,
.mes-anio,
#titulo-mes-calendario,
.calendario-header-mes h2,
.calendario-header-mes h1 {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #e5e7eb !important;
    text-transform: capitalize !important;
    font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
    text-shadow: none !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
    grid-column: 2 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.header-superior,
.cabecera-vista {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   VISTA: PLANIFICADOR (Hereda la regla maestra)
========================================= */
#vista-planificador,
#vista-planificacion {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* Sin display aquí: este id ganaba a .vista { display: none } y el Planificador se pintaba
       entero bajo el Campamento al arrancar (scroll "infinito"). Lo muestran .activo o mostrarVista() */
    align-items: flex-start;
    justify-content: flex-start;
}

#vista-planificador .header-superior,
#vista-planificacion .header-superior {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    box-sizing: border-box;
    visibility: visible !important;
    opacity: 1 !important;
}

#vista-planificador h1,
#vista-planificacion h1,
#titulo-planificacion {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9) !important;
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15) !important;
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.4) !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
    color: var(--color-tema) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    line-height: 1.2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================
   VISTA: TAREAS COMPLETADAS (Hereda la regla maestra)
========================================= */
#vista-completadas,
.vista-completadas {
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
}

#vista-completadas .header-superior,
#vista-completadas .cabecera-vista {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
}

#vista-completadas h1,
#titulo-completadas {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9) !important;
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15) !important;
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.4) !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
    color: var(--color-tema) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    line-height: 1.2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100%;
    box-sizing: border-box;
}

#vista-completadas .seccion-central {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#vista-completadas .tarjeta-ajustes {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 1440px !important;
    background-color: var(--fondo-paneles) !important;
}

#contenido-planificacion,
#vista-planificacion .seccion-central,
#vista-planificador .seccion-central,
#subvista-calendario {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    align-items: flex-start;
    justify-content: flex-start;
}

/* =========================================
   PLANIFICADOR: PANEL CONTINUO Y BARRA STICKY
========================================= */
.barra-sticky-planificador,
.interruptor-vistas-planificador { 
    position: sticky; 
    top: 0; 
    z-index: 10;
    display: flex; 
    gap: 8px;
    background: rgba(30, 30, 30, 0.85); 
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 14px; 
    padding: 6px; 
    margin-bottom: 22px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    width: 100%; 
    box-sizing: border-box;
}

.barra-sticky-planificador .btn-switch,
.interruptor-vistas-planificador .btn-switch { 
    flex: 1; 
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid transparent; 
    padding: 10px 12px; 
    border-radius: 10px; 
    color: var(--color-texto-secundario); 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.25s ease; 
    font-size: 0.92rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.barra-sticky-planificador .btn-switch:hover,
.interruptor-vistas-planificador .btn-switch:hover { 
    color: #ffffff; 
    background: rgba(255, 255, 255, 0.08);
}

.barra-sticky-planificador #btn-switch-crear.activo,
.interruptor-vistas-planificador #btn-switch-crear.activo { 
    background: rgba(var(--color-tema-rgb), 0.18); 
    color: var(--color-tema-claro); 
    border: 1px solid var(--color-tema);
    box-shadow: 0 0 14px rgba(var(--color-tema-rgb), 0.35); 
}

.barra-sticky-planificador #btn-switch-banco.activo,
.interruptor-vistas-planificador #btn-switch-banco.activo { 
    background: rgba(75, 85, 99, 0.25); 
    color: #e2e8f0; 
    border: 1px solid #64748b;
    box-shadow: 0 0 14px rgba(75, 85, 99, 0.3); 
}

/* SECCIÓN 1: Creación de Misiones (Verde Esmeralda Neón) */
#seccion-crear-mision,
.creador-avanzado,
.seccion-planificador-creacion {
    background: linear-gradient(180deg, rgba(var(--color-tema-rgb), 0.04) 0%, var(--fondo-paneles) 40%);
    padding: clamp(16px, 2vw, 24px);
    border-radius: 16px;
    border: 1.5px solid rgba(var(--color-tema-rgb), 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(var(--color-tema-rgb), 0.06);
    margin-bottom: 25px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-margin-top: 75px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#seccion-crear-mision:focus-within,
.creador-avanzado:focus-within {
    border-color: rgba(var(--color-tema-rgb), 0.55);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--color-tema-rgb), 0.12);
}

.cabecera-seccion-creacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid rgba(var(--color-tema-rgb), 0.2);
    padding-bottom: 10px;
}

.cabecera-seccion-creacion h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    color: var(--color-tema-claro);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

/* SECCIÓN 2: Banco de Tareas / Buscador (Gris Pizarra Neutro #4b5563) */
#seccion-banco-tareas,
.seccion-planificador-banco {
    background: linear-gradient(180deg, rgba(75, 85, 99, 0.08) 0%, var(--fondo-paneles) 40%);
    padding: clamp(16px, 2vw, 24px);
    border-radius: 16px;
    border: 1.5px solid #4b5563;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(75, 85, 99, 0.06);
    margin-bottom: 35px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-margin-top: 75px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#seccion-banco-tareas:focus-within {
    border-color: #64748b;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 116, 139, 0.15);
}

.cabecera-seccion-banco {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.25);
    padding-bottom: 10px;
}

.cabecera-seccion-banco h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    color: var(--color-tema); /* verde esmeralda: sección principal del Planificador */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

#input-planificacion {
    width: 100%;
    padding: 1rem 3.25rem 1rem 1.25rem;
    font-size: 1rem;
    background-color: var(--fondo-paneles);
    color: var(--texto-principal);
    border: 1.5px solid var(--color-bordes);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#input-planificacion::placeholder {
    color: var(--texto-secundario);
    opacity: 0.8;
}

#input-planificacion:focus {
    border-color: var(--color-tema);
    box-shadow: 0 0 0 3px rgba(var(--color-tema-rgb), 0.25);
}

/* Subvista Calendario: Cabecera con título centrado matemáticamente */
#vista-calendario .calendario-header-mes,
#subvista-calendario .calendario-header-mes,
.calendario-header-mes,
.calendario-cabecera {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 0 clamp(10px, 2vw, 18px) 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.espaciador-calendario-header {
    grid-column: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    min-width: 0 !important;
}

.calendario-cabecera span,
.calendario-header-mes span,
#mes-anio,
.mes-anio,
#titulo-mes-calendario,
.calendario-header-mes h1,
.calendario-header-mes h2 {
    grid-column: 2 !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #e5e7eb !important;
    text-transform: capitalize !important;
    font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.controles-mes {
    grid-column: 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-items: center !important;
    gap: 8px !important;
}

#app-container,
.app-container {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    background-color: var(--fondo-app);
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   SISTEMA DE PANTALLAS Y TRANSICIONES
========================================= */
.pantalla {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 0;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.pantalla.activa,
.creador-mision-rapida.activa {
    display: flex;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}

.pantalla.oculta,
.oculta,
.contenedor-mision-activa.oculta {
    display: none !important;
}

/* =========================================
   VISTA: CAMPAMENTO
========================================= */
#vista-campamento header {
    margin-top: 0 !important;
    margin-bottom: 1rem;
}

/* Fila superior del header: título alineado y centrado */
.header-superior,
.cabecera-vista {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#vista-campamento h1,
.cabecera-vista h1,
.header-superior h1,
#titulo-planificacion,
#titulo-completadas,
#titulo-ajustes {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.015) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9) !important;
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15) !important;
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.4) !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
    color: var(--color-tema) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-weight: 700 !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Botón de Ajustes (⚙️) */
.btn-icono {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 50%;
    line-height: 1;
    transition: transform 0.15s ease, opacity 0.2s;
}

.btn-icono:active {
    transform: scale(0.9);
    opacity: 0.8;
}

/* =========================================
   MENÚ LATERAL (HAMBURGUESA)
========================================= */
#menu-lateral,
.menu-lateral {
    position: fixed;
    top: 0;
    left: -340px;
    right: auto;
    width: 290px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: var(--fondo-paneles);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.75);
    z-index: 100000; /* Supera al overlay z-index: 99999 */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#menu-lateral.abierto,
.menu-lateral.abierto {
    left: 0;
    right: auto;
}

#btn-menu-hamburguesa {
    position: fixed;
    top: 15px;
    left: 15px;
    right: auto;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(22, 24, 34, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: var(--texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

#btn-menu-hamburguesa:hover {
    background: rgba(30, 34, 48, 0.95);
    border-color: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

#btn-menu-hamburguesa:active {
    transform: scale(0.92);
}

#overlay-menu,
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 99999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#overlay-menu.activo,
.overlay-menu.activo {
    opacity: 1;
    pointer-events: auto;
}

#menu-lateral .lista-menu {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    padding: 15px 0 30px 0;
    margin: 0;
}

.btn-cerrar-menu {
    background: transparent;
    border: none;
    color: var(--color-texto-secundario);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-cerrar-menu:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.perfil-menu {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 20px;
    border-bottom: 1px solid var(--color-bordes);
    background: var(--fondo-paneles);
}

.perfil-menu h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--texto-principal);
}

.perfil-menu p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--texto-secundario);
}

.avatar-menu {
    background: var(--color-tema);
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    overflow: hidden;
}

#menu-lateral .lista-menu {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    overflow-y: auto;
}

#menu-lateral .lista-menu li {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s, color 0.2s;
    margin-bottom: 0;
}

#menu-lateral .lista-menu li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-tema);
}

#menu-lateral .lista-menu li:focus,
#menu-lateral .lista-menu li:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: -2px;
}

#menu-lateral .lista-menu li.activo {
    background: rgba(var(--color-tema-rgb), 0.1);
    border-left: 4px solid var(--color-tema);
    color: var(--color-tema);
}

/* Panel de Gamificación */
.panel-estadisticas {
    background-color: var(--fondo-paneles);
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#nivel-display {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.barra-xp {
    width: 100%;
    height: 12px;
    background-color: #2a2d3d;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

#xp-progreso {
    height: 100%;
    background-color: var(--color-barra-xp);
    box-shadow: 0 0 10px var(--color-barra-xp);
    border-radius: 10px;
    transition: width 0.5s ease-out; /* Animación al ganar XP */
}

#xp-texto {
    font-size: 0.85rem;
    color: var(--texto-secundario);
}

/* Distribución del contenido principal */
#vista-campamento main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Permite a los hijos flex encogerse/crecer correctamente */
}

/* Compañero en el Campamento */
#zona-companero-campamento {
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}

#zona-companero-campamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: clamp(10px, 2.5vh, 20px) 0 0 0 !important;
}

#avatar-gecko,
.estado-avatar {
    margin-bottom: 0 !important;
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    text-align: center;
}

/* =========================================
   CENTRO DE MANDO INTERACTIVO (COMMAND BAR)
========================================= */
.command-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
    width: 100%;
}

.btn-command {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    line-height: 1;
}

.btn-command:active {
    transform: scale(0.92);
}

/* Botón 1: Micrófono (Gris Pizarra Neutro) */
.btn-command-mic,
#btn-fab-mic.btn-command {
    background-color: #334155; /* Slate 700 */
    color: #f1f5f9;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(100, 116, 139, 0.15);
}

.btn-command-mic:hover,
#btn-fab-mic.btn-command:hover {
    background-color: #475569; /* Slate 600 */
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 16px rgba(148, 163, 184, 0.25);
}

/* Botón 2: Añadir Misión (+) (Verde Esmeralda Acento) */
.btn-command-add,
#btn-fab-add.btn-command {
    background-color: var(--color-tema); /* var(--color-tema) */
    color: #0f172a;
    font-weight: 900;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(var(--color-tema-rgb), 0.4), 0 0 12px rgba(var(--color-tema-rgb), 0.25);
}

.btn-command-add:hover,
#btn-fab-add.btn-command:hover {
    background-color: var(--color-tema-claro); /* Emerald 400 */
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 26px rgba(var(--color-tema-rgb), 0.6), 0 0 20px rgba(var(--color-tema-rgb), 0.4);
}

#avatar-usuario-campamento {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#avatar-usuario-campamento img {
    width: clamp(120px, 32vw, 160px);
    height: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    /* Sombra base que simula que el personaje está proyectando sombra en el fondo grafito */
    filter: drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.4));
    animation: flotarCompanero 4s ease-in-out infinite;
}

@keyframes flotarCompanero {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.seccion-central {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
}

#vista-campamento .seccion-central {
    margin: 20px auto 0 auto;
    background-color: var(--fondo-paneles);
    border-radius: 15px;
    padding: 15px;
    border: 1px solid var(--color-bordes);
    width: 100%;
    max-width: 1440px;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
}

/* =========================================
   RUTINAS FIJAS: CABECERA Y ACORDEÓN
========================================= */
.acordeon-campamento {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.acordeon-campamento summary {
    font-weight: bold;
    color: var(--color-tema);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    user-select: none;
}

.acordeon-campamento summary::-webkit-details-marker {
    display: none;
}

.titulo-summary {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-tema);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

#acordeon-pendientes summary {
    font-weight: bold;
    color: var(--color-tema);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.item-reciclado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background-color: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
    min-width: 0;
}

.item-reciclado:hover {
    border-color: rgba(var(--color-tema-rgb), 0.35);
    transform: translateY(-1px);
}

/* =========================================
   CUADRÍCULAS INTELIGENTES (CSS GRID FLUIDO)
========================================= */
.grid-tarjetas-fluido,
#lista-rutinas-campamento,
#lista-misiones-hoy,
#lista-tareas-backlog,
#lista-recicladas {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: clamp(14px, 1.8vw, 20px) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Estado vacío en cuadrículas: ocupa todo el ancho */
#lista-rutinas-campamento > li:only-child,
#lista-misiones-hoy > li:only-child,
#lista-recicladas > li:only-child,
#lista-tareas-backlog > li:only-child {
    grid-column: 1 / -1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 10px 0 !important;
}

.btn-restaurar {
    background: transparent;
    color: var(--color-tema);
    border: 1px solid var(--color-tema);
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 8px;
    transition: background 0.2s, color 0.2s;
}

.btn-restaurar:hover {
    background: var(--color-tema);
    color: #000;
}

/* =========================================
   PANEL INFERIOR (BOTTOM SHEET) Y FABS
========================================= */
#overlay-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10010;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#panel-creacion {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 10011;
    background-color: var(--fondo-paneles);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}

.panel-inferior {
    box-sizing: border-box;
}

#vista-campamento {
    padding-bottom: 40px;
    box-sizing: border-box;
}

#vista-campamento .seccion-central {
    margin-bottom: 30px;
}

/* Contenedor del input principal y botón de dictado */
.grupo-input-principal {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

#btn-dictado {
    position: absolute;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    transition: filter 0.2s ease, transform 0.2s ease;
}

#btn-dictado.grabando,
.grabando {
    filter: drop-shadow(0 0 5px red);
}

/* Input para el objetivo de la misión */
#input-nombre-mision {
    width: 100%;
    padding: 1rem 3.25rem 1rem 1.25rem;
    font-size: 1rem;
    background-color: var(--fondo-paneles);
    color: var(--texto-principal);
    border: 1.5px solid #2a2d3d;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#input-nombre-mision::placeholder {
    color: var(--texto-secundario);
    opacity: 0.8;
}

#input-nombre-mision:focus {
    border-color: var(--color-tema);
    box-shadow: 0 0 0 3px rgba(var(--color-tema-rgb), 0.25);
}

/* Desplegable de subtareas */
#desplegable-subtareas,
details {
    width: 100%;
    margin-bottom: 0.75rem;
}

#desplegable-subtareas summary,
summary {
    cursor: pointer;
    color: var(--color-tema);
    font-weight: bold;
    padding: 10px 0;
    list-style: none;
    user-select: none;
}

summary::-webkit-details-marker {
    display: none;
}

/* Contenedor de input y botón de subtarea */
.grupo-input-subtarea {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-bottom: 0.75rem;
}

.contenedor-dictado-subtarea {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.contenedor-dictado-subtarea input {
    width: 100%;
    padding-right: 35px;
}

.btn-micro {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

#input-subtarea {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a2d3d;
    padding: 0.4rem 0.25rem;
    font-size: 0.875rem;
    color: var(--texto-principal);
    outline: none;
    transition: border-color 0.2s ease;
}

#input-subtarea::placeholder {
    color: var(--texto-secundario);
    opacity: 0.7;
}

#input-subtarea:focus {
    border-bottom-color: var(--color-tema);
}

#btn-add-subtarea {
    background: var(--fondo-paneles);
    border: 1px solid #2a2d3d;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--texto-principal);
    padding: 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

#btn-add-subtarea:hover {
    border-color: var(--color-tema);
    background-color: rgba(var(--color-tema-rgb), 0.15);
}

#btn-add-subtarea:active {
    transform: scale(0.92);
}

/* Lista de subtareas en el campamento (contenedor de etiquetas/píldoras) */
#lista-subtareas-campamento {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0.5rem 0;
    width: 100%;
    max-height: 95px;
    overflow-y: auto;
}

/* Píldoras de subtarea en el campamento */
.subtarea-pildora {
    background-color: var(--fondo-paneles);
    border: 1px solid #2a2d3d;
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    color: var(--texto-principal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-break: break-word;
    max-width: 100%;
    transition: border-color 0.2s ease;
}

.subtarea-pildora:hover {
    border-color: #3b4054;
}

.btn-eliminar-subtarea {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--texto-secundario);
    transition: color 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.btn-eliminar-subtarea:hover {
    color: var(--color-peligro);
    transform: scale(1.2);
}

/* Ítems de subtarea en la misión y estado completado */
.subtarea-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.35rem 0;
    font-size: 0.95rem;
    color: var(--texto-principal);
    word-break: break-word;
}

.subtarea-item input[type="checkbox"] {
    accent-color: var(--color-tema);
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.subtarea-completada {
    opacity: 0.65;
}

.subtarea-completada .subtarea-texto {
    text-decoration: line-through;
}

/* Badge con el tiempo de completado */
.badge-tiempo {
    color: var(--color-tema);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    background-color: rgba(var(--color-tema-rgb), 0.12);
    border: 1px solid rgba(var(--color-tema-rgb), 0.25);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none !important;
}

/* Regla global para ocultar scrollbars nativos */
::-webkit-scrollbar {
    display: none;
}

/* Controles de misión anclados a la parte inferior para ergonomía con el pulgar */
.controles-mision {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Botones */
.btn-principal {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--fondo-app);
    background-color: var(--color-tema);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--color-tema-rgb), 0.3);
    transition: transform 0.1s, background-color 0.2s;
}

.btn-principal:active {
    transform: scale(0.97); /* Efecto táctil al pulsar */
}

/* =========================================
   VISTA: MISIÓN (HIPERFOCO)
========================================= */
#vista-mision {
    justify-content: center;
    align-items: center;
    background-color: #12141c; /* Grafito oscuro: cero distracciones sin la fatiga visual del negro puro */
}

.entorno-inmersivo {
    text-align: center;
    margin-bottom: 4rem;
}

#tiempo-restante {
    font-size: 5rem; /* Números gigantes */
    font-weight: 300;
    letter-spacing: 5px;
    color: var(--color-tema);
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums; /* Evita que el texto salte al cambiar los segundos */
}

#titulo-mision-activa {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: 0.5rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    word-break: break-word;
}

#titulo-mision-activa:empty {
    display: none;
}

/* Lista activa sin restricciones de altura ni scrollbars visibles */
#lista-subtareas-activa {
    margin: 0.75rem auto 1rem auto;
    max-width: 320px;
    width: 100%;
    text-align: left;
    scrollbar-width: none;
}

#lista-subtareas-activa:empty {
    display: none;
}

#lista-subtareas-activa::-webkit-scrollbar {
    display: none;
}

#estado-mision {
    font-size: 1.1rem;
    color: var(--texto-secundario);
}

.aura-concentracion {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

#img-companero-mision {
  width: 170px; /* Avatar mucho más grande y anclado visualmente */
  height: auto;
  object-fit: contain;
  animation: latidoZen 6s ease-in-out infinite;
}

@keyframes latidoZen {
  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 10px rgba(var(--color-tema-rgb), 0.2));
  }
  50% {
    transform: translateY(-8px) scale(0.97); /* Inhala: sube un poco y se concentra hacia adentro */
    filter: drop-shadow(0 0 30px rgba(var(--color-tema-rgb), 0.9));
  }
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 10px rgba(var(--color-tema-rgb), 0.2));
  }
}

/* Grupo de botones en la vista de misión */
.grupo-botones-mision {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 2rem;
    width: 100%;
    flex-wrap: wrap;
}

.btn-exito {
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-texto-sobre-tema);
    background-color: var(--color-tema);
    border: 2px solid var(--color-tema);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-exito:hover {
    background-color: rgba(var(--color-tema-rgb), 0.12);
}

.btn-exito:active {
    background-color: rgba(var(--color-tema-rgb), 0.25);
    transform: scale(0.98);
}

.btn-peligro {
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-texto-secundario);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

/* Abortar no es fracasar: ámbar de descanso, nunca rojo de error */
.btn-peligro:hover,
.btn-peligro:active {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.btn-peligro:active {
    transform: scale(0.98);
}

/* =========================================
   MODAL FLOTANTE (FIN DE MISIÓN Y HISTORIAL)
========================================= */
.modal-overlay,
#modal-fin-mision {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

/* =========================================
   MODAL FLOTANTE: SELECCIÓN DE FOTO DE PERFIL / AVATARES
========================================= */
#modal-foto-perfil {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999 !important; /* Profundidad máxima absoluta */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
}

#modal-foto-perfil.activo,
#modal-foto-perfil.mostrar,
.modal-overlay.activo,
.modal-overlay.mostrar {
    display: flex !important;
}

#modal-foto-perfil .modal-contenido {
    max-height: 90vh;
    overflow-y: auto;
    animation: modalEntrada 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-contenido {
    background: var(--fondo-paneles);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--color-bordes);
    width: 90%;
    max-width: 650px; /* Aumentado para dar espacio real a los avatares */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

.modal-tarjeta,
#modal-historial .modal-contenido {
    background: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(var(--color-tema-rgb), 0.1);
    text-align: center;
    animation: modalEntrada 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#grid-avatares-perfil {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 15px;
}

#grid-avatares-perfil .card-avatar {
    background: var(--fondo-app);
    border: 2px solid var(--color-bordes);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 150px;
}

#grid-avatares-perfil .card-avatar:hover {
    border-color: var(--color-tema);
    transform: translateY(-2px);
}

#grid-avatares-perfil .card-avatar img {
    width: 85px !important; /* Avatares mucho más grandes y definidos */
    height: 85px !important;
    object-fit: contain;
}

#modal-sin-pendientes,
.modal-mensaje-exito {
    display: none;
    color: var(--color-texto);
    margin: 15px 0;
    font-size: 0.95rem;
}

/* Historial de Expediciones */
#lista-historial {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: none;
}

#lista-historial li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-bordes);
    font-size: 0.95rem;
    margin-bottom: 0;
}

::-webkit-scrollbar {
    display: none;
}

.btn-secundario {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--texto-secundario);
    background-color: transparent;
    border: 1px solid #2a2d3d;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-secundario:hover {
    color: var(--texto-principal);
    background-color: rgba(255, 255, 255, 0.05);
}

@keyframes modalEntrada {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-titulo {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--texto-principal);
    margin-bottom: 1rem;
}

.modal-xp-caja {
    background: rgba(var(--color-tema-rgb), 0.1);
    border: 1px solid rgba(var(--color-tema-rgb), 0.25);
    border-radius: 14px;
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-xp-etiqueta {
    font-size: 0.75rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.modal-xp-valor {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-tema);
}

.modal-seccion-pendientes {
    text-align: left;
    margin-bottom: 1.25rem;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: none;
}

.modal-seccion-pendientes::-webkit-scrollbar {
    display: none;
}

.modal-subtitulo {
    font-size: 0.85rem;
    color: var(--texto-secundario);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

#modal-lista-pendientes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#modal-lista-pendientes li {
    font-size: 0.875rem;
    color: var(--texto-principal);
    background-color: #151822;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--color-peligro);
    word-break: break-word;
}

.modal-mensaje-exito {
    color: var(--color-tema);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.modal-botones {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.btn-modal-reciclar {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fondo-app);
    background-color: var(--color-tema);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--color-tema-rgb), 0.35);
    transition: transform 0.1s, opacity 0.2s;
}

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

.btn-modal-cerrar {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--texto-secundario);
    background-color: transparent;
    border: 1px solid #2a2d3d;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-modal-cerrar:hover {
    color: var(--texto-principal);
    background-color: rgba(255, 255, 255, 0.05);
}

/* =========================================
   VISTA DE CALENDARIO MENSUAL
========================================= */
#subvista-calendario {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.calendario-header-mes {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px 0;
    padding: 0 !important;
    box-sizing: border-box;
}

.dias-semana-header {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    gap: 5px !important;
    box-sizing: border-box;
}

#grid-mes-calendario,
.grid-mes-calendario,
.grid-calendario-mensual {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid-mes-calendario div,
.grid-calendario-mensual div,
.celda-calendario {
    background-color: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 10px;
    padding: 10px;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.celda-calendario:hover {
    border-color: var(--color-tema);
}

.celda-calendario.hoy {
    border-color: var(--color-tema);
    background: rgba(var(--color-tema-rgb), 0.05);
}

.celda-calendario.vacia {
    opacity: 0.2;
    pointer-events: none;
    border: none;
    background: transparent;
    cursor: default;
}

.numero-dia {
    font-weight: bold;
    color: var(--color-texto);
    font-size: 0.95rem;
}

.info-dia-mini {
    font-size: 0.75rem;
    color: #888;
}

.chip-evento-cal {
    background: rgba(var(--color-tema-rgb), 0.15);
    color: var(--color-tema);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    border-left: 2px solid var(--color-tema);
}

.chip-cita {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-left: 2px solid #3b82f6;
}

.chip-examen {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-left: 2px solid #ef4444;
}

.chip-tramite {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-left: 2px solid #f59e0b;
}

.chip-personal {
    background: rgba(var(--color-tema-rgb), 0.15);
    color: var(--color-tema);
    border-left: 2px solid var(--color-tema);
}

.banner-alerta-proactiva {
    background-color: var(--fondo-app);
    border: 1px solid var(--color-tema);
    border-radius: 8px;
    color: var(--color-texto-secundario);
    padding: 12px;
    font-size: 0.9rem;
    margin: 12px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.banner-alerta-proactiva p {
    color: var(--color-texto-secundario);
    margin: 0;
}

.banner-alerta-proactiva button {
    color: var(--color-texto-secundario);
}

/* Modal Flotante Centrado / Modal Calendario Día */
#modal-calendario-dia,
.modal-centrado {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 20px;
    padding: 25px;
    z-index: 10005; /* Asegurar que está por encima del overlay */
    box-shadow: 0 15px 50px rgba(0,0,0,0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

#modal-calendario-dia.abierto,
.modal-centrado.abierto {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#overlay-modal-calendario {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10004;
    transition: opacity 0.3s ease;
}

/* Bugfix móvil: estos overlays comparten la clase .overlay-menu, que en móvil fuerza
   z-index: 99999 !important y dejaba el modal borroso DEBAJO de su propio overlay.
   Los ID con !important ganan a la clase y devuelven el orden correcto overlay < modal. */
#overlay-modal-calendario,
#overlay-panel {
    z-index: 100004 !important;
}

#modal-calendario-dia,
#panel-creacion {
    z-index: 100005 !important;
}

#modal-calendario-dia .grupo-input-principal,
#modal-calendario-dia input#input-evento-cal {
    width: 100% !important;
    box-sizing: border-box;
}

#modal-calendario-dia .grupo-input-principal {
    position: relative;
    display: flex;
    align-items: center;
    width: 100% !important;
}

#modal-calendario-dia input#input-evento-cal {
    flex-grow: 1;
    padding: 12px 42px 12px 15px;
    font-size: 1rem;
    background-color: var(--fondo-app) !important;
    color: var(--color-texto) !important;
    border: 1px solid var(--color-bordes) !important;
    border-radius: 8px;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modal-calendario-dia input#input-evento-cal:focus {
    border-color: var(--color-tema) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.2);
}

#modal-calendario-dia #btn-mic-evento-cal {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    z-index: 2;
}

#modal-calendario-dia select {
    background-color: var(--fondo-app) !important;
    color: var(--color-texto) !important;
    border: 1px solid var(--color-bordes) !important;
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

#modal-calendario-dia input::placeholder {
    color: var(--color-texto-secundario);
    opacity: 0.7;
}

.modal-cal-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#lista-eventos-dia {
    margin-bottom: 20px;
    max-height: 180px;
    overflow-y: auto;
}

#modal-calendario-dia .grupo-input-principal {
    margin-bottom: 12px;
}

.modal-cal-grid-tiempo {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    margin-bottom: 12px;
}

.modal-cal-grid-tipo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

#modal-calendario-dia label {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    display: block;
    margin-bottom: 4px;
}

#modal-calendario-dia input#input-hora-cal {
    width: 100%;
}

#modal-calendario-dia input#input-lugar-cal {
    width: 100%;
    padding: 8px 10px;
    background: var(--fondo-app);
    color: var(--color-texto);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    box-sizing: border-box;
}

#modal-calendario-dia #btn-guardar-evento-cal {
    width: 100%;
}

/* =========================================
   DESGLOSE MÁGICO Y BACKLOG
========================================= */
#input-nuevo-paso {
    background-color: var(--fondo-app) !important;
    color: var(--color-texto) !important;
    border: 1px solid var(--color-bordes) !important;
    border-radius: 8px;
    padding: 10px 38px 10px 12px !important;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#input-nuevo-paso:focus {
    border-color: var(--color-tema) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.2);
}

#input-nuevo-paso::placeholder {
    color: var(--color-texto-secundario);
    opacity: 0.7;
}

.item-micro-paso { display: flex; justify-content: space-between; align-items: center; background-color: var(--fondo-app); padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; border: 1px solid var(--color-bordes); color: var(--color-texto); }
.item-micro-paso button { background: none; border: none; color: #f87171; cursor: pointer; font-size: 0.9rem; }

.card-tarea-backlog,
#lista-tareas-backlog > li {
    background-color: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 12px;
    padding: clamp(12px, 1.5vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    min-width: 0;
}

.card-tarea-backlog:hover,
#lista-tareas-backlog > li:hover {
    border-color: #64748b;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(100, 116, 139, 0.12);
    transform: translateY(-2px);
}

.card-tarea-backlog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.card-tarea-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-texto);
    word-break: break-word;
}

.card-tarea-acciones {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.badge-micropasos-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-tema);
    background: rgba(var(--color-tema-rgb), 0.12);
    border: 1px solid rgba(var(--color-tema-rgb), 0.25);
    padding: 2px 8px;
    border-radius: 12px;
    width: fit-content;
    font-weight: 500;
}

.lista-micropasos-preview {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-micropaso-preview {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-accion-backlog {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-activar-backlog {
    background: rgba(var(--color-tema-rgb), 0.18);
    color: var(--color-tema);
    border: 1px solid var(--color-tema);
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-activar-backlog:hover {
    background: var(--color-tema);
    color: var(--color-texto-sobre-tema);
    transform: translateY(-1px);
}

.btn-borrar-backlog {
    background: none;
    border: none;
    color: #f87171;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
}

.btn-borrar-backlog:hover {
    opacity: 0.8;
}

.btn-editar-backlog {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    transition: opacity 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.btn-editar-backlog:hover {
    color: #e2e8f0;
    opacity: 1;
    transform: scale(1.1);
}


.input-accesible-fecha {
    width: 100%;
    padding: 9px 12px;
    background-color: var(--fondo-app);
    color: var(--color-texto);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    color-scheme: dark;
}

.input-accesible-fecha:focus {
    border-color: var(--color-tema);
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.2);
}

.input-accesible-fecha::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.grupo-control-tarea {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.label-control-tarea {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    font-weight: 600;
}

/* Selector y Botón Eliminar Categoría */
.fila-selector-accion {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.select-accesible {
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    background-color: var(--fondo-app);
    color: var(--color-texto);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select-accesible:focus {
    border-color: var(--color-tema);
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.2);
}

.btn-accion-icono {
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-eliminar-cat {
    width: 38px;
    height: 38px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    font-size: 0.95rem;
}

.btn-eliminar-cat:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    transform: scale(1.05);
}

.btn-eliminar-cat:active {
    transform: scale(0.95);
}

/* Creador inline de nueva categoría */
.fila-crear-categoria {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    margin-top: 2px;
}

.input-inline-cat {
    flex-grow: 1;
    min-width: 0;
    padding: 7px 10px;
    background-color: var(--fondo-app);
    color: var(--color-texto);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-inline-cat::placeholder {
    color: var(--color-texto-secundario);
    opacity: 0.65;
}

.input-inline-cat:focus {
    border-color: var(--color-tema);
}

.btn-agregar-cat {
    width: 32px;
    height: 32px;
    background: rgba(var(--color-tema-rgb), 0.15);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
    color: var(--color-tema);
    font-size: 1rem;
    font-weight: bold;
}

.btn-agregar-cat:hover {
    background: var(--color-tema);
    color: #000;
    transform: scale(1.05);
}

.btn-agregar-cat:active {
    transform: scale(0.95);
}

/* Control de Duración Flexible */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.contenedor-duracion-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-accesible-numero {
    width: 100%;
    padding: 9px 42px 9px 12px;
    background-color: var(--fondo-app);
    color: var(--color-texto);
    border: 1px solid var(--color-bordes);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-accesible-numero:focus {
    border-color: var(--color-tema);
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.2);
}

.sufijo-duracion {
    position: absolute;
    right: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    pointer-events: none;
}

.pills-duracion-sugerida {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.btn-pill-duracion {
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--color-bordes);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto-secundario);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-pill-duracion:hover {
    border-color: var(--color-tema);
    color: var(--color-tema);
    background: rgba(var(--color-tema-rgb), 0.1);
}

.btn-pill-duracion:active {
    transform: scale(0.95);
}

/* Banner de edición activa - Destacado sin deslumbrar (fondo mate y reborde verde XP) */
#banner-edicion-backlog,
.banner-edicion-activa {
    background: rgba(var(--color-tema-rgb), 0.05) !important;
    border: 1px solid var(--color-tema) !important;
    color: var(--color-texto) !important;
    box-shadow: 0 0 10px rgba(var(--color-tema-rgb), 0.1) !important;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    animation: fadeIn 0.2s ease-in-out;
}

#banner-edicion-backlog .icono-edicion,
.banner-edicion-activa .icono-edicion {
    opacity: 0.9;
}

#banner-edicion-backlog button,
.banner-edicion-activa button,
.btn-cancelar-edicion {
    background: transparent !important;
    color: var(--color-texto-secundario) !important;
    border: 1px solid var(--color-bordes) !important;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#banner-edicion-backlog button:hover,
.banner-edicion-activa button:hover,
.btn-cancelar-edicion:hover {
    background: rgba(var(--color-tema-rgb), 0.15) !important;
    color: var(--color-tema) !important;
    border-color: var(--color-tema) !important;
}

/* Barra de filtros de categorías: Sin scroll horizontal, wrap limpio y redondeado */
.barra-filtros-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
    margin-bottom: 14px;
    overflow: visible;
    scrollbar-width: none;
}

.barra-filtros-categorias::-webkit-scrollbar {
    display: none;
}

.btn-filtro-cat {
    padding: 7px 14px;
    border-radius: 9999px;
    border: 1px solid var(--color-bordes);
    background: var(--fondo-paneles);
    color: var(--color-texto-secundario);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-filtro-cat:hover {
    color: var(--color-texto);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.btn-filtro-cat.activo {
    background: var(--color-tema);
    color: var(--color-texto-sobre-tema);
    border-color: var(--color-tema);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(var(--color-tema-rgb), 0.35);
    transform: translateY(-1px);
}

/* Chips de categoría en tarjetas de backlog */
.chip-categoria {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.chip-cat-gioronix {
    background: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.chip-cat-asir {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.chip-cat-casa {
    background: rgba(var(--color-tema-rgb), 0.18);
    color: var(--color-tema-claro);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
}

.chip-cat-twitch {
    background: rgba(217, 70, 239, 0.18);
    color: #e879f9;
    border: 1px solid rgba(217, 70, 239, 0.35);
}

.chip-cat-custom {
    background: rgba(var(--color-tema-rgb), 0.14);
    color: var(--color-tema-claro);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
}

.badge-duracion-cuenta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    width: fit-content;
}

.contenedor-meta-backlog {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

/* =========================================
   DISEÑO RESPONSIVO: MÓVIL Y TABLET (<= 899px)
========================================= */
@media (max-width: 899px) {
    #marco-app {
        box-shadow: none;
    }

    #menu-lateral,
    .menu-lateral {
        position: fixed !important;
        top: 0 !important;
        left: -340px;
        right: auto !important;
        width: 290px;
        max-width: 85vw;
        height: 100vh !important;
        height: 100dvh !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.75);
        z-index: 100000 !important;
    }

    #menu-lateral.abierto,
    .menu-lateral.abierto {
        left: 0 !important;
        right: auto !important;
    }

    #overlay-menu,
    .overlay-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
    }

    #btn-menu-hamburguesa {
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        right: auto !important;
        z-index: 9999 !important;
        display: flex !important;
    }

    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    #vista-planificador .header-superior,
    #vista-completadas .header-superior {
        padding-left: 56px;
        padding-right: 56px;
    }

    .vista-app h2 {
        padding-left: 0;
        padding-right: 0;
        text-align: center !important;
    }

    .header-superior h1,
    .cabecera-vista h1,
    .vista-app h1 {
        padding: 10px 24px !important;
        text-align: center !important;
    }

    .calendario-header-mes,
    #subvista-calendario .calendario-header-mes,
    #titulo-mes-calendario {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .barra-sticky-planificador {
        top: 62px;
    }

    #seccion-crear-mision,
    #seccion-banco-tareas {
        scroll-margin-top: 115px;
    }
}

/* =========================================
   DISEÑO RESPONSIVO: ESCRITORIO (>= 900px)
========================================= */
@media (min-width: 900px) {
    /* 1. Centrar la App Completa (Menú lateral + Contenido) en monitores estándar y ultra-anchos */
    #marco-app {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        max-width: 1600px; /* Ancho máximo total ergonómico para monitores de 32" o ultra-anchos */
        width: 100%;
        margin: 0 auto; /* Centra la interfaz completa en el monitor */
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        background-color: var(--fondo-app);
        position: relative;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    .menu-lateral,
    #menu-lateral {
        position: sticky;
        top: 0;
        left: 0;
        right: auto;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        transform: none;
        box-shadow: none;
        border-right: 1px solid var(--color-bordes);
        background: var(--fondo-paneles);
        flex-shrink: 0;
        z-index: 10010;
    }

    #btn-menu-hamburguesa {
        display: none !important;
    }

    #overlay-menu {
        display: none !important;
    }

    #overlay-modal-calendario {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10004;
    }

    #modal-calendario-dia {
        left: calc(50% + 125px); /* Desplaza el centro exacto sumando la mitad del menú lateral */
    }

    #contenido-principal,
    .contenido-principal,
    #app-container {
        flex-grow: 1;
        position: relative;
        width: calc(100% - 280px); /* Resto del ancho tras el menú lateral */
        max-width: 1440px; /* Contenedor principal de vistas limitado a 1440px para ultra-anchos */
        margin: 0 auto;
        padding: 0 !important;
        overflow-y: auto;
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .vista,
    .vista-app {
        width: 100%;
        box-sizing: border-box;
        padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px);
        margin: 0 auto;
        max-width: 1440px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #subvista-calendario {
        width: 100%;
        padding: 0;
    }

    .seccion-central,
#zona-companero-campamento,
#vista-campamento header,
#vista-ajustes .header-superior,
#vista-planificacion .seccion-central,
#vista-planificador .seccion-central,
#vista-completadas .seccion-central,
#contenido-planificacion,
#subvista-calendario,
.creador-avanzado,
#seccion-crear-mision,
#seccion-banco-tareas,
#contenedor-backlog-planificacion,
.calendario-header-mes,
.dias-semana-header,
#grid-mes-calendario,
.grid-mes-calendario,
.grid-calendario-mensual,
#vista-ajustes .seccion-central {
        width: 100%;
        max-width: 1440px; /* Se expande fluidamente hasta 1440px sin distorsionar */
        margin-left: auto;
        margin-right: auto;
    }

    .dias-semana-header {
        gap: 8px !important;
    }

    #grid-mes-calendario,
    .grid-mes-calendario,
    .grid-calendario-mensual {
        gap: 8px;
    }

    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    .calendario-header-mes,
    .vista-app h2 {
        padding-left: 0;
    }

    #panel-creacion {
        left: calc(50% + 125px); /* Desplaza el centro exacto sumando la mitad del menú lateral */
    }
}

/* =========================================
   CONTROL DE ORIENTACIÓN: PANTALLAS EN VERTICAL (TABLETS Y MONITORES ROTADOS 27"-32")
========================================= */
@media (max-width: 1024px) and (orientation: portrait), (orientation: portrait) {
    #marco-app {
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* En orientación vertical, el sidebar pasa a ser drawer colapsado y la hamburguesa acompaña siempre */
    #btn-menu-hamburguesa {
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        right: auto !important;
        z-index: 9999 !important;
        display: flex !important;
    }

    #menu-lateral,
    .menu-lateral {
        position: fixed !important;
        top: 0 !important;
        left: -340px !important;
        right: auto !important;
        width: min(340px, 85vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 100000 !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.75) !important;
        border-right: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #menu-lateral.abierto,
    .menu-lateral.abierto {
        left: 0 !important;
        right: auto !important;
    }

    #overlay-menu,
    .overlay-menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
    }

    #overlay-menu.activo,
    .overlay-menu.activo {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* El contenedor principal ocupa el 100% del ancho útil vertical sin barra lateral estorbando */
    #app-container,
    .contenido-principal,
    #contenido-principal {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Regla maestra para vistas en orientación vertical */
    .vista,
    .vista-app {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: clamp(30px, 4vw, 50px) clamp(15px, 3vw, 30px) !important;
        margin: 0 auto !important;
        max-width: 1440px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Cabeceras con margen izquierdo para evitar colisión con el botón hamburguesa */
    .header-superior,
    .cabecera-vista,
    #vista-campamento .header-superior,
    #vista-planificacion .header-superior,
    #vista-planificador .header-superior,
    #vista-completadas .header-superior {
        padding-left: 56px !important;
        padding-right: 56px !important;
    }

    .vista-app h2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .header-superior h1,
    .cabecera-vista h1,
    .vista-app h1 {
        padding: 10px 24px !important;
        text-align: center !important;
    }

    .calendario-header-mes,
    #subvista-calendario .calendario-header-mes,
    #titulo-mes-calendario {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .barra-sticky-planificador {
        top: 62px !important;
    }

    /* Los bloques de contenido (Creador de Misiones y Banco de Tareas) se apilan verticalmente al 100% */
    #seccion-crear-mision,
#seccion-banco-tareas,
.seccion-central,
#contenido-planificacion,
#subvista-calendario,
.tarjeta-ajustes {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #modal-calendario-dia {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    #panel-creacion {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* =========================================
   MODO ENFOQUE ACTIVO (AISLAMIENTO TOTAL UNIPANTALLA)
========================================= */
body.modo-enfoque-activo {
    overflow: hidden !important;
    background: #12141c !important;
}

body.modo-enfoque-activo #menu-lateral,
body.modo-enfoque-activo .menu-lateral {
    display: none !important;
}

body.modo-enfoque-activo #btn-menu-hamburguesa {
    display: none !important;
}

body.modo-enfoque-activo #overlay-menu,
body.modo-enfoque-activo #panel-creacion,
body.modo-enfoque-activo #overlay-panel,
body.modo-enfoque-activo #banner-alerta-proactiva,
body.modo-enfoque-activo #vista-campamento,
body.modo-enfoque-activo #vista-planificacion,
body.modo-enfoque-activo .header-superior,
body.modo-enfoque-activo .btn-icono {
    display: none !important;
}

body.modo-enfoque-activo #marco-app {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #12141c !important;
    overflow: hidden !important;
    display: block !important;
}

body.modo-enfoque-activo #app-container,
body.modo-enfoque-activo #vista-principal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #12141c !important;
}

body.modo-enfoque-activo #vista-mision {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 3rem 1.5rem 2rem !important;
    background: radial-gradient(circle at 50% 35%, #1a1e2a 0%, #12141c 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

body.modo-enfoque-activo #vista-mision .entorno-inmersivo {
    flex: 1;
    width: 100%;
    max-width: 580px;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.modo-enfoque-activo #vista-mision .grupo-botones-mision {
    width: 100%;
    max-width: 480px;
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
}

/* =========================================
   TEMPORIZADOR CIRCULAR ZEN (ANILLO SVG ANTI-ESTRÉS)
========================================= */
.contenedor-temporizador-zen {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.anillo-progreso {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.anillo-progreso circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.anillo-fondo {
    stroke: rgba(255, 255, 255, 0.05);
}

.anillo-activo {
    stroke: var(--color-tema);
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.tiempo-discreto {
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.2);
    font-family: monospace;
    letter-spacing: 2px;
}

#titulo-mision-activa {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f3f4f6;
    margin: 0.5rem 0 1.5rem;
    letter-spacing: 0.04em;
    max-width: 95%;
    word-break: break-word;
    text-align: center;
    line-height: 1.35;
}

#estado-mision {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 1.25rem 0 0.5rem;
    letter-spacing: 0.04em;
}

/* =========================================
   ENFOQUE UNIPASO (MICRO-STEPPING PROGRESIVO)
========================================= */
#lista-subtareas-activa {
    list-style: none;
    padding: 0;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Por defecto, todos los micro-pasos están ocultos */
#lista-subtareas-activa li,
#lista-subtareas-activa .subtarea-item {
    display: none;
}

/* Únicamente el paso activo es visible: grande, centrado y con diseño claro */
#lista-subtareas-activa li.paso-activo,
#lista-subtareas-activa .subtarea-item.paso-activo {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 1.6rem 2rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #f9fafb;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(var(--color-tema-rgb), 0.35);
    border-radius: 18px;
    box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--color-tema-rgb), 0.08);
    transition: opacity 0.35s ease, transform 0.35s ease;
    animation: zoomEntradaPaso 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#lista-subtareas-activa li.paso-activo input[type="checkbox"],
#lista-subtareas-activa .subtarea-item.paso-activo input[type="checkbox"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    cursor: pointer;
    accent-color: var(--color-tema);
    border-radius: 6px;
    transition: transform 0.15s ease;
}

#lista-subtareas-activa li.paso-activo input[type="checkbox"]:hover,
#lista-subtareas-activa .subtarea-item.paso-activo input[type="checkbox"]:hover {
    transform: scale(1.1);
}

#lista-subtareas-activa li.paso-activo .subtarea-texto,
#lista-subtareas-activa .subtarea-item.paso-activo .subtarea-texto {
    flex-grow: 1;
    word-break: break-word;
    line-height: 1.4;
    text-align: left;
}

/* Efecto de desvanecimiento suave al marcar la casilla */
#lista-subtareas-activa li.paso-desvaneciendo,
#lista-subtareas-activa .subtarea-item.paso-desvaneciendo {
    opacity: 0 !important;
    transform: scale(0.95) translateY(-10px) !important;
    pointer-events: none;
}

/* Animación de Mini-Logro para transición de éxito de un micro-paso */
.mini-logro-animacion {
    background: rgba(var(--color-tema-rgb), 0.15) !important;
    border-color: var(--color-tema) !important;
    transition: all 0.3s ease;
    transform: scale(1.02);
}

.mini-logro-animacion .subtarea-texto {
    color: var(--color-tema) !important;
    text-decoration: line-through;
    transition: all 0.3s ease;
}

.mini-logro-animacion input[type="checkbox"] {
    accent-color: var(--color-tema);
    transform: scale(1.1);
}

#lista-subtareas-activa li.paso-completado-exito,
#lista-subtareas-activa div.paso-completado-exito,
#lista-subtareas-activa .paso-completado-exito {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 1.6rem 2rem;
    width: 100%;
    background: rgba(var(--color-tema-rgb), 0.08);
    border: 1.5px dashed rgba(var(--color-tema-rgb), 0.4);
    border-radius: 18px;
    color: var(--color-tema-claro);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: zoomEntradaPaso 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomEntradaPaso {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================
   BOTONES DE ACCIÓN MODO ENFOQUE (SOBRIOS Y VISIBLES)
========================================= */
.grupo-botones-mision {
    width: 100%;
    max-width: 460px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin: 24px auto 10px;
    padding: 0;
}

.btn-mision-accion,
.btn-exito,
.btn-peligro {
    flex: 1;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    user-select: none;
}

/* Completar Misión: fondo sólido del tema y texto grafito, legible con cualquier paleta */
.btn-completar-zen,
.btn-exito {
    background-color: var(--color-tema) !important;
    color: var(--color-texto-sobre-tema) !important;
    font-weight: bold !important;
    border: 1px solid var(--color-tema) !important;
    box-shadow: none !important;
}

.btn-completar-zen:hover,
.btn-exito:hover {
    background-color: var(--color-tema-claro) !important;
    border-color: var(--color-tema-claro) !important;
    color: var(--color-texto-sobre-tema) !important;
    transform: translateY(-1px);
}

.btn-completar-zen:active,
.btn-exito:active {
    transform: scale(0.98);
}

/* Abortar Misión: neutro en reposo y ámbar al interactuar. Descansar es válido, no un error */
.btn-abortar-zen,
.btn-peligro {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

.btn-abortar-zen:hover,
.btn-peligro:hover,
.btn-abortar-zen:active,
.btn-peligro:active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

.btn-abortar-zen:hover,
.btn-peligro:hover {
    transform: translateY(-1px);
}

.btn-abortar-zen:active,
.btn-peligro:active {
    transform: scale(0.98);
}

/* Check-out de bienestar: opcional, tres toques grandes, sin texto que leer */
.checkout-bienestar {
    text-align: center;
    margin: 20px 0;
    animation: checkout-bienestar-entrada 0.4s ease;
}

.checkout-bienestar-pregunta {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

.checkout-bienestar-opciones {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-bienestar {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn-bienestar:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-bienestar.seleccionado {
    border-color: var(--color-tema);
    background: rgba(var(--color-tema-rgb), 0.15);
    box-shadow: 0 0 14px rgba(var(--color-tema-rgb), 0.35);
}

.btn-bienestar:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

/* Píldora de bienestar en las tarjetas del Diario de Expedición (Refugio del Guardián) */
.etiqueta-bienestar-historial {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    line-height: 1.2;
    vertical-align: middle;
}

/* Dentro de la tarjeta de decisión (tiempo agotado) queda entre el mensaje y los botones */
.tarjeta-decision .checkout-bienestar {
    margin: 4px 0 18px;
}

@keyframes checkout-bienestar-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-bienestar,
    .btn-bienestar {
        animation: none;
        transition: none;
    }
}

/* Sonido ambiente del Modo Enfoque: baja fricción, el activo se ilumina sin estridencias */
.selector-ambiente {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

.btn-ambiente {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ambiente:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-texto);
}

.btn-ambiente.activo {
    background: rgba(var(--color-tema-rgb), 0.15);
    color: var(--color-tema); /* verde esmeralda de la app (no existe --color-primario) */
    border-color: rgba(var(--color-tema-rgb), 0.4);
    box-shadow: 0 0 10px rgba(var(--color-tema-rgb), 0.1);
}

.btn-ambiente:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .btn-ambiente {
        transition: none;
    }
}

/* =========================================
   RUTINAS FIJAS (CAMPAMENTO & BACKLOG)
========================================= */
.btn-fijar-rutina {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s, opacity 0.15s;
}

.btn-fijar-rutina:hover {
    transform: scale(1.2);
}

.rutina-activa {
    color: #fbbf24 !important;
    filter: grayscale(0) !important;
    opacity: 1 !important;
}

.rutina-inactiva {
    color: #6b7280 !important;
    filter: grayscale(1) !important;
    opacity: 0.45 !important;
}

.item-rutina {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 12px;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    min-width: 0;
}

.item-rutina:hover {
    border-color: rgba(var(--color-tema-rgb), 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 12px rgba(var(--color-tema-rgb), 0.08);
    transform: translateY(-2px);
}

.item-rutina-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex-grow: 1;
}

.item-rutina-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.btn-lanzar-rutina {
    background: rgba(var(--color-tema-rgb), 0.15);
    color: var(--color-tema);
    border: 1px solid var(--color-tema);
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-lanzar-rutina:active {
    transform: scale(0.95);
}

.btn-eliminar-rutina {
    background: none;
    border: none;
    color: rgba(239, 68, 68, 0.5);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}

.btn-eliminar-rutina:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

/* =========================================
   SELECTOR DE DÍAS DE LA SEMANA (PROGRAMACIÓN)
========================================= */
.dias-semana-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.btn-dia {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fondo-app);
    border: 1px solid var(--color-bordes);
    color: var(--color-texto-secundario);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

.btn-dia.seleccionado {
    background: rgba(var(--color-tema-rgb), 0.2);
    border-color: var(--color-tema);
    color: var(--color-tema);
    transform: scale(1.08);
}

/* =========================================
   CUADRÍCULAS DEL PLANIFICADOR (TIEMPOS Y PROGRAMACIÓN)
========================================= */
.fila-tiempos,
.fila-programacion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    align-items: start;
    margin-top: 15px;
}

.fila-tiempos > .grupo-control-tarea,
.fila-programacion > .grupo-control-tarea {
    min-width: 0;
}

/* =========================================
   ACCIONES EN ÍTEMS DE MISIÓN / RUTINAS
========================================= */
.item-rutina-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-accion-mision-sm {
    background: none;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: transform 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.btn-accion-mision-sm:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.18);
    opacity: 1;
}


/* =========================================
   MODAL DE ATERRIZAJE FORZOSO / ESCUDO TEMPORAL
========================================= */
.modal-emergencia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-emergencia.oculto,
.oculto {
    display: none !important;
}

.contenido-emergencia {
    background: var(--fondo-paneles);
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 20px;
    padding: 30px 25px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(248, 113, 113, 0.15);
    animation: modalEntrada 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contenido-emergencia h2 {
    color: #fb7185; /* coral o naranja suave */
    font-size: 1.45rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contenido-emergencia p {
    color: var(--color-texto);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.contenido-emergencia .nota-reciclaje {
    color: var(--color-texto-secundario);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 22px;
    border: 1px dashed var(--color-bordes);
}

/* =========================================
   SISTEMA DE DIÁLOGOS UNIVERSAL (ALERTA / CONFIRMACIÓN)
========================================= */
#modal-dialogo-app {
    /* Diálogo universal (alarma "Hora de Iniciar", confirmaciones): por encima de los pop-ups
       del Vigilante (999999), por debajo solo del modal de decisión (1000002) */
    z-index: 1000001;
}

#modal-dialogo-app .contenido-emergencia {
    max-width: 400px;
    width: 90%;
    text-align: center;
    background-color: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
}

#modal-dialogo-app button {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

#modal-dialogo-app button:active {
    transform: scale(0.96);
}

#modal-dialogo-app #titulo-dialogo-app {
    margin-top: 0;
    color: var(--color-texto);
    font-size: 1.2rem;
}

#modal-dialogo-app #texto-dialogo-app {
    color: var(--color-texto-secundario);
    margin-bottom: 25px;
    /* Respeta los saltos de línea (varias alarmas del Vigilante en un solo aviso) */
    white-space: pre-line;
}

#modal-dialogo-app .acciones-dialogo-app {
    display: flex;
    gap: 15px;
    justify-content: center;
}

#modal-dialogo-app #btn-cancelar-dialogo,
#modal-dialogo-app #btn-aceptar-dialogo {
    flex: 1;
}

#modal-dialogo-app #btn-aceptar-dialogo {
    background-color: var(--color-tema);
    color: #1e1e1e;
}

/* =========================================
   AJUSTES, PERFIL Y COMPAÑEROS (AVATARES)
========================================= */
#vista-ajustes .seccion-central {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Dos filas: superior (Perfil + El Vestidor) e inferior (Idioma + Caja Fuerte).
   Móvil: una columna apilada */
.contenedor-ajustes-superior,
.contenedor-ajustes-inferior {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

/* Escritorio: cada fila en dos columnas; las tarjetas fluyen con su altura natural */
@media (min-width: 992px) {
  .contenedor-ajustes-superior,
  .contenedor-ajustes-inferior {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
  }
}

/* Tarjeta de instalación PWA: misma estética que la Caja Fuerte (hereda .tarjeta-ajustes) */
.titulo-instalar-pwa {
  margin-bottom: 10px;
  color: var(--color-tema);
}

.desc-instalar-pwa {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  margin-bottom: 15px;
}

/* Botón principal de la tarjeta, con el acento del tema como "Exportar Datos" */
.btn-instalar-pwa {
  width: 100%;
  border-color: var(--color-tema);
  color: var(--color-tema);
}

.btn-instalar-pwa:focus-visible {
  outline: 2px solid var(--color-tema);
  outline-offset: 2px;
}

/* Check-in interoceptivo: batería ejecutiva del día (Campamento) */
.panel-energia {
  width: min(460px, calc(100% - 32px));
  margin: 6px auto 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(var(--color-tema-rgb), 0.06);
  border: 1px solid rgba(var(--color-tema-rgb), 0.18);
  text-align: center;
  box-sizing: border-box;
}

.titulo-energia {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--texto-secundario);
}

.botones-energia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.btn-energia {
  flex: 1 1 0;
  min-width: 96px;
  min-height: 44px; /* objetivo táctil cómodo */
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn-energia:hover {
  border-color: rgba(var(--color-tema-rgb), 0.45);
  background: rgba(var(--color-tema-rgb), 0.08);
}

.btn-energia:focus-visible {
  outline: 2px solid var(--color-tema);
  outline-offset: 2px;
}

/* Activo: se ilumina suavemente con el color del tema (sin destellos) */
.btn-energia.activo {
  border-color: var(--color-tema);
  background: rgba(var(--color-tema-rgb), 0.18);
  color: var(--color-tema-claro);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(var(--color-tema-rgb), 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .btn-energia { transition: none; }
}

/* Feedback compasivo: tareas que no caben en la batería de hoy (pasivo, sin alarma ni rojo) */
.mensaje-tareas-pausadas {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  margin-top: 12px;
  font-style: italic;
  opacity: 0.8;
  list-style: none;
  grid-column: 1 / -1; /* dentro de las listas en rejilla ocupa toda la fila */
}

/* Modal del calendario: el coste de energía ocupa la fila entera bajo Tipo / Aviso previo */
.modal-cal-grid-tipo > div:nth-child(3) {
  grid-column: 1 / -1;
}

/* Resplandor del Sistema: selector del color de acento (visible desde el nivel 101) */
.selector-tema-app {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selector-tema-titulo {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-tema-neon);
}

.selector-tema-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}

.selector-tema-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 4px;
}

.btn-tema-color {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-tema-color[data-tema-color="esmeralda"] { background: #10b981; }
.btn-tema-color[data-tema-color="azul-suave"] { background: #60a5fa; }
.btn-tema-color[data-tema-color="blanco-suave"] { background: #d4c4b7; }
.btn-tema-color[data-tema-color="lavanda-claro"] { background: #9f7aea; }
.btn-tema-color[data-tema-color="ambar"] { background: #d97706; }

.btn-tema-color:hover {
  transform: scale(1.08);
}

.btn-tema-color:focus-visible {
  outline: 2px solid var(--color-texto);
  outline-offset: 3px;
}

/* Seleccionado: anillo exterior blanco y escala sutil */
.btn-tema-color.seleccionado {
  border-color: var(--fondo-paneles);
  box-shadow: 0 0 0 2px #ffffff;
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .btn-tema-color { transition: none; }
  .btn-tema-color:hover,
  .btn-tema-color.seleccionado { transform: none; }
}

/* El Vestidor como tarjeta propia: sin la caja anidada que tenía dentro del Perfil */
#tarjeta-vestidor .vestidor-perfil {
  margin-top: 0;
  padding: 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#tarjeta-vestidor .vestidor-titulo {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--color-tema);
}

.tarjeta-ajustes {
  background-color: var(--fondo-paneles);
  padding: clamp(18px, 2vw, 28px);
  border-radius: clamp(12px, 1.5vw, 18px);
  border: 1px solid var(--color-bordes);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tarjeta-ajustes h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

/* =========================================
   SELECTOR DE IDIOMA (BOTONES ACTIVOS)
========================================= */
.idioma-activo {
  border-color: var(--color-tema) !important;
  color: var(--color-tema) !important;
  background-color: rgba(var(--color-tema-rgb), 0.1) !important;
  box-shadow: 0 0 10px rgba(var(--color-tema-rgb), 0.2);
}

#vista-ajustes #btn-guardar-perfil {
  width: 100%;
  margin-top: 20px;
  display: block;
}
.grid-avatares-compañeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
  margin-top: 15px;
}
.card-avatar { background: var(--fondo-app); border: 2px solid var(--color-bordes); border-radius: 12px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 160px; }
.card-avatar:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.card-avatar img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 10px; transition: transform 0.3s ease; }
.card-avatar.seleccionado { border-color: var(--color-tema); background: rgba(var(--color-tema-rgb), 0.05); box-shadow: 0 4px 15px rgba(var(--color-tema-rgb), 0.15); }
.card-avatar.seleccionado img { transform: scale(1.1); }
.card-avatar::after { content: '✔️'; position: absolute; top: 10px; right: 10px; font-size: 1.2rem; opacity: 0; transition: opacity 0.2s; background: var(--color-tema); color: #000; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.card-avatar.seleccionado::after { opacity: 1; }
.avatar-titulo { font-weight: bold; color: var(--texto-principal); font-size: 0.95rem; margin-bottom: 2px; }
.avatar-desc { font-size: 0.75rem; color: var(--texto-secundario); line-height: 1.2; }

.avatar-menu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* =========================================
   MODAL DE BÚSQUEDA GLOBAL (NEURO-ERGONOMÍA & GLASSMORPHISM)
========================================= */
#modal-buscar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(12, 12, 14, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 100010 !important;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 8vh, 80px) clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    overflow-y: auto;
}

#modal-buscar.activo,
#modal-buscar.mostrar {
    display: flex !important;
    animation: fadeInModalBuscar 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInModalBuscar {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-buscar-contenedor {
    width: 100%;
    max-width: 660px;
    background: rgba(30, 30, 32, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(18px, 2.5vw, 26px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: scaleInBuscar 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleInBuscar {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-buscar-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.input-busqueda-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0 clamp(12px, 1.8vw, 18px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-sizing: border-box;
}

.input-busqueda-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-tema);
    box-shadow: 0 0 0 3px rgba(var(--color-tema-rgb), 0.22), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.icono-busqueda {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    opacity: 0.65;
    flex-shrink: 0;
    user-select: none;
}

#input-busqueda {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-texto);
    font-family: inherit;
    font-size: clamp(1.05rem, 1.6vw + 0.4rem, 1.35rem);
    font-weight: 500;
    padding: clamp(12px, 1.8vh, 16px) 0;
    box-sizing: border-box;
    letter-spacing: inherit;
    word-spacing: inherit;
}

#input-busqueda::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: clamp(0.92rem, 1.2vw + 0.3rem, 1.15rem);
    font-weight: 400;
}

.btn-limpiar-busqueda {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--color-texto-secundario);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.btn-limpiar-busqueda:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-texto);
}

.btn-cerrar-buscar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-texto-secundario);
    width: clamp(38px, 4.5vw, 44px);
    height: clamp(38px, 4.5vw, 44px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-cerrar-buscar:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    transform: scale(1.05);
}

.info-atajos-busqueda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.pildora-atajo kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--color-texto);
}

.contador-resultados-busqueda {
    font-weight: 600;
    color: var(--color-tema);
}

#resultados-busqueda {
    display: none;
    max-height: clamp(260px, 50vh, 480px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-top: 4px;
}

/* Scrollbar sutil para resultados */
#resultados-busqueda::-webkit-scrollbar {
    width: 6px;
}
#resultados-busqueda::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
#resultados-busqueda::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
#resultados-busqueda::-webkit-scrollbar-thumb:hover {
    background: var(--color-tema);
}

.tarjeta-resultado-busqueda {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.tarjeta-resultado-busqueda:hover,
.tarjeta-resultado-busqueda:focus-visible {
    background: rgba(var(--color-tema-rgb), 0.06);
    border-color: rgba(var(--color-tema-rgb), 0.4);
    transform: translateY(-1px);
    outline: none;
}

.resultado-info-principal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.resultado-linea-superior {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-estado-resultado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.badge-estado-activa {
    background: rgba(var(--color-tema-rgb), 0.14);
    color: var(--color-tema-claro);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
}

.badge-estado-completada {
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.resultado-categoria {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    opacity: 0.85;
}

.resultado-titulo-tarea {
    font-size: clamp(0.95rem, 1.2vw + 0.3rem, 1.1rem);
    font-weight: 700;
    color: var(--color-texto);
    word-break: break-word;
    margin: 0;
}

.resaltado-busqueda {
    background: rgba(var(--color-tema-rgb), 0.3);
    color: #ecfdf5;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 700;
}

.resultado-metadatos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.resultado-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-accion-resultado {
    background: transparent;
    border: 1px solid var(--color-tema);
    color: var(--color-tema);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-accion-resultado:hover {
    background: var(--color-tema);
    color: #121212;
}

.estado-vacio-busqueda {
    text-align: center;
    padding: 30px 15px;
    color: var(--color-texto-secundario);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.estado-vacio-busqueda .icono-vacio {
    font-size: 2.2rem;
    margin-bottom: 8px;
    opacity: 0.7;
}

.estado-vacio-busqueda p {
    margin: 0;
    font-size: 0.9rem;
}

/* =========================================
   VISTA: DIARIO DE EXPEDICIÓN (REDISEÑO TOTAL)
   Neuro-ergonomía, Glassmorphism & Heatmap
========================================= */
.seccion-central-expedicion {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

.grid-expedicion {
    display: grid;
    grid-template-columns: minmax(280px, 3.2fr) minmax(340px, 6.8fr);
    gap: clamp(16px, 2.5vw, 28px);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 880px) {
    .grid-expedicion {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.tarjeta-glass-expedicion {
    background: rgba(30, 30, 34, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(16px, 2vw, 22px);
    padding: clamp(18px, 2.2vw, 26px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Columna Izquierda: El Campamento */
.cabecera-panel-campamento {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cabecera-panel-campamento h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-tema);
    font-weight: 700;
}

.icono-panel-campamento {
    font-size: 1.35rem;
}

/* Visor 3D del Compañero */
.visor-companero-3d-contenedor {
    min-height: 200px;
    height: 220px;
    width: 100%;
    background: radial-gradient(circle at center, rgba(var(--color-tema-rgb), 0.12) 0%, rgba(18, 18, 22, 0.8) 80%);
    border: 1.5px dashed rgba(var(--color-tema-rgb), 0.3);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6);
}

.plataforma-holografica {
    position: absolute;
    bottom: 30px;
    width: 120px;
    height: 28px;
    background: radial-gradient(ellipse at center, rgba(var(--color-tema-rgb), 0.45) 0%, rgba(var(--color-tema-rgb), 0) 70%);
    border-radius: 50%;
    filter: blur(4px);
    animation: pulsarPlataforma 3s ease-in-out infinite;
}

@keyframes pulsarPlataforma {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

.companero-3d-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.avatar-companero-3d {
    width: 95px;
    height: 95px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    animation: flotacionCompanero 3.5s ease-in-out infinite;
    user-select: none;
}

@keyframes flotacionCompanero {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

.etiqueta-visor-3d {
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--color-texto);
}

.tag-3d {
    background: rgba(var(--color-tema-rgb), 0.25);
    color: var(--color-tema-claro);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Métricas del Campamento */
.metricas-campamento-contenedor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.tarjeta-metrica-expedicion {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tarjeta-metrica-expedicion:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--color-tema-rgb), 0.3);
    transform: translateY(-1px);
}

.icono-metrica-expedicion {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.datos-metrica-expedicion {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.label-metrica-expedicion {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.valor-metrica-expedicion {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-tema);
    line-height: 1.2;
}

/* Columna Derecha: Mapa de Constancia (Heatmap) */
.cabecera-mapa-constancia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
}

.titulo-mapa-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.titulo-mapa-grupo h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-texto);
    font-weight: 700;
}

/* Brillo esmeralda: el título del Mapa de Constancia destaca sobre el resto de tarjetas */
#titulo-mapa-constancia {
    color: var(--color-tema-neon) !important;
    text-shadow: 0 0 10px rgba(var(--color-tema-neon-rgb), 0.4);
    font-weight: bold;
}

.icono-mapa {
    font-size: 1.35rem;
}

.controles-navegacion-mes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-flecha-mes {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-texto);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.btn-flecha-mes:hover {
    background: rgba(var(--color-tema-rgb), 0.2);
    border-color: var(--color-tema);
    color: var(--color-tema-claro);
    transform: scale(1.06);
}

/* Selector protagonista del mes y año */
.input-mes-constancia {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 700;
    padding: 6px 14px;
    color-scheme: dark;
    cursor: pointer;
    outline: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    height: 38px;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.3px;
    min-width: 165px;
    text-transform: capitalize;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.input-mes-constancia:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.input-mes-constancia:focus {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 2px rgba(var(--color-tema-rgb), 0.45);
}

/* Etiqueta de mes localizada por JS; el input nativo queda oculto y solo aporta el selector */
.selector-mes-constancia {
    position: relative;
    display: inline-flex;
}

.selector-mes-constancia .input-mes-constancia::after {
    content: '📅';
    font-size: 1rem;
    margin-left: 10px;
}

.input-mes-oculto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}

.input-mes-constancia::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.95;
    font-size: 1.25rem;
    width: 22px;
    height: 22px;
    padding: 2px 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.input-mes-constancia::-webkit-calendar-picker-indicator:hover {
    filter: brightness(0) saturate(100%) invert(73%) sepia(45%) saturate(854%) hue-rotate(108deg) brightness(98%) contrast(92%);
    transform: scale(1.18);
    opacity: 1;
}

/* Contenedor Heatmap */
.contenedor-heatmap-mes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.dias-semana-heatmap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    opacity: 0.75;
}

.cuadricula-dias-heatmap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    width: 100%;
}

/* Celdas del calendario de constancia */
.celda-dia-heatmap {
    aspect-ratio: 1;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    padding: 4px;
    box-sizing: border-box;
}

.celda-dia-heatmap:hover {
    border-color: var(--color-tema);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.celda-dia-vacia {
    opacity: 0.12;
    cursor: default;
    background: transparent !important;
    border-color: transparent !important;
    pointer-events: none;
}

.numero-dia-heatmap {
    font-size: 0.9rem;
    font-weight: 700;
    color: inherit;
    line-height: 1;
}

.indicador-conteo-dia {
    font-size: 0.68rem;
    opacity: 0.85;
    margin-top: 3px;
    font-weight: 600;
    line-height: 1;
}

/* Clases de Intensidad Esmeralda (Requerimiento 2) */
.dia-activo-1 {
    background: rgba(var(--color-tema-rgb), 0.22) !important;
    border-color: rgba(var(--color-tema-rgb), 0.45) !important;
    color: var(--color-tema-claro) !important;
}

.dia-activo-2 {
    background: rgba(var(--color-tema-rgb), 0.42) !important;
    border-color: rgba(var(--color-tema-rgb), 0.65) !important;
    color: #ecfdf5 !important;
    box-shadow: 0 2px 10px rgba(var(--color-tema-rgb), 0.18);
}

.dia-activo-3 {
    background: rgba(var(--color-tema-rgb), 0.65) !important;
    border-color: rgba(var(--color-tema-rgb), 0.85) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 14px rgba(var(--color-tema-rgb), 0.3);
}

.dia-activo-4 {
    background: var(--color-tema) !important;
    border-color: var(--color-tema-claro) !important;
    color: var(--color-texto-sobre-tema) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 18px rgba(var(--color-tema-rgb), 0.45);
}

/* Con el tema Hueso, el nivel 3 es gris claro: el texto blanco no contrasta */
:root[data-tema="blanco-suave"] .dia-activo-3 {
    color: var(--color-texto-sobre-tema) !important;
}

.dia-activo-4 .numero-dia-heatmap {
    color: var(--color-texto-sobre-tema) !important;
}

/* Día actual (Hoy) */
.dia-hoy {
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

/* Día seleccionado */
.dia-seleccionado {
    outline: 2.5px solid #ffffff !important;
    outline-offset: 2px !important;
    transform: scale(1.08) !important;
    z-index: 2 !important;
}

/* Leyenda de Intensidad */
.leyenda-constancia {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.leyenda-texto {
    font-size: 0.72rem;
    opacity: 0.8;
}

.celda-leyenda {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.celda-leyenda-0 { background: rgba(255, 255, 255, 0.05); }
.celda-leyenda-1 { background: rgba(var(--color-tema-rgb), 0.22); border-color: rgba(var(--color-tema-rgb), 0.45); }
.celda-leyenda-2 { background: rgba(var(--color-tema-rgb), 0.42); border-color: rgba(var(--color-tema-rgb), 0.65); }
.celda-leyenda-3 { background: rgba(var(--color-tema-rgb), 0.65); border-color: rgba(var(--color-tema-rgb), 0.85); }
.celda-leyenda-4 { background: var(--color-tema); border-color: var(--color-tema-claro); }

/* Controles de Filtro del Día Seleccionado (Búsqueda + Píldoras Horarias) */
.controles-filtro-dia {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    background: rgba(20, 20, 24, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 16px;
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 16px;
    animation: fadeInFiltroDia 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInFiltroDia {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#buscar-tarea-dia {
    background: rgba(20, 20, 24, 0.6);
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px 8px 0 0;
    color: var(--color-texto);
    font-family: inherit;
    font-size: 0.88rem;
    padding: 8px 12px;
    outline: none;
    transition: all 0.25s ease;
    min-width: 180px;
    flex: 1 1 200px;
    box-sizing: border-box;
}

#buscar-tarea-dia::placeholder {
    color: rgba(156, 163, 175, 0.6);
}

#buscar-tarea-dia:focus {
    border-bottom-color: var(--color-tema);
    box-shadow: 0 4px 12px rgba(var(--color-tema-rgb), 0.18);
    background: rgba(20, 20, 24, 0.85);
}

.grupo-pills-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-filtro {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: #9ca3af;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    white-space: nowrap;
}

.pill-filtro:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--color-texto);
    border-color: rgba(255, 255, 255, 0.16);
}

.pill-filtro.activo {
    background: rgba(var(--color-tema-rgb), 0.18);
    border-color: rgba(var(--color-tema-rgb), 0.45);
    color: var(--color-tema-claro);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--color-tema-rgb), 0.2);
}

/* Contenedor Inferior: Detalles del día seleccionado */
.contenedor-tareas-dia-seleccionado {
    grid-column: 1 / -1;
    width: 100%;
    background: rgba(30, 30, 34, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(16px, 2vw, 22px);
    padding: clamp(18px, 2.5vw, 26px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    animation: slideUpExpedicion 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpExpedicion {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cabecera-detalle-dia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.titulo-detalle-dia {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-tema);
    margin: 0;
}

.resumen-xp-detalle-dia {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-tema-claro);
    background: rgba(var(--color-tema-rgb), 0.15);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
    padding: 3px 10px;
    border-radius: 8px;
}

/* Línea de tiempo vertical (Timeline) para franjas horarias */
.timeline-franjas-expedicion {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 28px);
    position: relative;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    padding-left: clamp(16px, 2vw, 24px);
    margin-left: 8px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.bloque-franja-horaria {
    position: relative;
}

/* Nodo de la línea de tiempo */
.bloque-franja-horaria::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(16px, 2vw, 24px) - 7px);
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e1e24;
    border: 2px solid #9ca3af;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.bloque-franja-horaria:hover::before {
    border-color: var(--color-tema-claro);
    box-shadow: 0 0 10px rgba(var(--color-tema-rgb), 0.6);
    background: rgba(var(--color-tema-rgb), 0.25);
    transform: scale(1.15);
}

/* Cabecera sutil de franja horaria */
.cabecera-franja-horaria {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.titulo-franja {
    font-size: 0.95rem;
    font-weight: 700;
    color: #9ca3af;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.icono-franja {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
}

.rango-franja {
    font-size: 0.78rem;
    color: #9ca3af;
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: normal;
}

.conteo-franja-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.linea-separador-franja {
    flex: 1;
    min-width: 30px;
    height: 1px;
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.25) 0%, rgba(255, 255, 255, 0.03) 100%);
}

/* Contenedor de tareas (flex column con espaciado respirable) */
.grid-tareas-franja {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1500px) {
    .grid-tareas-franja {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Tarjeta individual de tarea completada (rediseñada: menos densidad, más información) */
.item-tarea-expedicion {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.item-tarea-expedicion:hover,
.item-tarea-expedicion:focus-visible {
    background: rgba(var(--color-tema-rgb), 0.05);
    border-color: rgba(var(--color-tema-neon-rgb), 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-tema-neon-rgb), 0.1), 0 8px 20px rgba(0, 0, 0, 0.25);
    outline: none;
}

.contenido-principal-tarea-expedicion {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.meta-superior-tarea-expedicion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.estado-exito-expedicion {
    color: var(--color-tema-claro);
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.titulo-item-expedicion {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-texto);
    word-break: break-word;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

/* Meta de tiempo y duración de la expedición */
.meta-tiempo-tarea {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 500;
}

.texto-meta-tiempo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
}

/* Badge de subtareas en la tarjeta (Master view) */
.badge-subtareas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.item-tarea-expedicion:hover .badge-subtareas {
    background: rgba(var(--color-tema-neon-rgb), 0.12);
    border-color: rgba(var(--color-tema-neon-rgb), 0.3);
    color: var(--color-tema-claro);
}


.recompensa-tarea-expedicion {
    flex-shrink: 0;
    margin-top: 2px;
}

.badge-xp-expedicion {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-tema-claro);
    background: rgba(var(--color-tema-rgb), 0.14);
    border: 1px solid rgba(var(--color-tema-rgb), 0.32);
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================
   MODAL DE DETALLE DE MISIÓN (MASTER-DETAIL)
========================================= */
#modal-detalle-mision {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(10, 12, 14, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 40px) clamp(16px, 4vw, 32px);
    box-sizing: border-box;
    overflow-y: auto;
}

#modal-detalle-mision.activo,
#modal-detalle-mision.mostrar {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

.modal-detalle-contenedor {
    width: 100%;
    max-width: 580px;
    min-width: 300px;
    min-height: 200px;
    background: #1a1c20 !important;
    background: rgba(26, 28, 32, 0.98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--color-tema-neon-rgb), 0.12);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    z-index: 1000000;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animación del contenedor interno eliminada (causaba opacity:0 al inicio) */
/* La suavidad de entrada la da el overlay con fadeInModalDetalle */

.modal-detalle-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.modal-detalle-meta-superior {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-cerrar-modal-detalle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-cerrar-modal-detalle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.modal-detalle-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-texto, #ffffff);
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
}

.modal-detalle-tiempo {
    margin-bottom: 4px;
}

.modal-detalle-seccion-subtareas {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-detalle-subtitulo {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin: 0;
    font-weight: 600;
}

.lista-subtareas-modal-contenedor {
    width: 100%;
}

.lista-subtareas-modal-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-subtarea-detalle-modal {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: #e5e7eb;
    transition: all 0.15s ease;
}

.item-subtarea-detalle-modal:hover {
    background: rgba(var(--color-tema-neon-rgb), 0.04);
    border-color: rgba(var(--color-tema-neon-rgb), 0.2);
}

.cuerpo-subtarea-modal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.icono-subtarea-modal {
    color: var(--color-tema-neon);
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.texto-subtarea-modal {
    color: #f3f4f6;
    line-height: 1.4;
    word-break: break-word;
}

/* Badge verde para tiempos individuales de micro-pasos */
.badge-tiempo-micro {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-tema-neon);
    background: rgba(var(--color-tema-neon-rgb), 0.1);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.2);
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Fila de desglose Estimado | Real · Hora en el header del modal */
.desglose-tiempo-modal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
}

.chip-tiempo-modal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9ca3af;
}

.chip-tiempo-modal strong {
    color: #e5e7eb;
    font-weight: 600;
}

.chip-estimado strong { color: #93c5fd; }  /* azul suave — estimado */
.chip-real strong { color: var(--color-tema-claro); }  /* esmeralda — real      */
.chip-hora strong { color: #fbbf24; }  /* ámbar — hora cierre   */

.separador-tiempo-modal {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    user-select: none;
}

.sin-subtareas-modal {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    margin: 4px 0 0 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.vacio-detalle-dia {
    text-align: center;
    padding: 30px 15px;
    color: var(--color-texto-secundario);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.vacio-detalle-dia p {
    margin: 0;
    font-size: 0.92rem;
}

@media (max-width: 600px) {
    .timeline-franjas-expedicion {
        padding-left: 14px;
        margin-left: 4px;
        border-left-width: 1.5px;
    }
    .bloque-franja-horaria::before {
        left: -19px;
        width: 8px;
        height: 8px;
        top: 6px;
    }
    .grid-tareas-franja {
        grid-template-columns: 1fr;
    }
    .item-tarea-expedicion {
        padding: 12px 14px;
    }
    .cabecera-franja-horaria {
        flex-wrap: wrap;
    }
}

/* =========================================
   FASE 1 — EL DESPERTAR DEL COMPAÑERO
========================================= */
:root {
    --verde-neon: var(--color-tema-neon);
    /* Fondo oscuro teñido del tema (modales del compañero, decisiones, Vigilante); el texto es claro */
    --verde-esmeralda-suave: color-mix(in srgb, var(--color-tema) 20%, rgba(14, 16, 18, 0.95));
    --blanco-hueso: #f5f1e6;
}

/* Camino del Vínculo: panel bajo el compañero del Campamento */
.panel-vinculo {
    width: min(280px, 100%);
    margin: 10px auto 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(var(--color-tema-neon-rgb), 0.06);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.35);
    box-shadow: 0 0 14px rgba(var(--color-tema-neon-rgb), 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.vinculo-cabecera {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vinculo-nivel {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-texto);
}

.vinculo-titulo {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--verde-neon);
}

.vinculo-titulo:empty {
    display: none;
}

.vinculo-titulo.titulo-epico {
    color: var(--dorado-legendario, #f5c542);
    text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

.barra-vinculo {
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: #1c2230;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(var(--color-tema-neon-rgb), 0.25);
}

.vinculo-progreso {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-tema-neon), var(--color-tema-claro));
    box-shadow: 0 0 10px rgba(var(--color-tema-neon-rgb), 0.75);
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.vinculo-texto {
    font-size: 0.74rem;
    color: var(--color-texto-secundario);
}

.panel-vinculo.vinculo-maximo {
    border-color: var(--dorado-legendario, #f5c542);
}

.panel-vinculo.vinculo-maximo .vinculo-progreso {
    background: linear-gradient(90deg, #f5c542, var(--color-tema-neon));
}

/* Feedback visual al subir de nivel de vínculo */
.panel-vinculo.vinculo-subida {
    animation: vinculo-subida 1.6s ease;
}

@keyframes vinculo-subida {
    0% { box-shadow: 0 0 0 rgba(var(--color-tema-neon-rgb), 0); transform: scale(1); }
    25% { box-shadow: 0 0 28px rgba(var(--color-tema-neon-rgb), 0.8); transform: scale(1.04); }
    100% { box-shadow: 0 0 14px rgba(var(--color-tema-neon-rgb), 0.12); transform: scale(1); }
}

/* Título del jugador bajo el nivel */
.titulo-jugador-campamento {
    display: block;
    margin: -2px 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--verde-neon);
}

/* Camino del Soberano trascendental (101-120): barra morada cósmica */
.barra-xp.barra-trascendental #xp-progreso {
    background: linear-gradient(90deg, #6d28d9, #a855f7, #ec4899, #6366f1);
    background-size: 300% 100%;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.8);
    animation: cosmos-fluye 6s linear infinite;
}

@keyframes cosmos-fluye {
    from { background-position: 0% 50%; }
    to { background-position: 300% 50%; }
}

.barra-xp.barra-despertar {
    animation: barra-despertar 2s ease;
}

@keyframes barra-despertar {
    0% { box-shadow: 0 0 0 rgba(168, 85, 247, 0); }
    30% { box-shadow: 0 0 30px rgba(168, 85, 247, 1), 0 0 60px rgba(236, 72, 153, 0.6); }
    100% { box-shadow: 0 0 0 rgba(168, 85, 247, 0); }
}

/* Limit Break: temblor sutil y destellos. Violeta FIJO (--color-limit-break): no depende del tema */
.limit-break-temblor {
    animation: limit-break-temblor 0.9s ease-in-out;
}

@keyframes limit-break-temblor {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-3px, 1px); }
    30% { transform: translate(3px, -2px); }
    45% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 1px); }
}

/* Anclado al área de trabajo (#app-container, position: relative), nunca al <body>:
   así no se superpone al menú lateral de escritorio y queda centrado en el contenido.
   app.js ajusta top/height a la franja visible si el contenedor es más alto que la pantalla */
#app-container {
    position: relative;
}

.limit-break-destello {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100060;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--color-limit-break) 55%, transparent) 35%, transparent 70%);
    animation: limit-break-destello 1.7s ease-out forwards;
}

@keyframes limit-break-destello {
    0% { opacity: 0; }
    12% { opacity: 1; }
    30% { opacity: 0.2; }
    45% { opacity: 0.85; }
    100% { opacity: 0; }
}

.tarjeta-celebracion.celebracion-cosmica {
    background: linear-gradient(160deg, rgba(49, 16, 94, 0.95), rgba(15, 23, 62, 0.95));
    border-color: var(--color-limit-break);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.55), 0 20px 50px rgba(0, 0, 0, 0.6);
}

.tarjeta-celebracion.celebracion-cosmica .celebracion-hito {
    background: rgba(168, 85, 247, 0.18);
    border-color: var(--color-limit-break);
}

@media (prefers-reduced-motion: reduce) {
    .limit-break-temblor,
    .panel-vinculo.vinculo-subida,
    .barra-xp.barra-despertar,
    .barra-xp.barra-trascendental #xp-progreso {
        animation: none;
    }
}

/* Modal de celebración de nivel (por encima del modal de recompensa) */
.modal-celebracion-nivel {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10002;
}

.tarjeta-celebracion {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 22px;
    border-radius: 20px;
    background: var(--verde-esmeralda-suave);
    border: 2px solid var(--verde-neon);
    box-shadow: 0 0 30px rgba(var(--color-tema-neon-rgb), 0.35), 0 20px 50px rgba(0, 0, 0, 0.6);
    color: var(--blanco-hueso);
    text-align: center;
    animation: celebracion-entrada 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.celebracion-avatar {
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(var(--color-tema-neon-rgb), 0.7));
    animation: celebracion-salto 1.4s ease-in-out infinite;
}

.celebracion-titulo {
    margin: 12px 0 14px;
    font-size: 1.35rem;
    color: var(--blanco-hueso);
}

.celebracion-mensajes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.celebracion-bocadillo {
    margin: 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.35);
    text-align: left;
    line-height: 1.45;
    font-size: 0.95rem;
}

.celebracion-boton {
    width: 100%;
}

@keyframes celebracion-entrada {
    from { opacity: 0; transform: scale(0.9) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes celebracion-salto {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* =========================================
   CAMINO DEL VÍNCULO — HITOS Y RECOMPENSAS
========================================= */
:root {
    --dorado-legendario: #f5c542;
}

/* Nv. 25 · Aliado Inquebrantable: aura evolucionada en el CONTENEDOR del compañero.
   La imagen original no se toca; el color lo define cada compañero (--color-aura). */
.aura-vinculo {
    position: relative;
    --sombra-aura: 0 0 22px color-mix(in srgb, var(--color-aura, var(--color-tema-neon)) 70%, transparent),
                   0 0 44px color-mix(in srgb, var(--color-aura, var(--color-tema-neon)) 35%, transparent);
    --animacion-aura: none;
    --tinte-aura: var(--color-aura, var(--color-tema-neon));
}

/* El aura es un CÍRCULO PERFECTO centrado en el avatar (::before de tamaño fijo), nunca la caja
   del contenedor: así no sale cuadrada ni toma la forma de las tarjetas rectangulares */
#avatar-usuario-campamento.aura-vinculo,
#visor-companero-3d.aura-vinculo .companero-3d-wrapper,
#zona-companero-mision.aura-vinculo .aura-concentracion,
#guarida-escenario.aura-vinculo {
    position: relative;
    isolation: isolate; /* el círculo queda detrás del avatar pero dentro de su contenedor */
}

#avatar-usuario-campamento.aura-vinculo { --tamano-aura: clamp(120px, 32vw, 160px); }
#visor-companero-3d.aura-vinculo { --tamano-aura: 105px; }
#zona-companero-mision.aura-vinculo { --tamano-aura: 170px; }
#guarida-escenario.aura-vinculo { --tamano-aura: 92px; }

#avatar-usuario-campamento.aura-vinculo::before,
#visor-companero-3d.aura-vinculo .companero-3d-wrapper::before,
#zona-companero-mision.aura-vinculo .aura-concentracion::before,
#guarida-escenario.aura-vinculo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tamano-aura, 120px);
    height: var(--tamano-aura, 120px);
    border-radius: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--tinte-aura) 18%, transparent) 0%, transparent 70%);
    box-shadow: var(--sombra-aura);
    animation: var(--animacion-aura);
}

/* Nv. 10 / 40 · Título en la ficha del compañero del Diario */
.etiqueta-visor-3d {
    flex-wrap: wrap;
    justify-content: center;
}

.titulo-companero-ficha {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--verde-neon);
    letter-spacing: 0.02em;
}

.titulo-companero-ficha.titulo-epico {
    color: var(--dorado-legendario);
    text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

/* Nv. 50 · Vínculo Perfecto: marco legendario y título del usuario */
#avatar-usuario-menu.marco-legendario img {
    border: 3px solid var(--dorado-legendario);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--verde-neon), 0 0 18px rgba(245, 197, 66, 0.6);
}

/* Título del jugador en el menú lateral */
.titulo-jugador-menu {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--verde-neon);
}

.titulo-jugador-menu:empty {
    display: none;
}

.titulo-jugador-menu.titulo-legendario {
    color: var(--dorado-legendario);
    text-shadow: 0 0 8px rgba(245, 197, 66, 0.45);
}

.titulo-jugador-menu.titulo-trascendental {
    color: #c084fc;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.55);
}

/* Anuncio de hito dentro de la celebración */
.celebracion-bocadillo.celebracion-hito {
    background: rgba(var(--color-tema-neon-rgb), 0.18);
    border: 1px solid var(--verde-neon);
    font-weight: 600;
}

.tarjeta-celebracion.celebracion-legendaria {
    border-color: var(--dorado-legendario);
    box-shadow: 0 0 36px rgba(245, 197, 66, 0.45), 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* =========================================
   FASE 3 — LIBRO DE LOGROS, EL VESTIDOR Y LA GUARIDA DEL COMPAÑERO
   Glassmorphism oscuro; cada rareza tiene su color de "brillo":
   común = neón esmeralda · raro = azul arcano · épico = morado cósmico · legendario = oro
========================================= */
:root {
    --logro-comun: var(--color-tema-neon);
    --logro-raro: #38bdf8;
    --logro-epico: #a855f7;
    --logro-legendario: #f5c542;
    --cristal-fondo: rgba(24, 26, 32, 0.72);
    --cristal-fondo-fuerte: rgba(18, 20, 26, 0.9);
    --cristal-borde: rgba(255, 255, 255, 0.09);
    --cristal-brillo: rgba(255, 255, 255, 0.05);
}

/* ---------- Layout del libro: botonera lateral + panel ---------- */
#vista-logros .libro-logros {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 26px);
    align-items: start;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.libro-categorias {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    background: var(--cristal-fondo);
    border: 1px solid var(--cristal-borde);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.btn-categoria-logro {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-texto-secundario);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-categoria-logro:hover {
    background: var(--cristal-brillo);
    color: var(--color-texto);
    transform: translateX(2px);
}

.btn-categoria-logro:focus-visible {
    outline: 2px solid var(--logro-comun);
    outline-offset: 2px;
}

.btn-categoria-logro[aria-selected="true"] {
    color: #eafff8;
    background: linear-gradient(90deg, rgba(var(--color-tema-neon-rgb), 0.22), rgba(var(--color-tema-neon-rgb), 0.04));
    border-color: rgba(var(--color-tema-neon-rgb), 0.45);
    box-shadow: inset 3px 0 0 var(--logro-comun), 0 0 16px rgba(var(--color-tema-neon-rgb), 0.15);
}

.btn-categoria-logro[data-categoria="ocultas"][aria-selected="true"] {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.26), rgba(99, 102, 241, 0.06));
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: inset 3px 0 0 var(--logro-epico), 0 0 16px rgba(168, 85, 247, 0.2);
}

.categoria-logro-icono {
    font-size: 1.2rem;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.categoria-logro-nombre {
    flex: 1;
    min-width: 0;
}

.categoria-logro-contador {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-texto-secundario);
}

/* ---------- Panel derecho ---------- */
.libro-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: clamp(16px, 2.2vw, 26px);
    border-radius: 22px;
    background: var(--cristal-fondo);
    border: 1px solid var(--cristal-borde);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    outline: none;
}

.libro-cabecera-categoria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cristal-borde);
}

.libro-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.libro-icono-categoria {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 1.5rem;
    background: radial-gradient(circle at 30% 30%, rgba(var(--color-tema-neon-rgb), 0.3), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.4);
}

#vista-logros .libro-titulo-categoria {
    margin: 0;
    padding: 0 !important;
    text-align: left !important; /* anula el centrado móvil genérico de .vista-app h2 */
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: var(--color-texto);
    background: none;
    border: none;
    box-shadow: none;
}

.libro-desc-categoria {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--color-texto-secundario);
    opacity: 0.85;
}

.libro-progreso {
    flex: 1 1 260px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.libro-progreso-textos {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.libro-puntos {
    font-weight: 700;
    color: var(--logro-legendario);
}

.libro-barra {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: #141821;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.libro-barra-relleno {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-tema-neon), var(--color-tema-claro));
    box-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.6);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.libro-barra.libro-barra-oculta .libro-barra-relleno {
    background: linear-gradient(90deg, #6d28d9, #a855f7, #ec4899);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

.libro-contenido {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.libro-seccion-titulo {
    margin: 4px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

/* ---------- Cuadrícula de tarjetas ---------- */
.grid-logros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarjeta-logro {
    --brillo-logro: var(--logro-comun);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--cristal-borde);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-logro.rareza-raro { --brillo-logro: var(--logro-raro); }
.tarjeta-logro.rareza-epico { --brillo-logro: var(--logro-epico); }
.tarjeta-logro.rareza-legendario { --brillo-logro: var(--logro-legendario); }

/* Bloqueado: atenuado, escala de grises y candado */
.tarjeta-logro.hito-bloqueado {
    filter: grayscale(1);
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.02);
    border-style: dashed;
}

.tarjeta-logro.hito-bloqueado:hover {
    opacity: 0.7;
}

/* Desbloqueado: se ilumina con el color de su rareza */
.tarjeta-logro.hito-desbloqueado {
    border-color: color-mix(in srgb, var(--brillo-logro) 70%, transparent);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--brillo-logro) 16%, transparent),
        rgba(255, 255, 255, 0.02) 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brillo-logro) 25%, transparent),
                0 0 18px color-mix(in srgb, var(--brillo-logro) 28%, transparent);
}

.tarjeta-logro.hito-desbloqueado:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brillo-logro) 45%, transparent),
                0 0 26px color-mix(in srgb, var(--brillo-logro) 45%, transparent);
}

/* Destello diagonal al pasar por encima de un logro conseguido */
.tarjeta-logro.hito-desbloqueado::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.12) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.tarjeta-logro.hito-desbloqueado:hover::after {
    transform: translateX(120%);
}

.tarjeta-logro.rareza-epico.hito-desbloqueado,
.tarjeta-logro.rareza-legendario.hito-desbloqueado.logro-oculto {
    background: linear-gradient(160deg, rgba(109, 40, 217, 0.26), rgba(236, 72, 153, 0.08) 60%, rgba(15, 23, 62, 0.25));
}

.tarjeta-logro.recien-conseguido {
    animation: logro-recien 2.4s ease-out 1;
}

@keyframes logro-recien {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brillo-logro) 80%, transparent); }
    40% { box-shadow: 0 0 36px 4px color-mix(in srgb, var(--brillo-logro) 60%, transparent); }
    100% { box-shadow: 0 0 18px color-mix(in srgb, var(--brillo-logro) 28%, transparent); }
}

.logro-icono {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.6rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hito-desbloqueado .logro-icono {
    border-color: var(--brillo-logro);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brillo-logro) 50%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--brillo-logro) 25%, transparent);
}

.logro-candado {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    background: #1b1d23;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.logro-cuerpo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logro-nombre {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    color: var(--color-texto);
}

.hito-desbloqueado .logro-nombre {
    color: color-mix(in srgb, var(--brillo-logro) 55%, #ffffff);
}

.logro-descripcion {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--color-texto-secundario);
}

.logro-fecha {
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--brillo-logro) 70%, #ffffff);
}

.logro-recompensa {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--logro-legendario);
    background: rgba(245, 197, 66, 0.1);
    border: 1px solid rgba(245, 197, 66, 0.35);
}

.logro-progreso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.logro-progreso-barra {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.logro-progreso-relleno {
    height: 100%;
    border-radius: inherit;
    background: #9ca3af;
}

.logro-progreso-texto {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--color-texto-secundario);
}

/* Escudo de puntos de logro (estilo MMO) */
.logro-puntos {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 42px;
    padding: 0 4px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #1a1305;
    background: linear-gradient(180deg, #ffe08a, #c9971f);
    clip-path: polygon(50% 0, 100% 18%, 100% 70%, 50% 100%, 0 70%, 0 18%);
}

.hito-bloqueado .logro-puntos {
    color: #d1d5db;
    background: linear-gradient(180deg, #4b5563, #1f2937);
}

/* ---------- Resumen ---------- */
.resumen-logros-cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--color-tema-neon-rgb), 0.1), rgba(168, 85, 247, 0.08));
    border: 1px solid var(--cristal-borde);
}

.resumen-anillo {
    --porcentaje: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: conic-gradient(var(--logro-comun) calc(var(--porcentaje) * 1%), rgba(255, 255, 255, 0.08) 0);
    box-shadow: 0 0 22px rgba(var(--color-tema-neon-rgb), 0.25);
}

.resumen-anillo::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--cristal-fondo-fuerte);
}

.resumen-anillo-valor {
    position: relative;
    font-size: 1.5rem;
    font-weight: 800;
    color: #eafff8;
}

.resumen-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.resumen-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.resumen-dato-valor {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-texto);
}

.resumen-dato-label {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
}

.resumen-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.resumen-categoria {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cristal-borde);
    color: var(--color-texto);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.resumen-categoria:hover,
.resumen-categoria:focus-visible {
    border-color: rgba(var(--color-tema-neon-rgb), 0.45);
    background: rgba(var(--color-tema-neon-rgb), 0.06);
    outline: none;
}

.resumen-categoria-fila {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
}

.resumen-categoria .libro-barra {
    height: 6px;
}

.logros-vacio {
    margin: 0;
    padding: 22px;
    border-radius: 14px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--cristal-borde);
}

/* ---------- Aviso emergente de logro (toast estilo MMO) ---------- */
.contenedor-avisos-logro {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 100050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.aviso-logro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    color: var(--blanco-hueso, #f5f1e6);
    background: linear-gradient(135deg, rgba(20, 22, 30, 0.95), rgba(40, 32, 12, 0.92));
    border: 1px solid var(--logro-legendario);
    box-shadow: 0 0 24px rgba(245, 197, 66, 0.35), 0 14px 30px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: aviso-logro-entrada 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.aviso-logro.saliendo {
    animation: aviso-logro-salida 0.4s ease forwards;
}

.aviso-logro-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.4rem;
    background: rgba(245, 197, 66, 0.15);
    border: 1px solid rgba(245, 197, 66, 0.5);
}

.aviso-logro-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aviso-logro-etiqueta {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--logro-legendario);
}

.aviso-logro-nombre {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

@keyframes aviso-logro-entrada {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes aviso-logro-salida {
    to { opacity: 0; transform: translateY(12px); }
}

/* ---------- Responsive del libro ---------- */
@media (max-width: 899px) {
    #vista-logros .libro-logros {
        grid-template-columns: minmax(0, 1fr);
    }

    .libro-categorias {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        max-width: 100%;
        scroll-snap-type: x mandatory;
        padding: 8px;
        scrollbar-width: none;
    }

    .libro-categorias::-webkit-scrollbar {
        display: none;
    }

    .btn-categoria-logro {
        flex: 0 0 auto;
        flex-shrink: 0;
        width: auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .btn-categoria-logro:hover {
        transform: none;
    }

    .btn-categoria-logro[aria-selected="true"] {
        box-shadow: inset 0 -3px 0 var(--logro-comun);
    }

    .btn-categoria-logro[data-categoria="ocultas"][aria-selected="true"] {
        box-shadow: inset 0 -3px 0 var(--logro-epico);
    }
}

@media (max-width: 520px) {
    .grid-logros {
        grid-template-columns: minmax(0, 1fr);
    }

    .resumen-logros-cabecera {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .tarjeta-logro {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .logro-puntos {
        position: absolute;
        top: 10px;
        right: 10px;
        min-width: 30px;
        height: 34px;
        font-size: 0.72rem;
    }

    .logro-cuerpo {
        padding-right: 34px;
    }
}

/* ---------- Marcos de avatar (menú lateral y Vestidor) ---------- */
#avatar-usuario-menu.marco-cosmico img,
.vestidor-avatar.marco-cosmico img,
.muestra-marco.marco-cosmico img {
    border: 3px solid #a855f7;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ec4899, 0 0 18px rgba(168, 85, 247, 0.75);
}

#avatar-usuario-menu.marco-bestiario img,
.vestidor-avatar.marco-bestiario img,
.muestra-marco.marco-bestiario img {
    border: 3px solid #d97706;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fde68a, 0 0 0 5px rgba(146, 64, 14, 0.6), 0 0 18px rgba(217, 119, 6, 0.6);
}

.vestidor-avatar.marco-legendario img,
.muestra-marco.marco-legendario img {
    border: 3px solid var(--dorado-legendario);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--verde-neon), 0 0 18px rgba(245, 197, 66, 0.6);
}

/* ---------- EL VESTIDOR (Ajustes → Perfil) ---------- */
.vestidor-perfil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(var(--color-tema-neon-rgb), 0.08), rgba(168, 85, 247, 0.06) 70%);
    border: 1px solid var(--cristal-borde);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.vestidor-titulo {
    margin: 0;
    font-size: 1.05rem;
    color: var(--verde-neon);
}

.vestidor-desc {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.vestidor-escaparate {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vestidor-avatar {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
}

.vestidor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.vestidor-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vestidor-nombre {
    font-weight: 800;
    color: var(--color-texto);
    overflow-wrap: anywhere;
}

.vestidor-titulo-activo {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--verde-neon);
}

.vestidor-titulo-activo.titulo-legendario { color: var(--dorado-legendario); text-shadow: 0 0 8px rgba(245, 197, 66, 0.45); }
.vestidor-titulo-activo.titulo-trascendental { color: #c084fc; text-shadow: 0 0 8px rgba(168, 85, 247, 0.55); }

.vestidor-subtitulo {
    margin: 8px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-texto-secundario);
}

.vestidor-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opcion-vestidor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.opcion-vestidor:hover {
    border-color: rgba(var(--color-tema-neon-rgb), 0.6);
}

.opcion-vestidor:focus-visible {
    outline: 2px solid var(--verde-neon);
    outline-offset: 2px;
}

.opcion-vestidor[aria-pressed="true"] {
    color: #eafff8;
    border-color: var(--verde-neon);
    background: rgba(var(--color-tema-neon-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.35);
}

.opcion-vestidor.opcion-trascendental[aria-pressed="true"] {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.22);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}

.opcion-vestidor.opcion-legendaria[aria-pressed="true"] {
    border-color: var(--dorado-legendario);
    background: rgba(245, 197, 66, 0.18);
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.4);
}

.opciones-marcos-vacio,
.vestidor-opciones-nota {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    opacity: 0.85;
}

.vestidor-opciones-marcos .opcion-vestidor {
    border-radius: 14px;
    padding: 6px 12px 6px 6px;
}

.muestra-marco {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.muestra-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

/* ---------- LA GUARIDA: visor interactivo del Diario ---------- */
#visor-companero-3d.visor-interactivo {
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#visor-companero-3d.visor-interactivo:hover,
#visor-companero-3d.visor-interactivo:focus-visible {
    border-color: rgba(var(--color-tema-neon-rgb), 0.75);
    border-style: solid;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--color-tema-neon-rgb), 0.3);
    transform: translateY(-2px);
    outline: none;
}

#visor-companero-3d.visor-interactivo:active {
    transform: translateY(0) scale(0.99);
}

.pista-visor-guarida {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #eafff8;
    background: rgba(var(--color-tema-neon-rgb), 0.22);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.5);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

#visor-companero-3d:hover .pista-visor-guarida,
#visor-companero-3d:focus-visible .pista-visor-guarida {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .pista-visor-guarida {
        opacity: 0.9;
        transform: none;
    }
}

/* ---------- Auras equipables del compañero ---------- */
/* Se aplican al círculo ::before del aura (ver .aura-vinculo) */
.aura-vinculo.aura-cosmica {
    --sombra-aura: 0 0 22px rgba(168, 85, 247, 0.75), 0 0 44px rgba(236, 72, 153, 0.4);
    --animacion-aura: aura-cosmica-pulso 4s ease-in-out infinite;
    --tinte-aura: #a855f7;
}

.aura-vinculo.aura-dorada {
    --sombra-aura: 0 0 22px rgba(245, 197, 66, 0.75), 0 0 46px rgba(245, 197, 66, 0.35);
    --animacion-aura: aura-dorada-pulso 3s ease-in-out infinite;
    --tinte-aura: #f5c542;
}

@keyframes aura-cosmica-pulso {
    0%, 100% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.75), 0 0 44px rgba(236, 72, 153, 0.4); }
    50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.85), 0 0 60px rgba(168, 85, 247, 0.5); }
}

@keyframes aura-dorada-pulso {
    0%, 100% { box-shadow: 0 0 22px rgba(245, 197, 66, 0.75), 0 0 46px rgba(245, 197, 66, 0.35); }
    50% { box-shadow: 0 0 30px rgba(255, 224, 138, 0.9), 0 0 60px rgba(245, 197, 66, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .aura-vinculo.aura-cosmica,
    .aura-vinculo.aura-dorada {
        --animacion-aura: none;
    }
}

/* ---------- Recolores del compañero (filtros; la imagen original no se modifica) ---------- */
.recolor-esmeralda { --filtro-recolor: hue-rotate(95deg) saturate(1.25); }
.recolor-ambar { --filtro-recolor: sepia(0.55) hue-rotate(-12deg) saturate(1.8); }
.recolor-glacial { --filtro-recolor: hue-rotate(180deg) saturate(1.1) brightness(1.08); }
.recolor-amatista { --filtro-recolor: hue-rotate(250deg) saturate(1.3); }
.recolor-espectral { --filtro-recolor: grayscale(0.6) brightness(1.3) contrast(0.9) drop-shadow(0 0 10px rgba(186, 230, 253, 0.8)); }

#avatar-usuario-campamento img[class*="recolor-"] {
    filter: var(--filtro-recolor) drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.4));
}

.avatar-companero-3d[class*="recolor-"] {
    filter: var(--filtro-recolor) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

#img-companero-mision[class*="recolor-"],
.guarida-img-companero[class*="recolor-"],
.muestra-recolor-img[class*="recolor-"] {
    filter: var(--filtro-recolor);
}

#img-companero-mision[class*="recolor-"] {
    animation: none;
}

/* ---------- Modal de la Guarida ---------- */
.modal-guarida {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 8, 12, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tarjeta-guarida {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    color: var(--color-texto);
    background: linear-gradient(165deg, rgba(20, 30, 28, 0.88), rgba(18, 18, 26, 0.92));
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.35);
    box-shadow: 0 0 40px rgba(var(--color-tema-neon-rgb), 0.18), 0 24px 60px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: celebracion-entrada 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cerrar-guarida {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-texto);
    font-size: 1rem;
    cursor: pointer;
}

.btn-cerrar-guarida:hover,
.btn-cerrar-guarida:focus-visible {
    border-color: var(--verde-neon);
    outline: none;
}

.guarida-cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 40px;
}

.guarida-escenario {
    position: relative;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(var(--color-tema-rgb), 0.18), rgba(18, 18, 22, 0.85) 75%);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.3);
    overflow: hidden;
}

.guarida-escenario .plataforma-holografica {
    bottom: 14px;
    width: 80px;
}

.guarida-img-companero {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    object-fit: contain;
    animation: flotacionCompanero 3.5s ease-in-out infinite;
}

.guarida-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.guarida-etiqueta {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--verde-neon);
}

.modal-guarida .guarida-titulo {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    color: var(--blanco-hueso, #f5f1e6);
    background: none;
    border: none;
    box-shadow: none;
}

.guarida-titulo-companero {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--verde-neon);
}

.guarida-titulo-companero.titulo-epico {
    color: var(--dorado-legendario);
    text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

.guarida-seccion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--cristal-borde);
}

.modal-guarida .guarida-subtitulo {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-texto);
}

.guarida-mini-titulo {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-texto-secundario);
}

.guarida-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.guarida-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.18);
}

.guarida-stat-label {
    font-size: 0.68rem;
    color: var(--color-texto-secundario);
}

.guarida-stat-valor {
    font-size: 1.05rem;
    font-weight: 800;
    color: #eafff8;
}

.guarida-barra {
    height: 10px;
}

.guarida-proximo-hito {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.guarida-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.opcion-guarida {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.opcion-guarida:hover:not(:disabled) {
    border-color: rgba(var(--color-tema-neon-rgb), 0.6);
}

.opcion-guarida:focus-visible {
    outline: 2px solid var(--verde-neon);
    outline-offset: 2px;
}

.opcion-guarida[aria-pressed="true"] {
    border-color: var(--verde-neon);
    background: rgba(var(--color-tema-neon-rgb), 0.18);
    box-shadow: 0 0 14px rgba(var(--color-tema-neon-rgb), 0.35);
}

.opcion-guarida:disabled {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.45;
}

.opcion-guarida-pista {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--color-texto-secundario);
}

.opcion-guarida-muestra {
    width: 100%;
    height: 8px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.opcion-guarida-muestra.muestra-vinculo { background: linear-gradient(90deg, var(--color-aura, var(--color-tema-neon)), transparent); box-shadow: 0 0 8px var(--color-aura, var(--color-tema-neon)); }
.opcion-guarida-muestra.muestra-dorada { background: linear-gradient(90deg, #f5c542, #ffe08a); box-shadow: 0 0 8px rgba(245, 197, 66, 0.8); }
.opcion-guarida-muestra.muestra-cosmica { background: linear-gradient(90deg, #6d28d9, #a855f7, #ec4899); box-shadow: 0 0 8px rgba(168, 85, 247, 0.8); }

.guarida-opciones-recolor {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.guarida-opciones-recolor .opcion-guarida {
    align-items: center;
    text-align: center;
}

.muestra-recolor-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .guarida-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }

    .guarida-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-logro,
    .tarjeta-logro.recien-conseguido,
    .tarjeta-logro.hito-desbloqueado::after,
    .aviso-logro,
    .aviso-logro.saliendo,
    .tarjeta-guarida,
    .guarida-img-companero,
    .libro-barra-relleno,
    #visor-companero-3d.visor-interactivo {
        animation: none;
        transition: none;
    }
}

/* =========================================
   VIGILANTE SILENCIOSO · POP-UPS NO BLOQUEANTES
   Jerarquía: aviso previo (calma, escudo azul) < choque de actividades (ámbar)
   < alarma de inicio (modal de diálogo + sonido).
========================================= */
/* Centrado absoluto; la sombra gigante oscurece el resto de la pantalla para aislar el aviso.
   Nunca coinciden dos a la vez: app.js los encola (mostrarPopupEnCola). */
.vigilante-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    color: var(--blanco-hueso, #f5f1e6);
    box-shadow: 0 0 0 100vmax rgba(5, 8, 12, 0.6), 0 16px 40px rgba(0, 0, 0, 0.55);
    z-index: 999999;
    animation: vigilante-entrada 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vigilante-previo {
    background: var(--verde-esmeralda-suave);
    border: 2px solid var(--verde-neon, var(--color-tema-neon));
}

.vigilante-conflicto {
    background: rgba(40, 32, 12, 0.97);
    border: 2px solid #f5c542;
}

.vigilante-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: rgba(59, 130, 246, 0.22);
    border: 2px solid #3b82f6; /* escudo azul del Vigilante */
}

.vigilante-conflicto .vigilante-icono {
    background: rgba(245, 197, 66, 0.18);
    border-color: #f5c542;
}

.vigilante-cuerpo {
    flex: 1;
    min-width: 0;
}

.vigilante-etiqueta {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #93c5fd;
}

.vigilante-conflicto .vigilante-etiqueta {
    color: #f5c542;
}

.vigilante-lista {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vigilante-lista li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    font-size: 0.92rem;
}

.vigilante-lista strong {
    font-size: 1rem;
}

.vigilante-lista span {
    font-size: 0.85rem;
    opacity: 0.85;
}

.vigilante-mensaje {
    margin: 0 0 10px;
    font-size: 0.85rem;
    opacity: 0.85;
}

.vigilante-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.vigilante-boton {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--verde-neon, var(--color-tema-neon));
    background: rgba(var(--color-tema-neon-rgb), 0.2);
    color: var(--blanco-hueso, #f5f1e6);
    font-weight: 600;
    cursor: pointer;
}

.vigilante-boton-secundario {
    background: transparent;
}

.vigilante-conflicto .vigilante-boton {
    border-color: #f5c542;
    background: rgba(245, 197, 66, 0.18);
}

.vigilante-conflicto .vigilante-boton-secundario {
    background: transparent;
}

.vigilante-boton:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

@keyframes vigilante-entrada {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* =========================================
   MODAL DE DECISIÓN (tiempo agotado / choque en modo enfoque)
   Por encima de todo, incluido el visor de enfoque y los pop-ups del Vigilante.
========================================= */
.modal-decision-mision {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 8, 12, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000002;
}

.tarjeta-decision {
    width: min(440px, 100%);
    padding: 26px 22px 22px;
    border-radius: 20px;
    text-align: center;
    color: var(--blanco-hueso, #f5f1e6);
    background: var(--verde-esmeralda-suave);
    border: 2px solid var(--verde-neon, var(--color-tema-neon));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    animation: celebracion-entrada 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-decision.decision-escudo {
    background: rgba(40, 32, 12, 0.98);
    border-color: #f5c542;
}

.decision-icono {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 8px;
}

.decision-titulo {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--blanco-hueso, #f5f1e6);
}

.decision-mensaje {
    margin: 0 0 20px;
    line-height: 1.5;
    font-size: 1rem;
}

.decision-opciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-decision {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(245, 241, 230, 0.35);
    background: transparent;
    color: var(--blanco-hueso, #f5f1e6);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-decision.btn-decision-principal {
    border-color: var(--verde-neon, var(--color-tema-neon));
    background: rgba(var(--color-tema-neon-rgb), 0.22);
}

.decision-escudo .btn-decision.btn-decision-principal {
    border-color: #f5c542;
    background: rgba(245, 197, 66, 0.2);
}

.btn-decision:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-decision {
        animation: none;
    }
}

/* =========================================
   MISIONES DE HOY · SIGUIENTE MISIÓN Y HORA PASADA
========================================= */
/* Siguiente actividad avisada: verde neón corporativo */
.item-rutina.mision-siguiente {
    border: 1px solid var(--verde-neon, var(--color-tema-neon)) !important;
    background: rgba(var(--color-tema-neon-rgb), 0.08);
    box-shadow: 0 0 14px rgba(var(--color-tema-neon-rgb), 0.35);
}

.insignia-siguiente {
    align-self: flex-start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #04130e;
    background: var(--verde-neon, var(--color-tema-neon));
}

/* Hora pasada y sigue pendiente: violeta suave y estable (no es un error ni una cuenta atrás) */
.item-rutina.mision-hora-pasada {
    border: 1px solid rgba(167, 139, 250, 0.55) !important;
    background: rgba(167, 139, 250, 0.07);
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.18);
}

/* Señal temporal al pulsar "Ver en Misiones de Hoy" desde el Escudo */
.item-rutina.mision-en-conflicto {
    outline: 2px dashed #f5c542;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .vigilante-popup {
        animation: none;
    }
}

/* =========================================
   FASE 4 — EL ORIGEN (ONBOARDING DE USUARIOS NUEVOS)
   Pantalla completa, sin menú lateral. Solo existe visualmente cuando app.js añade
   .onboarding-visible: así un usuario existente nunca la ve, ni siquiera un instante.
========================================= */
.pantalla-onboarding:not(.onboarding-visible) {
    display: none !important;
}

/* Mientras dura el onboarding, la app queda fuera de escena */
body.modo-onboarding {
    overflow: hidden;
}

body.modo-onboarding #marco-app,
body.modo-onboarding #btn-menu-hamburguesa {
    display: none !important;
}

#vista-onboarding.pantalla-onboarding {
    position: fixed;
    inset: 0;
    z-index: 100000;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--blanco-hueso, #f5f1e6);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--color-tema-neon-rgb), 0.16), transparent 70%),
        radial-gradient(ellipse 60% 45% at 85% 100%, rgba(168, 85, 247, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(56, 189, 248, 0.08), transparent 70%),
        #07090d;
}

/* Cielo estrellado sutil (puro CSS) */
.onboarding-cielo {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1.5px 1.5px at 34% 72%, rgba(180, 255, 235, 0.6), transparent 60%),
        radial-gradient(1px 1px at 62% 44%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 66%, rgba(216, 180, 254, 0.65), transparent 60%),
        radial-gradient(1px 1px at 22% 88%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 48% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 6% 52%, rgba(180, 255, 235, 0.5), transparent 60%),
        radial-gradient(1px 1px at 94% 34%, rgba(255, 255, 255, 0.5), transparent 60%);
    animation: onboarding-titilar 6s ease-in-out infinite alternate;
}

@keyframes onboarding-titilar {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* Selector de idioma centrado en el Paso 1: dos píldoras grandes e invitacionales */
.onboarding-idioma {
    position: relative;
    width: 100%;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.onboarding-idioma-btn {
    min-height: 48px;
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(30, 30, 34, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-texto);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.onboarding-idioma-btn:hover {
    transform: translateY(-2px);
    border-color: var(--verde-neon, var(--color-tema-neon));
}

.onboarding-idioma-btn[aria-pressed="true"] {
    color: #04130e;
    background: var(--verde-neon, var(--color-tema-neon));
    border-color: var(--verde-neon, var(--color-tema-neon));
    box-shadow: 0 0 20px rgba(var(--color-tema-neon-rgb), 0.3);
}

.onboarding-idioma-btn:focus-visible {
    outline: 2px solid var(--verde-neon, var(--color-tema-neon));
    outline-offset: 2px;
}

.onboarding-contenido {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    /* Padding simétrico: el centro óptico coincide con el geométrico (sin elementos en esquinas) */
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    box-sizing: border-box;
}

/* Fuera del flujo: así el bloque del paso queda en el centro geométrico exacto de la pantalla */
.onboarding-progreso {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.onboarding-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.onboarding-punto.activo {
    background: var(--verde-neon, var(--color-tema-neon));
    border-color: var(--verde-neon, var(--color-tema-neon));
    box-shadow: 0 0 10px rgba(var(--color-tema-neon-rgb), 0.8);
}

.onboarding-linea {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--color-tema-neon-rgb), 0.6), rgba(255, 255, 255, 0.15));
}

.onboarding-paso {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    animation: onboarding-entrada 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-paso[hidden] {
    display: none !important;
}

@keyframes onboarding-entrada {
    from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.onboarding-sello {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2rem;
    background: radial-gradient(circle at 30% 30%, rgba(var(--color-tema-neon-rgb), 0.35), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(var(--color-tema-neon-rgb), 0.55);
    box-shadow: 0 0 30px rgba(var(--color-tema-neon-rgb), 0.35), inset 0 0 18px rgba(var(--color-tema-neon-rgb), 0.25);
    animation: onboarding-latido 3.2s ease-in-out infinite;
}

@keyframes onboarding-latido {
    0%, 100% { box-shadow: 0 0 24px rgba(var(--color-tema-neon-rgb), 0.3), inset 0 0 18px rgba(var(--color-tema-neon-rgb), 0.2); }
    50% { box-shadow: 0 0 42px rgba(var(--color-tema-neon-rgb), 0.55), inset 0 0 18px rgba(var(--color-tema-neon-rgb), 0.35); }
}

#vista-onboarding .onboarding-capitulo {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--verde-neon, var(--color-tema-neon));
}

#vista-onboarding .onboarding-titulo {
    margin: 0;
    padding: 0 !important;
    max-width: 640px;
    font-size: clamp(1.5rem, 4.2vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: center !important;
    color: var(--blanco-hueso, #f5f1e6);
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: 0 0 24px rgba(var(--color-tema-neon-rgb), 0.25);
    outline: none; /* recibe el foco por programa al cambiar de paso */
}

#vista-onboarding .onboarding-pregunta {
    margin: 0 0 8px;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--color-texto-secundario);
}

.onboarding-form {
    width: min(460px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
}

.onboarding-oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#vista-onboarding .onboarding-input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(30, 30, 34, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--blanco-hueso, #f5f1e6);
    font-size: 1.2rem;
    text-align: center;
    -webkit-user-select: text;
    user-select: text;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Anula el fondo blanco brillante del autocompletado del navegador */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #1a1c20 inset !important;
    -webkit-text-fill-color: var(--color-texto) !important;
    transition: background-color 5000s ease-in-out 0s;
}

#vista-onboarding #input-nombre-onboarding {
    margin-top: 15px;
    max-width: 320px;
    font-size: 1rem;
}

#vista-onboarding .onboarding-input::placeholder {
    color: rgba(245, 241, 230, 0.35);
}

#vista-onboarding .onboarding-input:focus {
    outline: none;
    border-color: var(--verde-neon, var(--color-tema-neon));
    box-shadow: 0 0 0 3px rgba(var(--color-tema-neon-rgb), 0.2), 0 0 24px rgba(var(--color-tema-neon-rgb), 0.25);
}

.onboarding-boton {
    padding: 14px 28px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-tema-neon), var(--color-tema) 55%, var(--color-tema-claro));
    color: #04130e;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(var(--color-tema-neon-rgb), 0.4), 0 10px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.onboarding-boton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(var(--color-tema-neon-rgb), 0.6), 0 12px 28px rgba(0, 0, 0, 0.4);
}

.onboarding-boton:focus-visible,
.onboarding-boton-secundario:focus-visible {
    outline: 2px solid #eafff8;
    outline-offset: 3px;
}

.onboarding-boton:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    filter: grayscale(0.8);
    box-shadow: none;
}

.onboarding-boton-secundario {
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.onboarding-boton-secundario:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-texto);
}

/* Compañeros: reutiliza .grid-avatares-compañeros / .card-avatar con un acabado de cristal */
.grid-onboarding {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4px;
}

#vista-onboarding .card-avatar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#vista-onboarding .card-avatar:focus-visible {
    outline: 2px solid var(--verde-neon, var(--color-tema-neon));
    outline-offset: 3px;
}

#vista-onboarding .card-avatar.seleccionado {
    border-color: var(--verde-neon, var(--color-tema-neon));
    background: rgba(var(--color-tema-neon-rgb), 0.1);
    box-shadow: 0 0 26px rgba(var(--color-tema-neon-rgb), 0.35);
}

#vista-onboarding .card-avatar.seleccionado img {
    filter: drop-shadow(0 0 12px rgba(var(--color-tema-neon-rgb), 0.7));
}

.onboarding-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

/* Fundido a grafito inmersivo (1 s) entre el onboarding y el Campamento */
.onboarding-fundido {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: #12141c;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.onboarding-fundido.activo {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   DESBLOQUEO AUTÓNOMO DE COMPAÑEROS (Ajustes)
========================================= */
/* El gris va en el contenido y no en la tarjeta: así el borde invitacional conserva su verde */
.card-avatar.avatar-bloqueado img,
.card-avatar.avatar-bloqueado .avatar-titulo,
.card-avatar.avatar-bloqueado .avatar-desc {
    filter: grayscale(1) opacity(0.5);
}

.card-avatar.avatar-reclutable {
    border: 2px dashed var(--color-tema);
    cursor: pointer;
}

.card-avatar.avatar-reclutable:hover,
.card-avatar.avatar-reclutable:focus-visible {
    background: rgba(var(--color-tema-rgb), 0.08);
    box-shadow: 0 0 18px rgba(var(--color-tema-rgb), 0.25);
}

.card-avatar.avatar-sin-desbloqueos {
    cursor: default;
}

.avatar-insignia-bloqueo {
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-texto-secundario);
    background: rgba(255, 255, 255, 0.06);
}

.avatar-reclutable .avatar-insignia-bloqueo {
    color: #04130e;
    background: var(--color-tema);
}

/* Modal de presentación y bautizo del compañero recién reclutado */
.modal-bautizo {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000001;
}

.tarjeta-bautizo {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 24px;
    border-radius: 20px;
    text-align: center;
    background: var(--fondo-paneles);
    border: 1px solid rgba(var(--color-tema-rgb), 0.45);
    box-shadow: 0 0 30px rgba(var(--color-tema-rgb), 0.25), 0 16px 40px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.bautizo-avatar {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(var(--color-tema-rgb), 0.55));
}

.bautizo-titulo {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-texto);
}

.bautizo-mensaje {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-texto-secundario);
}

.bautizo-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(30, 30, 34, 0.6);
    color: var(--color-texto);
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
}

.bautizo-input:focus {
    outline: none;
    border-color: var(--color-tema);
    box-shadow: 0 0 0 3px rgba(var(--color-tema-rgb), 0.2);
}

.bautizo-acciones {
    width: 100%;
    display: flex;
    gap: 12px;
}

.bautizo-boton-principal,
.bautizo-boton-secundario {
    flex: 1;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.bautizo-boton-principal {
    border: none;
    background: var(--color-tema);
    color: #04130e;
}

.bautizo-boton-secundario {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: var(--color-texto-secundario);
}

.bautizo-boton-principal:focus-visible,
.bautizo-boton-secundario:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

/* =========================================
   EL GRAN RECORRIDO: tour guiado inmersivo (W3C COGA: un único foco de atención)
========================================= */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s;
}

.tour-highlight {
    z-index: 100000 !important;
    box-shadow: 0 0 0 4px var(--color-tema), 0 0 25px var(--color-tema) !important;
    border-radius: inherit;
    pointer-events: none;
    background: var(--fondo-paneles);
}

/* El menú conserva su posicionamiento (fixed/sticky): relative lo sacaría de su sitio */
.tour-highlight:not(.menu-lateral) {
    position: relative;
}

/* El menú sube por encima del overlay para que sus elementos puedan resaltarse;
   todo lo que no se está explicando queda atenuado e inerte */
body.tour-activo #menu-lateral {
    z-index: 100000 !important;
    pointer-events: none;
}

body.tour-activo #menu-lateral:not(.tour-highlight) .perfil-menu,
body.tour-activo #menu-lateral:not(.tour-highlight) .lista-menu li:not(.tour-highlight) {
    opacity: 0.25;
}

/* Bocadillo flotante del compañero guía */
.tour-guia {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--fondo-paneles);
    border: 1px solid rgba(var(--color-tema-rgb), 0.45);
    box-shadow: 0 0 30px rgba(var(--color-tema-rgb), 0.25), 0 16px 40px rgba(0, 0, 0, 0.55);
    color: var(--color-texto);
    z-index: 1000000; /* sobre el overlay, el menú y el aviso del Escudo; bajo los diálogos del sistema */
    box-sizing: border-box;
    animation: tour-guia-entrada 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-guia[data-posicion="abajo"] {
    bottom: max(24px, env(safe-area-inset-bottom));
}

.tour-guia[data-posicion="arriba"] {
    top: max(24px, env(safe-area-inset-top));
}

@keyframes tour-guia-entrada {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Dentro de #vista-mision el bocadillo entra en el flujo flex: empuja el anillo hacia abajo sin taparlo */
.tour-guia.tour-guia-en-flujo {
    position: relative;
    left: auto;
    transform: none;
    flex-shrink: 0;
    margin: 0 auto 24px;
    z-index: 10;
    animation-name: tour-guia-entrada-flujo;
}

@keyframes tour-guia-entrada-flujo {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ayuda contextual ❓: fuera del flujo para no descentrar el título de la cabecera */
.header-superior,
.cabecera-vista {
    position: relative;
}

.btn-ayuda-contextual {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    opacity: 0.75;
}

.btn-ayuda-contextual:hover,
.btn-ayuda-contextual:focus-visible {
    opacity: 1;
    border-color: var(--color-tema) !important;
}

.btn-ayuda-contextual:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

.btn-ayuda-contextual:active {
    transform: translateY(-50%) scale(0.9);
}

/* Variante en línea (cabecera flex del buscador) */
.btn-ayuda-contextual.btn-ayuda-en-linea {
    position: static;
    transform: none;
    flex-shrink: 0;
}

.btn-ayuda-contextual.btn-ayuda-en-linea:active {
    transform: scale(0.9);
}

.tour-guia-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(var(--color-tema-rgb), 0.5));
    animation: tour-guia-flotar 3s ease-in-out infinite;
}

@keyframes tour-guia-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.tour-guia-cuerpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tour-guia-nombre {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-tema);
}

.tour-guia-texto {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.tour-guia-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.tour-guia-paso {
    font-size: 0.75rem;
    color: var(--color-texto-secundario);
}

.tour-guia-boton {
    margin-left: auto;
    min-height: 40px;
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: var(--color-tema);
    color: #04130e;
    font-weight: 800;
    cursor: pointer;
}

.tour-guia-boton:focus-visible {
    outline: 2px solid #eafff8;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tour-guia,
    .tour-guia-avatar {
        animation: none;
    }
}

@media (max-width: 560px) {
    .grid-onboarding {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onboarding-acciones {
        flex-direction: column-reverse;
        width: 100%;
    }

    .onboarding-acciones .onboarding-boton,
    .onboarding-acciones .onboarding-boton-secundario {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-cielo,
    .onboarding-paso,
    .onboarding-sello {
        animation: none;
    }

    .onboarding-fundido {
        transition-duration: 0.3s;
    }
}

/* =========================================
   CONTENCIÓN VISUAL MÓVIL
   Va al final a propósito: gana la cascada a las reglas de 100vh / height:auto
   repartidas por el archivo sin tener que tocarlas una a una.
========================================= */

/* 1. Bloqueo del scroll infinito: el documento mide exactamente la pantalla y
   solo #app-container (el área de vistas) desplaza. min-height:0 anula los
   min-height:100vh previos, que en móvil son más altos que 100dvh y cortaban el pie. */
html,
body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

html body #marco-app {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden;
}

/* app.js ya resetea #app-container.scrollTop al cambiar de vista; los modos
   enfoque/onboarding usan selectores más específicos y conservan su layout */
html body #app-container {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto !important;
}

/* Las vistas rellenan el área visible en lugar de sumar otro 100vh dentro del scroll */
#app-container > .vista,
#app-container > .vista-app {
    min-height: 100%;
}

/* 2. Títulos de vista: el h1 es una placa inline-block de una palabra en mayúsculas;
   en pantallas estrechas no cabía entre la hamburguesa y el botón ❓ y desbordaba */
.header-superior,
.cabecera-vista {
    flex-wrap: wrap;
    min-width: 0;
}

/* break-word (no anywhere): anywhere encoge el ancho mínimo de la placa y el flex la estrechaba
   hasta partir palabras que sí cabían ("CÉNTR/ATE"); break-word solo parte si de verdad no cabe */
.header-superior h1,
.cabecera-vista h1 {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    /* Incluye los selectores con id: sin ellos #vista-campamento h1 (!important) ganaba y
       el título del Campamento seguía con el tamaño de escritorio */
    html body .header-superior h1,
    html body .cabecera-vista h1,
    html body #vista-campamento h1,
    html body #vista-planificador h1,
    html body #vista-planificacion h1,
    html body #vista-completadas h1,
    html body #titulo-planificacion,
    html body #titulo-completadas,
    html body #titulo-ajustes {
        font-size: clamp(1.05rem, 5.2vw, 1.4rem) !important;
        letter-spacing: 0.06em !important;
        padding: 0.5rem 1rem !important;
        margin-bottom: 1.25rem !important;
    }
}

@media (max-width: 379.98px) {
    /* Hueco justo para la hamburguesa fija (izq.) y el botón ❓ de 40px (dcha.) */
    html body .header-superior,
    html body .cabecera-vista {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* 3. Subtareas y micro-pasos: el texto ocupa el espacio libre y parte palabras
   largas; los botones conservan su tamaño táctil y no se montan sobre las letras */
.subtarea-item,
.subtarea-pildora,
.card-tarea-titulo,
.texto-subtarea-modal,
.item-micro-paso,
.item-micropaso-preview {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.subtarea-item .subtarea-texto,
.item-micro-paso > span,
.item-micropaso-preview > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.item-micro-paso {
    gap: 0.5rem;
}

.item-micro-paso button {
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2rem;
}

.item-micropaso-preview {
    align-items: flex-start;
}

.card-tarea-backlog-header,
.card-tarea-acciones {
    flex-wrap: wrap;
}

.card-tarea-titulo {
    flex: 1 1 8rem;
    min-width: 0;
}

@media (max-width: 379.98px) {
    .card-tarea-backlog,
    #lista-tareas-backlog > li {
        padding: 0.75rem;
    }

    /* Acciones en su propia fila: el título recupera todo el ancho */
    .card-tarea-acciones {
        width: 100%;
        justify-content: flex-end;
    }

    .seccion-planificador-creacion {
        padding: 0.875rem;
    }

    .item-subtarea-detalle-modal {
        flex-wrap: wrap;
        padding: 0.625rem 0.75rem;
    }

    .modal-detalle-contenedor {
        min-width: 0;
    }
}

/* 4. Indicador de subtareas ocultas: con más de 3 ítems la lista se limita a ~3,5
   (el 4.º asoma), muestra una barra grafito y un desvanecido inferior que avisa
   de que hay más sin obligar a adivinarlo */
#lista-micro-pasos:has(> li:nth-child(4)),
.lista-micropasos-preview:has(> li:nth-child(4)),
.lista-subtareas-modal-ul:has(> li:nth-child(4)) {
    overflow-y: auto;
    padding-right: 0.5rem !important; /* #lista-micro-pasos trae padding en línea */
    --fondo-desvanecido: var(--fondo-paneles);
}

#lista-micro-pasos:has(> li:nth-child(4)) { max-height: 8.5rem; }
.lista-micropasos-preview:has(> li:nth-child(4)) { max-height: 5.25rem; }
.lista-subtareas-modal-ul:has(> li:nth-child(4)) {
    max-height: 10.75rem;
    --fondo-desvanecido: #1a1c20; /* fondo de .modal-detalle-contenedor */
}

/* La regla global oculta todas las barras: aquí se reactivan a propósito */
#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar,
.lista-micropasos-preview:has(> li:nth-child(4))::-webkit-scrollbar,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar,
#lista-subtareas-campamento::-webkit-scrollbar {
    display: block;
    width: 6px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-track,
.lista-micropasos-preview:has(> li:nth-child(4))::-webkit-scrollbar-track,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-track,
#lista-subtareas-campamento::-webkit-scrollbar-track {
    background: var(--fondo-app);
    border-radius: 3px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-thumb,
.lista-micropasos-preview:has(> li:nth-child(4))::-webkit-scrollbar-thumb,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-thumb,
#lista-subtareas-campamento::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
}

#lista-micro-pasos:has(> li:nth-child(4))::-webkit-scrollbar-thumb:hover,
.lista-micropasos-preview:has(> li:nth-child(4))::-webkit-scrollbar-thumb:hover,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::-webkit-scrollbar-thumb:hover,
#lista-subtareas-campamento::-webkit-scrollbar-thumb:hover {
    background: #5c5c5c;
}

/* Firefox no conoce ::-webkit-scrollbar; en Chrome scrollbar-color anularía
   los estilos de arriba, por eso solo se aplica donde no existen */
@supports not selector(::-webkit-scrollbar) {
    #lista-micro-pasos:has(> li:nth-child(4)),
    .lista-micropasos-preview:has(> li:nth-child(4)),
    .lista-subtareas-modal-ul:has(> li:nth-child(4)),
    #lista-subtareas-campamento {
        scrollbar-width: thin;
        scrollbar-color: #4a4a4a var(--fondo-app);
    }
}

/* Desvanecido pegado al borde inferior visible mientras se desplaza; al llegar
   al final queda tras el último ítem y lo deja totalmente legible */
#lista-micro-pasos:has(> li:nth-child(4))::after,
.lista-micropasos-preview:has(> li:nth-child(4))::after,
.lista-subtareas-modal-ul:has(> li:nth-child(4))::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    flex: 0 0 auto;
    height: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--fondo-desvanecido));
}

/* =========================================
   RENDIMIENTO WEBVIEW (60 FPS EN GAMA MEDIA/BAJA)
   Solo transform/opacity en lo que se anima de forma continua o a pantalla completa:
   el compositor de la GPU los mueve sin recalcular layout ni repintar.
========================================= */

/* 1. Menú lateral (modo cajón): se desliza con transform en vez de animar `left`, que
   forzaba layout + repintado de 290-340px en cada fotograma. Mismas condiciones que activan
   el cajón (< 900px o vertical); en escritorio horizontal sigue anclado como columna. */
@media (max-width: 899px), (orientation: portrait) {
    html body #menu-lateral,
    html body .menu-lateral {
        left: 0 !important;
        transform: translateX(calc(-100% - 30px)); /* +30px: oculta también la sombra */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform;
    }

    html body #menu-lateral.abierto,
    html body .menu-lateral.abierto {
        transform: translateX(0);
    }
}

/* 2. Compañero del Modo Enfoque: latidoZen corre durante TODA la misión y animaba
   filter: drop-shadow, que se re-rasteriza en cada fotograma. Ahora la imagen solo se
   mueve (transform) con una sombra fija, y la "respiración" del brillo es un halo
   detrás que solo cambia opacity/transform. (::before lo usan las auras del Vínculo.) */
#img-companero-mision {
    filter: drop-shadow(0 0 12px rgba(var(--color-tema-rgb), 0.35));
    will-change: transform;
}

@keyframes latidoZen {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(0.97); } /* Inhala: sube un poco y se concentra hacia adentro */
}

.aura-concentracion {
    position: relative;
    isolation: isolate; /* el halo queda detrás del compañero sin salir del contenedor */
}

.aura-concentracion::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--color-tema-rgb), 0.45) 0%, rgba(var(--color-tema-rgb), 0.12) 40%, transparent 68%);
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.9);
    animation: halo-zen 6s ease-in-out infinite; /* mismo ritmo que latidoZen */
    will-change: opacity, transform;
}

@keyframes halo-zen {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    #img-companero-mision,
    .aura-concentracion::after {
        animation: none;
    }
}

/* Anillo del temporizador: stroke-dashoffset no lo acelera la GPU y la transición de 1s lo
   repintaba ~60 veces por segundo durante toda la misión, para avanzar menos de 1px por
   segundo (misión de 25 min). Sin transición: un repintado por segundo, a simple vista igual. */
.anillo-activo {
    transition: none;
}

/* 3. Desenfoques que no aportan nada visible pero cuestan GPU:
   - Placas de título: debajo solo hay el fondo liso de la vista, el blur era invisible.
   - Barra sticky del Planificador: el contenido se desplaza por debajo y el blur de 14px
     se recalculaba en cada fotograma de scroll. Un fondo casi opaco se ve prácticamente igual. */
html body h1,
html body .header-superior h1,
html body .cabecera-vista h1,
html body #titulo-planificacion,
html body #titulo-completadas,
html body #titulo-ajustes {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.barra-sticky-planificador,
.interruptor-vistas-planificador {
    background: rgba(30, 30, 30, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* =========================================
   MODO ENFOQUE EN UNA SOLA VISTA
   Todo el Modo Enfoque cabe en la pantalla sin scroll: tres zonas (reloj y paso arriba,
   compañero en medio, controles abajo) y tamaños en vh que se comprimen en proporción.
   El compañero es la zona elástica: cede espacio primero porque es el elemento decorativo.
========================================= */
html body.modo-enfoque-activo #vista-mision {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    justify-content: space-between !important;
    padding: max(2.5vh, env(safe-area-inset-top)) 1rem max(2vh, env(safe-area-inset-bottom)) !important;
}

html body.modo-enfoque-activo #vista-mision .entorno-inmersivo {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1vh;
}

/* Zona superior: no se encoge (es la información que importa) */
#vista-mision .contenedor-temporizador-zen,
#vista-mision .selector-ambiente,
#vista-mision #titulo-mision-activa,
#vista-mision #lista-subtareas-activa,
#vista-mision #estado-mision,
#vista-mision .checkout-bienestar,
#vista-mision .grupo-botones-mision {
    flex-shrink: 0;
}

#vista-mision .contenedor-temporizador-zen {
    width: clamp(88px, 18vh, 160px);
    height: clamp(88px, 18vh, 160px);
    margin: 0 auto;
}

#vista-mision .tiempo-discreto {
    font-size: clamp(1rem, 3vh, 1.5rem);
}

/* Los tres sonidos en una sola fila: en 320-360px saltaban a dos filas y robaban ~48px */
#vista-mision .selector-ambiente {
    margin: 0;
    gap: 6px;
    flex-wrap: nowrap;
}

#vista-mision .btn-ambiente {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.4rem clamp(0.5rem, 2.5vw, 0.9rem);
    font-size: clamp(0.75rem, 3.4vw, 0.9rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#vista-mision #titulo-mision-activa {
    font-size: clamp(1.1rem, 3.2vh, 1.6rem);
    margin: 0;
    /* Títulos muy largos: máximo 3 líneas para no empujar los controles fuera de la pantalla */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#vista-mision #lista-subtareas-activa {
    margin: 0 auto;
}

#vista-mision #lista-subtareas-activa .subtarea-item.paso-activo,
#vista-mision #lista-subtareas-activa .paso-completado-exito {
    padding: clamp(0.75rem, 2.2vh, 1.6rem) clamp(1rem, 4vw, 2rem);
    font-size: clamp(1rem, 2.6vh, 1.3rem);
}

#vista-mision #estado-mision {
    margin: 0;
    font-size: 0.85rem;
}

/* Zona central elástica: el compañero se adapta al hueco que queda (estilos en línea del HTML) */
#vista-mision #zona-companero-mision {
    flex: 1 1 auto;
    min-height: 0;
    /* La contención de tamaño anula también el ancho intrínseco: sin esto la zona medía 0px de ancho */
    align-self: stretch;
    width: 100%;
    margin: 0 !important;
    --tamano-aura: clamp(80px, 20vh, 170px);
    /* Contenedor de consulta: la zona mide el hueco libre (no su contenido) y, según lo que
       quede, se retira primero el subtítulo y después el compañero, en vez de dejar una miniatura */
    container: zona-companero / size;
}

@container zona-companero (max-height: 150px) {
    #subtitulo-companero-mision {
        display: none;
    }
}

@container zona-companero (max-height: 72px) {
    .aura-concentracion {
        display: none;
    }
}

#vista-mision #img-companero-mision {
    width: auto;
    height: clamp(64px, 20vh, 170px);
    max-height: 100%;
}

/* La cadena flex con min-height: 0 da al compañero una altura definida: así su max-height: 100%
   funciona y la imagen se encoge en pantallas bajas en vez de empujar los botones */
#vista-mision .aura-concentracion {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

#vista-mision .aura-concentracion::after {
    width: clamp(90px, 23vh, 200px);
    height: clamp(90px, 23vh, 200px);
}

#vista-mision #subtitulo-companero-mision {
    margin-top: 1vh !important;
}

#vista-mision .checkout-bienestar {
    margin: 0;
}

#vista-mision .btn-bienestar {
    width: clamp(44px, 6.5vh, 56px);
    height: clamp(44px, 6.5vh, 56px);
}

/* Zona inferior: controles siempre visibles y al alcance del pulgar */
html body.modo-enfoque-activo #vista-mision .grupo-botones-mision {
    margin: 0 auto;
    padding-bottom: 0;
}

#vista-mision .btn-mision-accion {
    min-height: 44px;
    padding: clamp(0.6rem, 1.6vh, 0.75rem) 1rem;
}

/* Pantallas muy bajas (móvil en horizontal): fuera los textos de estado, que son decorativos */
@media (max-height: 560px) {
    #vista-mision #estado-mision,
    #vista-mision #subtitulo-companero-mision {
        display: none;
    }
}

/* =========================================
   BOTONES DE ENERGÍA: SIEMPRE EN UNA FILA
   Las tres opciones comparten fila con alto fijo. El texto parte línea dentro del botón y,
   si aun así no cabe ("Supervivencia" en 320px), se desliza en vertical por dentro sin
   barra visible, en vez de ensanchar el botón o mandarlo a otra fila.
========================================= */
.botones-energia {
    flex-wrap: nowrap;
}

.btn-energia {
    flex: 1 1 0;
    min-width: 0;
    height: 3.6rem;
    min-height: 44px;
    padding: 0.35rem 0.4rem;
    font-size: clamp(0.75rem, 3.4vw, 0.85rem);
    line-height: 1.25;
    /* El espaciado global (0.12em) no cabe en un tercio de 320px: aquí se ajusta solo en estos botones */
    letter-spacing: 0.03em;
    word-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.btn-energia::-webkit-scrollbar {
    display: none;
}

/* =========================================
   CALENDARIO MINIMALISTA (BAJA ACTIVACIÓN)
   Cada día es un número sobre grafito; un punto de acento marca los días con actividades.
   El contenido se lee en la lista inferior al tocar el día, nunca apiñado en la celda.
========================================= */
#subvista-calendario {
    max-width: 40rem;
    margin: 0 auto;
}

#subvista-calendario .dias-semana-header {
    gap: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    opacity: 0.7;
}

#grid-mes-calendario {
    gap: 4px;
    padding: 0.5rem;
    background: var(--fondo-paneles);
    border-radius: 16px;
}

#grid-mes-calendario .celda-calendario {
    position: relative;
    height: clamp(2.75rem, 11vw, 3.5rem);
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

#grid-mes-calendario .celda-calendario.vacia {
    visibility: hidden;
}

#grid-mes-calendario .celda-calendario:hover {
    background: rgba(255, 255, 255, 0.04);
}

#grid-mes-calendario .celda-calendario:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 1px;
}

#grid-mes-calendario .numero-dia {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
    letter-spacing: 0;
}

/* Hoy: solo el número en color de acento, sin caja ni borde */
#grid-mes-calendario .celda-calendario.hoy {
    background: transparent;
}

#grid-mes-calendario .celda-calendario.hoy .numero-dia {
    color: var(--color-tema);
    font-weight: 700;
}

#grid-mes-calendario .celda-calendario.seleccionado {
    background: rgba(255, 255, 255, 0.07);
}

#grid-mes-calendario .celda-calendario.seleccionado .numero-dia {
    color: var(--color-texto);
}

.punto-registro {
    position: absolute;
    bottom: 18%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-tema);
    transform: translateX(-50%);
}

/* Lista del día: texto plano en filas, sin tarjetas, colores apagados y una sola acción */
.lista-dia-calendario {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: var(--fondo-paneles);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
}

.lista-dia-calendario.entrando {
    animation: lista-dia-entrada 0.28s ease-out;
}

@keyframes lista-dia-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.lista-dia-titulo {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-texto);
}

.lista-dia-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-dia-item {
    display: grid;
    grid-template-columns: 1.5rem 3.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.lista-dia-item:last-child {
    border-bottom: none;
}

.lista-dia-icono {
    opacity: 0.8;
}

.lista-dia-hora {
    color: var(--color-texto-secundario);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.lista-dia-texto {
    color: var(--color-texto);
    overflow-wrap: anywhere;
}

.lista-dia-vacio {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
}

.lista-dia-accion {
    width: 100%;
    margin-top: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .lista-dia-calendario.entrando {
        animation: none;
    }

    #grid-mes-calendario .celda-calendario {
        transition: none;
    }
}

/* =========================================
   DIAGNÓSTICO DE PERMISOS (TONO INFORMATIVO, NO DE ALARMA)
   Reutiliza el modal de emergencia pero sin su borde/resplandor coral: es una ayuda, no un error.
========================================= */
#modal-permisos {
    padding: 1rem;
}

/* En pantallas bajas el contenido supera el alto: se desplaza dentro de la tarjeta en vez de
   cortarse por arriba y por abajo (el overlay centra y no tiene scroll) */
#modal-permisos .contenido-permisos {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    max-width: 440px;
    padding: 1.5rem 1.25rem;
    text-align: left;
    border: 1px solid var(--color-bordes);
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
}

#titulo-modal-permisos {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--color-texto);
}

#intro-modal-permisos {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: var(--color-texto-secundario);
}

.lista-permisos {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.fila-permiso {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fila-permiso:last-child {
    border-bottom: none;
}

.icono-permiso {
    font-size: 1.15rem;
    text-align: center;
}

.texto-permiso {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.texto-permiso strong {
    font-size: 0.95rem;
    color: var(--color-texto);
}

.porque-permiso {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-texto-secundario);
    overflow-wrap: break-word;
}

.estado-permiso {
    font-size: 0.82rem;
    color: var(--color-tema);
    white-space: nowrap;
}

/* Acción pendiente: contorno del tema, sin rojo ni ámbar */
.btn-permiso {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
    border-color: rgba(var(--color-tema-rgb), 0.5);
    color: var(--color-tema);
}

#btn-cerrar-permisos {
    width: 100%;
    min-height: 44px;
}

/* Pantallas estrechas: el botón baja bajo el texto en vez de apretarlo */
@media (max-width: 379.98px) {
    .fila-permiso {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .btn-permiso,
    .estado-permiso {
        grid-column: 2;
        justify-self: start;
    }
}