/* JeranJets — DRAWER styles
 * Sistema de drawers (offcanvas): left/right, backdrop, drawer-menu,
 * drawer-lang, theme toggle, settings tabs/panels/footer.
 * Cárgalo DESPUÉS de web.css y core.css (puede sobreescribir tokens). */

/* ------------------------------------------------------------------ */
/*  Side Drawers (Offcanvas panels)                                   */
/* ------------------------------------------------------------------ */
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 100%;
    background: #fff;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}
.drawer-left {
    left: 0;
    transform: translateX(-100%);
    /* Border subtle, integrado con el fondo. En dark queda #2a2a2a
       (--jj-line dark) y deja de cortar; en light es #e8e8e8. */
    border-right: 1px solid var(--jj-line, #e5e7eb);
}
.drawer-right {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--jj-line, #e5e7eb);
}
.drawer.is-open {
    transform: translateX(0);
    /* SIN box-shadow. Antes el blur de 30px se desbordaba lateralmente y
       se notaba "fuera" del drawer aunque estuviese cerrado. La separación
       visual entre drawer y página la dan el border-left/right + el
       backdrop semitransparente con blur. */
}

/* Backdrop */
.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 31, 58, 0.5);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer contents styling */
.drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0b1f3a;
    color: #fff;
}
.drawer-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.drawer-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.drawer-close:hover {
    color: #fff;
}
.drawer-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Drawer Menu List */
/* Eliminado: el viejo estilo .drawer-menu-list a venía del primer diseño
   (font-size: 15px; padding 12px 16px;). Hacía que los <a> del drawer-menu
   ("Volver al buscador", "Contacto", "Textos legales") apareciesen
   gigantes comparados con los <button> ("Ajustes", "Área privada") que ya
   usan el estilo nuevo. Ahora todos los items — <a> y <button> — son
   .drawer-menu-item con los mismos estilos (font: 700 11px ui-monospace,
   altura 38px, hover con caja de icono enmarcada). Ver bloque "Drawer
   menu list (corporate + account)" más abajo. */

.drawer-lang-section h4 {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 10px 0;
    padding-left: 6px;
}
.drawer-lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.drawer-lang-list li {
    margin-bottom: 2px;
}
.drawer-lang-list a {
    display: block;
    padding: 8px 12px;
    color: #4b5563;
    font-size: 14px;
    border-radius: 6px;
    text-decoration: none;
}
.drawer-lang-list a:hover {
    background: #f3f4f6;
    color: #0b1f3a;
}
.drawer-lang-list a.is-active {
    background: #eff6ff;
    color: #1152d4;
    font-weight: 600;
}

/* RTL drawers support */
html[dir="rtl"] .drawer-left {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
html[dir="rtl"] .drawer-right {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
html[dir="rtl"] .drawer.is-open {
    transform: translateX(0);
}

/* ---- FAQ Drawer ---- */
.drawer { background: var(--jj-bg) !important; }
.drawer-header { border-bottom: 1px solid var(--jj-line); }
.drawer-header h3 { font-family: var(--jj-font-mono); font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- Drawer sections (estructura común) ---- */
.drawer { max-width: 380px; }
.drawer-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--jj-line) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-header h3 {
    margin: 0;
    font-family: var(--jj-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--jj-ink);
}
.drawer-header h3 i { font-size: 16px; opacity: 0.7; }
.drawer-close {
    background: transparent;
    border: none;
    color: var(--jj-ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: opacity var(--jj-trans);
}
.drawer-close:hover { opacity: 0.5; }

.drawer-body { padding: 0 !important; }
.drawer-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--jj-line-soft);
}
.drawer-section:last-child { border-bottom: none; }
.drawer-section-title {
    font-family: var(--jj-font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jj-ink-soft);
    margin: 0 0 12px;
    font-weight: 700;
}

/* ---- Drawer options (currency / language radios) ---- */
.drawer-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.drawer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--jj-ink);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--jj-trans);
    border: 1px solid transparent;
}
.drawer-option:hover {
    background: var(--jj-bg-soft);
    text-decoration: none;
}
.drawer-option.is-active {
    background: var(--jj-bg);
    border-color: var(--jj-ink);
}
.drawer-option-tag {
    font-family: var(--jj-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--jj-ink-soft);
    min-width: 26px;
    text-align: center;
}
.drawer-option.is-active .drawer-option-tag { color: var(--jj-ink); font-weight: 700; }
.drawer-option-label { flex: 1; }
.drawer-option-check { color: var(--jj-accent); font-size: 16px; }

/* ---- Theme toggle ---- */
.drawer-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.drawer-toggle-btn {
    background: transparent;
    border: 1px solid var(--jj-line);
    border-radius: 0;
    padding: 12px;
    font-family: var(--jj-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jj-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all var(--jj-trans);
}
.drawer-toggle-btn i { font-size: 18px; }
.drawer-toggle-btn:hover { border-color: var(--jj-ink); }
.drawer-toggle-btn.is-active {
    background: var(--jj-ink);
    color: var(--jj-bg);
    border-color: var(--jj-ink);
}

/* ---- Drawer menu list (corporate + account) ----
   Alineado con BIBLE_VISUAL y con el look de .header-icon-btn:
   - Iconos en negro puro (--jj-ink), tamaño 18px, mismo que el header.
   - Cuadrado 38x38 alrededor del icono con borde transparente; al hover
     el borde pasa a negro (1px solid var(--jj-ink)) igual que los iconos
     del header al hover. Da unidad visual entre header y drawer.
   - Sin border-bottom entre items (minimalismo). El "rail" se nota por
     el padding generoso.
   - Labels en mayúsculas monospace tipo Zara, 12px con tracking abierto.
   - Chevron solo aparece al hover, desplazándose ligeramente. */
.drawer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.drawer-menu-list li { margin: 0; }

/* Reset DURO para que <a> y <button> rendericen exactamente igual.
   Antes el <a> tomaba styles globales (color #1152d4, line-height
   diferente) y el <button> el user-agent default (font diferente,
   appearance, padding interno). Aquí los normalizamos a todos. */
.drawer-menu-list .drawer-menu-item,
a.drawer-menu-item,
button.drawer-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
    background: transparent;
    border: 0;
    color: var(--jj-ink);
    text-decoration: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity var(--jj-trans);
}
.drawer-menu-item:hover,
a.drawer-menu-item:hover {
    background: transparent !important;
    text-decoration: none !important;
    color: var(--jj-ink) !important;
}

/* Caja del icono — clone exacto del .header-icon-btn (38×38, border en hover) */
.drawer-menu-item > i:first-child {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--jj-ink);
    border: 1px solid transparent;
    transition: border-color var(--jj-trans);
}
.drawer-menu-item:hover > i:first-child {
    border-color: var(--jj-ink);
}

.drawer-menu-item > span {
    flex: 1;
    min-width: 0;
}

/* ---- Drawer account empty state ---- */
.drawer-account-empty { text-align: center; padding: 32px 20px !important; }
.drawer-account-avatar {
    font-size: 56px;
    color: var(--jj-ink);
    margin-bottom: 14px;
    line-height: 1;
}
.drawer-account-avatar-empty { color: var(--jj-ink-soft); opacity: 0.5; }
.drawer-account-welcome {
    font-size: 13px;
    color: var(--jj-ink);
    text-align: center;
    margin: 0;
    word-break: break-all;
}
.drawer-empty-title {
    font-family: var(--jj-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--jj-ink);
}
.drawer-empty-desc {
    font-size: 12px;
    color: var(--jj-ink-soft);
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ---- RTL adjustments for the new drawers ---- */
html[dir="rtl"] .drawer-right { left: 0; right: auto; transform: translateX(-100%); }
html[dir="rtl"] .drawer-right.is-open { transform: translateX(0); }
html[dir="rtl"] .drawer-left  { right: 0; left: auto; transform: translateX(100%); }
html[dir="rtl"] .drawer-left.is-open { transform: translateX(0); }
html[dir="rtl"] .drawer-menu-chevron { transform: rotate(180deg); }

/* ─────────────────────────────────────────────────────────────────────
 *  DRAWER REFINEMENT v2 — alinea header + body con BIBLE_VISUAL.md §12
 *  BUG FIX importante:  el .drawer-header de la base CSS (línea ~807)
 *  tenía background:#0b1f3a y color:#fff (legacy navy). El Zara restyle
 *  sobreescribió texto y border pero NO el background → texto oscuro
 *  sobre fondo oscuro = invisible. Esta sección lo arregla.
 * ───────────────────────────────────────────────────────────────────── */
.drawer-header {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    padding: 18px 24px !important;
}
.drawer-header h3 { color: var(--jj-ink) !important; }
.drawer-header h3 i { font-size: 14px !important; opacity: 0.55; }
.drawer-close {
    color: var(--jj-ink) !important;
    font-size: 22px !important;
    padding: 4px 10px !important;
    opacity: 0.6;
}
.drawer-close:hover { opacity: 1; }

/* Drawer-body — typography aligned con BIBLE (12px text, monospace tags). */
.drawer-body { padding: 0 !important; }
.drawer-section { padding: 20px 24px !important; }

/* Drawer-option rows (idioma, moneda) — refinamiento Zara */
.drawer-option {
    font-size: 12px !important;
    padding: 12px 14px !important;
    gap: 14px !important;
    border-radius: 0 !important;
}
.drawer-option-label { font-size: 12px !important; }
.drawer-option-label-code {
    font-family: var(--jj-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--jj-ink-soft);
    margin-right: 6px;
}
.drawer-option-label-name { font-size: 12px; }
.drawer-option-tag {
    font-size: 11px !important;
    min-width: 22px !important;
}

/* Override antiguo del drawer-menu-item eliminado — los estilos definitivos
   están en el bloque "Drawer menu list" arriba, ya alineados con BIBLE_VISUAL
   y con el look de .header-icon-btn. */

/* ─── TABS dentro del drawer (Idioma | Moneda) ─── */
.settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--jj-line);
    padding: 0 24px;
    gap: 0;
}
.settings-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 14px 0;
    font-family: var(--jj-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jj-ink-soft);
    cursor: pointer;
    position: relative;
    transition: color var(--jj-trans);
}
.settings-tab:hover { color: var(--jj-ink); }
.settings-tab.is-active { color: var(--jj-ink); font-weight: 700; }
.settings-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--jj-ink);
}

/* Settings panel — solo se ve el activo */
.settings-panel { padding: 16px 24px; }
.settings-panel[hidden] { display: none; }

/* Sección de theme (sin tab — toggle directo) */
.drawer-section--theme {
    border-top: 1px solid var(--jj-line-soft);
    border-bottom: none !important;
}

/* ─── Footer del drawer: resumen del estado activo ─── */
.drawer-footer {
    padding: 14px 24px;
    background: var(--jj-bg-soft);
    border-top: 1px solid var(--jj-line);
    flex-shrink: 0;
}
.settings-summary-title {
    font-family: var(--jj-font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jj-ink-soft);
    font-weight: 700;
    margin-bottom: 6px;
}
.settings-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 11px;
    color: var(--jj-ink);
}
.settings-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.settings-summary-item i {
    font-size: 12px;
    color: var(--jj-ink-soft);
    opacity: 0.8;
}
.settings-summary-sep {
    color: var(--jj-ink-soft);
    opacity: 0.5;
}

/* ---- Mobile fine-tuning (drawer-only — sus contrapartes header
   viven en web.css bajo el mismo media query) ---- */
@media (max-width: 600px) {
    .drawer { max-width: 90vw; width: 90vw; }
    .drawer-header { padding: 16px 20px !important; }
    .drawer-section { padding: 16px 20px !important; }
    .settings-tabs { padding: 0 20px; }
    .settings-panel { padding: 12px 20px; }
    .drawer-footer { padding: 12px 20px; }
}

/* ============================================================
   Drawer header con brand de JeranJets (avión + nombre) en vez
   del título "Menu". Solo aplica al drawer-menu (drawer corporativo).
   ============================================================ */
.drawer-header--brand {
    padding: 18px 20px 14px;
}
.drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--jj-ink, #000);
    text-decoration: none !important;
}
.drawer-brand:hover {
    opacity: 0.7;
}
.drawer-brand__logo {
    width: 22px;
    height: 22px;
}
.drawer-brand__name {
    font: 700 14px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============================================================
   Contenido de drawers informativos (contact, legal): jerarquía
   tipográfica calmada, dl/dt/dd minimalistas estilo bible.
   ============================================================ */
.drawer-info-body {
    padding: 6px 0 24px !important;
}
.drawer-info-block {
    padding: 16px 20px;
    border-bottom: 1px solid var(--jj-line-soft);
}
.drawer-info-block:last-child {
    border-bottom: 0;
}
.drawer-info-title {
    font: 700 10px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--jj-ink-soft);
    margin: 0 0 10px;
}
.drawer-info-kv {
    margin: 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 14px;
    font-size: 13px;
}
.drawer-info-kv dt {
    color: var(--jj-ink-soft);
    font-weight: 500;
}
.drawer-info-kv dd {
    margin: 0;
    color: var(--jj-ink);
}
.drawer-info-kv dd a {
    color: var(--jj-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.drawer-info-kv dd a:hover {
    text-decoration: none;
}
.drawer-info-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--jj-ink);
    margin: 0 0 10px;
}
.drawer-info-text:last-child {
    margin-bottom: 0;
}
.drawer-info-text a {
    color: var(--jj-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.drawer-info-muted {
    font-size: 12px;
    color: var(--jj-ink-soft);
}