/*
 * Frontend — tema Biblioteca.
 *
 * Usa los mismos tokens y reglas que el backend
 * (backend/assets/src/css/theme-biblioteca.css): paleta tinta/sage/
 * parchment/terracotta/teal/kraft, superficies papel, serifa para
 * marca, contenido sans, radios 6/8/12 y foco unificado. El frontend no tiene
 * conmutador de temas, así que los tokens van directamente en :root.
 */

:root {
    --biblio-ink: #4a6b8a;
    --biblio-ink-hover: #3d5a75;
    --biblio-sage: #8aa884;
    --biblio-sage-hover: #6f8e69;
    --biblio-parchment: #d6b577;
    --biblio-parchment-hover: #c09d5c;
    --biblio-terracotta: #c08478;
    --biblio-terracotta-hover: #a66a5e;
    --biblio-teal: #7ca9ad;
    --biblio-teal-hover: #5f8f93;
    --biblio-kraft: #b8a88a;
    --biblio-kraft-hover: #9c8d70;
    --biblio-cream: #f5efe4;

    --biblio-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

    --biblio-paper: #faf7ef;
    --biblio-paper-2: #f1ebdd;
    --biblio-paper-3: #ece4d1;
    --biblio-border-warm: #e0d8c4;
    --biblio-border: var(--biblio-border-warm);
    --biblio-muted: #5e6b78;
    --biblio-text: #2e3a45;
    --biblio-surface: var(--biblio-paper);
    --biblio-surface-muted: var(--biblio-paper-2);
    --biblio-border-strong: #b8ad92;

    --bc-ui-state-success-text: #285b35;
    --bc-ui-state-success-bg: #edf5ea;
    --bc-ui-state-success-border: #b8cdb4;
    --bc-ui-state-warning-text: #715015;
    --bc-ui-state-warning-bg: #f4efe3;
    --bc-ui-state-warning-border: #d8c59b;
    --bc-ui-state-danger-text: #8b352c;
    --bc-ui-state-danger-bg: #f8ece9;
    --bc-ui-state-danger-border: #ddbbb3;
    --bc-ui-state-info-text: #285d65;
    --bc-ui-state-info-bg: #e6f0f1;
    --bc-ui-state-info-border: #b5cdd0;
    --bc-ui-state-muted-text: #52616d;
    --bc-ui-state-muted-bg: #eef2f4;
    --bc-ui-state-muted-border: #d6dee3;
    --bs-border-color: var(--biblio-border-warm);
    --bs-primary: var(--biblio-ink);
    --bs-primary-rgb: 74, 107, 138;
    --bs-form-invalid-color: var(--bc-ui-state-danger-text);
    --bs-form-invalid-border-color: var(--bc-ui-state-danger-text);

    --biblio-radius-sm: 6px;
    --biblio-radius: 8px;
    --biblio-radius-lg: 12px;
    --biblio-focus-ring: 0 0 0 0.16rem rgba(74, 107, 138, 0.2);
    --biblio-shadow-sm: 0 1px 4px rgba(20, 45, 65, 0.06);
    --biblio-shadow-md: 0 8px 24px rgba(20, 45, 65, 0.08);

    /* Superficies Bootstrap en tonos papel */
    --bs-body-bg: var(--biblio-paper);
    --bs-body-bg-rgb: 250, 247, 239;
    --bs-tertiary-bg: var(--biblio-paper-2);
    --bs-tertiary-bg-rgb: 241, 235, 221;
    --bs-secondary-bg: var(--biblio-paper-3);
    --bs-secondary-bg-rgb: 236, 228, 209;
    --bs-body-color: #2e3a45;
    --bs-body-color-rgb: 46, 58, 69;

    --bs-link-color: var(--biblio-ink);
    --bs-link-hover-color: var(--biblio-ink-hover);
    --bs-link-color-rgb: 74, 107, 138;
    --bs-link-hover-color-rgb: 61, 90, 117;
}

html,
body {
    height: 100%;
}

body {
    background-color: var(--biblio-paper);
    color: var(--bs-body-color);
}

::selection {
    background: rgba(214, 181, 119, 0.45);
}

/* ---------- Estructura (layout original con footer de 60px) ---------- */
.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap>.container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    padding-top: 20px;
    background: var(--biblio-paper-2);
    border-top: 1px solid var(--biblio-border-warm);
    color: var(--biblio-muted);
}

.footer a {
    color: var(--biblio-ink);
    text-decoration: none;
}

.footer a:hover {
    color: var(--biblio-ink-hover);
    text-decoration: underline;
}

/* ---------- Tipografía: contenido sans; serifa reservada a la marca ---------- */
h1,
h2,
h3 {
    font-family: inherit;
    color: var(--biblio-text);
    font-weight: 700;
    line-height: 1.25;
}

/* ---------- Navbar: tinta, como el header del backend ---------- */
.bc-navbar {
    background-color: var(--biblio-ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.bc-navbar .navbar-brand {
    font-family: var(--biblio-font-display);
    color: #fff;
}

.bc-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.bc-navbar .nav-link:hover,
.bc-navbar .nav-link:focus,
.bc-navbar .nav-link.active {
    color: #fff;
}

.bc-navbar .dropdown-menu {
    border-color: var(--biblio-border-warm);
    border-radius: var(--biblio-radius);
    box-shadow: var(--biblio-shadow-md);
}

.yii-logo {
    width: auto;
    height: 32px;
    float: left;
    padding-right: 10px;
}

/* ---------- Botones: paleta biblioteca + tamaño compacto ---------- */
.btn {
    --bs-btn-border-radius: var(--biblio-radius-sm);
    font-weight: 500;
    letter-spacing: 0.1px;
}

.btn-primary {
    --bs-btn-bg: var(--biblio-ink);
    --bs-btn-border-color: var(--biblio-ink);
    --bs-btn-hover-bg: var(--biblio-ink-hover);
    --bs-btn-hover-border-color: var(--biblio-ink-hover);
    --bs-btn-active-bg: var(--biblio-ink-hover);
    --bs-btn-active-border-color: var(--biblio-ink-hover);
    --bs-btn-disabled-bg: var(--biblio-ink);
    --bs-btn-disabled-border-color: var(--biblio-ink);
}

.btn-success {
    --bs-btn-color: #172019;
    --bs-btn-hover-color: #172019;
    --bs-btn-active-color: #172019;
    --bs-btn-bg: var(--biblio-sage);
    --bs-btn-border-color: var(--biblio-sage);
    --bs-btn-hover-bg: var(--biblio-sage-hover);
    --bs-btn-hover-border-color: var(--biblio-sage-hover);
    --bs-btn-active-bg: var(--biblio-sage-hover);
    --bs-btn-active-border-color: var(--biblio-sage-hover);
}

.btn-warning {
    --bs-btn-color: #3b2e13;
    --bs-btn-bg: var(--biblio-parchment);
    --bs-btn-border-color: var(--biblio-parchment);
    --bs-btn-hover-color: #3b2e13;
    --bs-btn-hover-bg: var(--biblio-parchment-hover);
    --bs-btn-hover-border-color: var(--biblio-parchment-hover);
}

.btn-danger {
    --bs-btn-color: #0f0806;
    --bs-btn-hover-color: #0f0806;
    --bs-btn-active-color: #0f0806;
    --bs-btn-bg: var(--biblio-terracotta);
    --bs-btn-border-color: var(--biblio-terracotta);
    --bs-btn-hover-bg: var(--biblio-terracotta-hover);
    --bs-btn-hover-border-color: var(--biblio-terracotta-hover);
}

.btn-info {
    --bs-btn-color: #102025;
    --bs-btn-hover-color: #102025;
    --bs-btn-active-color: #102025;
    --bs-btn-bg: var(--biblio-teal);
    --bs-btn-border-color: var(--biblio-teal);
    --bs-btn-hover-bg: var(--biblio-teal-hover);
    --bs-btn-hover-border-color: var(--biblio-teal-hover);
}

.btn-secondary {
    --bs-btn-color: #292318;
    --bs-btn-hover-color: #292318;
    --bs-btn-active-color: #292318;
    --bs-btn-bg: var(--biblio-kraft);
    --bs-btn-border-color: var(--biblio-kraft);
    --bs-btn-hover-bg: var(--biblio-kraft-hover);
    --bs-btn-hover-border-color: var(--biblio-kraft-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--biblio-ink);
    --bs-btn-border-color: var(--biblio-ink);
    --bs-btn-hover-bg: var(--biblio-ink);
    --bs-btn-hover-border-color: var(--biblio-ink);
    --bs-btn-active-bg: var(--biblio-ink);
    --bs-btn-active-border-color: var(--biblio-ink);
}

/* ---------- Cards, migas, paginación ---------- */
.card {
    --bs-card-border-color: var(--biblio-border-warm);
    --bs-card-border-radius: var(--biblio-radius);
    --bs-card-inner-border-radius: calc(var(--biblio-radius) - 1px);
    --bs-card-cap-bg: var(--biblio-paper-2);
    box-shadow: var(--biblio-shadow-sm);
}

.breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-divider-color: #9aa8b3;
    --bs-breadcrumb-item-active-color: var(--biblio-muted);
}

.breadcrumb a {
    color: var(--biblio-ink);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--biblio-ink-hover);
    text-decoration: underline;
}

.pagination {
    --bs-pagination-color: var(--biblio-ink);
    --bs-pagination-border-color: var(--biblio-border);
    --bs-pagination-hover-color: var(--biblio-ink-hover);
    --bs-pagination-hover-bg: #edf3f7;
    --bs-pagination-focus-color: var(--biblio-ink-hover);
    --bs-pagination-focus-bg: #edf3f7;
    --bs-pagination-focus-box-shadow: var(--biblio-focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--biblio-ink);
    --bs-pagination-active-border-color: var(--biblio-ink);
}

/* ---------- Formularios ---------- */
.form-control,
.form-select {
    border-color: var(--biblio-border-warm);
    border-radius: var(--biblio-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--biblio-ink);
    box-shadow: var(--biblio-focus-ring);
}

.form-check-input:checked {
    background-color: var(--biblio-ink);
    border-color: var(--biblio-ink);
}

.form-check-input:focus {
    border-color: var(--biblio-ink);
    box-shadow: var(--biblio-focus-ring);
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--biblio-muted);
}

div.required label:after {
    content: " *";
    color: var(--biblio-terracotta-hover);
}

.error-summary {
    color: var(--bc-ui-state-danger-text);
    background: var(--bc-ui-state-danger-bg);
    border-left: 3px solid var(--biblio-terracotta);
    border-radius: var(--biblio-radius-sm);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.not-set {
    color: var(--biblio-terracotta-hover);
    font-style: italic;
}

/* ---------- Jumbotron de portada ---------- */
.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

/* ---------- GridView ---------- */
.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.grid-view table>thead>tr>th {
    background-color: #eae0cc;
    color: #3d5a75;
    font-weight: 600;
    border-bottom: 2px solid var(--biblio-ink);
}

.grid-view table>thead>tr>th a {
    color: #3d5a75;
    text-decoration: none;
}

.table {
    --bs-table-striped-bg: rgba(214, 181, 119, 0.07);
}

/* Iconos de ordenación del GridView (FontAwesome 5, sustituye a los
   Glyphicons de Bootstrap 3 que ya no existen en Bootstrap 5) */
a.asc:after,
a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\f0d8";
}

a.desc:after {
    content: "\f0d7";
}

/* ---------- Alertas con la paleta del tema ---------- */
.alert {
    --bs-alert-border-radius: var(--biblio-radius);
}

.alert-success {
    --bs-alert-color: var(--bc-ui-state-success-text);
    --bs-alert-bg: var(--bc-ui-state-success-bg);
    --bs-alert-border-color: var(--bc-ui-state-success-border);
}

.alert-danger {
    --bs-alert-color: var(--bc-ui-state-danger-text);
    --bs-alert-bg: var(--bc-ui-state-danger-bg);
    --bs-alert-border-color: var(--bc-ui-state-danger-border);
}

.alert-warning {
    --bs-alert-color: var(--bc-ui-state-warning-text);
    --bs-alert-bg: var(--bc-ui-state-warning-bg);
    --bs-alert-border-color: var(--bc-ui-state-warning-border);
}

.alert-info {
    --bs-alert-color: var(--bc-ui-state-info-text);
    --bs-alert-bg: var(--bc-ui-state-info-bg);
    --bs-alert-border-color: var(--bc-ui-state-info-border);
}

/* ---------- Pestañas ---------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--biblio-border-warm);
    --bs-nav-tabs-link-active-color: #33465a;
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--biblio-border-warm) var(--biblio-border-warm) var(--bs-body-bg);
    --bs-nav-link-color: var(--biblio-ink);
    --bs-nav-link-hover-color: var(--biblio-ink-hover);
}

.nav-tabs-custom>.tab-content {
    background: var(--biblio-paper);
    border-bottom-left-radius: var(--biblio-radius);
    border-bottom-right-radius: var(--biblio-radius);
    padding: 10px;
}

.nav-tabs>.tab-content {
    padding: 10px;
}

/* ---------- Varios heredados del layout ---------- */
.nav>li>form {
    padding: 8px;
}

@media (max-width: 768px) {
    .nav li>form {
        padding: 3px;
    }
}

.nav>li>form>button:hover {
    text-decoration: none;
}

.profile-user-img {
    border: 3px solid var(--biblio-border-warm);
    border-radius: var(--biblio-radius);
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}

/* Pestañas con el mismo patrón visual que Configuración del backend. */
.nav.nav-tabs.bc-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--biblio-border, #d8dfe2);
    background: transparent;
}

.nav.nav-tabs.bc-section-tabs .nav-link {
    margin: 0;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--biblio-muted, #5e6b78);
    font-weight: 600;
}

.nav.nav-tabs.bc-section-tabs .nav-link:hover,
.nav.nav-tabs.bc-section-tabs .nav-link:focus {
    border-bottom-color: var(--biblio-border, #d8dfe2);
    color: var(--biblio-ink, #4a6b8a);
}

.nav.nav-tabs.bc-section-tabs .nav-link:focus-visible {
    outline: 2px solid var(--biblio-ink, #4a6b8a);
    outline-offset: 2px;
}

.nav.nav-tabs.bc-section-tabs .nav-link.active {
    border-bottom-color: var(--biblio-ink, #4a6b8a);
    background: transparent;
    color: var(--biblio-ink, #4a6b8a);
}

@media (max-width: 575.98px) {
    .nav.nav-tabs.bc-section-tabs .nav-link {
        padding: 0.75rem 0.8rem;
    }
}


/* Public pages and state badges share the administrative vocabulary. */
h1 { font-size: 1.35rem; margin-bottom: 1rem; }
h2, h3 { font-size: 1.1rem; }
.bc-public-panel { max-width: 42rem; }
.bc-public-panel .card-body { padding: 1.25rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: inherit; }
.btn:focus-visible { box-shadow: var(--biblio-focus-ring); outline: 2px solid var(--biblio-ink); outline-offset: 2px; }
.btn-outline-secondary { --bs-btn-color: var(--biblio-muted); --bs-btn-border-color: var(--biblio-border-strong); --bs-btn-hover-color: var(--biblio-text); --bs-btn-hover-bg: var(--biblio-paper-2); --bs-btn-hover-border-color: var(--biblio-ink); --bs-btn-active-color: var(--biblio-text); --bs-btn-active-bg: var(--biblio-paper-3); --bs-btn-active-border-color: var(--biblio-ink); }
.btn-outline-danger { --bs-btn-color: var(--bc-ui-state-danger-text); --bs-btn-border-color: var(--bc-ui-state-danger-border); --bs-btn-hover-color: var(--bc-ui-state-danger-text); --bs-btn-hover-bg: var(--bc-ui-state-danger-bg); --bs-btn-hover-border-color: var(--bc-ui-state-danger-text); --bs-btn-active-color: var(--bc-ui-state-danger-text); --bs-btn-active-bg: var(--bc-ui-state-danger-bg); --bs-btn-active-border-color: var(--bc-ui-state-danger-text); }
.bc-status { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 0.25em 0.65em; font-size: 0.75rem; font-weight: 600; line-height: 1.25; }

.bc-status-success { color: var(--bc-ui-state-success-text); background: var(--bc-ui-state-success-bg); border-color: var(--bc-ui-state-success-border); }

.bc-status-warning { color: var(--bc-ui-state-warning-text); background: var(--bc-ui-state-warning-bg); border-color: var(--bc-ui-state-warning-border); }

.bc-status-danger { color: var(--bc-ui-state-danger-text); background: var(--bc-ui-state-danger-bg); border-color: var(--bc-ui-state-danger-border); }

.bc-status-info { color: var(--bc-ui-state-info-text); background: var(--bc-ui-state-info-bg); border-color: var(--bc-ui-state-info-border); }

.bc-status-muted { color: var(--bc-ui-state-muted-text); background: var(--bc-ui-state-muted-bg); border-color: var(--bc-ui-state-muted-border); }

/* Retain the same palette in pressed and disabled states. */

.btn-success { --bs-btn-active-color: #172019; --bs-btn-active-bg: var(--biblio-sage-hover); --bs-btn-active-border-color: var(--biblio-sage-hover); --bs-btn-disabled-color: #172019; --bs-btn-disabled-bg: var(--biblio-sage); --bs-btn-disabled-border-color: var(--biblio-sage); }

.btn-warning { --bs-btn-active-color: #3b2e13; --bs-btn-active-bg: var(--biblio-parchment-hover); --bs-btn-active-border-color: var(--biblio-parchment-hover); --bs-btn-disabled-color: #3b2e13; --bs-btn-disabled-bg: var(--biblio-parchment); --bs-btn-disabled-border-color: var(--biblio-parchment); }

.btn-danger { --bs-btn-active-color: #0f0806; --bs-btn-active-bg: var(--biblio-terracotta-hover); --bs-btn-active-border-color: var(--biblio-terracotta-hover); --bs-btn-disabled-color: #0f0806; --bs-btn-disabled-bg: var(--biblio-terracotta); --bs-btn-disabled-border-color: var(--biblio-terracotta); }

.btn-info { --bs-btn-active-color: #102025; --bs-btn-active-bg: var(--biblio-teal-hover); --bs-btn-active-border-color: var(--biblio-teal-hover); --bs-btn-disabled-color: #102025; --bs-btn-disabled-bg: var(--biblio-teal); --bs-btn-disabled-border-color: var(--biblio-teal); }

.btn-secondary { --bs-btn-active-color: #292318; --bs-btn-active-bg: var(--biblio-kraft-hover); --bs-btn-active-border-color: var(--biblio-kraft-hover); --bs-btn-disabled-color: #292318; --bs-btn-disabled-bg: var(--biblio-kraft); --bs-btn-disabled-border-color: var(--biblio-kraft); }

.detail-view { table-layout: fixed; width: 100%; }
.detail-view th { width: 32%; }
.detail-view td { overflow-wrap: anywhere; }

/* Outline actions keep readable labels and the same pastel interaction states. */

.btn-outline-success {
    --bs-btn-color: var(--bc-ui-state-success-text);
    --bs-btn-border-color: var(--bc-ui-state-success-text);
    --bs-btn-hover-color: #172019;
    --bs-btn-hover-bg: var(--biblio-sage);
    --bs-btn-hover-border-color: var(--bc-ui-state-success-text);
    --bs-btn-active-color: #172019;
    --bs-btn-active-bg: var(--biblio-sage-hover);
    --bs-btn-active-border-color: var(--bc-ui-state-success-text);
    --bs-btn-disabled-color: var(--bc-ui-state-success-text);
    --bs-btn-disabled-border-color: var(--bc-ui-state-success-text);
}

.btn-outline-warning {
    --bs-btn-color: var(--bc-ui-state-warning-text);
    --bs-btn-border-color: var(--bc-ui-state-warning-text);
    --bs-btn-hover-color: #3b2e13;
    --bs-btn-hover-bg: var(--biblio-parchment);
    --bs-btn-hover-border-color: var(--bc-ui-state-warning-text);
    --bs-btn-active-color: #3b2e13;
    --bs-btn-active-bg: var(--biblio-parchment-hover);
    --bs-btn-active-border-color: var(--bc-ui-state-warning-text);
    --bs-btn-disabled-color: var(--bc-ui-state-warning-text);
    --bs-btn-disabled-border-color: var(--bc-ui-state-warning-text);
}

.btn-outline-info {
    --bs-btn-color: var(--bc-ui-state-info-text);
    --bs-btn-border-color: var(--bc-ui-state-info-text);
    --bs-btn-hover-color: #102025;
    --bs-btn-hover-bg: var(--biblio-teal);
    --bs-btn-hover-border-color: var(--bc-ui-state-info-text);
    --bs-btn-active-color: #102025;
    --bs-btn-active-bg: var(--biblio-teal-hover);
    --bs-btn-active-border-color: var(--bc-ui-state-info-text);
    --bs-btn-disabled-color: var(--bc-ui-state-info-text);
    --bs-btn-disabled-border-color: var(--bc-ui-state-info-text);
}