/* ================================================================ */
/* ==== ❇️ ⚙️ CONFIGURACIONES GLOBALES BASICAS ❇️==== */
/* ================================================================ */

/* ▶️ IMPORTAR */
/* FUENTES: Aqui se descargan las fuentes.
/* Fuentes Descargadas: Inter, League Spartan, Poppins, Quicksand */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=League+Spartan:wght@600;700&family=Poppins:wght@600;700&family=Quicksand:wght@400;500;600&display=swap');

/* CSS ENLAZADOS: Haz que este CSS incluya a otros CSS */
@import url("cards.css");

/* ▶️ VARIABLES GLOBALES: Variables que almacenan valores reutilizables */
:root {
    /* 🅰️ Tipo de Fuente: El tipo de fuente que se usa para cada tipo de texto (Font Family) */
    --ff-titulo: 'Poppins', sans-serif;
    --ff-subtitulo: 'League Spartan', sans-serif;
    --ff-texto: 'Quicksand', sans-serif;
    --ff-nota: 'Inter', sans-serif;

    /* 🔳 Grosor de Fuente: Establece que tan marcadas estaran las letras en el sitio (Font Weight) */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* 🎨 Colores: Tablas */
    --color-chart-header: #4a5568;
    --color-chart-header2: #839ca2;
    --color-chart-background: #B0BCC7;
    --color-chart-background2: #cbdcf7;
    --color-chart-shadow: #000000;

    /* 🎨 Colores: Menus */
    /* ARTISTA */

    /* ADMINISTRADOR */
    --color-bg-admin: #94544e;
    --color-text-admin: #ffdad6;
    --color-ele-admin: #e84141;
    --color-ele-admin-hover: #f87b70;
    --color-ele-admin-selected: #e84141;


    /* 🎨 Colores: Paneles Oscuros (Vistas de Login / Registro de Ricardo) */
    --color-navy-black: #000000;
    --color-navy-dark: #1b212b;       
    --color-input-gray: #565660;      
    --color-input-gray-hover: #63636e;
    --color-btn-light: #e2f1f6;       
    --color-btn-light-hover: #cfe6ee;
    --color-btn-text-dark: #1b212b;
    --color-btn-1: #ffffff;
    --color-btn-2: #C9D6DF;

    /* 🎨 Colores: Tema Claro (CritLight Dashboard, Perfil, Gráficos) */
    --color-bg-primary: #dfe6ee;          /* Sincronizado con tu background-color original */
    --color-bg-secondary: #ffffff;
    --color-navbar-white: #ffffff;
    --color-text-dark: #1f2430;
    --color-text-gray: #5c6270;

    /* ✨ Acentos de Marca CritLight */
    --color-gold: #e6b33d;            
    --color-gold-hover: #d1a02f;
    --color-teal: #2bc4c6;            
    --color-teal-hover: #22a9ab;
    --color-purple: #7c4fd1;          

    /* ⚠️ Estados */
    --color-error-light: #ffa2a2;
    --color-error: #ef4444;
    --color-error-dark: #7f1d1d;
    --color-warning: #F59E0B;
    --color-warning-dark: #78350F;
    --color-success: #22c55e;
    --color-success-dark: #14532d;

    /* 📐 Estructura Reutilizable (Espaciados y Bordes) */
    /* Variables usadas en PADDING */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    /* Variables usadas en BORDER-RADIUS */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* 👥 Sombras */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
}  

/* ==========================================================================
   📌 ESTILOS BASE Y RESETEO GLOBAL
   ========================================================================== */

/* ▶️ CONFIGURACIÓN DEFAULT: 
En caso de que algo no tenga una configuración, se le aplica esta */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ff-texto); /* Mantiene tu Quicksand global */
}

/* ▶️ SCROLL:
Modifica la visualización del scroll en la pagina */
html {
    scroll-behavior: smooth; /* Logra que al moverte por la página el scroll no sea brusco (De base.css) */
}

/* ▶️ FONDO DE LA PAGINA:
Afecta al fondo principal de la pagina*/
body {
    background-color: var(--color-app-bg);
    color: var(--color-text-dark);
    line-height: 1.5; /* Mejora la lectura de los textos (De base.css) */
}

/* ▶️ SUBRAYADO DE ENLANCES:
Elimina el subrayado que obtienen los enlaces */
a {
    text-decoration: none; /* DEFAULT: none (activado) */
    color: inherit; /* Hereda el color del contenedor padre para que no se pongan azules obligatorios */
}

/* ▶️ CONTROL DE ARCHIVOS MULTIMEDIA:
Control de Imágenes globales para evitar desbordes (De base.css) */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   ⚙️ ESTRUCTURA BASE (Atributos compartidos de truncado)
   ========================================================================== */
/* ▶️ TEXTO TRUNCADO:
Limita que el texto salga de su contenedor padre */
.text-truncate-dynamic {
    display: block;
    white-space: nowrap;    /* Prohíbe el salto de línea */
    overflow: hidden;       /* Oculta lo que se desborde */
    text-overflow: ellipsis;/* Agrega los "..." de forma nativa */
    transition: font-size 0.1s ease;
    
    /* Por defecto, si no se añade modificador, será 100% */
    width: 100%; 
}

/* ==========================================================================
   📐 MODIFICADORES DE ANCHO (Decide el límite de la línea)
   ========================================================================== */
.text-truncate-dynamic--full {
    width: 100%;
}

.text-truncate-dynamic--xl {
    width: 90%;
}

.text-truncate-dynamic--lg {
    width: 80%;
}

.text-truncate-dynamic--std {
    width: 75%;
}

.text-truncate-dynamic--sm {
    width: 65%;
}

.text-truncate-dynamic--xs {
    width: 50%;
}

/* ==========================================================================
   ▶️ CONTENEDORES DE LA APP (Estructura de las páginas)
   ========================================================================== */

/* -------------------------------------------------------------------------
   A) COMPORTAMIENTO BASE DEL BODY
   ------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--color-app-bg); /* Fondo base por defecto */
}
/* Si un body no lleva clase, se quedará automáticamente con el color plano base */

/* MODIFICADORES DE FONDO (Elige uno en el HTML) */
body.bg-watercolor-1 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../Img/background1.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

body.bg-watercolor-2 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../Img/background2.png'); /* Listo para cuando la tengas */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* -------------------------------------------------------------------------
   B) CONTENEDOR PRINCIPAL (.app-wrapper)
   ------------------------------------------------------------------------- */
.app-wrapper {
    width: 100%;
    margin: 0 auto;               /* ⚡ Por defecto: Cero separación arriba (Pegado al Header) */
    padding: 0 var(--spacing-md);  /* Colchón seguro a los lados */
    box-sizing: border-box;
}

/* ↕️ VARIANTES DE ESPACIADO VERTICAL (Manejan la separación con el Header) */

/* Modificador para vistas que SÍ necesitan aire/separación arriba (ej: homepage.html) */
.app-wrapper.with-gap {
    margin-top: var(--spacing-xl); /* O puedes usar un valor fijo como 40px o 60px según te guste */
}

/* Modificador para vistas que SÍ necesitan aire/separación arriba (ej: homepage.html) */
.app-wrapper.with-gap-xs  {
    margin-top: var(--spacing-xs); /* O puedes usar un valor fijo como 40px o 60px según te guste */
}


/* ↔️ VARIANTES DE ANCHURA (Elige una combinación en el HTML según la vista) */

/* Versión estándar: Más angosta (Ideal para perfiles o layouts enfocados) */
.app-wrapper.layout-standard {
    max-width: 80%;
}

/* Versión ancha: Más espacio horizontal (Ideal para tableros o galerías masivas) */
.app-wrapper.layout-wide {
    max-width: 95%; 
}

/* ==========================================================================
   ========== ❇️ ✨ CLASES UTILITARIAS GLOBALES (REUTILIZABLES) ❇️ ==========
   ========================================================================== */

/* ▶️ ELEMENTOS DE CURSOR INTERACTIVO: Forzar el cursor interactivo en todos los botones del sitio */
button, 
.btn-outline, 
.tab-button {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 💡 CLASE PARA PNGs: Convierte cualquier icono/imagen a blanco puro al hacer hover */
.hover-turn-white {
    transition: filter 0.25s ease;
    cursor: pointer;
}

.hover-turn-white:hover {
    /* Mágia en cadena: 
       1. brightness(0) vuelve toda la imagen negra (incluyendo sus detalles internos).
       2. invert(1) invierte el negro por completo, transformándolo en blanco puro. */
    filter: brightness(0) invert(1); 
}

/* ▶️ BORDE RESALTADO:
Resalta el color de los botones cuando pasas el mouse sobre ellos */
.btn-border-effect {
    border: 6px solid #000000; /* Borde inicial negro (puedes ajustar el grosor) */
    background-color: transparent; /* O el fondo que prefieras */
    cursor: pointer;
    
    /* ⚡ LA LÍNEA CLAVE: Hace que el cambio de color de borde no sea de golpe, sino suave */
    transition: border-color 0.25s ease; 
}

/* Efecto al pasar el mouse por encima */
.btn-border-effect:hover {
    border-color: #0084C2; /* El color azul que quieres */
}

/* ▶️ HOVER GLOW-BOX:
Ilumina el texto del elemento al momento de que el mouse este sobre el */
.hover-glow-box {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.hover-glow-box:hover {
    /* Crea una sombra suave del color de luz que elijas (ej: un morado o blanco) */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); 
    
    /* Si el elemento tiene bordes, puedes hacer que el borde también cambie al color de la luz */
    border-color: #ffffff; 
}

/* ▶️ SELECTION ILUMINAR TEXTO:
Ilumina el texto del elemento al momento de que el mouse este sobre el */
.hover-glow {
    transition: color 0.2s ease;
}
.hover-glow:hover {
    color: #ffffff; /* O el color claro de tu paleta */
    cursor: pointer;
}

/* ▶️ SELECCION OSCURECER FONDO (Mágico para cualquier tarjeta o botón):
Oscurece el fondo del elemento al momento de que el mouse este sobre el */
.hover-darken {
    transition: filter 0.2s ease, transform 0.2s ease;
}
.hover-darken:hover {
    /* Reduce el brillo al 90%, logrando un oscurecido sutil sin importar el color base */
    filter: brightness(0.9); 
    cursor: pointer;
}

/* ▶️ HOVER UP: Efecto de levante sutil para cualquier tarjeta, botón o imagen */
.hover-up {
    /* Prepara al elemento para que la animación dure 0.2 segundos y sea fluida */
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
/* Estado cuando el usuario pasa el mouse por encima */
.hover-up:hover {
    transform: translateY(-3px); /* Lo levanta 3 píxeles */
    cursor: pointer;             /* Transforma el cursor en la manita interactiva */
}

/* ▶️ AMBOS EFECTOS DE SELECCIÓN + FLOTAR (Para botones premium o tarjetas de la galería):
Aplica el efecto de SELECCION ILUMINAR TEXTO y de SELECCION OSCURECER FONDO juntos mas el efecto de HOVER UP */
.hover-interactive {
    transition: filter 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hover-interactive:hover {
    filter: brightness(0.9);     /* Oscurece fondo */
    color: #ffffff;             /* Ilumina texto */
    transform: translateY(-3px); /* Levanta el elemento (tu efecto anterior) */
    cursor: pointer;
}

/* ================================================================ */
/* ==== ❇️ 📱 CONFIGURACIÓNES DE MENU DESPLEGABLE (SIDEBAR) ❇️==== */
/* ================================================================ */
/* --------------------------- ARTISTA ----------------------------*/
/* ▶️ MENU LATERAL: Contenedor del menú lateral */
.sidebar-menu {
    position: fixed;
    top: 60px; /* ⚡ Ajusta esto para que empiece exactamente debajo de tu header negro */
    left: 0;
    width: 280px;
    height: calc(100vh - 60px); /* Ocupa el resto de la pantalla */
    background-color: #3E5F7A; /* El tono azulado-grisáceo de tu Figma */
    z-index: 98; /* MAX: 98 */
    
    /* Efecto de deslizamiento oculto por defecto */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    border-right: 3px solid #000000;
}

/* ▶️ MENU LATERAL - DESPLAZADOR: Clase que activa el deslizamiento */
.sidebar-menu.open {
    transform: translateX(0);
}

/* ▶️ MENU LATERAL - CONTENEDOR INTERNO DEL MENÚ: 
Contenedor interno del menú con scroll por si hay pantallas pequeñas */
.sidebar-content {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
    overflow-y: auto;
}

/* ▶️ TITULOS (MENU DESPLEGABLE): Títulos de los Grupos (Descubrir, Tus Obras, Tú) */
.menu-group h3 {
    font-family: 'League Spartan', sans-serif;
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* ▶️ ESTILO DE ELEMENTOS DE LISTA (MENU DESPLEGABLE): 
Estilo para las listas de enlaces dentro de cada grupo */
.menu-group ul {
    list-style: none;
    padding-left: 20px; /* Sangría hacia la derecha como tu Figma */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ▶️ ESTILO DE ENLANCES (MENU DESPLEGABLE): Estilo base de los enlaces del menú */
.menu-link {
    font-family: 'Quicksand', sans-serif;
    color: #DCE5EC;
    text-decoration: none;
    font-size: 1rem;
    font-weight: var(--fw-regular); /* Regular por defecto */
    transition: color 0.2s, font-weight 0.1s;
}

/* ▶️ ESTILO DE OPCION SEÑALADA (MENU DESPLEGABLE): 
Cuando el usuario pasa el mouse por encima de un enlace */
.menu-link:hover {
    color: #ffffff;
}

/* ▶️ ESTILO DE SECCIÓN ACTIVA (MENU DESPLEGABLE): 
Cuando un enlace está seleccionado */
.menu-link.active-section {
    font-weight: var(--fw-bold) !important;
    color: #ffffff;
    text-decoration: underline; /* Opcional, por si quieres mantener la línea del Figma */
}

/* ▶️ FOOTER (Menu Desplegable): Sección inferior del menú */
.menu-footer {
    margin-top: auto; /* Empuja las políticas y el cierre de sesión al fondo */
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ▶️ BOTÓN DE CIERRE DE SESIÓN (Menu Desplegable): 
Estilo del botón de cerrar sesión */
.logout-btn {
    color: #ff9e9e; /* CCOLOR 1: Colo Estandar del texto */
}
.logout-btn:hover {
    color: #ff6b6b; /* COLOR 2: Color al pasar el mouse */
}

/* ▶️ OVERLAY (MENU DESPLEGABLE): Capa oscura transparente detrás del menú al abrirse */
.sidebar-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 97; /* Debajo del menú pero encima del contenido */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   🛡️ VARIANTES DEL MENÚ DESPLEGABLE PARA EL ROL DE ADMINISTRADOR
   ========================================================================== */
/* --------------------------- ADMINISTRADOR ----------------------------*/
/* Fondo rojo claro / coral sutil que denota moderación/alerta */
.admin-sidebar {
    background-color: var(--color-bg-admin) !important; /* Rojo pastel / coral claro */
}

/* Color distintivo para los títulos de grupo en el menú de administración */
.admin-sidebar .menu-group h3 {
    color: var(--color-text-admin); /* Rojo oscuro texturizado para mantener legibilidad */
    font-family: var(--ff-subtitulo);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 2px dashed var(--color-ele-admin); /* Línea discontinua roja */
    padding-bottom: 4px;
}

/* Modificación sutil al pasar el mouse por los enlaces de admin */
.admin-sidebar .menu-link:hover {
    background-color: var(--color-ele-admin-hover); /* Un rojo un poco más oscuro al hacer hover */
    color: var(--color-text-admin);
}

/* Estilo para la sección activa dentro del menú de administración */
.admin-sidebar .menu-link.active-section {
    font-weight: var(--fw-bold);
    background-color: var(--color-ele-admin-selected); /* Fondo resaltado para la vista actual */
    border-left: 4px solid var(--color-text-admin); /* Indicador lateral rojo fuerte */
    padding-left: 8px; /* Compensación por el borde izquierdo */
}


/* ================================================================ */
/* ======================= ❇️ ⬆️ HEADER ❇️======================= */
/* ================================================================ */

/* ▶️ CONTENEDOR DE CONTENIDO CENTRADO: 
Controla el ancho del contenido principal centrado */
main.centered-content {
    width: 90%;            /* Controla el ancho en pantallas medianas/pequeñas */
    max-width: 1400px;     /* Controla el ancho máximo del contenido centrado */
    margin: 0 auto;        /* Centra el bloque perfectamente en horizontal */
}

/* ▶️ CONTENEDOR DEL HEADER PRINCIPAL (FUSIONADO) */
.main-header {
    width: 100%;
    height: 72px; 
    background-color: #ffffff;
    border-bottom: 3px solid #000000;
    
    /* ⚡ Ajuste importante: Asegura el padding correcto para flexbox */
    padding: 0px 20px; 
    
    /* 💥 MÁGIA DE DISTRIBUCIÓN (Traída de .header-container) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* MÁGIA PARA FIJARLO */
    position: sticky;
    top: 0;        
    z-index: 100;  
}

/* ▶️ ORGANIZADOR HORIZONTAL:
Corrección para alinear el botón de menú y el logo horizontalmente */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio de separación horizontal entre el menú y tu logo */
}

/* ▶️  ESTILO DE BOTÓN DE MENU DESPLEGABLE: 
Quitamos estilos por defecto del botón para que no desfase la línea */
.btn-menu {
    background: none;
    border: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    padding: 0;
}

/* ▶️ ORGANIZACIÓN DEL LOGO:
Forzar que la imagen del logo mantenga una altura correcta y alineada */
.header-logo img {
    height: 75px;            /* ⚡ Ajusta el tamaño del logo del header. DEFAULT: 75px */
    width: 150px;            /* ⚡ Dale un ancho fijo para que reserve el espacio horizontal */
    display: block;
    object-fit: contain;
    
    position: absolute;      /* ⚡ Lo despegamos del flujo para que no empuje el header */
    top: 50%;                /* Lo centramos verticalmente */
    transform: translateY(-50%); /* Ajuste perfecto de centrado */
}    

/* ▶️ CONTENEDOR DE DATOS DE USUARIO:
Ordena el nombre y los puntos del usuario, en relación con la foto de usuario */
.header-user-status {
    display: flex;
    align-items: center; /* Alinea verticalmente la foto con el bloque de texto */
    gap: 12px; /* Espacio entre el bloque de texto y la foto de perfil */
}

/* ▶️ CONTENEDOR DE NOMBRE Y PUNTOS:
Organiza el nombre y los puntos del usuario, apilandolos*/
.user-info-text {
    font-family: 'Poppins', sans-serif;
    font-weight: var(--fw-bold);          /* Reemplazado de 700 */
    display: flex;
    flex-direction: column; /* Cambia el eje a vertical (uno abajo del otro) */
    align-items: flex-end;  /* Alinea el texto a la derecha para que pegue bonito con la foto */
    gap: 2px; /* Controla la separación vertical entre el nombre y los puntos */
}
/* ▶️ ESTILO DEL NOMBRE:
Modifica el aspecto visual del nombre del usuario en el header */
.user-name {                    /* Nombre de usuario en el header */
    font-family: 'Poppins', sans-serif;
    font-weight: var(--fw-regular); 
}
/* ▶️ ESTILO DE LOS PUNTOS:
Modifica el aspecto visual de los puntos del usuario en el header */
.points-count {                   /* Puntos del usuario en el header */
    font-family: 'Poppins', sans-serif;
    font-weight: var(--fw-regular); 
    color: #FFDE59;
    -webkit-text-stroke: 1px #e0a418;
}

/* ▶️ AJUSTE DE LOS PUNTOS Y LA ESTELLA: 
Ajuste fino para los puntos y la estrella en su propio renglón */
.user-points {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 📍▶️ AJUSTE DEL ROL: 
Ajuste fino para el rol de administrador en su propio renglón */
.user-role {
    font-family: var(--ff-texto);
    font-weight: var(--fw-semibold);
    color: var(--color-bg-admin);
    -webkit-text-stroke: 0.5px var(--color-ele-admin);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ▶️ AJUSTE DE LA FOTO DE PERFIL: 
Ajusta la foto de perfil del usuario en el header */
.mini-avatar { 
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

/* ================================================================ */
/* ================= ❇️ 📍 BARRA DE UBICACIÓN ❇️================= */
/* ================================================================ */

/* ▶️ CONTENEDOR (BARRA DE NAVEGACIÓN DEL PERFIL) */
.nav-bar {
    width: 100%;
    background-color: #B0BCC7;
    border-bottom: 3px solid #000000;
    padding: 6px 20px; 
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 72px;    
    z-index: 90;   
}

/* ▶️ CONTENEDOR DEL TEXTO (Alineación interna) */
.nav-bar-info {
    display: flex;
    flex-direction: column; /* Hace que el título quede arriba y la descripción abajo */
    justify-content: center;
}

/* ▶️ TEXTO PERFIL (Nombre de la vista) */
.nav-bar-info h2 {
    font-family: 'League Spartan', sans-serif;
    text-transform: uppercase; 
    font-size: 1.5rem;      
    font-weight: var(--fw-bold);       
    color: #000000;         
    
    /* ⚡ SOLUCIÓN: Quitamos los márgenes del navegador y controlamos el espacio inferior */
    margin: 0; 
    margin-bottom: 2px; /* Ajusta este número (ej: 0px, 2px, 4px) hasta que quede a tu gusto */
    line-height: 1.1;   /* Evita que la caja del texto sea más alta de lo necesario */
}

/* ▶️ DESCRIPCIÓN DE LA VISTA */
.nav-bar-info p, 
.nav-bar-info span {
    margin: 0;          /* ⚡ SOLUCIÓN: Quitamos el margen por defecto de la descripción */
    font-family: var(--ff-nota);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;  /* Un tamaño limpio para la descripción */
    color: #4a5568;     /* Un tono gris oscuro sutil (cambialo si usas otra variable) */
    line-height: 1.2;
}

/* ▶️ ESTILO DEL BOTON DE SALIDA */
.btn-back {
    background: transparent; 
    border: none;   
    padding: 5px;            
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ▶️ CONTENEDOR DEL BOTON DE SALIDA */
.back-icon {
    width: 35px;  
    height: auto; 
    display: block;
}

/* ==========================================
   🚨 SISTEMA DE MENSAJES EMERGENTES (TOASTS)
   ========================================== */

/* Contenedor principal de todas las notificaciones */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999; /* Siempre por encima de todo */
    display: flex;
    flex-direction: column-reverse; /* Apila las nuevas notificaciones por encima de las viejas */
    gap: 12px;
    max-width: 380px;
    width: 100%;
    pointer-events: none; /* Permite hacer clic en la página a través del contenedor si está vacío */
}

/* Tarjeta contenedora del Toast + Barra de Progreso */
.toast-wrapper {
    pointer-events: auto; /* Reactiva los clics en la tarjeta en sí */
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    
    /* Animación de entrada de derecha a izquierda */
    animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Transición para cuando se desvanece al cerrarse */
.toast-wrapper.toast-fade-out {
    animation: fadeOut 0.2s ease forwards;
}

/* Bloque del mensaje principal */
.toast-body {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

/* Columna de la Izquierda: Cuadrante del Icono */
.toast-icon-wrapper {
    flex: 0 0 40px; /* Tamaño de ancho fijo que JAMÁS se deforma */
    height: 40px;   /* Mantiene proporción cuadrada 1:1 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Icono dentro del contenedor: No se estira ni se deforma */
.toast-icon {
    width: 24px;
    height: 24px;
    object-fit: contain; /* Mantiene proporciones originales de la imagen */
}

/* Columna de la Derecha: Área del Texto */
.toast-text-wrapper {
    flex: 1; /* Ocupa todo el ancho restante y se adapta si el padre cambia de tamaño */
    min-width: 0; /* Previene desbordamiento en Flexbox */
    display: flex;
    align-items: center; /* Centrado vertical */
}

/* Texto del mensaje emergente */
.toast-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left; /* Alineado a la izquierda */
    word-wrap: break-word; /* Permite crecer verticalmente si el texto es largo */
    margin: 0;
}

/* --- 📊 BARRA DE PROGRESO (TEMPORIZADOR DE 10 SEG) --- */
.toast-progress-bar {
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
}

.toast-progress-fill {
    height: 100%;
    width: 100%;
    /* La barra de progreso se va encogiendo de izquierda a derecha uniformemente */
    transform-origin: left;
    animation: shrinkProgress 10s linear forwards;
}

/* ==========================================
   🎨 TEMAS Y COLORES (Transparencia 70% / Opacidad 0.7)
   ========================================== */

/* ▶️ MENSAJE EMERGENTE */
/* Mensaje (Message) */
.toast-info {
    background-color: rgba(214, 217, 215, 0.7); /* Blanco claro con 70% de opacidad */
    border: 2px solid var(--color-bg-secondary);
}
.toast-info .toast-message {
    color: var(--color-chart-header);
}
.toast-info .toast-progress-fill {
    background-color: var(--color-bg-secondary);
}

/* ▶️ MENSAJE EMERGENTE DE EXITO ✅ */
/* Éxito (Success) */
.toast-success {
    background-color: rgba(220, 252, 231, 0.7); /* Verde claro con 70% de opacidad */
    border: 2px solid var(--color-success);
}
.toast-success .toast-message {
    color: var(--color-success-dark);
}
.toast-success .toast-progress-fill {
    background-color: var(--color-success);
}

/* ▶️ MENSAJE EMERGENTE DE ADVERTENCIA ⚠️ */
/* Advertencia (Warning) */
.toast-warning {
    background-color: rgba(254, 243, 199, 0.7); /* Amarillo suave con 70% de opacidad */
    border: 2px solid var(--color-warning);
}
.toast-warning .toast-message {
    color: var(--color-warning-dark); /* Café/ámbar oscuro para legibilidad legible */
}
.toast-warning .toast-progress-fill {
    background-color: var(--color-warning);
}

/* ▶️ MENSAJE EMERGENTE DE ERROR ❌ */
/* Error / Alerta */
.toast-error {
    background-color: rgba(254, 226, 226, 0.7); /* Rojo claro con 70% de opacidad */
    border: 2px solid var(--color-error);
}
.toast-error .toast-message {
    color: var(--color-error-dark);
}
.toast-error .toast-progress-fill {
    background-color: var(--color-error);
}

/* ==========================================
   🔄 ANIMACIONES CSS
   ========================================== */

@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        transform: translateY(10px);
        opacity: 0;
    }
}

@keyframes shrinkProgress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* ==========================================================================
   ▶️ ELEMENTO INTERNO: CABEZAL DE VISTA INLINE (Sin Fondo)
   ========================================================================== */

/* Contenedor principal alineado horizontalmente */
.view-header-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);       /* El espacio regular entre elementos */
    margin-bottom: var(--spacing-lg); /* Separación con el contenido de abajo */
    width: 100%;
    padding: var(--spacing-sm) 0; /* Un pequeño colchón arriba y abajo */
}

/* Contenedor de la Imagen Cuadrada (Entre la flecha y los textos) */
.view-header-thumb {
    width: 45px;                 /* Ajusta este tamaño según qué tan grande quieras el ícono */
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm); /* Por si quieres bordes ligeramente redondeados */
    flex-shrink: 0;              /* Evita que la imagen se deforme si el texto es largo */
}

/* Forzar a que cualquier asset de imagen llene el cuadrado perfectamente */
.view-header-thumb .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Mantiene la proporción sin estirar el gráfico */
    display: block;
}

/* Agrupador de Textos */
.view-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilo del Título (Heredado del de Ricardo) */
.view-header-text .view-title {
    font-family: var(--ff-titulo);
    font-size: var(--spacing-lg);
    font-weight: var(--fw-semibold);
    color: #000000;              /* Color base sólido */
    margin: 0;
    line-height: 1.2;
}

/* Estilo de la Descripción (Heredado del de Ricardo) */
.view-header-text .view-description {
    font-family: var(--ff-nota);
    color: var(--color-text-gray);
    font-size: 0.9rem;
    margin: 0;
    margin-top: 2px;             /* Control milimétrico de la separación del texto */
    line-height: 1.3;
}


/* ==========================================================================
   📚 HOJA DE TRUCO & PLANTILLAS: FLEXBOX Y CSS GRID
   (Usa estas estructuras como guía para clonar en tus próximas vistas)
   ========================================================================== */

   /* =========================================
   🔲 SECCIÓN A: PLANTILLAS FLEXBOX (1 Dimensión)
   ========================================= */

   /* 1️⃣ FLEX EN FILA CENTRALIZADO (Ideal para botones o elementos alineados al centro) */
   /* ------------------------------------------------------------------------- */
   .parent-flex-row {
        display: flex;
        flex-direction: row;            /* Elementos uno al lado del otro */
        justify-content: center;        /* Centrado horizontal */
        align-items: center;            /* Centrado vertical */
        gap: 15px;                      /* Separación fija entre hijos */
   }

   /* 2️⃣ FLEX EN FILA DISTRIBUIDO (Ideal para Headers, Subheaders o barras de herramientas) */
   -------------------------------------------------------------------------
   .parent-flex-between {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* Extremo izquierdo y extremo derecho */
        align-items: center;
        gap: 20px;
   }

   /* 3️⃣ FLEX EN COLUMNA VERTICAL (Ideal para formularios, menús laterales o listas) */
   -------------------------------------------------------------------------
   .parent-flex-column {
        display: flex;
        flex-direction: column;         /* Un elemento abajo del otro */
        justify-content: flex-start;
        align-items: stretch;           /* Hace que los hijos ocupen todo el ancho disponible */
        gap: 12px;
   }


   /* =========================================
   🔳 SECCIÓN B: PLANTILLAS CSS GRID (2 Dimensiones)
   ========================================= */

   /* 1️⃣ REJILLA PARA GALERÍA RESPONSIVA (¡Ideal para tus tarjetas de obras de arte!) */
   -------------------------------------------------------------------------
   .parent-grid-gallery {
        display: grid;
        /* Crea columnas automáticas de mínimo 250px; si no caben, saltan abajo solas */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;                      /* Separación perfecta en filas y columnas */
   }

   /* 2️⃣ REJILLA ASIMÉTRICA 70/30 (¡Ideal para tu nueva vista de Gráficas!) */
   -------------------------------------------------------------------------
   .parent-grid-dashboard {
        display: grid;
        /* Divide el espacio: 70% para el gráfico grande y 30% para el lateral de barras */
        grid-template-columns: 7fr 3fr; 
        gap: 30px;
   }
   
   /* Si en pantallas pequeñas (celulares) quieres que se pongan una abajo de otra:
   @media (max-width: 768px) {
        .parent-grid-dashboard { grid-template-columns: 1fr; }
   } */

   /* 3️⃣ EXPANDIR UN HIJO EN EL GRID (Para que un banner u obra destacada ocupe más celdas) */
   -------------------------------------------------------------------------
   .grid-child-expanded {
        grid-column: 1 / -1;            /* Se estira desde la primera hasta la última columna */
   }

   /* ========================================================================== */

/* ================================================================
   VARIABLES DE COMPATIBILIDAD AÑADIDAS DURANTE LA FUSIÓN
   ================================================================ */
:root {
    --color-app-bg: #dfe6ee;
    --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================================================== 
   PULIDO V1.0: TOAST UNIVERSAL Y CONSISTENCIA GLOBAL
   ========================================================================== */
#toast-container {
    width: min(400px, calc(100vw - 32px));
    right: 18px;
    bottom: 18px;
    max-width: none;
}
.toast-wrapper {
    border-radius: 10px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 12px 32px rgba(25,36,48,.28);
    backdrop-filter: blur(8px);
}
.toast-body { padding: 12px 12px 12px 14px; gap: 12px; }
.toast-icon-wrapper { flex-basis: 38px; width: 38px; height: 38px; background: rgba(255,255,255,.58); }
.toast-fallback-icon { font-size: 1.35rem; font-weight: 900; }
.toast-text-wrapper { display: block; }
.toast-message { font-family: var(--ff-texto); font-size: .94rem; }
.toast-close-hint { display: block; color: #5d6670; font-size: .66rem; margin-top: 2px; }
.toast-close-button { border: 0; background: transparent; color: currentColor; font-size: 1.35rem; line-height: 1; padding: 4px 7px; border-radius: 50%; }
.toast-close-button:hover { background: rgba(0,0,0,.08); }
.toast-progress-fill { animation-duration: var(--toast-duration, 4200ms); }
.toast-info { background: rgba(238,244,248,.97); border-color: #8aa0ae; }
.toast-success { background: rgba(231,255,237,.97); }
.toast-warning { background: rgba(255,247,218,.97); }
.toast-error { background: rgba(255,234,234,.97); }
[hidden] { display: none !important; }

/* Encabezados y botones con una voz visual común */
.page-heading h1,
.admin-page-heading h1,
.report-view-heading h1,
.myworks-heading h1,
.artwork-form-heading h1,
.review-form-heading h1,
.location-copy h1 {
    font-family: var(--ff-titulo);
    font-weight: var(--fw-bold);
    letter-spacing: -.02em;
}
button, .primary-action-link, .myworks-upload-button, .admin-sanction-link {
    font-family: var(--ff-subtitulo);
}
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid #159bd6;
    outline-offset: 2px;
}
@media (max-width: 520px) {
    #toast-container { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .toast-close-hint { display: none; }
}

/* V1.0 CONSISTENCIA GLOBAL DEFINITIVA */
:root {
    --ui-ink:#1d2a35;
    --ui-navy:#1d3155;
    --ui-blue:#087fc0;
    --ui-line:#263640;
    --ui-soft:#eef3f6;
    --ui-radius:8px;
    --ui-shadow:0 5px 14px rgba(27,42,55,.16);
}
.main-header {
    min-height:72px;
    height:72px;
    padding:0 24px;
    border-bottom:3px solid var(--ui-line);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header-left { min-width:0; height:100%; display:flex; align-items:center; gap:20px; }
.header-logo { position:static !important; width:auto !important; height:58px; display:flex; align-items:center; }
.header-logo img { width:auto !important; height:54px !important; max-width:160px; object-fit:contain; }
.btn-menu { width:48px; height:48px; padding:0; border:0; border-radius:8px; background:transparent; display:grid; place-items:center; }
.btn-menu:hover { background:#edf2f5; }
.menu-icon { font-size:2rem; line-height:1; }
.header-user-status { min-width:0; margin-left:auto; display:flex; align-items:center; gap:12px; }
.header-user-status .mini-avatar { width:48px; height:48px; border:0; border-radius:50%; object-fit:cover; }
.user-info-text { text-align:right; min-width:0; }
.user-name { display:block; max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ui-ink); }

/* Barras de ubicación y navegación siempre ocupan todo el ancho. */
.publication-location-bar,.admin-section-tabs,.myworks-tabs,.profile-tabs,.discover-mode-tabs {
    width:100%; max-width:none; margin-left:0; margin-right:0;
}
.admin-section-tabs,.myworks-tabs,.profile-tabs,.discover-mode-tabs {
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    background:#b7d0dc; border-top:2px solid var(--ui-line); border-bottom:3px solid var(--ui-line);
}
.admin-section-tabs a,.myworks-tabs a,.profile-tabs .tab-button,.discover-mode-tabs a {
    min-height:48px; display:flex; align-items:center; justify-content:center;
    padding:9px 16px; border:0; border-right:2px solid var(--ui-line);
    background:#b7d0dc; color:#111; text-decoration:none;
    font:700 1.05rem var(--ff-titulo); transition:background .16s,color .16s,transform .16s;
}
.admin-section-tabs a:last-child,.myworks-tabs a:last-child,.profile-tabs .tab-button:last-child,.discover-mode-tabs a:last-child { border-right:0; }
.admin-section-tabs a:hover,.myworks-tabs a:hover,.profile-tabs .tab-button:hover,.discover-mode-tabs a:hover { background:#d0e1e8; }
.admin-section-tabs .is-active,.myworks-tabs .is-active,.myworks-tabs a.active,.profile-tabs .tab-button.active,.discover-mode-tabs .is-active {
    background:var(--ui-navy); color:#fff; box-shadow:inset 0 -3px 0 #0c1728;
}

/* Botones consistentes, sin alterar botones de icono. */
button:not(.btn-menu):not(.owner-menu-trigger):not(.comment-menu-trigger):not(.report-button):not(.toast-close-button):not(.detail-modal-x):not(.tab-button),
.primary-action-link,.myworks-upload-button,.admin-sanction-link {
    border-radius:7px; font-weight:700; transition:transform .12s,box-shadow .12s,filter .12s;
}
button:not(:disabled):not(.btn-menu):hover,.primary-action-link:hover,.myworks-upload-button:hover,.admin-sanction-link:hover { filter:brightness(1.04); }
button:not(:disabled):active,.primary-action-link:active,.myworks-upload-button:active,.admin-sanction-link:active { transform:translateY(1px); box-shadow:none; }
select,input,textarea { font-family:var(--ff-texto); color:var(--ui-ink); }
select { font-weight:650; }

@media (max-width:700px) {
    .main-header { padding:0 12px; }
    .header-logo img { max-width:118px; height:46px !important; }
    .user-name { max-width:120px; }
    .admin-section-tabs a,.myworks-tabs a,.profile-tabs .tab-button,.discover-mode-tabs a { font-size:.88rem; padding:8px 6px; }
}


/* V1.1 · El bloque del usuario en el extremo derecho abre su perfil. */
.header-user-status.header-profile-link {
    cursor: pointer;
    border-radius: 10px;
    padding: 5px 7px;
    margin-right: -7px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-user-status.header-profile-link:hover {
    background: #edf3f6;
}
.header-user-status.header-profile-link:focus-visible {
    outline: 2px solid #087fc0;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(8, 127, 192, .15);
}
.header-user-status.header-profile-link:active {
    transform: translateY(1px);
}


/* ==========================================================================\n   V1.2 · CONSISTENCIA DE NAVEGACIÓN, INTERACCIONES Y ROLES\n   ========================================================================== */

/* 14. Logo ligeramente más grande sin romper el header. */
.header-logo { height: 64px; }
.header-logo img { height: 61px !important; max-width: 178px !important; }
@media (max-width: 700px) { .header-logo img { height: 52px !important; max-width: 135px !important; } }

/* 2. Formato único de barras de navegación. */
.nav-bar {
    min-height: 70px;
    width: 100%;
    max-width: none;
    padding: 7px clamp(16px, 2.2vw, 34px);
    display: flex;
    align-items: center;
    gap: 14px;
    background: #b0bcc7;
    border-top: 0;
    border-bottom: 3px solid #111;
    position: relative;
    top: auto;
    z-index: 90;
}
.nav-back-link { flex: 0 0 auto; display: inline-flex; }
.nav-bar .btn-back { width: 46px; height: 46px; padding: 4px; border: 0; background: transparent; }
.nav-bar .back-icon { width: 41px; height: 41px; object-fit: contain; }
.nav-bar-info { min-width: 0; margin-right: auto; }
.nav-bar-info h2 { text-transform: none; font-size: clamp(1.2rem, 2vw, 1.62rem); color: #111; }
.nav-bar-info span { display: block; color: #3f4b55; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(64vw, 760px); }
.nav-bar-actions { margin-left: auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.admin-standard-nav, .report-standard-nav, .policies-standard-nav { width: 100%; }

/* Detalles de obra usan la misma barra, conservando chips y 3 puntos. */
.publication-location-bar.detail-nav-bar {
    min-height: 70px;
    display: flex;
    grid-template-columns: none;
    padding: 7px clamp(16px, 2.2vw, 34px);
    background: #c8c8c8;
}
.detail-nav-bar .nav-bar-info h2 { font-family: var(--ff-subtitulo); }
.detail-nav-bar .nav-bar-info span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: -5px;
    background: #eee url('../Img/default-pfp.png') center/cover no-repeat;
}
.detail-nav-bar .location-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.detail-nav-bar .location-chips { order: 1; width: auto; min-width: min(360px, 38vw); }
.detail-nav-bar .owner-menu-wrap { order: 2; margin-left: 4px; }
.detail-nav-bar .owner-menu-trigger { width: 42px; height: 46px; display: grid; place-items: center; }

/* 5. Ordinaria: chips siempre en la misma línea. */
body[data-detail-type="ordinary"] .detail-nav-bar .location-chips,
body[data-detail-type="stored"] .detail-nav-bar .location-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}
body[data-detail-type="ordinary"] .location-chip,
body[data-detail-type="stored"] .location-chip { min-width: 150px; }

/* 7. Icono externo time.png para el tiempo de revisión. */
.location-time-icon { width: 27px; height: 27px; object-fit: contain; flex: 0 0 27px; }
.location-timer { align-items: center; }
.location-timer > span:last-child:not(:first-child) { border: 0; }

/* 9. Reacciones sin caja ni borde. */
.interaction-stats button,
.review-detail-stats button,
.metric-action-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 5px;
    color: inherit;
}
.interaction-stats button:hover,
.review-detail-stats button:hover,
.metric-action-button:hover { transform: none !important; filter: brightness(.82); }
.favorite-artwork-button.is-active { color: #d5a600; }

/* 8. En revisión no existe espacio visual para favoritos. */
body[data-detail-type="revision"] #favoriteArtworkButton,
body[data-detail-type="revision"] [data-reaction="favorite"] { display: none !important; }

/* 10. Caja y botón de comentarios en Revisión separados. */
.review-comment-composer { display: flex; flex-direction: column; border-bottom: 3px solid #111; background: #fff; }
.review-comment-composer textarea { width: 100%; min-height: 102px; border: 0; border-bottom: 3px solid #111; padding: 13px; resize: vertical; background: #fff; }
.review-comment-submit-row { width: 100%; padding: 7px 9px; background: #edf2f4; }
.review-comment-submit-row button { width: 100%; min-height: 44px; border: 3px solid #111; border-radius: 6px; background: #0759bf; color: #fff; font-weight: 800; }

/* 11 y 12. Acciones de comentario pegadas al extremo derecho del comentario. */
.interaction-author-row { position: relative; padding-right: 58px; }
.interaction-comment-actions { position: absolute; top: 7px; right: 9px; display: flex; align-items: center; gap: 6px; z-index: 8; }
.interaction-comment-actions .comment-owner-menu { position: relative; top: auto; right: auto; margin: 0; }
.interaction-comment-actions .report-button { margin: 0; }
.comment-menu-panel .danger { color: #c62828; border-top: 1px solid #ddd; }

/* 4. Favoritos: sin franja detrás de los dos tabs. */
body:has(#tab-btn-obras) .profile-portfolio-section > .profile-tabs {
    width: fit-content;
    display: flex;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    padding: 0;
    margin: 0 0 12px;
}
body:has(#tab-btn-obras) .profile-portfolio-section > .profile-tabs .tab-button {
    min-width: 150px;
    border: 2px solid #111 !important;
    border-radius: 7px;
}

/* 3. Header de gráficas: nombre y puntos siempre apilados. */
body:has(#card-stars) .header-user-status .user-info-text { display: flex; flex-direction: column; align-items: flex-end; }
body:has(#card-stars) .header-user-status .user-points { display: flex; }

/* Barras administrativas no deben quedar atrapadas dentro de app-wrapper. */
.admin-standard-nav + .app-wrapper, .report-standard-nav + .app-wrapper { margin-top: var(--spacing-xs); }

@media (max-width: 820px) {
    .nav-bar { flex-wrap: wrap; }
    .nav-bar-actions { width: 100%; margin-left: 60px; justify-content: flex-end; }
    .detail-nav-bar .location-chips { min-width: 0; width: calc(100% - 52px); }
    body[data-detail-type="ordinary"] .detail-nav-bar .location-chips,
    body[data-detail-type="stored"] .detail-nav-bar .location-chips { flex-wrap: wrap; }
    .location-chip { min-width: 130px !important; }
}


/* El control para guardar un perfil externo también es una reacción, no un botón con caja. */
#toggleProfileFavorite {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-inline: 4px;
}
#toggleProfileFavorite.is-active { color: #d5a600; }


/* Encabezados de vista unificados V1.3 */
.view-header-inline {
    min-width: 0;
}
.view-header-back-link {
    display: inline-flex;
    flex: 0 0 auto;
}
.view-header-symbol {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font: 800 2rem/1 var(--ff-titulo);
    color: #111;
}
.view-header-text {
    min-width: 0;
    flex: 1 1 auto;
}
.view-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .view-header-inline {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .view-header-actions {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }
}