/*
 * Mi Agenda de Pensamientos · Fase A: identidad visual y componentes.
 * Cargar DESPUÉS de app.css y de Bootstrap, si la instalación lo incluye.
 * Los colores originales del tema oscuro permanecen en app.css, sin cambios.
 * Este archivo no interviene en formularios, permisos o generación de PDF.
 */

/* Fuentes de Google Fonts alojadas en la propia agenda. Sin peticiones externas. */
@font-face{font-family:Caveat;src:url('../fonts/Caveat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url('../fonts/Caveat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/OpenSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/OpenSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/OpenSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

:root {
    --bg-page: #F6EFE6;
    --bg-card: #FFFDF9;
    --blue-deep: #1F4A5E;
    --blue-mid: #4F7F9E;
    --blue-sky: #BFD9EA;
    --blue-mist: #E2EEF6;
    --brown-deep: #7A5238;
    --brown-mid: #B08968;
    --sand: #EBD9C3;
    --peach: #F6DFCF;
    --lavender: #E6E3F2;
    --sage: #DDE8DB;
    --text: #2B2B2B;
    --text-soft: #5E5750;

    --ui-font-body: 'Open Sans', sans-serif;
    --ui-font-title: Caveat, cursive;
    --ui-radius-card: 20px;
    --ui-radius-control: 12px;
    --ui-radius-chip: 999px;
    --ui-content-width: 1240px;
    --ui-duration: .2s;
    --ui-control-height: 48px;
    --ui-focus-ring: color-mix(in srgb, var(--focus) 24%, transparent);
    --ui-overlay: color-mix(in srgb, var(--bg) 65%, transparent);
    --ui-control-border: var(--border);
    --ui-check-ink: var(--surface);
    --ui-button-shadow: var(--shadow);
    --radius: var(--ui-radius-card);
}

/* Cambian SOLO los alias claros usados por las pantallas existentes. */
:root[data-tema="claro"] {
    --bg: var(--bg-page);
    --surface: var(--bg-card);
    --surface-soft: var(--sand);
    --muted: var(--text-soft);
    --blue: var(--blue-deep);
    --blue-hover: color-mix(in srgb, var(--blue-deep) 80%, var(--blue-mid));
    --blue-soft: var(--blue-mist);
    --brown: var(--brown-deep);
    --border: var(--sand);
    --input: var(--bg-card);
    --focus: var(--blue-deep);
    --shadow: 0 12px 34px rgba(122, 82, 56, .08);
    --ui-button-shadow: 0 5px 14px rgba(122, 82, 56, .08);
    --ui-control-border: var(--brown-mid);
    --ui-overlay: color-mix(in srgb, var(--brown-deep) 40%, transparent);
}

/* Alias NUEVOS para componentes nuevos: todos apuntan a la paleta oscura original.
 * No se redeclara --bg, --surface, --text, --blue, --brown, --border, --shadow,
 * --input, --focus ni ningún otro color original del modo oscuro.
 */
:root[data-tema="oscuro"] {
    --bg-page: var(--bg);
    --bg-card: var(--surface);
    --blue-deep: var(--blue);
    --blue-mid: var(--blue-hover);
    --blue-sky: var(--surface-soft);
    --blue-mist: var(--blue-soft);
    --brown-deep: var(--brown);
    --brown-mid: var(--brown);
    --sand: var(--surface-soft);
    --peach: var(--surface-soft);
    --lavender: var(--surface-soft);
    --sage: var(--surface-soft);
    --text-soft: var(--muted);
}

/* Sin JavaScript sigue respetándose prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
        --bg-page: var(--bg);
        --bg-card: var(--surface);
        --blue-deep: var(--blue);
        --blue-mid: var(--blue-hover);
        --blue-sky: var(--surface-soft);
        --blue-mist: var(--blue-soft);
        --brown-deep: var(--brown);
        --brown-mid: var(--brown);
        --sand: var(--surface-soft);
        --peach: var(--surface-soft);
        --lavender: var(--surface-soft);
        --sage: var(--surface-soft);
        --text-soft: var(--muted);
    }
}
@media (prefers-color-scheme: light) {
    :root:not([data-tema]) {
        --bg: var(--bg-page);
        --surface: var(--bg-card);
        --surface-soft: var(--sand);
        --muted: var(--text-soft);
        --blue: var(--blue-deep);
        --blue-soft: var(--blue-mist);
        --brown: var(--brown-deep);
        --border: var(--sand);
        --input: var(--bg-card);
        --focus: var(--blue-deep);
        --shadow: 0 12px 34px rgba(122, 82, 56, .08);
        --ui-control-border: var(--brown-mid);
    }
}

/* Puente de apariencia para Bootstrap. Se conserva su rejilla y su comportamiento. */
.agenda-theme {
    --bs-font-sans-serif: var(--ui-font-body);
    --bs-body-font-family: var(--ui-font-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-heading-color: var(--blue);
    --bs-link-color: var(--blue);
    --bs-link-hover-color: var(--blue-hover);
    --bs-primary: var(--blue);
    --bs-secondary: var(--brown);
    --bs-danger: var(--error);
    --bs-success: var(--success);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--ui-radius-control);
    --bs-border-radius-lg: var(--ui-radius-card);
    --bs-box-shadow: var(--shadow);
    --bs-focus-ring-color: var(--ui-focus-ring);
    --bs-form-invalid-color: var(--error);
    --bs-form-invalid-border-color: var(--error);
    --bs-form-valid-color: var(--success);
    --bs-form-valid-border-color: var(--success);
    background: var(--bg);
    color: var(--text);
    font-family: var(--ui-font-body);
    font-size: 15px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}
:root body.agenda-theme { background: var(--bg); }
:root .agenda-theme *, :root .agenda-theme *::before, :root .agenda-theme *::after { box-sizing: border-box; }
:root .agenda-theme :is(button, input, textarea, select) { font-family: var(--ui-font-body); }
:root .agenda-theme :is(h1, h2, h3, h4, h5, h6, .handwritten) { font-family: var(--ui-font-title); color: var(--blue); }
:root .agenda-theme :is(h1, h2, h3) { font-weight: 700; }
:root .agenda-theme .auth-story h2 { color: var(--story-ink); }
:root .agenda-theme :is(a, button, input, textarea, select, summary) { outline-offset: 4px; }
:root .agenda-theme :focus-visible { outline: 3px solid var(--focus); }
:root .agenda-theme ::selection { background: var(--blue-soft); color: var(--text); }
:root .agenda-theme :is(.card, .auth-layout, .modal-content, .dropdown-menu, .list-group) {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--shadow);
}
:root .agenda-theme :is(.card-header, .card-footer) { background: transparent; border-color: var(--border); padding: 18px 24px; }

/* Cabecera: la misma identidad, con menú compacto solamente en móvil. */
:root .agenda-theme .site-header {
    width: min(var(--ui-content-width), calc(100% - 64px));
    min-height: 108px;
    padding: 22px 0 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    z-index: 10;
}
:root .agenda-theme .brand { gap: 14px; }
:root .agenda-theme .brand-symbol { width: 46px; height: 48px; border-radius: 12px; }
:root .agenda-theme .brand-title { font-size: 35px; }
:root .agenda-theme .brand-subtitle { font-size: 8px; letter-spacing: 2.3px; margin-top: 7px; }
:root .agenda-theme .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
:root .agenda-theme .main-nav { gap: 28px; font-size: 13px; }
:root .agenda-theme .main-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
:root .agenda-theme .theme-toggle,
:root .agenda-theme .icon-button,
:root .agenda-theme .agenda-menu-toggle {
    min-height: 44px;
    border-radius: var(--ui-radius-chip);
    font-size: 12px;
    line-height: 1.4;
}
:root .agenda-theme .logout-label { display: inline; }
:root .agenda-theme .agenda-menu-toggle {
    width: 44px;
    padding: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--blue);
    cursor: pointer;
}
:root .agenda-theme .agenda-menu-toggle:hover { border-color: var(--brown); background: var(--surface); }
:root .agenda-theme .agenda-menu-toggle .icon { width: 23px; height: 23px; }
:root .agenda-theme .agenda-menu-close { display: none; }
:root .agenda-theme .is-menu-open .agenda-menu-lines { display: none; }
:root .agenda-theme .is-menu-open .agenda-menu-close { display: inline-flex; }
:root .agenda-theme .site-main { width: min(var(--ui-content-width), calc(100% - 64px)); margin-top: 18px; }
:root .agenda-theme.layout-acceso .site-main { max-width: 1060px; }

/* Botones propios y equivalentes de Bootstrap, incluidos todos sus estados. */
:root .agenda-theme :is(.button, .btn) {
    --bs-btn-font-family: var(--ui-font-body);
    --bs-btn-border-radius: var(--ui-radius-control);
    --bs-btn-color: var(--surface);
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: var(--surface);
    --bs-btn-hover-bg: var(--blue-hover);
    --bs-btn-hover-border-color: var(--blue-hover);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-bg: var(--blue-hover);
    --bs-btn-active-border-color: var(--blue-hover);
    --bs-btn-disabled-color: var(--surface);
    --bs-btn-disabled-bg: var(--blue);
    --bs-btn-disabled-border-color: var(--blue);
    --bs-btn-focus-box-shadow: 0 0 0 4px var(--ui-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--ui-control-height);
    padding: 12px 19px;
    border-radius: var(--ui-radius-control);
    border: 1px solid var(--blue);
    background: var(--blue);
    color: var(--surface);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-duration), border-color var(--ui-duration), transform var(--ui-duration), box-shadow var(--ui-duration);
}
:root .agenda-theme :is(.button, .btn):hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--surface); transform: translateY(-1px); }
:root .agenda-theme :is(.button, .btn):active { transform: translateY(0); }
:root .agenda-theme :is(.button, .btn):focus-visible { box-shadow: 0 0 0 4px var(--ui-focus-ring) !important; }
:root .agenda-theme :is(.button-secondary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary) {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue);
    --bs-btn-color: var(--blue);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--blue);
    --bs-btn-hover-bg: var(--blue-soft);
}
:root .agenda-theme .button-secondary { border-color: var(--border); }
:root .agenda-theme :is(.button-secondary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary):hover {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue);
}
:root .agenda-theme :is(.button-danger, .btn-danger, .btn-outline-danger) {
    background: var(--error-bg);
    color: var(--error);
    border-color: var(--error);
    --bs-btn-color: var(--error);
    --bs-btn-bg: var(--error-bg);
}
:root .agenda-theme :is(.button-danger, .btn-danger, .btn-outline-danger):hover { background: var(--error-bg); color: var(--error); border-color: var(--error); }
/* Los botones de borrar existentes conservan sus colores semánticos originales. */
:root .agenda-theme .button-danger,
:root .agenda-theme .button-danger:hover { background: var(--error); color: var(--surface); border-color: var(--error); }
:root .agenda-theme :is(.btn-success, .btn-outline-success) { background: var(--success-bg); color: var(--success); border-color: var(--success); }
:root .agenda-theme :is(.btn-success, .btn-outline-success):hover { background: var(--success-bg); color: var(--success); border-color: var(--success); }
:root .agenda-theme :is(.btn-info, .btn-outline-info) { background: var(--notice); color: var(--blue); border-color: var(--blue); }
:root .agenda-theme :is(.btn-info, .btn-outline-info):hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
:root .agenda-theme :is(.btn-warning, .btn-outline-warning) { background: var(--surface-soft); color: var(--brown); border-color: var(--brown); }
:root .agenda-theme :is(.btn-warning, .btn-outline-warning):hover { background: var(--surface-soft); color: var(--brown); border-color: var(--brown); }
:root .agenda-theme :is(.btn-light, .btn-dark, .btn-outline-light, .btn-outline-dark) { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
:root .agenda-theme :is(.btn-light, .btn-dark, .btn-outline-light, .btn-outline-dark):hover { background: var(--blue-soft); color: var(--text); border-color: var(--brown); }
:root .agenda-theme :is(.button-link, .btn-link) { background: transparent; color: var(--blue); border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
:root .agenda-theme :is(.button-link, .btn-link):hover { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
:root .agenda-theme :is(button, .btn, .button):disabled,
:root .agenda-theme :is(.btn, .button).disabled,
:root .agenda-theme :is(.btn, .button)[aria-disabled="true"] { opacity: .65; cursor: not-allowed; transform: none; }
:root .agenda-theme .password-toggle { min-height: 44px; border-radius: 8px; }
:root .agenda-theme :is(.guide-reset, .read-thought, .back-link) { display: inline-flex; align-items: center; min-height: 44px; }

/* Formularios: no se cambia type, name, id, validación o envío de ningún campo. */
:root .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select) {
    --bs-body-bg: var(--input);
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-radius-control);
    background-color: var(--input);
    color: var(--text);
    padding: 12px 15px;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color var(--ui-duration), box-shadow var(--ui-duration), background-color var(--ui-duration);
}
:root .agenda-theme .password-field input { padding-right: 95px; }
:root .agenda-theme .title-field input { font-family: var(--ui-font-title); font-size: 31px; font-weight: 700; min-height: 60px; }
:root .agenda-theme .thought-field textarea { min-height: 420px; line-height: 1.95; padding: 18px 20px; resize: vertical; }
:root .agenda-theme :is(.field input, textarea, .form-control)::placeholder { color: var(--muted); opacity: 1; }
:root .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select):focus {
    color: var(--text);
    background-color: var(--input);
    border-color: var(--focus);
    box-shadow: 0 0 0 4px var(--ui-focus-ring);
}
:root .agenda-theme :is(.field label, .form-label, .form-check-label) { color: var(--text); }
:root .agenda-theme :is(.field-help, .form-text, .form-intro, .muted, .label-optional) { color: var(--muted); }
:root .agenda-theme :is(.form-control, .form-select, .field input, textarea, select):disabled {
    background-color: var(--surface-soft);
    color: var(--muted);
    border-color: var(--border);
    cursor: not-allowed;
}
:root .agenda-theme :is(input, textarea)[readonly] { background-color: var(--surface-soft); }
:root .agenda-theme :is(.is-invalid, [aria-invalid="true"]) { border-color: var(--error); }
:root .agenda-theme :is(.form-control, .form-select, input, textarea).is-invalid:focus,
:root .agenda-theme [aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 20%, transparent); }
:root .agenda-theme :is(.invalid-feedback, .invalid-tooltip) { color: var(--error); }
:root .agenda-theme :is(.valid-feedback, .valid-tooltip) { color: var(--success); }
:root .agenda-theme :is(.form-control, .form-select).is-valid { border-color: var(--success); }
:root .agenda-theme :is(.is-invalid, .is-valid):not(.form-check-input) { background-image: none; }
:root .agenda-theme :is(.input-group-text, .input-group .btn) { border-color: var(--ui-control-border); background: var(--surface-soft); color: var(--text); border-radius: var(--ui-radius-control); }
:root .agenda-theme select:not([multiple]):not([size]) { appearance: auto; background-image: none; }
:root .agenda-theme :is(input[type="date"], input[type="time"]) { color-scheme: inherit; }
:root .agenda-theme :is(.form-check, .sharing-option, .pdf-entry-selection, .pdf-select-all) { min-height: 44px; align-items: center; }
:root .agenda-theme :is(.sharing-option input, .pdf-entry-selection input, .pdf-select-all input, .form-check-input) {
    width: 21px;
    height: 21px;
    min-height: 21px;
    flex-shrink: 0;
    accent-color: var(--blue);
    cursor: pointer;
}
:root .agenda-theme .form-check-input {
    appearance: none;
    border: 1px solid var(--ui-control-border);
    border-radius: 6px;
    background-color: var(--input);
    background-image: none;
    position: relative;
    box-shadow: none;
}
:root .agenda-theme .form-check-input[type="radio"] { border-radius: 50%; }
:root .agenda-theme .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
:root .agenda-theme .form-check-input[type="checkbox"]:checked::after { content: ''; position: absolute; width: 6px; height: 11px; left: 7px; top: 3px; border: solid var(--ui-check-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
:root .agenda-theme .form-check-input[type="radio"]:checked::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ui-check-ink); }
:root .agenda-theme .form-check-input:indeterminate { background-color: var(--blue); border-color: var(--blue); }
:root .agenda-theme .form-check-input:indeterminate::after { content: ''; position: absolute; inset: 8px 4px; background: var(--ui-check-ink); }
:root .agenda-theme .form-check-input:focus { border-color: var(--focus); box-shadow: 0 0 0 4px var(--ui-focus-ring); }
:root .agenda-theme .form-switch .form-check-input { width: 42px; height: 24px; border-radius: 999px; }
:root .agenda-theme .form-switch .form-check-input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--muted); transform: none; transition: left var(--ui-duration), background-color var(--ui-duration); }
:root .agenda-theme .form-switch .form-check-input:checked::after { left: 21px; background: var(--ui-check-ink); }
:root .agenda-theme .form-range { accent-color: var(--blue); min-height: 44px; }
:root .agenda-theme .form-range::-webkit-slider-runnable-track { background: var(--surface-soft); border-radius: var(--ui-radius-chip); }
:root .agenda-theme .form-range::-webkit-slider-thumb { background: var(--blue); }
:root .agenda-theme .form-range::-moz-range-track { background: var(--surface-soft); border-radius: var(--ui-radius-chip); }
:root .agenda-theme .form-range::-moz-range-thumb { background: var(--blue); border-color: var(--blue); }
:root .agenda-theme .mood-option label { border-radius: var(--ui-radius-control); min-height: 64px; }
:root .agenda-theme .tag-suggestions { border-radius: var(--ui-radius-control); }
:root .agenda-theme .tag-suggestions li { min-height: 44px; border-radius: 8px; }
/* En oscuro, el título mantiene el fondo transparente que ya tenía la agenda. */
:root .agenda-theme .field.title-field input:not([type="checkbox"]):not([type="radio"]),
:root .agenda-theme .field.title-field input:not([type="checkbox"]):not([type="radio"]):focus { background-color: transparent; }

/* Mensajes: superficies suaves y el color semántico de la agenda, no el de BS. */
:root .agenda-theme :is(.notice, .alert) {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--ui-radius-control);
    background: var(--notice);
    color: var(--blue);
    font-family: var(--ui-font-body);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
:root .agenda-theme :is(.notice-success, .alert-success) { background: var(--success-bg); color: var(--success); border-color: var(--success); }
:root .agenda-theme :is(.notice-error, .alert-danger) { background: var(--error-bg); color: var(--error); border-color: var(--error); }
:root .agenda-theme :is(.alert-warning, .alert-secondary) { background: var(--surface-soft); color: var(--brown); border-color: var(--brown); }
:root .agenda-theme :is(.alert-primary, .alert-info) { background: var(--notice); color: var(--blue); border-color: var(--blue); }
:root .agenda-theme :is(.alert-light, .alert-dark) { background: var(--surface); color: var(--text); border-color: var(--border); }
:root .agenda-theme .alert-link { color: inherit; text-decoration: underline; }

/* Chips, menús, paginación y superficies auxiliares. */
:root .agenda-theme :is(.badge, .privacy-badge, .role-badge, .tag-chip) { border-radius: var(--ui-radius-chip); font-family: var(--ui-font-body); line-height: 1.5; }
:root .agenda-theme .badge { background: var(--surface-soft); color: var(--text); font-size: 11px; font-weight: 700; padding: 6px 11px; }
:root .agenda-theme :is(.bg-primary, .text-bg-primary) { background-color: var(--blue) !important; color: var(--surface) !important; }
:root .agenda-theme :is(.bg-secondary, .text-bg-secondary) { background-color: var(--surface-soft) !important; color: var(--brown) !important; }
:root .agenda-theme :is(.bg-success, .text-bg-success) { background-color: var(--success-bg) !important; color: var(--success) !important; }
:root .agenda-theme :is(.bg-danger, .text-bg-danger) { background-color: var(--error-bg) !important; color: var(--error) !important; }
:root .agenda-theme :is(.bg-warning, .text-bg-warning) { background-color: var(--surface-soft) !important; color: var(--brown) !important; }
:root .agenda-theme :is(.bg-info, .text-bg-info) { background-color: var(--notice) !important; color: var(--blue) !important; }
:root .agenda-theme :is(.bg-light, .bg-dark, .text-bg-light, .text-bg-dark) { background-color: var(--surface) !important; color: var(--text) !important; }
:root .agenda-theme :is(.text-primary, .link-primary) { color: var(--blue) !important; }
:root .agenda-theme :is(.text-muted, .text-secondary) { color: var(--muted) !important; }
:root .agenda-theme :is(.text-danger, .link-danger) { color: var(--error) !important; }
:root .agenda-theme :is(.text-success, .link-success) { color: var(--success) !important; }
:root .agenda-theme .dropdown-menu { padding: 8px; border: 1px solid var(--border); font-size: 13px; }
:root .agenda-theme .dropdown-item { padding: 11px 13px; min-height: 44px; border-radius: 9px; color: var(--text); background: transparent; }
:root .agenda-theme .dropdown-item:hover,
:root .agenda-theme .dropdown-item:focus,
:root .agenda-theme .dropdown-item.active { background: var(--blue-soft); color: var(--blue); }
:root .agenda-theme .dropdown-item.disabled { color: var(--muted); opacity: .65; }
:root .agenda-theme .dropdown-divider { border-color: var(--border); }
:root .agenda-theme .pagination { gap: 10px; align-items: center; flex-wrap: wrap; }
:root .agenda-theme .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; background: var(--surface); color: var(--blue); border: 1px solid var(--border); border-radius: var(--ui-radius-control); font-size: 13px; }
:root .agenda-theme .page-link:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
:root .agenda-theme .page-item.active .page-link { background: var(--blue); color: var(--surface); border-color: var(--blue); }
:root .agenda-theme .page-item.disabled .page-link { background: var(--surface-soft); color: var(--muted); border-color: var(--border); }
:root .agenda-theme :is(.list-group-item, .table) { color: var(--text); background: var(--surface); border-color: var(--border); }
:root .agenda-theme .list-group-item { padding: 14px 18px; }
:root .agenda-theme .list-group-item.active { color: var(--blue); background: var(--blue-soft); border-color: var(--blue); }
:root .agenda-theme .table { --bs-table-color: var(--text); --bs-table-bg: var(--surface); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-soft); --bs-table-striped-color: var(--text); --bs-table-hover-bg: var(--blue-soft); --bs-table-hover-color: var(--text); }
:root .agenda-theme .table th { color: var(--brown); font-size: 12px; font-weight: 700; }
:root .agenda-theme .table :is(th, td) { padding: 13px 16px; }
:root .agenda-theme :is(.navbar, .navbar-light, .navbar-dark) { background: var(--surface); color: var(--text); }
:root .agenda-theme .nav-link { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
:root .agenda-theme .nav-link.active { color: var(--blue); box-shadow: 0 2px 0 var(--brown); }
:root .agenda-theme .navbar-toggler { border: 1px solid var(--border); border-radius: var(--ui-radius-control); color: var(--blue); min-height: 44px; }
:root .agenda-theme .navbar-toggler-icon { width: 22px; height: 18px; background-image: none; color: var(--blue); position: relative; }
:root .agenda-theme .navbar-toggler-icon::before { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor; }
:root .agenda-theme .accordion { --bs-accordion-color: var(--text); --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-color: var(--blue); --bs-accordion-active-bg: var(--blue-soft); }
:root .agenda-theme .accordion-item { border-radius: var(--ui-radius-control); overflow: hidden; }
:root .agenda-theme .accordion-button:focus { border-color: var(--focus); box-shadow: 0 0 0 4px var(--ui-focus-ring); }
:root .agenda-theme .accordion-button::after { width: 9px; height: 9px; margin-right: 4px; background-image: none; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }
:root .agenda-theme .accordion-button:not(.collapsed)::after { transform: rotate(225deg); }

/* Bootstrap sigue controlando apertura/cierre y posición; aquí solo se pinta. */
:root .agenda-theme :is(.modal-content, .offcanvas, .toast, .popover) { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-radius-card); box-shadow: var(--shadow); }
:root .agenda-theme :is(.modal-header, .modal-footer, .offcanvas-header, .toast-header) { padding: 20px 24px; color: var(--text); border-color: var(--border); background: transparent; }
:root .agenda-theme :is(.modal-body, .offcanvas-body, .toast-body) { padding: 24px; }
:root .agenda-theme :is(.modal-title, .offcanvas-title, .popover-header) { font-family: var(--ui-font-title); color: var(--blue); font-size: 30px; }
:root .agenda-theme .modal-backdrop { background-color: var(--bg); }
:root .agenda-theme .tooltip { --bs-tooltip-bg: var(--surface-soft); --bs-tooltip-color: var(--text); --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: var(--ui-radius-control); }
:root .agenda-theme .tooltip-inner { max-width: 260px; padding: 10px 14px; background: var(--surface-soft); color: var(--text); font-size: 12px; border: 1px solid var(--border); border-radius: var(--ui-radius-control); box-shadow: var(--shadow); }
:root .agenda-theme .popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); --bs-popover-header-bg: var(--surface-soft); --bs-popover-header-color: var(--blue); --bs-popover-body-color: var(--text); }
:root .agenda-theme .btn-close { width: 44px; height: 44px; padding: 0; opacity: 1; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--blue); position: relative; }
:root .agenda-theme .btn-close::before,
:root .agenda-theme .btn-close::after { content: ''; position: absolute; top: 50%; left: 11px; right: 11px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
:root .agenda-theme .btn-close::after { transform: rotate(-45deg); }

/* Ajustes claros con suficiente especificidad para anular la edición anterior. */
:root[data-tema="claro"] .agenda-theme :is(.button, .btn):not(.button-secondary):not(.button-danger):not(.button-link):not(.btn-secondary):not(.btn-danger):not(.btn-link):not([class*="btn-outline"]):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-light):not(.btn-dark):not(.button-write) {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: var(--bg-card);
    box-shadow: var(--ui-button-shadow);
}
:root[data-tema="claro"] .agenda-theme :is(.button, .btn):not(.button-secondary):not(.button-danger):not(.button-link):not(.btn-secondary):not(.btn-danger):not(.btn-link):not([class*="btn-outline"]):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-light):not(.btn-dark):not(.button-write):hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--bg-card); }
:root[data-tema="claro"] .agenda-theme .button.button-link { background: transparent; border-color: transparent; box-shadow: none; color: var(--blue); }
:root[data-tema="claro"] .agenda-theme .button.button-link:hover { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
:root[data-tema="claro"] .agenda-theme :is(.button-secondary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary) { background: transparent; color: var(--blue-deep); border-color: var(--brown-mid); box-shadow: none; }
:root[data-tema="claro"] .agenda-theme :is(.button-secondary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary):hover { background: var(--blue-mist); color: var(--blue-deep); border-color: var(--blue-mid); }
:root[data-tema="claro"] .agenda-theme :is(.theme-toggle, .icon-button, .agenda-menu-toggle) { background: transparent; border-color: var(--brown-mid); color: var(--blue-deep); }
:root[data-tema="claro"] .agenda-theme :is(.theme-toggle, .icon-button, .agenda-menu-toggle):hover { background: var(--blue-mist); border-color: var(--brown-deep); }
:root[data-tema="claro"] .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select) { background-color: var(--bg-card); border-color: var(--ui-control-border); color: var(--text); }
:root[data-tema="claro"] .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select):focus { border-color: var(--focus); box-shadow: 0 0 0 4px var(--ui-focus-ring); }
:root[data-tema="claro"] .agenda-theme :is(.field input, textarea, .form-control)::placeholder { color: var(--text-soft); opacity: 1; }
:root[data-tema="claro"] .agenda-theme :is(.notice-info, .alert-info) { border-color: var(--blue-mid); }
:root[data-tema="claro"] .agenda-theme .calendar-day.is-today { border-radius: 50%; }

/* Los estados prevalecen sobre el acabado del campo en ambos modos. */
:root .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select):is(:disabled, [readonly]) { background-color: var(--surface-soft); color: var(--muted); border-color: var(--border); }
:root .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select):is(.is-invalid, [aria-invalid="true"]) { border-color: var(--error); }
:root .agenda-theme :is(.field input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control, .form-select):is(.is-invalid, [aria-invalid="true"]):focus { border-color: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 20%, transparent); }

/* Pie discreto con el mismo enlace de instalación y sus atributos PWA. */
:root .agenda-theme .site-footer {
    width: min(var(--ui-content-width), calc(100% - 64px));
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0 24px;
    font-size: 11px;
    color: var(--muted);
}
:root .agenda-theme .site-footer .pwa-install-link { flex-basis: auto; min-height: 44px; font-size: 11px; }
:root .agenda-theme .footer-detail { margin: 0; }

@media (max-width: 1100px) {
    :root .agenda-theme .main-nav { gap: 20px; }
    :root .agenda-theme .header-actions { gap: 12px; }
    :root .agenda-theme .site-header { width: calc(100% - 48px); }
    :root .agenda-theme .site-main, :root .agenda-theme .site-footer { width: calc(100% - 48px); }
}
@media (max-width: 760px) {
    :root .agenda-theme .site-header { min-height: 82px; padding: 18px 0 14px; gap: 14px; }
    :root .agenda-theme .brand-symbol { width: 38px; height: 40px; border-radius: 10px; }
    :root .agenda-theme .brand-title { font-size: 30px; }
    :root .agenda-theme .brand-subtitle { font-size: 7px; letter-spacing: 1.8px; }
    :root .agenda-theme .brand { gap: 10px; }
    :root .agenda-theme .agenda-menu-toggle { border-color: transparent; border-radius: 10px; }
    :root .agenda-theme .header-actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; padding: 14px 0; gap: 12px; }
    :root .agenda-theme .main-nav { flex-basis: 100%; order: 0; justify-content: flex-start; flex-wrap: wrap; gap: 24px; margin: 0 0 8px; }
    :root .agenda-theme .theme-toggle { margin-right: 0; }
    :root .agenda-theme .theme-toggle #tema-etiqueta { display: inline; }
    :root .agenda-theme .has-menu-toggle .header-actions {
        display: flex;
        position: absolute;
        top: calc(100% - 4px);
        left: 0;
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--ui-radius-card);
        box-shadow: var(--shadow);
        padding: 16px;
        z-index: 20;
    }
    :root .agenda-theme .has-menu-toggle .main-nav { margin: 0 0 6px; gap: 3px; display: flex; flex-direction: column; align-items: stretch; }
    :root .agenda-theme .has-menu-toggle .main-nav a { min-height: 44px; padding: 10px 12px; border-radius: 9px; box-shadow: none; }
    :root .agenda-theme .has-menu-toggle .main-nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
    :root .agenda-theme .has-menu-toggle .main-nav a:hover { background: var(--surface-soft); }
    :root .agenda-theme .site-main { margin-top: 12px; }
    :root .agenda-theme .site-footer { font-size: 10px; justify-content: center; text-align: center; gap: 6px 18px; }
    :root .agenda-theme .site-footer > :first-child { flex-basis: 100%; }
    :root .agenda-theme .site-footer .pwa-install-link { font-size: 10px; }
    :root .agenda-theme .footer-detail { justify-content: center; }
}
@media (max-width: 460px) {
    :root .agenda-theme .site-header, :root .agenda-theme .site-main, :root .agenda-theme .site-footer { width: calc(100% - 32px); }
    :root .agenda-theme .site-header { min-height: 78px; }
    :root .agenda-theme .thought-field textarea { min-height: 370px; padding: 15px; }
    :root .agenda-theme .title-field input { font-size: 29px; }
    :root .agenda-theme .has-menu-toggle .header-actions { gap: 10px; }
    :root .agenda-theme .pagination { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    :root .agenda-theme *, :root .agenda-theme *::before, :root .agenda-theme *::after { transition: none !important; animation: none !important; }
}
@media print {
    :root .agenda-theme .site-header, :root .agenda-theme .site-footer { display: none; }
    :root .agenda-theme .site-main { width: 100%; margin: 0; }
}