/* 
 * global.css
 * Global styles for the application
 */

/* ========================================== */
/* SECTION: BASE RESET & DOCUMENT DEFAULTS    */
/* ========================================== */

:root {
    color-scheme: dark;
    --primary-font: 'Klee One', sans-serif;
    --secondary-font: 'Courier New', 'Courier', monospace;
    --page-bg: #0a0a0a;
    --page-text: #fafafa;
    --panel-bg: rgb(18, 18, 18);
    --panel-bg-text: #c0c0c0;
    --surface-bg: rgba(14, 14, 14, 0.4);
    --surface-bg-strong: rgba(18, 18, 18, 0.5);
    --surface-bg-soft: rgba(14, 14, 14, 0.3);
    --border-color: #464646;
    --border-strong: #575757;
    --muted-text: #707070;
    --muted-text-2: #5e5e5e;
    --soft-text: #3a3a3a;
    --accent: rgba(255, 255, 255, 0.08);
    --accent-strong: rgba(255, 255, 255, 0.12);
    --brand-line: #4a4a4a;
    --button-bg: #fafafa;
    --button-bg-primary-hover: #d3d3d3;
    --button-bg-primary-hover-2: rgba(45, 45, 45, 0.5);
    --button-text: #000000;
    --button-hover-bg: #ffffff;
    --button-active-bg: #d3d3d3;
    --button-disabled-bg: #222222;
    --button-disabled-text: #4a4a4a;
    --color-primary: #ac4500;
    --color-secondary: #e63946;

    --error: #ef4444;
    --link: #3b82f6;
    --link-2: #60a5fa;
    --footer-chip-bg: rgba(18, 18, 18, 0.8);
    --status-positive: #22c55e;
    --status-ready: #22c55e;
    --status-ready-border: rgba(34, 197, 94, 0.2);
    --status-ready-glow: rgba(34, 197, 94, 0.5);
    --accent-color: #22c55e;
    --status-warning: #d97706;
    --decor-grid: rgba(255, 255, 255, 0.03);
    --decor-dot: rgba(255, 255, 255, 0.08);
    --decor-fade: rgba(255, 255, 255, 0.05);

    --dict-word-tag-jlpt-n5: rgba(254, 82, 2, 0.25);
    --border-dict-word-tag-jlpt-n5: rgba(254, 82, 2, 0.45);
    --dict-word-tag-jlpt-n4: #3b82f6;
    --border-dict-word-tag-jlpt-n4: rgba(59, 130, 246, 0.45);
}


[data-theme="light"] {
    color-scheme: light;
    --page-bg: #f0f2f5;
    --page-text: #1a1a1a;
    --panel-bg: rgb(255, 255, 255);
    --surface-bg: rgba(255, 255, 255, 0.4);
    --panel-bg-text: #1a1a1a;
    --surface-bg-strong: rgba(255, 255, 255, 0.5);
    --surface-bg-soft: rgba(255, 255, 255, 0.9);
    --border-color: #d1d5db;
    --border-strong: #9ca3af;
    --muted-text: #6b7280;
    --muted-text-2: #7e776d;
    --soft-text: #9ca3af;
    --accent: rgba(0, 0, 0, 0.3);
    --accent-strong: rgba(0, 0, 0, 0.5);
    --button-bg: #1f1b17;
    --button-bg-primary-hover: #414141;
    --button-bg-primary-hover-2: rgba(189, 189, 189, 0.502);
    --button-text: #f9f5ef;
    --button-hover-bg: #313131;
    --button-active-bg: #141414;
    --button-disabled-bg: #cecece;
    --button-disabled-text: #9ca3af;
    --color-primary: #d97706;
    --color-secondary: #fb7185;
    --status-positive: #1f8a4c;
    --status-ready: #1f8a4c;
    --status-ready-border: rgba(31, 138, 76, 0.16);
    --status-ready-glow: rgba(31, 138, 76, 0.28);
    --accent-color: #1f8a4c;
    --status-warning: #b45309;
    --error: #b91c1c;
    --link: #2372f1;
    --link-2: #4995f3;
    --footer-chip-bg: rgba(255, 255, 255, 0.88);
    --decor-grid: rgba(0, 0, 0, 0.05);
    --decor-dot: rgba(0, 0, 0, 0.2);
    --decor-fade: rgba(0, 0, 0, 0.1);
    
    --dict-word-tag-jlpt-n5: rgba(254, 82, 2, 0.671);
    --border-dict-word-tag-jlpt-n5: rgba(254, 82, 2, 0.45);
    --dict-word-tag-jlpt-n4: #2563eb;   
    --border-dict-word-tag-jlpt-n4: rgba(37, 99, 235, 0.45);
}

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

html {
    font-family: var(--primary-font);
    color: var(--page-text);
    font-weight: 600;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

html[data-font="secondary"] {
    font-family: var(--secondary-font);
}

body {
    min-height: 100%;
    background: var(--panel-bg);
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    position: relative;
    font-family: inherit;
    overflow-x: hidden;
}

/* ========================================== */
/* SECTION: LAYOUT HEIGHT FIX FOR DESKTOP     */
/* ========================================== */

body > main,
body > .dash-main,
body > .dict-shell,
body > .legal-page {
    flex: 1 0 auto;
    width: 100%;
    /* Eleva la altura mínima al 100% de la pantalla para garantizar que el footer quede fuera de vista */
    min-height: 100vh;
}
/* ========================================== */
/* SECTION: PAGE SHELL (container)            */
/* Compartido por diccionario, lista, palabra */
/* y furigana. Extensiones específicas de     */
/* cada página (si las hay) quedan en su CSS. */
/* ========================================== */

.container {
    width: 100%;
    max-width: 65rem;
    /* Ancho máximo estándar deseado */
    margin: 0 auto;
    /* Centra el contenedor en pantallas grandes */
    padding: 1.5rem;
    /* Padding responsivo: deja espacio en pantallas pequeñas */
    background: var(--panel-bg);
    position: relative;
    overflow: visible;
}

/* ========================================== */
/* SECTION: VIEW TRANSITIONS (PAGE NAV ANIM)  */
/* ========================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(furigana-shell),
::view-transition-new(furigana-shell) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================== */
/* SECTION: SHARED BUTTON BASE STATES         */
/* ========================================== */

button:hover:not(:disabled) {
    background: var(--border-strong);
    border-color: var(--border-strong);
}

button:active:not(:disabled) {
    transform: scale(0.98);
}

button:disabled {
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    cursor: not-allowed;
}

.corner-tl,
.corner-br {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--border-strong);
}

.corner-tl {
    top: -1px;
    right: -1px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
}

.corner-br {
    bottom: -1px;
    left: -1px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
}

/* ========================================== */
/* SECTION: GLOBAL SITE HEADER                */
/* ========================================== */

.global-site-header {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--panel-bg);
    font-size: 0.75rem;
    letter-spacing: -0.01em;
}

.global-site-header-inner {
    width: 100%;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.global-site-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--page-text);
}

.global-site-brand-logo {
    width: 25px;
    height: 25px;
    background-color: var(--page-text);
    padding: 5px;
    border-radius: 8px;
}

.global-site-brand-text {
    letter-spacing: -0.01em;
    color: var(--page-text);
}

.global-site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 8px;
    margin-right: auto;
}

.global-site-nav-link {
    color: var(--muted-text);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.global-site-nav-link.is-active,
.global-site-nav-link:hover {
    color: var(--page-text);
}

.global-site-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-site-header-separator {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 1.25rem;
    background: var(--muted-text);
    user-select: none;
}

.global-user-settings-spacer {
    min-width: 1px;
    flex: 1;
}

/* ========================================== */
/* SECTION: BOTONES DEL HEADER (UNIFICADOS)   */
/* ========================================== */

.global-site-header-inner button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: auto;  
    min-height: 2.2rem;
    padding: 0.5rem 0.85rem;
    background: var(--panel-bg);
    border: 0;
    color: var(--link-2);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    white-space: nowrap; 
}

.login-text {
    color: var(--page-text);
}

.login-text:hover {
    color: var(--button-bg-primary-hover);
}

.global-site-header-inner button:hover {
    color: var(--button-bg-primary-hover);
    background: var(--panel-bg);
}

.global-site-header-inner button:active,
.login-button:active {
    transform: translateY(0);
}

/* ========================================== */
/* SECTION: LANGUAGE TOGGLE                   */
/* ========================================== */


:root:not([data-theme="light"]) .language-toggle .lang-icon {
    filter: invert(1) brightness(2);
}

/* ========================================== */
/* SECTION: GLOBAL TOOLBAR & LOGIN            */
/* ========================================== */

.global-toolbar {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-wrap {
    position: relative;
}

.login-button.is-authenticated .login-text {
    letter-spacing: 0.02em;
}

.login-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 160px;
    background: var(--panel-bg, rgba(10, 10, 10, 0.9));
    border: 1px solid var(--border-color, #1a1a1a);
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.login-menu[hidden] {
    display: none;
}

.login-menu-item {
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--page-text, #fafafa);
    text-decoration: none;
    transition: background 0.15s ease;
}

.login-menu-item.is-danger {
    color: #ef4444;
}

.login-menu-item.is-danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* ============================================================ */
/* AGREGAR AL FINAL DE global.css                                */
/* Menú desplegable del botón de login (Panel / Cerrar sesión)   */
/* y el avatar circular que reemplaza el ícono cuando hay sesión.*/
/* ============================================================ */

.login-wrap {
    position: relative;
}

.login-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-bg-strong, rgba(255, 255, 255, 0.08));
    font-size: 0.6rem;
    flex-shrink: 0;
}

.login-avatar[hidden] {
    display: none;
}

.login-button.is-authenticated .login-text {
    letter-spacing: 0.02em;
}

.login-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 160px;
    background: var(--panel-bg, rgba(10, 10, 10, 0.9));
    border: 1px solid var(--border-color, #1a1a1a);
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.login-menu[hidden] {
    display: none;
}

.login-menu-item {
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--page-text, #fafafa);
    text-decoration: none;
    transition: background 0.15s ease;
}

.login-menu-item.is-danger {
    color: #ef4444;
}

.login-menu-item.is-danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* ========================================== */
/* SECTION: GLOBAL SITE FOOTER (COLUMNAS)     */
/* ========================================== */

.global-site-footer {
    margin-top: auto;
    width: 100%;
    background: var(--panel-bg);
    position: relative;
    z-index: 1;
    padding: 3rem 0 2.5rem;
}

.global-site-footer-inner {
    width: 100%;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    /* Columna marca más ancha (2fr) y 3 columnas extensibles (1fr) */
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
    gap: 2rem;
    font-size: 0.8rem;
}

.global-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.global-footer-brand-col {
    padding-right: 1rem;
}

.global-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.global-footer-logo {
    width: 22px;
    height: 22px;
    background-color: var(--page-text);
    padding: 4px;
    border-radius: 6px;
}

.global-footer-brand-name {
    font-weight: 600;
    color: var(--page-text);
    font-size: 0.9rem;
}

.global-footer-desc {
    color: var(--muted-text);
    line-height: 1.5;
    font-size: 0.78rem;
    max-width: 18rem;
}

.global-footer-copy {
    color: var(--soft-text);
    font-size: 0.72rem;
    margin-top: 0.25rem;
}

.global-footer-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--page-text);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.global-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.global-footer-links a {
    color: var(--muted-text);
    text-decoration: none;
    transition: color 0.15s ease;
    font-size: 0.78rem;
}

.global-footer-links a:hover {
    color: var(--page-text);
}

.global-footer-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--muted-text);
    margin-left: 0.3rem;
}

/* Adaptación responsive para móviles */
@media (max-width: 768px) {
    .global-site-footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }

    .global-footer-brand-col {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}
/* ========================================== */
/* SECTION: PÁGINA 404                        */
/* ========================================== */

.error-page {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: auto;
    margin-top: 12vh;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 1;
}

.error-page-code {
    display: block;
    font-family: var(--secondary-font);
    font-size: 3.5rem;
    color: var(--error);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.error-page h1 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.error-page p {
    color: var(--muted-text);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 1.8rem;
}

.error-page-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-page-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--page-text);
    background: var(--surface-bg-soft);
    transition: background 0.15s ease;
}

.error-page-btn:hover {
    background: var(--surface-bg-strong);
}

.error-page-btn.is-primary {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: transparent;
}

.error-page-btn.is-primary:hover {
    background: var(--button-hover-bg);
}

/* ========================================== */
/* SECTION: RESPONSIVE BREAKPOINTS            */
/* ========================================== */

@media (max-width: 768px) {
    /* 1. Header flexible que permite envolver elementos */
    .global-site-header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end; /* Alinea los elementos hacia la derecha */
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    /* 2. El logo se queda a la extrema izquierda */
    .global-site-brand {
        margin-right: auto;
    }

    /* 3. Desenvolver wrappers intermedios para alinear todos los botones en el mismo nivel */
    .global-site-header-actions,
    .global-toolbar {
        display: contents;
    }

    /* 4. Ocultar elementos sobrantes */
    .global-site-brand-text,
    .global-site-header-separator,
    .global-user-settings-spacer,
    .global-site-nav {
        display: none;
    }

    /* 5. Asegurar alineación vertical idéntica para todos los botones */
    .global-site-header-inner button,
    .login-button {
        margin: 0;
        align-self: center;
    }
}