@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/*
|--------------------------------------------------------------------------
| QUIMIKA - SISTEMA GLOBAL DE ESTILOS
|--------------------------------------------------------------------------
|
| Claro: tema predeterminado.
| Oscuro: seleccionable desde Configuración.
| Automático: gestionado por tema_quimika.js.
|
*/

/* ==========================================================
   1. TEMA CLARO - PREDETERMINADO
========================================================== */

:root,
:root[data-theme="light"] {

    color-scheme: light;

    --bg: #f7f7fa;
    --panel: #ffffff;
    --surface: #f0eef5;

    --stroke: rgba(38, 29, 53, 0.12);

    --text: #262033;
    --muted: #716a80;

    --pink: #bd457a;
    --purple: #7954c3;

    --sidebar-bg: #ffffff;
    --sidebar-text: #655d73;
    --sidebar-active-bg: #f3e9f6;
    --sidebar-active-text: #7d416e;

    --card-bg: #ffffff;
    --card-image-bg: #ebe5f0;

    --input-bg: #ffffff;
    --input-text: #262033;
    --input-placeholder: #9992a4;

    --control-bg: #f1eef6;
    --control-text: #473d56;

    --button-secondary-bg: #f3eef6;
    --button-secondary-text: #3d304c;

    --tag-bg: #f3eaf5;
    --tag-text: #764d84;

    --notice-bg: #f8effb;
    --notice-text: #744585;

    --nav-bg: rgba(255, 255, 255, 0.96);
    --nav-text: #716a80;
    --nav-active: #b65081;
    --nav-active-bg: rgba(246, 156, 207, 0.12);

    --overlay-bg: rgba(12, 8, 25, 0.93);

    --page-glow: rgba(222, 183, 241, 0.17);

    /* Compatibilidad con tema_quimika.css */

    --qm-fondo: var(--bg);
    --qm-superficie: var(--panel);
    --qm-superficie-secundaria: var(--surface);
    --qm-texto: var(--text);
    --qm-texto-secundario: var(--muted);
    --qm-borde: var(--stroke);
    --qm-acento: #ff785f;
    --qm-acento-suave: #ffad84;
}


/* ==========================================================
   2. TEMA OSCURO
========================================================== */

:root[data-theme="dark"] {

    color-scheme: dark;

    --bg: #0e0b1a;
    --panel: #1a142a;
    --surface: #231a38;

    --stroke: rgba(255, 255, 255, 0.11);

    --text: #f8f3ff;
    --muted: #ada3bf;

    --pink: #f69ccf;
    --purple: #a17bfa;

    --sidebar-bg: #130f20;
    --sidebar-text: #bdb3d1;
    --sidebar-active-bg: #3a2953;
    --sidebar-active-text: #ffffff;

    --card-bg: #1d172c;
    --card-image-bg: #342748;

    --input-bg: #231a37;
    --input-text: #ffffff;
    --input-placeholder: #ada3bf;

    --control-bg: #231a38;
    --control-text: #d9cfeb;

    --button-secondary-bg: #302340;
    --button-secondary-text: #ffffff;

    --tag-bg: #342548;
    --tag-text: #edddfa;

    --notice-bg: #322340;
    --notice-text: #ead8fc;

    --nav-bg: rgba(19, 15, 32, 0.96);
    --nav-text: #bbb0cc;
    --nav-active: #f3a0ce;
    --nav-active-bg: rgba(246, 156, 207, 0.10);

    --overlay-bg: rgba(12, 8, 25, 0.94);

    --page-glow: rgba(74, 34, 94, 0.38);

    /* Compatibilidad con tema_quimika.css */

    --qm-fondo: var(--bg);
    --qm-superficie: var(--panel);
    --qm-superficie-secundaria: var(--surface);
    --qm-texto: var(--text);
    --qm-texto-secundario: var(--muted);
    --qm-borde: var(--stroke);
    --qm-acento: #ff785f;
    --qm-acento-suave: #ffad84;
}


/* ==========================================================
   3. REGLAS GENERALES
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 80% -10%,
            var(--page-glow),
            transparent 42%
        ),
        var(--bg);

    font: 14px 'DM Sans', Arial, sans-serif;

    color: var(--text);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}


/* ==========================================================
   4. ESTRUCTURA PRINCIPAL
========================================================== */

.app {
    min-height: 100svh;

    display: grid;

    grid-template-columns: 245px minmax(0, 1fr);
}


/* ==========================================================
   5. MENÚ LATERAL
========================================================== */

.sidebar {
    display: flex;
    flex-direction: column;

    gap: 34px;

    position: sticky;
    top: 0;

    height: 100svh;

    padding: 30px 20px;

    background: var(--sidebar-bg);

    border-right: 1px solid var(--stroke);
}


/* ==========================================================
   6. IDENTIDAD DE MARCA
========================================================== */

.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    font: 800 28px Outfit, sans-serif;

    letter-spacing: -1px;

    color: var(--text);
}

.logo {
    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #f27fb5,
        #8e60f7
    );

    box-shadow: 0 8px 24px rgba(174, 102, 244, 0.25);

    color: #ffffff;
}

.brand b {
    color: var(--pink);
}


/* ==========================================================
   7. OPCIONES DEL MENÚ LATERAL
========================================================== */

.menu {
    display: grid;
    gap: 7px;
}

.menu a {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    border-radius: 14px;

    color: var(--sidebar-text);

    font-weight: 700;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.menu a.active,
.menu a:hover {
    background: var(--sidebar-active-bg);

    color: var(--sidebar-active-text);
}

.menu .icon {
    flex-shrink: 0;
}

.icon {
    font-size: 19px;
    line-height: 1;
}

.menu svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    stroke-width: 1.8;
}

.sidebar-foot {
    margin-top: auto;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================
   8. CONTENIDO PRINCIPAL
========================================================== */

.main {
    width: 100%;
    max-width: 1180px;

    min-width: 0;

    margin: 0 auto;

    padding:
        34px
        clamp(16px, 3.5vw, 48px)
        110px;
}


/* ==========================================================
   9. ENCABEZADO
========================================================== */

.topbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 30px;
}

.eyebrow {
    color: var(--pink);

    text-transform: uppercase;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

h1 {
    font:
        750 clamp(28px, 3vw, 40px)/1.16
        Outfit,
        sans-serif;

    letter-spacing: -0.04em;

    margin: 8px 0;
}

h2 {
    font: 700 23px Outfit, sans-serif;

    letter-spacing: -0.03em;
}

.subtitle {
    color: var(--muted);
    line-height: 1.7;
}


/* ==========================================================
   10. BOTÓN DEL USUARIO
========================================================== */

.user-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 14px;

    background: var(--surface);

    border: 1px solid var(--stroke);
    border-radius: 40px;

    color: var(--text);

    white-space: nowrap;
}

.user-pill svg {
    width: 18px;
    height: 18px;

    stroke-width: 1.8;
}


/* ==========================================================
   11. PANELES
========================================================== */

.panel {
    padding: 20px;

    background: var(--panel);

    border: 1px solid var(--stroke);
    border-radius: 22px;

    color: var(--text);
}


/* ==========================================================
   12. HERRAMIENTAS
========================================================== */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    flex-wrap: wrap;

    margin-bottom: 18px;
}

.search {
    width: min(100%, 370px);

    padding: 13px 15px;

    background: var(--input-bg);

    border: 1px solid var(--stroke);
    border-radius: 14px;

    color: var(--input-text);

    outline: none;
}

.search:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(170, 118, 253, 0.53);
    outline-offset: 1px;
}


/* ==========================================================
   13. CONTROLES
========================================================== */

.controls {
    display: flex;
    align-items: center;

    gap: 7px;
}

.view-btn,
.icon-btn {
    padding: 10px 13px;

    background: var(--control-bg);

    border: 1px solid var(--stroke);
    border-radius: 12px;

    color: var(--control-text);
}

.view-btn[aria-pressed="true"] {
    color: #221032;

    background: linear-gradient(
        110deg,
        #f6a2d0,
        #a481ff
    );
}


/* ==========================================================
   14. BOTONES
========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 19px;

    border: 0;
    border-radius: 13px;

    font-weight: 800;
}

.btn-primary {
    color: #24112d;

    background: linear-gradient(
        105deg,
        #f59dca,
        #a884ff
    );
}

.btn-secondary {
    background: var(--button-secondary-bg);

    border: 1px solid var(--stroke);

    color: var(--button-secondary-text);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ==========================================================
   15. FILTROS
========================================================== */

.filter-toggle {
    display: none;
}

.filters {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


/* ==========================================================
   16. CAMPOS DE FORMULARIO
========================================================== */

.field {
    display: grid;

    gap: 7px;

    min-width: 0;
}

.field label {
    color: var(--text);

    font-size: 12px;
    font-weight: 700;
}

.field select,
.field input,
.field textarea {
    width: 100%;
    min-width: 0;

    padding: 12px;

    background: var(--input-bg);

    border: 1px solid var(--stroke);
    border-radius: 12px;

    color: var(--input-text);
}

.field textarea {
    resize: vertical;

    min-height: 100px;
}

option {
    color: var(--input-text);

    background: var(--input-bg);
}


/* ==========================================================
   17. LISTADOS
========================================================== */

.list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 16px 0;

    color: var(--muted);
}


/* ==========================================================
   18. CUADRÍCULA DE PERFILES
========================================================== */

.profiles {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.profiles[data-view="two"] {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.profiles[data-view="three"] {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.profiles[data-view="list"] {
    grid-template-columns: 1fr;
}


/* ==========================================================
   19. TARJETAS DE PERFILES
========================================================== */

.profile-card {
    overflow: hidden;

    background: var(--card-bg);

    border: 1px solid var(--stroke);
    border-radius: 19px;

    transition:
        transform 0.2s,
        border-color 0.2s;
}

.profile-card:hover {
    transform: translateY(-3px);

    border-color: rgba(195, 140, 239, 0.55);
}

.profile-card a {
    display: block;
}

.profile-card img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 4.5;

    object-fit: cover;

    background: var(--card-image-bg);
}

.profile-card .meta {
    padding: 13px 14px 16px;
}

.profile-card strong {
    display: block;

    font: 700 19px Outfit, sans-serif;
}

.profile-card small {
    display: block;

    padding-top: 5px;

    color: var(--muted);
}


/* ==========================================================
   20. VISTA DE PERFILES EN LISTA
========================================================== */

.profiles[data-view="list"] .profile-card a {
    display: flex;
    align-items: center;

    gap: 16px;
}

.profiles[data-view="list"] .profile-card img {
    width: 116px;
    height: 116px;

    aspect-ratio: 1;
}

.profiles[data-view="list"] .profile-card .meta {
    flex: 1;
}


/* ==========================================================
   21. ESTADO VACÍO
========================================================== */

.empty {
    padding: 50px 16px;

    border: 1px dashed var(--stroke);
    border-radius: 16px;

    color: var(--muted);

    text-align: center;
}


/* ==========================================================
   22. ETIQUETAS
========================================================== */

.tag {
    display: inline-flex;

    padding: 8px 12px;

    background: var(--tag-bg);

    border-radius: 30px;

    color: var(--tag-text);

    font-size: 12px;
}

.tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


/* ==========================================================
   23. PERFIL DETALLADO
========================================================== */

.profile-hero {
    display: grid;

    grid-template-columns:
        minmax(270px, 0.85fr)
        minmax(0, 1.15fr);

    gap: 25px;
}

.hero-photo {
    width: 100%;

    max-height: 565px;

    aspect-ratio: 3 / 4;

    object-fit: cover;

    border-radius: 22px;
}


/* ==========================================================
   24. GALERÍA
========================================================== */

.gallery {
    display: flex;

    gap: 9px;

    overflow-x: auto;

    padding: 10px 0;
}

.gallery button {
    flex: 0 0 65px;

    width: 65px;
    height: 75px;

    padding: 0;

    background: none;

    border: 2px solid transparent;
    border-radius: 11px;

    overflow: hidden;
}

.gallery button.selected {
    border-color: var(--pink);
}

.gallery img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-details .panel {
    margin-bottom: 14px;
}


/* ==========================================================
   25. ACCIONES
========================================================== */

.actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* ==========================================================
   26. DESCUBRIR
========================================================== */

.deck {
    max-width: 460px;

    margin: 0 auto;
}

.discover-card {
    position: relative;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--stroke);
    border-radius: 25px;

    touch-action: pan-y;
}

.discover-card img {
    display: block;

    width: 100%;
    height: min(66svh, 630px);

    min-height: 370px;

    object-fit: cover;
}

.deck-overlay {
    position: absolute;

    inset: auto 0 0;

    padding: 100px 23px 25px;

    background: linear-gradient(
        transparent,
        var(--overlay-bg)
    );

    color: #ffffff;
}

.deck-overlay h2 {
    font-size: 30px;

    margin-bottom: 8px;
}

.deck-overlay p {
    color: #e9def4;

    margin: 0;
}

.deck-controls {
    display: flex;
    justify-content: space-around;

    gap: 10px;

    padding: 16px 0;
}


/* ==========================================================
   27. BOTONES CIRCULARES
========================================================== */

.circle {
    width: 58px;
    height: 58px;

    background: var(--control-bg);

    border: 1px solid var(--stroke);
    border-radius: 50%;

    color: var(--control-text);

    font-size: 25px;
}

.circle.featured {
    background: linear-gradient(
        130deg,
        #e88cbd,
        #9f77ef
    );

    color: #1c0d27;
}


/* ==========================================================
   28. NOTIFICACIONES
========================================================== */

.notice {
    padding: 13px 16px;

    margin: 12px 0;

    background: var(--notice-bg);

    border: 1px solid rgba(174, 138, 240, 0.40);
    border-radius: 12px;

    color: var(--notice-text);
}


/* ==========================================================
   29. CERRAR SESIÓN
========================================================== */

.logout-menu {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;

    margin-top: 16px;

    padding: 12px 14px;

    text-align: left;

    background: var(--surface);

    border: 1px solid var(--stroke);
    border-radius: 12px;

    color: var(--text);

    cursor: pointer;

    font: inherit;
}

.logout-menu:hover {
    background: var(--sidebar-active-bg);
}

.logout-menu svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;
}


/* ==========================================================
   30. NAVEGACIÓN MÓVIL - OCULTA EN ESCRITORIO
========================================================== */

.bottom-nav {
    display: none;
}


/* ==========================================================
   31. TABLET Y MÓVIL
========================================================== */

@media (max-width: 900px) {

    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .main {
        padding-top: 26px;
    }

    /*
    |--------------------------------------------------------------------------
    | MENÚ INFERIOR
    |--------------------------------------------------------------------------
    */

    .bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1000;

        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        width: 100%;

        padding:
            8px
            max(6px, env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left));

        background: var(--nav-bg);

        border-top: 1px solid var(--stroke);

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 5px;

        min-width: 0;
        min-height: 48px;

        padding: 5px 1px;

        color: var(--nav-text);

        border-radius: 10px;

        font-size: 10px;
        font-weight: 500;

        line-height: 1.2;

        text-align: center;
        text-decoration: none;
    }

    /*
    |--------------------------------------------------------------------------
    | ICONOS DEL MENÚ
    |--------------------------------------------------------------------------
    */

    .bottom-nav a svg,
    .bottom-nav a > i {
        display: block;

        width: 20px;
        height: 20px;

        flex: 0 0 20px;

        stroke-width: 1.8;
    }

    /*
    |--------------------------------------------------------------------------
    | TEXTOS DEL MENÚ
    |--------------------------------------------------------------------------
    */

    .bottom-nav a span {
        display: block;

        max-width: 100%;

        font-size: 10px;

        white-space: nowrap;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
    |--------------------------------------------------------------------------
    | OPCIÓN ACTIVA
    |--------------------------------------------------------------------------
    */

    .bottom-nav a.active,
    .bottom-nav a[aria-current="page"] {
        color: var(--nav-active);

        background: var(--nav-active-bg);
    }

    /*
    |--------------------------------------------------------------------------
    | FILTROS
    |--------------------------------------------------------------------------
    */

    .filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   32. CELULARES
========================================================== */

@media (max-width: 600px) {

    .main {
        padding: 24px 14px 100px;
    }

    .user-pill {
        display: none;
    }

    .filters {
        display: none;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters.open {
        display: grid;
    }

    .filter-toggle {
        display: inline-flex;
    }

    .profiles,
    .profiles[data-view="three"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .profiles[data-view="three"] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;
    }

    .profiles[data-view="three"] .profile-card strong {
        font-size: 13px;
    }

    .profiles[data-view="three"] .profile-card .meta {
        padding: 7px;
    }

    .profiles[data-view="three"] .profile-card small {
        font-size: 10px;
    }

    .profile-card strong {
        font-size: 16px;
    }

    .profile-card .meta {
        padding: 10px;
    }

    .controls {
        width: 100%;

        justify-content: space-between;
    }

    .toolbar .search {
        width: 100%;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .hero-photo {
        max-height: 430px;
    }

    .panel {
        padding: 15px;
    }

    .profiles[data-view="list"] .profile-card img {
        width: 88px;
        height: 94px;
    }

    .view-btn {
        padding: 10px 12px;
    }

}


/* ==========================================================
   33. CELULARES PEQUEÑOS
========================================================== */

@media (max-width: 360px) {

    .bottom-nav a {
        gap: 4px;
    }

    .bottom-nav a svg,
    .bottom-nav a > i {
        width: 18px;
        height: 18px;

        flex-basis: 18px;
    }

    .bottom-nav a span {
        font-size: 9px;
    }

}


/* ==========================================================
   34. ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .profile-card,
    .menu a {
        transition: none;
    }

}

/* ==========================================================
   35. COMPATIBILIDAD CON PANELES ADICIONALES
========================================================== */

:root[data-theme="light"] .qm-acordeon {

    background: rgba(65, 45, 80, 0.025);

    border-color: var(--stroke);
}

:root[data-theme="light"] .qm-acordeon[open] {

    background: rgba(246, 156, 207, 0.05);

    border-color: rgba(189, 69, 122, 0.25);
}

:root[data-theme="light"] .qm-acordeon-texto strong {
    color: var(--text);
}

:root[data-theme="light"] .qm-acordeon-texto small {
    color: var(--muted);
}

:root[data-theme="light"] .qm-acordeon-flecha {
    color: var(--muted);
}

:root[data-theme="light"] .qm-datos-grid .perfil-datos-celda {
    color: var(--text);
}

:root[data-theme="light"] .qm-datos-grid .perfil-datos-celda strong {
    color: var(--text);
}

:root[data-theme="light"] .qm-intereses-panel {
    color: var(--text);
}