/* =============================================
   BibleChinese — Estilos Personalizados
   Paleta cálida educativa: cream · gold · orange
   ============================================= */

/* Variables CSS */
:root {
    /* Paleta de colores */
    --bc-cream:       #FFDDA1;   /* crema — fondos alternos, gradientes */
    --bc-gold-lt:     #FFD151;   /* dorado claro — highlights, pinyin */
    --bc-gold:        #F8C537;   /* dorado — acento secundario, bordes */
    --bc-orange:      #E77728;   /* naranja — CTA principal, iconos */

    /* Semánticos */
    --bc-bg:          #FFFDF5;   /* fondo cálido casi blanco */
    --bc-surface:     #FFFFFF;   /* superficie de tarjetas */
    --bc-surface-alt: #FFF8EC;   /* fondos alternos */
    --bc-text:        #1C1207;   /* texto principal — casi negro cálido */
    --bc-muted:       #7A6A50;   /* texto secundario — gris cálido */
    --bc-border:      #EFE0C4;   /* bordes suaves */

    /* Bootstrap overrides — redirige btn-warning → dorado */
    --bs-warning:      #F8C537;
    --bs-warning-rgb:  248, 197, 55;

    /* Fuentes */
    --bc-chinese-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --bc-body-font:    'Inter', sans-serif;
}

/* =============================================
   Base
   ============================================= */
body {
    font-family: var(--bc-body-font);
    background-color: var(--bc-bg);
    color: var(--bc-text);
}

.chinese-text {
    font-family: var(--bc-chinese-font);
    line-height: 1.8;
}

/* =============================================
   Botones personalizados
   ============================================= */

/* CTA principal — naranja */
.btn-bc {
    background-color: var(--bc-orange);
    border-color: var(--bc-orange);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn-bc:hover, .btn-bc:focus {
    background-color: #c9671f;
    border-color: #c9671f;
    color: #fff;
    box-shadow: 0 4px 12px rgba(231, 119, 40, 0.35);
}

/* Acento secundario — dorado */
.btn-bc-gold {
    background-color: var(--bc-gold);
    border-color: var(--bc-gold);
    color: var(--bc-text);
    font-weight: 600;
    border-radius: 8px;
}
.btn-bc-gold:hover {
    background-color: #dba820;
    border-color: #dba820;
    color: var(--bc-text);
}

/* Outline naranja */
.btn-bc-outline {
    background: transparent;
    border: 2px solid var(--bc-orange);
    color: var(--bc-orange);
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}
.btn-bc-outline:hover, .btn-bc-outline:focus {
    background-color: var(--bc-orange);
    color: #fff;
}

/* =============================================
   Utilidades de color
   ============================================= */
.text-bc-orange { color: var(--bc-orange) !important; }
.bc-muted       { color: var(--bc-muted); }
.brand-zh       { color: var(--bc-orange); }

/* =============================================
   Navbar
   ============================================= */
.navbar {
    background-color: var(--bc-surface) !important;
    border-bottom: 3px solid var(--bc-gold);
    box-shadow: 0 2px 12px rgba(231, 119, 40, 0.08);
    backdrop-filter: blur(8px);
}

.navbar .navbar-brand {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bc-text);
}

.navbar .nav-link {
    color: var(--bc-text) !important;
    font-weight: 500;
    transition: color 0.15s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--bc-orange) !important;
}

.navbar .dropdown-menu {
    border: 1px solid var(--bc-border);
    box-shadow: 0 4px 16px rgba(231, 119, 40, 0.1);
}

.navbar .dropdown-item:hover {
    background-color: var(--bc-surface-alt);
    color: var(--bc-orange);
}

.navbar-toggler {
    border-color: var(--bc-border);
}

/* =============================================
   Cards
   ============================================= */
.card {
    background-color: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(231, 119, 40, 0.06);
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 6px 24px rgba(231, 119, 40, 0.12);
}

/* Stat cards — tira de color en la parte superior */
.stat-card {
    border-top: 4px solid var(--bc-gold) !important;
}

.stat-card-orange {
    border-top: 4px solid var(--bc-orange) !important;
}

/* =============================================
   Welcome Hero — Dashboard
   ============================================= */
.welcome-hero {
    background: linear-gradient(135deg, var(--bc-cream) 0%, var(--bc-gold-lt) 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.welcome-hero::before {
    content: '圣';
    position: absolute;
    right: -10px;
    top: -30px;
    font-size: 9rem;
    font-family: var(--bc-chinese-font);
    color: rgba(231, 119, 40, 0.10);
    pointer-events: none;
    line-height: 1;
    font-weight: 700;
}

/* =============================================
   Streak Badge
   ============================================= */
.streak-badge {
    background: linear-gradient(135deg, var(--bc-cream), var(--bc-gold-lt));
    border: 2px solid var(--bc-gold);
    border-radius: 16px;
    padding: 1rem 1.5rem;
}

/* =============================================
   Ruby Tags — Pinyin sobre Hanzi
   ============================================= */
ruby {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    vertical-align: bottom;
    margin: 0 1px;
}

ruby rt {
    font-size: 0.55em;
    color: var(--bc-orange);
    font-family: var(--bc-body-font);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 2px;
    font-weight: 500;
}

ruby .hanzi {
    font-family: var(--bc-chinese-font);
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

ruby .hanzi:hover {
    color: var(--bc-orange);
}

/* =============================================
   Vista de lectura
   ============================================= */
.verse-block {
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    transition: border-color 0.2s, background-color 0.2s;
}

.verse-block:hover {
    border-left-color: var(--bc-orange);
    background-color: rgba(248, 197, 55, 0.07);
}

.verse-number {
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: super;
    color: var(--bc-muted);
}

.verse-zh {
    font-size: 1.3rem;
    line-height: 2.2;
}

.verse-es {
    font-size: 0.85rem;
    color: var(--bc-muted);
    padding-left: 1rem;
    border-left: 2px solid var(--bc-border);
    margin-top: 0.5rem;
}

.verse-en {
    font-size: 0.82rem;
    color: var(--bc-muted);
    padding-left: 1rem;
    border-left: 2px solid var(--bc-gold-lt);
    margin-top: 0.3rem;
    font-style: italic;
}

.btn-tts {
    opacity: 0.4;
    transition: opacity 0.2s;
    color: var(--bc-orange);
}
.verse-block:hover .btn-tts {
    opacity: 1;
}

/* Modos de visualización */
body.hide-pinyin ruby rt {
    visibility: hidden;
}
body.hide-spanish .verse-es {
    display: none;
}
body.hide-english .verse-en {
    display: none;
}

/* =============================================
   Popup de carácter
   ============================================= */
.char-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: 280px;
}

.popup-content {
    background: var(--bc-surface);
    border: 2px solid var(--bc-gold);
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(231, 119, 40, 0.18);
}

.popup-char {
    font-family: var(--bc-chinese-font);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--bc-text);
}

.popup-pinyin {
    font-size: 1.15rem;
    color: var(--bc-orange);
    font-weight: 600;
    margin: 0.25rem 0;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 18, 7, 0.35);
    z-index: 1050;
}

/* =============================================
   Flashcards
   ============================================= */
.flashcard-wrapper {
    perspective: 1000px;
}

.flashcard {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-face {
    width: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important;
    background-color: var(--bc-surface);
    border: 1px solid var(--bc-border);
    transition: box-shadow 0.3s;
}

.card-face:hover {
    box-shadow: 0 8px 30px rgba(231, 119, 40, 0.18);
}

.card-front {
    cursor: pointer;
}

/* Botones de calificación */
.rating-buttons .btn {
    min-width: 80px;
}

/* =============================================
   Opciones de cuestionario
   ============================================= */
.option-btn {
    background-color: var(--bc-surface);
    border: 2px solid var(--bc-border);
    color: var(--bc-text);
    border-radius: 10px;
    transition: background-color 0.15s, border-color 0.15s;
}

.option-btn:hover {
    background-color: var(--bc-cream);
    border-color: var(--bc-gold);
    color: var(--bc-text);
}

/* =============================================
   Formularios
   ============================================= */
.form-control {
    border-color: var(--bc-border);
    background-color: var(--bc-surface);
    color: var(--bc-text);
    border-radius: 8px;
}

.form-control:focus {
    border-color: var(--bc-orange);
    box-shadow: 0 0 0 3px rgba(231, 119, 40, 0.15);
    background-color: var(--bc-surface);
    color: var(--bc-text);
}

.form-control::placeholder {
    color: var(--bc-muted);
}

/* =============================================
   Scrollbar personalizado
   ============================================= */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bc-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--bc-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--bc-gold);
}

/* =============================================
   Book Selector Offcanvas (read.html)
   ============================================= */
.offcanvas {
    background-color: var(--bc-surface) !important;
    border-right: 3px solid var(--bc-gold) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--bc-border) !important;
}

.offcanvas-title { color: var(--bc-text); }

/* Botón en navbar que abre el selector */
#openBookSelector {
    background: transparent;
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    color: var(--bc-text);
    padding: 3px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    transition: background .15s, border-color .15s;
}
#openBookSelector:hover {
    background: var(--bc-surface-alt);
    border-color: var(--bc-gold);
}
#openBookSelector .chapter-badge {
    font-size: .75rem;
    color: var(--bc-muted);
}

/* Buscador */
#bookSearch {
    background: var(--bc-surface-alt);
    border-color: var(--bc-border);
    color: var(--bc-text);
    border-radius: 6px;
}
#bookSearch::placeholder { color: var(--bc-muted); }
#bookSearch:focus {
    border-color: var(--bc-gold);
    box-shadow: 0 0 0 2px rgba(248, 197, 55, .2);
    background: var(--bc-surface-alt);
    outline: none;
    color: var(--bc-text);
}

/* Etiquetas AT / NT */
.testament-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--bc-muted);
    text-transform: uppercase;
    padding: 10px 4px 4px;
}

/* Botones de libro */
.book-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--bc-border);
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--bc-text);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    font-weight: 500;
}
.book-btn .zh    { font-size: 1.1rem; min-width: 22px; font-family: var(--bc-chinese-font); }
.book-btn .es    { font-size: .8rem; flex: 1; opacity: .85; }
.book-btn .caret { font-size: .7rem; transition: transform .2s; }
.book-btn.open .caret { transform: rotate(90deg); }

.book-btn:hover {
    background-color: var(--bc-surface-alt);
    border-color: var(--bc-gold);
}
.book-btn.active {
    background-color: rgba(248, 197, 55, 0.2);
    border-color: var(--bc-gold);
    color: var(--bc-orange);
    font-weight: 600;
}

.chapter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 8px 30px;
}

.chapter-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--bc-surface-alt);
    color: var(--bc-text);
    border: 1px solid var(--bc-border);
    transition: background-color 0.15s, color 0.15s;
}
.chapter-grid a:hover {
    background-color: var(--bc-cream);
    border-color: var(--bc-gold);
    color: var(--bc-text);
}
.chapter-grid a.current {
    background-color: var(--bc-orange);
    border-color: var(--bc-orange);
    color: #fff;
    font-weight: 700;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 576px) {
    .verse-zh {
        font-size: 1.1rem;
    }
    ruby .hanzi {
        font-size: 1.2em;
    }
    ruby rt {
        font-size: 0.5em;
    }
    .welcome-hero {
        padding: 1.5rem;
    }
    .welcome-hero::before {
        font-size: 6rem;
    }

    /* ── Flashcards en móvil ── */
    .flashcard,
    .card-face {
        min-height: 210px;
    }
    .card-face {
        padding: 1.25rem !important;
        font-size: 0.95rem;
    }
    /* Botones de calificación: tamaño cómodo para touch */
    .rating-buttons .btn {
        font-size: 0.9rem;
        padding: 0.55rem 0.5rem;
    }
    /* Carácter chino en el reverso: más grande para lectura cómoda */
    #cardCharBack {
        font-size: 2rem !important;
    }
    /* Pinyin en el reverso */
    #cardPinyinBack {
        font-size: 1rem !important;
    }
}

/* =============================================
   Auth — Layout split (login / register)
   ============================================= */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
}

.auth-panel-dark {
    background-color: var(--bc-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem;
    position: relative;
    overflow: hidden;
}

.auth-panel-dark::before {
    content: '圣';
    position: absolute;
    right: -30px;
    bottom: -40px;
    font-size: 22rem;
    font-family: var(--bc-chinese-font);
    color: rgba(255,255,255,0.04);
    pointer-events: none;
    line-height: 1;
    font-weight: 700;
    user-select: none;
}

.auth-panel-dark .auth-logo {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.5rem;
    text-decoration: none;
}
.auth-panel-dark .auth-logo span {
    color: var(--bc-gold);
}

.auth-panel-dark .auth-zh {
    font-family: var(--bc-chinese-font);
    font-size: 1.35rem;
    line-height: 2.4;
    color: rgba(255,255,255,0.92);
    margin-bottom: 0.5rem;
}
.auth-panel-dark .auth-zh ruby rt {
    color: var(--bc-gold);
}

.auth-panel-dark .auth-es {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
    border-left: 2px solid var(--bc-gold);
    padding-left: 0.75rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0.5rem;
    width: fit-content;
}

.auth-panel-form {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
}

.auth-form-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bc-text);
    margin-bottom: 0.35rem;
}

.auth-form-sub {
    font-size: 0.9rem;
    color: var(--bc-muted);
    margin-bottom: 2rem;
}

/* Input underline style (más limpio) */
.auth-input {
    border: none;
    border-bottom: 1.5px solid var(--bc-border);
    border-radius: 0;
    background: transparent;
    padding: 0.65rem 0;
    color: var(--bc-text);
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.auth-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--bc-orange);
    background: transparent;
}
.auth-input::placeholder {
    color: #ccc;
}

.auth-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bc-muted);
    margin-bottom: 0.25rem;
}

@media (max-width: 767px) {
    .auth-panel-dark {
        display: none;
    }
    .auth-panel-form {
        padding: 2.5rem 1.75rem;
    }
}

/* =============================================
   Landing — Sección Nosotros
   ============================================= */
.about-photo-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-photo {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bc-gold);
    box-shadow: 0 12px 48px rgba(231, 119, 40, 0.18);
    display: block;
}

.about-photo-placeholder {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bc-cream) 0%, var(--bc-gold) 100%);
    border: 4px solid var(--bc-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--bc-text);
    box-shadow: 0 12px 48px rgba(231, 119, 40, 0.18);
    letter-spacing: 0.02em;
}

.about-quote {
    border-left: 3px solid var(--bc-orange);
    padding: 1rem 1.25rem;
    background: var(--bc-surface-alt);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--bc-text);
    line-height: 1.7;
}

.about-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bc-orange);
    letter-spacing: 0.04em;
}

/* =============================================
   Landing — Eyebrow text y Stats dark
   ============================================= */
.lp-section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bc-orange);
    display: block;
    margin-bottom: 0.75rem;
}

.lp-stats-dark {
    background-color: var(--bc-text);
    padding: 80px 0;
}

.lp-stats-dark .lp-stat-num {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-family: var(--bc-chinese-font);
}

.lp-stats-dark .lp-stat-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    margin-top: 0.4rem;
}

.lp-stats-dark .lp-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto;
}

@media (max-width: 767px) {
    .about-photo,
    .about-photo-placeholder {
        width: 220px;
        height: 220px;
    }
}