/* =========================================================
   NEUROPOL
   css/app.css

   Estilos globales de la aplicación.

   IMPORTANTE:
   Los estilos específicos de cada sección pertenecen
   al archivo JS de su componente.
========================================================= */


/* =========================================================
   1. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--color-background, #04101e);

    color:
        var(--color-text, #f5f7fa);

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


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


button {
    border: 0;
}


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


button:not(:disabled),
a {
    cursor: pointer;
}


img,
picture,
svg {
    display: block;
    max-width: 100%;
}


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


ul,
ol {
    list-style: none;
}


input,
textarea,
select {
    color: inherit;
}


::selection {
    background:
        var(--color-secondary, #d2ad42);

    color:
        var(--color-primary-dark, #030c17);
}


/* =========================================================
   2. APLICACIÓN
========================================================= */

.app {
    position: relative;

    width: 100%;
    min-height: 100vh;

    background:
        var(--color-background, #04101e);
}


/*
   Cada componente principal se monta dentro de #app.
*/

.app-component {
    width: 100%;
    min-height: 100vh;

    animation:
        componentEnter
        var(--transition-normal, 250ms)
        ease;
}


@keyframes componentEnter {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   3. CONTENEDORES GLOBALES
========================================================= */

.container {
    width:
        min(
            100% - 32px,
            1180px
        );

    margin-inline: auto;
}


.container-small {
    width:
        min(
            100% - 32px,
            680px
        );

    margin-inline: auto;
}


.container-medium {
    width:
        min(
            100% - 32px,
            900px
        );

    margin-inline: auto;
}


/* =========================================================
   4. TIPOGRAFÍA GENERAL
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--color-text);

    line-height: 1.15;

    font-weight: 700;
}


p {
    color:
        var(--color-text-soft);
}


.text-muted {
    color:
        var(--color-text-muted);
}


.text-secondary {
    color:
        var(--color-secondary);
}


.text-danger {
    color:
        var(--color-danger);
}


.text-success {
    color:
        var(--color-success);
}


.text-center {
    text-align: center;
}


/* =========================================================
   5. BOTONES GLOBALES
========================================================= */

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

    min-height: 48px;

    padding:
        12px
        20px;

    border-radius:
        var(--radius-medium, 16px);

    border:
        1px solid transparent;

    font-weight: 650;

    text-align: center;

    transition:
        transform
        var(--transition-fast, 150ms)
        ease,
        background
        var(--transition-fast, 150ms)
        ease,
        border-color
        var(--transition-fast, 150ms)
        ease,
        opacity
        var(--transition-fast, 150ms)
        ease;
}


.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}


.btn:active:not(:disabled) {
    transform: scale(.98);
}


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


/* Botón principal */

.btn-primary {
    background:
        var(--color-secondary);

    color:
        var(--color-primary-dark);

    box-shadow:
        0 8px 25px
        rgba(210, 173, 66, .16);
}


.btn-primary:hover:not(:disabled) {
    background:
        var(--color-secondary-light);
}


/* Botón secundario */

.btn-secondary {
    background:
        var(--color-surface);

    color:
        var(--color-text);

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


.btn-secondary:hover:not(:disabled) {
    background:
        var(--color-surface-light);

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


/* Botón peligro */

.btn-danger {
    background:
        var(--color-danger);

    color: #fff;
}


/* Botón transparente */

.btn-ghost {
    background: transparent;

    color:
        var(--color-text-soft);

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


.btn-ghost:hover:not(:disabled) {
    background:
        var(--color-surface);
}


/* Ancho completo */

.btn-full {
    width: 100%;
}


/* Botón grande */

.btn-large {
    min-height: 56px;

    padding:
        15px
        24px;

    font-size: 1rem;
}


/* =========================================================
   6. BOTONES DE TEXTO
========================================================= */

.text-button {
    padding: 0;

    background: transparent;

    color:
        var(--color-secondary);

    font-weight: 600;
}


.text-button:hover {
    color:
        var(--color-secondary-light);
}


/* =========================================================
   7. INPUTS GLOBALES
========================================================= */

.input-group {
    display: grid;
    gap: 8px;
}


.input-group label {
    color:
        var(--color-text-soft);

    font-size: .9rem;
    font-weight: 600;
}


.input,
.textarea,
.select {
    width: 100%;

    min-height: 50px;

    padding:
        12px
        14px;

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

    border-radius:
        var(--radius-medium);

    outline: none;

    background:
        var(--color-surface);

    color:
        var(--color-text);

    transition:
        border-color
        var(--transition-fast)
        ease,
        background
        var(--transition-fast)
        ease,
        box-shadow
        var(--transition-fast)
        ease;
}


.textarea {
    min-height: 120px;

    resize: vertical;
}


.input::placeholder,
.textarea::placeholder {
    color:
        var(--color-text-muted);
}


.input:focus,
.textarea:focus,
.select:focus {
    border-color:
        var(--color-secondary);

    background:
        var(--color-surface-light);

    box-shadow:
        0 0 0 3px
        rgba(210, 173, 66, .1);
}


/* =========================================================
   8. TARJETA GLOBAL BASE
========================================================= */

.card {
    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-small);
}


/* =========================================================
   9. CABECERA INTERNA BASE
========================================================= */

.page-header {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 64px;

    padding:
        max(12px, env(safe-area-inset-top))
        16px
        12px;

    border-bottom:
        1px solid
        var(--color-border);

    background:
        rgba(4, 16, 30, .92);

    backdrop-filter:
        blur(16px);

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


.page-header__back {
    display: grid;
    place-items: center;

    flex:
        0 0 42px;

    width: 42px;
    height: 42px;

    border-radius:
        var(--radius-round);

    background:
        var(--color-surface);

    color:
        var(--color-text);

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

    transition:
        background
        var(--transition-fast)
        ease,
        border-color
        var(--transition-fast)
        ease;
}


.page-header__back:hover {
    background:
        var(--color-surface-light);

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


.page-header__title {
    min-width: 0;
}


.page-header__title h1 {
    font-size: 1.05rem;
}


.page-header__title p {
    margin-top: 2px;

    font-size: .78rem;

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


/* =========================================================
   10. INFORMACIÓN / AVISOS
========================================================= */

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px;

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

    border-radius:
        var(--radius-medium);

    background:
        rgba(255, 255, 255, .025);
}


.info-box__icon {
    display: grid;
    place-items: center;

    flex:
        0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        rgba(210, 173, 66, .12);

    color:
        var(--color-secondary);

    font-size: .8rem;
    font-weight: 700;
}


.info-box p {
    font-size: .88rem;
    line-height: 1.55;

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


/* =========================================================
   11. LOADER GLOBAL
========================================================= */

.app-loader {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        var(--color-background);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity
        var(--transition-normal)
        ease,
        visibility
        var(--transition-normal)
        ease;
}


.app-loader.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.app-loader__content {
    display: grid;
    justify-items: center;
    gap: 16px;

    color:
        var(--color-text-muted);

    font-size: .9rem;
}


.app-loader__spinner {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    border:
        3px solid
        var(--color-border);

    border-top-color:
        var(--color-secondary);

    animation:
        loaderSpin
        .8s
        linear
        infinite;
}


@keyframes loaderSpin {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   12. MODAL GLOBAL
========================================================= */

.app-modal {
    position: fixed;
    inset: 0;

    z-index: 1100;

    display: grid;
    place-items: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity
        var(--transition-normal)
        ease,
        visibility
        var(--transition-normal)
        ease;
}


.app-modal.open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.app-modal__overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, .68);

    backdrop-filter:
        blur(5px);

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


.app-modal__content {
    position: relative;
    z-index: 1;

    width:
        min(
            100%,
            440px
        );

    max-height:
        min(
            700px,
            calc(100vh - 40px)
        );

    overflow-y: auto;

    padding:
        28px;

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

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-large);

    transform:
        translateY(15px)
        scale(.98);

    transition:
        transform
        var(--transition-normal)
        ease;
}


.app-modal.open
.app-modal__content {
    transform:
        translateY(0)
        scale(1);
}


.app-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--color-text-muted);

    font-size: 1.5rem;

    transition:
        background
        var(--transition-fast)
        ease,
        color
        var(--transition-fast)
        ease;
}


.app-modal__close:hover {
    background:
        var(--color-surface-light);

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


.app-modal__icon {
    display: none;

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    border-radius: 50%;

    background:
        rgba(210, 173, 66, .12);

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


.app-modal__icon:not(:empty) {
    display: grid;
    place-items: center;
}


.app-modal__content h2 {
    padding-right: 35px;

    font-size: 1.3rem;
}


.app-modal__content > p {
    margin-top: 10px;

    color:
        var(--color-text-muted);

    font-size: .94rem;
    line-height: 1.6;
}


.app-modal__actions {
    display: grid;
    gap: 10px;

    margin-top: 24px;
}


/* =========================================================
   13. TOAST
========================================================= */

.app-toast {
    position: fixed;

    left: 50%;
    bottom:
        max(
            22px,
            calc(
                env(safe-area-inset-bottom)
                + 14px
            )
        );

    z-index: 1200;

    width:
        min(
            calc(100% - 32px),
            420px
        );

    padding:
        13px
        16px;

    border:
        1px solid
        var(--color-border-light);

    border-radius:
        var(--radius-medium);

    background:
        var(--color-surface-light);

    color:
        var(--color-text);

    box-shadow:
        var(--shadow-medium);

    text-align: center;

    font-size: .9rem;

    opacity: 0;

    visibility: hidden;

    transform:
        translate(
            -50%,
            15px
        );

    pointer-events: none;

    transition:
        opacity
        var(--transition-normal)
        ease,
        transform
        var(--transition-normal)
        ease,
        visibility
        var(--transition-normal)
        ease;
}


.app-toast.show {
    opacity: 1;
    visibility: visible;

    transform:
        translate(
            -50%,
            0
        );
}


/* =========================================================
   14. UTILIDADES
========================================================= */

.hidden {
    display: none !important;
}


.invisible {
    visibility: hidden !important;
}


.no-scroll {
    overflow: hidden !important;
}


.full-width {
    width: 100%;
}


.flex {
    display: flex;
}


.grid {
    display: grid;
}


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


.gap-small {
    gap: 8px;
}


.gap-medium {
    gap: 16px;
}


.gap-large {
    gap: 24px;
}


/* =========================================================
   15. ACCESIBILIDAD
========================================================= */

:focus-visible {
    outline:
        2px solid
        var(--color-secondary);

    outline-offset: 3px;
}


/*
   Texto disponible para lectores de pantalla,
   pero visualmente oculto.
*/

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   16. SCROLLBAR
========================================================= */

* {
    scrollbar-width: thin;

    scrollbar-color:
        var(--color-border-light)
        var(--color-background);
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-track {
    background:
        var(--color-background);
}


::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        var(--color-border-light);
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--color-text-muted);
}


/* =========================================================
   17. SAFE AREAS PARA MÓVILES
========================================================= */

.safe-top {
    padding-top:
        env(safe-area-inset-top);
}


.safe-bottom {
    padding-bottom:
        env(safe-area-inset-bottom);
}


/* =========================================================
   18. DESKTOP
========================================================= */

@media (min-width: 768px) {

    .container,
    .container-small,
    .container-medium {
        width:
            min(
                100% - 48px,
                var(--container-width, 1180px)
            );
    }


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


/* =========================================================
   19. MOVIMIENTO REDUCIDO
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ==========================================
   ESTILO GLOBAL DE BOTONES
========================================== */

button {
    background-color: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small, 10px);

    font: inherit;
    cursor: pointer;

    padding: 10px;

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

button:hover {
    background-color: var(--color-surface-hover);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}