html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* =====================================================
   TEMAS
   - Oscuro: por defecto (:root) y con <html data-theme="dark">
   - Claro:  <html data-theme="light">
   ===================================================== */

:root,
[data-theme="dark"] {
    /* Paleta base (sin cambios respecto al diseño original) */
    --color-primary: #0B3D2E; /* verde oscuro */
    --color-secondary: #10A37F; /* verde esmeralda */
    --color-accent: #2ED9A3; /* verde claro / detalles */
    --color-purple: #12294D; /* azul noche */
    --color-bg: #0A1929; /* fondo azul muy oscuro */
    --color-card: #102A43; /* tarjetas azul oscuro */
    /* Texto FUERA de botones: blanco */
    --color-dark: #FFFFFF;
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-link: #FFFFFF;
    --text-danger: #ff7b86;
    /* Texto DENTRO de botones (se mantiene como el original) */
    --btn-text: #E8F1EC;
    --btn-accent-text: #0A1929;
    /* Color RGB del acento para los rgba(...) */
    --accent-rgb: 46, 217, 163;
    /* Superficies */
    --field-bg: #0A1929;
    --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-nav: 0 3px 10px rgba(0, 0, 0, 0.4);
    --focus-gap: #0A1929;
    /* Navbar y footer */
    --nav-bg: linear-gradient(90deg, #12294D, #0B3D2E);
    --nav-text: #FFFFFF;
    --nav-brand: #FFFFFF;
    --footer-bg: #12294D;
    --footer-text: #FFFFFF;
    /* Botón de opción (lectura) */
    --opcion-bg: #12294D;
    --opcion-text: #E8F1EC;
    --opcion-hover-text: #E8F1EC;
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Nunito', sans-serif;
}

[data-theme="light"] {
    --color-primary: #0B3D2E;
    --color-secondary: #10A37F;
    --color-accent: #0E8A69; /* verde más profundo para contraste sobre claro */
    --color-purple: #12294D;
    --color-bg: #F2F7F4; /* fondo verdoso muy claro */
    --color-card: #FFFFFF;
    /* Texto principal: azul noche */
    --color-dark: #12294D;
    --text-muted: rgba(18, 41, 77, 0.65);
    --text-link: #0B6B50;
    --text-danger: #C62839;
    --btn-text: #FFFFFF;
    --btn-accent-text: #FFFFFF;
    --accent-rgb: 16, 163, 127;
    --field-bg: #FFFFFF;
    --shadow-card: 0 4px 14px rgba(18, 41, 77, 0.10);
    --shadow-card-hover: 0 8px 20px rgba(18, 41, 77, 0.18);
    --shadow-nav: 0 3px 10px rgba(18, 41, 77, 0.12);
    --focus-gap: #FFFFFF;
    --nav-bg: linear-gradient(90deg, #FFFFFF, #DDF3EA);
    --nav-text: #12294D;
    --nav-brand: #0B3D2E;
    --footer-bg: #DDF3EA;
    --footer-text: #12294D;
    --opcion-bg: #EAF6F0;
    --opcion-text: #12294D;
    --opcion-hover-text: #0B3D2E;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--focus-gap), 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-dark);
    transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--font-heading);
    color: var(--color-dark);
}

.text-muted,
.lectura-meta {
    color: var(--text-muted) !important;
}

/* Navbar */
.app-navbar {
    background: var(--nav-bg);
    box-shadow: var(--shadow-nav);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
}

    .app-navbar .navbar-brand {
        color: var(--nav-brand);
        font-weight: 700;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .app-navbar .brand-icon {
        font-size: 1.5rem;
    }

    .app-navbar .nav-link {
        color: var(--nav-text);
        font-weight: 600;
        margin: 0 0.25rem;
        border-radius: 8px;
        padding: 0.4rem 0.8rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .app-navbar .nav-link:hover {
            background-color: rgba(var(--accent-rgb), 0.15);
            color: var(--nav-text);
        }

        .app-navbar .nav-link.active {
            background-color: rgba(var(--accent-rgb), 0.22);
            color: var(--nav-text);
        }

/* Botones */
.btn-primary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    font-weight: 700;
    border-radius: 12px;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #0d8a6a;
        border-color: #0d8a6a;
    }

.btn-secondary {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    font-weight: 700;
    border-radius: 12px;
    color: var(--btn-text);
}

    .btn-secondary:hover {
        background-color: #0d1f3c;
        border-color: #0d1f3c;
        color: #fff;
    }

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--btn-accent-text);
    font-weight: 700;
    border-radius: 12px;
}

/* Tarjetas de historias */
.card {
    background-color: var(--color-card);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.25s ease;
    overflow: hidden;
    color: var(--color-dark);
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-card-hover);
        border-color: var(--color-accent);
    }

.card-title {
    font-family: var(--font-heading);
    color: var(--color-dark);
}

/* Badges de estado / genero */
.badge-story {
    background-color: var(--color-secondary);
    color: #fff;
    border-radius: 20px;
    padding: 0.35em 0.8em;
    font-weight: 700;
}

.badge-estado {
    display: inline-block;
    border-radius: 20px;
    padding: 0.25em 0.75em;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge-publicada {
    background-color: rgba(var(--accent-rgb), 0.18);
    color: var(--color-dark);
    border: 1px solid var(--color-accent);
}

.badge-no-publicada {
    background-color: rgba(var(--accent-rgb), 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
}

/* Footer */
.app-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: 0.9rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
}

    .app-footer a {
        color: var(--text-link);
        text-decoration: none;
    }

        .app-footer a:hover {
            text-decoration: underline;
        }

/* Utilidades de color rápido */
.text-brand-navy {
    color: var(--color-purple);
}

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

.bg-brand-green {
    background-color: var(--color-secondary);
}

/* =====================================================
   MEJORAS VISUALES
   ===================================================== */

/* ---------- Contenido principal ---------- */
main {
    padding-top: 1rem;
}

/* ---------- Formularios: ancho limitado y centrado ---------- */
.form-wrapper {
    max-width: 640px;
    margin-inline: auto;
}

.form-wrapper-sm {
    max-width: 420px;
}

.form-wrapper-lg {
    max-width: 860px;
}

/* Tarjeta que envuelve el formulario */
.form-card {
    background-color: var(--color-card);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 1.75rem;
}

    .form-card h4 {
        color: var(--color-dark);
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    }

/* ---------- Campos ---------- */
.form-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-dark);
}

.form-control,
.form-select {
    background-color: var(--field-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--color-dark);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--field-bg);
        color: var(--color-dark);
        border-color: var(--color-accent);
        box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
    }

    .form-control::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }

    .form-select option {
        background-color: var(--color-card);
        color: var(--color-dark);
    }

/* Mensajes de validación */
.text-danger,
.field-validation-error {
    color: var(--text-danger) !important;
    font-size: 0.875rem;
}

.input-validation-error {
    border-color: var(--text-danger) !important;
}

/* ---------- Botones con separación ---------- */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

table .btn + .btn,
table .btn + form,
table form + .btn,
table form + form {
    margin-left: 0.5rem;
}

.btn-secondary {
    border-color: rgba(var(--accent-rgb), 0.35);
}

/* Botón contorno (cerrar sesión, etc.) */
.btn-outline-accent {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    font-weight: 700;
}

    .btn-outline-accent:hover {
        background-color: var(--color-accent);
        color: var(--btn-accent-text);
    }

/* ---------- Usuario logueado en la navbar ---------- */
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--nav-text);
}

.user-role {
    font-size: 0.75rem;
    color: var(--nav-text);
    opacity: 0.8;
}

/* ---------- Tablas ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-dark);
    --bs-table-striped-bg: rgba(var(--accent-rgb), 0.05);
    --bs-table-striped-color: var(--color-dark);
    --bs-table-hover-bg: rgba(var(--accent-rgb), 0.1);
    --bs-table-hover-color: var(--color-dark);
    --bs-table-border-color: rgba(var(--accent-rgb), 0.15);
    vertical-align: middle;
}

    .table thead th {
        font-family: var(--font-heading);
        color: var(--color-dark);
        border-bottom: 2px solid rgba(var(--accent-rgb), 0.35);
    }

/* ---------- Alertas ---------- */
.alert {
    border-radius: 12px;
}

/* =====================================================
   LECTURA DE CAPÍTULOS
   ===================================================== */

.lectura-wrapper {
    max-width: 760px;
    margin-inline: auto;
}

.lectura-card {
    background-color: var(--color-card);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 2rem;
}

.lectura-titulo {
    color: var(--color-dark);
    margin-bottom: 1.25rem;
}

.lectura-cuerpo {
    font-size: 1.1rem;
    line-height: 1.8;
    white-space: pre-line; /* respeta los saltos de línea que escribió el admin */
}

.lectura-opciones {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .lectura-opciones h5 {
        color: var(--color-dark);
        margin-bottom: 0.25rem;
    }

    .lectura-opciones form {
        margin: 0;
    }

.btn-opcion {
    width: 100%;
    text-align: left;
    background-color: var(--opcion-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--opcion-text);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .btn-opcion:hover,
    .btn-opcion:focus-visible {
        background-color: rgba(var(--accent-rgb), 0.15);
        border-color: var(--color-accent);
        color: var(--opcion-hover-text);
        transform: translateX(4px);
    }

.lectura-final {
    margin-top: 1.5rem;
    text-align: center;
    background-color: rgba(var(--accent-rgb), 0.08);
    border: 1px solid var(--color-accent);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
}

.lectura-final-icono {
    font-size: 2.5rem;
}

.lectura-final h4 {
    color: var(--color-dark);
}

.fila-historia:has(input:checked) {
    background-color: rgba(var(--accent-rgb), 0.12);
}

/* =====================================================
   BOTÓN DE CAMBIO DE TEMA
   ===================================================== */

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background-color: transparent;
    color: var(--nav-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .theme-toggle:hover,
    .theme-toggle:focus-visible {
        background-color: rgba(var(--accent-rgb), 0.15);
        border-color: var(--color-accent);
        transform: rotate(15deg);
    }

.app-navbar {
    background: linear-gradient(90deg, var(--color-purple), var(--color-primary));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(46, 217, 163, 0.25);
}

    .app-navbar .navbar-brand {
        color: var(--color-accent);
        font-weight: 700;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .app-navbar .brand-icon {
        font-size: 1.5rem;
    }

    .app-navbar .nav-link {
        color: rgba(232, 241, 236, 0.85);
        font-weight: 600;
        margin: 0 0.25rem;
        border-radius: 8px;
        padding: 0.4rem 0.8rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .app-navbar .nav-link:hover {
            background-color: rgba(46, 217, 163, 0.15);
            color: var(--color-accent);
        }

        .app-navbar .nav-link.active {
            background-color: rgba(46, 217, 163, 0.22);
            color: var(--color-accent);
        }