/* Biblioteca Espiritual — tokens (see REDESIGN.md). Palette kept from v1: teal + gold. */
.biblioteca-esp-container {
    --bib-ink: #1a3a3a;
    --bib-text: #24302f;
    --bib-muted: #4f5f5e;
    --bib-bg: #f4f7f7;
    --bib-surface: #ffffff;
    --bib-border: #d9e2e1;
    --bib-primary: #0a7373;
    --bib-primary-hover: #085c5c;
    --bib-gold: #ac7c00;
    --bib-gold-text: #8a6300;
    --bib-gold-soft: #f5c72e;
    --bib-danger: #b42318;
    --bib-danger-soft: #fdecea;
    --bib-success: #146c43;
    --bib-success-soft: #e6f4ec;
    --bib-info-soft: #e5f2f2;
    --bib-focus: #0a7373;

    --bib-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    --bib-font-read: Georgia, 'Times New Roman', serif;
    --bib-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --bib-step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
    --bib-step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    --bib-step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.6rem);
    --bib-radius: 8px;
    --bib-radius-lg: 14px;
    --bib-space: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --bib-shadow: 0 1px 2px rgba(26, 58, 58, 0.06), 0 4px 16px rgba(26, 58, 58, 0.06);
    --bib-shadow-hover: 0 2px 4px rgba(26, 58, 58, 0.08), 0 10px 28px rgba(26, 58, 58, 0.1);
    --bib-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 16px;
    font-family: var(--bib-font-ui);
    font-size: var(--bib-step-0);
    line-height: 1.6;
    color: var(--bib-text);
    background: var(--bib-bg);
}

.biblioteca-esp-container *,
.biblioteca-esp-container *::before,
.biblioteca-esp-container *::after {
    box-sizing: border-box;
}

.biblioteca-esp-container h1,
.biblioteca-esp-container h2,
.biblioteca-esp-container h3 {
    color: var(--bib-ink);
    line-height: 1.25;
    margin: 0;
}

.biblioteca-esp-container a {
    color: var(--bib-primary);
    text-underline-offset: 3px;
}

.biblioteca-esp-container a:hover {
    color: var(--bib-primary-hover);
}

.biblioteca-esp-container :focus-visible {
    outline: 3px solid var(--bib-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

.biblioteca-esp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Honeypot: invisible to people, filled by naive bots */
.biblioteca-esp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Header + public-domain banner ---------- */
.biblioteca-esp-header {
    margin-bottom: calc(var(--bib-space) * 1.5);
}

.biblioteca-esp-header h2 {
    font-family: var(--bib-font-read);
    font-size: var(--bib-step-3);
}

.biblioteca-esp-subtitle {
    max-width: 65ch;
    margin: 0.75rem 0 0;
    color: var(--bib-muted);
    font-size: var(--bib-step-1);
}

.biblioteca-esp-banner {
    order: 0;
    margin-bottom: calc(var(--bib-space) * 2);
    padding: var(--bib-space) calc(var(--bib-space) * 1.25);
    border-radius: var(--bib-radius-lg);
    background: var(--bib-ink);
    color: #ffffff;
    border-left: 6px solid var(--bib-gold-soft);
}

.biblioteca-esp-container .biblioteca-esp-banner-title {
    color: #ffffff;
    font-size: var(--bib-step-1);
    letter-spacing: 0.02em;
}

.biblioteca-esp-banner-lead {
    margin: 0.5rem 0 0.75rem;
}

.biblioteca-esp-banner-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.35rem 1.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    color: #e6eeee;
}

.biblioteca-esp-banner-list li {
    position: relative;
    padding-left: 1.4rem;
}

.biblioteca-esp-banner-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.6rem;
    height: 0.35rem;
    border-left: 2px solid var(--bib-gold-soft);
    border-bottom: 2px solid var(--bib-gold-soft);
    transform: rotate(-45deg);
}

.biblioteca-esp-banner-license {
    margin: 0;
    font-size: 0.95rem;
    color: #e6eeee;
}

.biblioteca-esp-container .biblioteca-esp-banner a {
    color: var(--bib-gold-soft);
}

.biblioteca-esp-container .biblioteca-esp-banner a:hover {
    color: #ffffff;
}

.biblioteca-esp-banner :focus-visible {
    outline-color: var(--bib-gold-soft);
}

/* ---------- Sections ---------- */
.biblioteca-esp-section {
    margin-bottom: calc(var(--bib-space) * 2.5);
}

.biblioteca-esp-section > h2,
.biblioteca-esp-section-head h2 {
    font-size: var(--bib-step-2);
    font-family: var(--bib-font-read);
}

.biblioteca-esp-section > h2 {
    margin-bottom: var(--bib-space);
}

.biblioteca-esp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: var(--bib-space);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--bib-gold);
}

.biblioteca-esp-count {
    color: var(--bib-muted);
    font-weight: 600;
}

/* ---------- Text list (cards) ---------- */
.biblioteca-esp-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--bib-space);
    margin: 0;
    padding: 0;
    list-style: none;
}

.biblioteca-esp-card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: calc(var(--bib-space) * 1.1);
    border: 1px solid var(--bib-border);
    border-top: 4px solid var(--bib-primary);
    border-radius: var(--bib-radius-lg);
    background: var(--bib-surface);
    box-shadow: var(--bib-shadow);
    transition: box-shadow 200ms var(--bib-ease), transform 200ms var(--bib-ease);
}

.biblioteca-esp-card:hover,
.biblioteca-esp-card:focus-within {
    box-shadow: var(--bib-shadow-hover);
    transform: translateY(-2px);
}

.biblioteca-esp-card-title {
    font-family: var(--bib-font-read);
    font-size: var(--bib-step-1);
}

.biblioteca-esp-container .biblioteca-esp-card-title a {
    color: var(--bib-ink);
    text-decoration: none;
}

.biblioteca-esp-container .biblioteca-esp-card-title a:hover {
    color: var(--bib-primary);
    text-decoration: underline;
}

.biblioteca-esp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--bib-muted);
}

.biblioteca-esp-meta-category {
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    background: var(--bib-gold-soft);
    color: var(--bib-ink);
    font-weight: 600;
}

.biblioteca-esp-summary {
    margin: 0;
    color: var(--bib-text);
    font-family: var(--bib-font-read);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.biblioteca-esp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

@container (max-width: 380px) {
    .biblioteca-esp-actions .biblioteca-esp-btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

/* ---------- Buttons ---------- */
.biblioteca-esp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bib-border);
    border-radius: var(--bib-radius);
    background: var(--bib-surface);
    color: var(--bib-ink);
    font: 600 0.95rem/1.2 var(--bib-font-ui);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms var(--bib-ease), border-color 150ms var(--bib-ease), color 150ms var(--bib-ease);
    touch-action: manipulation;
}

.biblioteca-esp-container a.biblioteca-esp-btn {
    color: var(--bib-ink);
    text-decoration: none;
}

.biblioteca-esp-btn:hover,
.biblioteca-esp-container a.biblioteca-esp-btn:hover {
    border-color: var(--bib-primary);
    color: var(--bib-primary);
    background: var(--bib-info-soft);
}

.biblioteca-esp-btn:active {
    transform: translateY(1px);
}

.biblioteca-esp-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.biblioteca-esp-container a.biblioteca-esp-btn-primary,
.biblioteca-esp-btn-primary {
    border-color: var(--bib-primary);
    background: var(--bib-primary);
    color: #ffffff;
}

.biblioteca-esp-container a.biblioteca-esp-btn-primary:hover,
.biblioteca-esp-btn-primary:hover {
    border-color: var(--bib-primary-hover);
    background: var(--bib-primary-hover);
    color: #ffffff;
}

.biblioteca-esp-btn-danger {
    margin-left: auto;
    border-color: transparent;
    background: transparent;
    color: var(--bib-danger);
}

.biblioteca-esp-btn-danger:hover {
    border-color: var(--bib-danger);
    background: var(--bib-danger-soft);
    color: var(--bib-danger);
}

/* ---------- Upload dropzone ---------- */
.biblioteca-esp-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: calc(var(--bib-space) * 2) var(--bib-space);
    border: 2px dashed var(--bib-gold);
    border-radius: var(--bib-radius-lg);
    background: var(--bib-surface);
    text-align: center;
    cursor: pointer;
    transition: background-color 200ms var(--bib-ease), border-color 200ms var(--bib-ease);
}

.biblioteca-esp-upload::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bib-primary);
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
}

.biblioteca-esp-upload:hover,
.biblioteca-esp-upload.dragover {
    border-color: var(--bib-primary);
    background: var(--bib-info-soft);
}

.biblioteca-esp-upload:has(:focus-visible) {
    outline: 3px solid var(--bib-focus);
    outline-offset: 3px;
}

.biblioteca-esp-upload.is-busy {
    opacity: 0.6;
    cursor: progress;
}

.biblioteca-esp-upload-title {
    color: var(--bib-ink);
    font-weight: 700;
    font-size: var(--bib-step-1);
}

.biblioteca-esp-upload-note {
    color: var(--bib-muted);
    font-size: 0.9rem;
}

.biblioteca-esp-message {
    margin: var(--bib-space) 0 0;
    padding: 0.85rem 1rem;
    border-radius: var(--bib-radius);
    border-left: 4px solid currentColor;
    font-weight: 600;
}

.biblioteca-esp-message.success { background: var(--bib-success-soft); color: var(--bib-success); }
.biblioteca-esp-message.error { background: var(--bib-danger-soft); color: var(--bib-danger); }
.biblioteca-esp-message.info { background: var(--bib-info-soft); color: var(--bib-ink); }

.biblioteca-esp-empty-state {
    margin: 0;
    padding: calc(var(--bib-space) * 2.5) var(--bib-space);
    border: 2px dashed var(--bib-border);
    border-radius: var(--bib-radius-lg);
    background: var(--bib-surface);
    color: var(--bib-muted);
    text-align: center;
}

/* ---------- Single text (reading view) ---------- */
.biblioteca-esp-breadcrumb {
    margin-bottom: var(--bib-space);
    font-weight: 600;
}

.biblioteca-esp-single {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.25rem, 0.5rem + 4vw, 3.5rem);
    border: 1px solid var(--bib-border);
    border-radius: var(--bib-radius-lg);
    background: var(--bib-surface);
    box-shadow: var(--bib-shadow);
}

.biblioteca-esp-single-header {
    display: grid;
    gap: 0.9rem;
    padding-bottom: var(--bib-space);
    margin-bottom: calc(var(--bib-space) * 1.5);
    border-bottom: 2px solid var(--bib-gold);
}

.biblioteca-esp-single-title {
    font-family: var(--bib-font-read);
    font-size: var(--bib-step-3);
}

.biblioteca-esp-single .biblioteca-esp-actions {
    margin-top: 0;
    padding-top: 0;
}

.biblioteca-esp-text {
    font-family: var(--bib-font-read);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.85;
    color: var(--bib-text);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 68ch;
}

.biblioteca-esp-single-footer {
    margin-top: calc(var(--bib-space) * 2);
    padding-top: var(--bib-space);
    border-top: 1px solid var(--bib-border);
    color: var(--bib-muted);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .biblioteca-esp-container *,
    .biblioteca-esp-container *::before,
    .biblioteca-esp-container *::after {
        transition: none !important;
        animation: none !important;
    }

    .biblioteca-esp-card:hover,
    .biblioteca-esp-card:focus-within {
        transform: none;
    }
}