/* ==========================================================================
   Material Design 3 (Material You) — capa de diseño M3 para el CMS
   (RTM v3.28) — NO reescribe fluent.css ni builder.css: es una capa encima
   de Bootstrap 5.3.8. Seed institucional: magenta #6d0a5e.
   Se carga DESPUÉS de Bootstrap en las páginas admin y públicas.
   ========================================================================== */

/* --- Tokens M3 (Material You, seed #6d0a5e) --- */
:root {
    --md3-primary: #6d0a5e;
    --md3-on-primary: #ffffff;
    --md3-primary-container: #f9d8f1;
    --md3-on-primary-container: #3d0033;
    --md3-secondary: #7a5a6d;
    --md3-on-secondary: #ffffff;
    --md3-secondary-container: #f2dce9;
    --md3-on-secondary-container: #2e1122;
    --md3-tertiary: #6b5e7a;
    --md3-surface: #fff8fb;
    --md3-surface-dim: #e8dde2;
    --md3-surface-container-lowest: #ffffff;
    --md3-surface-container-low: #faf2f6;
    --md3-surface-container: #f4ecf0;
    --md3-surface-container-high: #eee4e9;
    --md3-surface-container-highest: #e8dde2;
    --md3-on-surface: #211a1f;
    --md3-on-surface-variant: #514347;
    --md3-outline: #85767c;
    --md3-outline-variant: #d8c9cf;
    --md3-error: #ba1a1a;
    --md3-on-error: #ffffff;
    --md3-error-container: #ffdad6;
    --md3-success: #1b6b3a;
    --md3-success-container: #b8f0c9;
    /* Formas M3 */
    --md3-shape-s: 8px;
    --md3-shape-m: 12px;
    --md3-shape-l: 16px;
    --md3-shape-xl: 28px;
    --md3-shape-full: 999px;
    /* Elevación M3 */
    --md3-elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --md3-elev-2: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --md3-elev-3: 0 1px 3px rgba(0, 0, 0, .30), 0 4px 8px 3px rgba(0, 0, 0, .15);
    /* Tipografía M3 (Roboto / sistema) */
    --md3-font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- Iconos Material Symbols: alineación con el texto --- */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
    line-height: 1;
    font-size: 1.25em;
    user-select: none;
}
.material-symbols-outlined.md3-filled {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.md3-sm { font-size: 1em; }
.material-symbols-outlined.md3-lg { font-size: 1.5em; }
/* En botones y enlaces con icono, el símbolo hereda el color */
.btn .material-symbols-outlined,
a .material-symbols-outlined { color: inherit; }

/* --- Botones M3 --- */
.btn {
    border-radius: var(--md3-shape-full);
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none;
    transition: box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { box-shadow: var(--md3-elev-1); }
.btn-primary {
    --bs-btn-bg: var(--md3-primary);
    --bs-btn-border-color: var(--md3-primary);
    --bs-btn-hover-bg: #57104c;
    --bs-btn-hover-border-color: #57104c;
    --bs-btn-active-bg: #470a3e;
    --bs-btn-active-border-color: #470a3e;
    --bs-btn-color: var(--md3-on-primary);
    --bs-btn-hover-color: var(--md3-on-primary);
    --bs-btn-active-color: var(--md3-on-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--md3-primary);
    --bs-btn-border-color: var(--md3-outline);
    --bs-btn-hover-bg: var(--md3-primary-container);
    --bs-btn-hover-border-color: var(--md3-primary);
    --bs-btn-hover-color: var(--md3-on-primary-container);
    --bs-btn-active-bg: var(--md3-primary-container);
    --bs-btn-active-color: var(--md3-on-primary-container);
}
.btn-secondary {
    --bs-btn-bg: var(--md3-secondary-container);
    --bs-btn-border-color: var(--md3-secondary-container);
    --bs-btn-color: var(--md3-on-secondary-container);
    --bs-btn-hover-bg: #e4cddc;
    --bs-btn-hover-border-color: #e4cddc;
    --bs-btn-hover-color: var(--md3-on-secondary-container);
}
.btn-danger {
    --bs-btn-bg: var(--md3-error);
    --bs-btn-border-color: var(--md3-error);
}
.btn-success {
    --bs-btn-bg: var(--md3-success);
    --bs-btn-border-color: var(--md3-success);
}

/* --- Tarjetas M3 --- */
.card {
    border-radius: var(--md3-shape-l);
    border: 1px solid var(--md3-outline-variant);
    background: var(--md3-surface-container-lowest);
    box-shadow: var(--md3-elev-1);
}
.card-header {
    border-radius: var(--md3-shape-l) var(--md3-shape-l) 0 0;
    background: var(--md3-surface-container-low);
    border-bottom: 1px solid var(--md3-outline-variant);
    font-weight: 600;
}
.card-footer {
    border-radius: 0 0 var(--md3-shape-l) var(--md3-shape-l);
    background: var(--md3-surface-container-low);
    border-top: 1px solid var(--md3-outline-variant);
}
/* Tarjeta elevada (admin: quick cards) */
.md3-elevated-card {
    border-radius: var(--md3-shape-l);
    box-shadow: var(--md3-elev-2);
    border: none;
}

/* --- Inputs M3 --- */
.form-control, .form-select {
    border-radius: var(--md3-shape-m);
    border: 1px solid var(--md3-outline);
    background-color: var(--md3-surface-container-lowest);
    color: var(--md3-on-surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--md3-primary);
    box-shadow: 0 0 0 .2rem rgba(109, 10, 94, .18);
}
.form-label { color: var(--md3-on-surface-variant); font-weight: 500; }
.input-group-text {
    border-radius: var(--md3-shape-m);
    background: var(--md3-surface-container);
    border-color: var(--md3-outline);
    color: var(--md3-on-surface-variant);
}

/* --- Tablas M3 --- */
.table {
    --bs-table-bg: var(--md3-surface-container-lowest);
    --bs-table-striped-bg: var(--md3-surface-container-low);
    --bs-table-hover-bg: var(--md3-surface-container);
    border-radius: var(--md3-shape-m);
    overflow: hidden;
}
.table thead th {
    background: var(--md3-surface-container-high);
    color: var(--md3-on-surface);
    font-weight: 600;
    border-bottom: 1px solid var(--md3-outline-variant);
}

/* --- Alertas M3 --- */
.alert {
    border-radius: var(--md3-shape-m);
    border: 1px solid transparent;
}
.alert-success {
    background: var(--md3-success-container);
    color: #0c3d1e;
    border-color: #9edcb0;
}
.alert-danger {
    background: var(--md3-error-container);
    color: #410002;
    border-color: #ffb4ab;
}
.alert-warning {
    background: #ffedd1;
    color: #3d2b00;
    border-color: #ffd9a0;
}
.alert-info {
    background: #d3e5ff;
    color: #001c38;
    border-color: #a8c7fa;
}

/* --- Badges M3 --- */
.badge { border-radius: var(--md3-shape-s); font-weight: 600; }
.bg-primary { background-color: var(--md3-primary) !important; }

/* --- Modal M3 --- */
.modal-content {
    border-radius: var(--md3-shape-xl);
    border: none;
    box-shadow: var(--md3-elev-3);
}
.modal-header {
    border-bottom: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-xl) var(--md3-shape-xl) 0 0;
}
.modal-footer {
    border-top: 1px solid var(--md3-outline-variant);
    border-radius: 0 0 var(--md3-shape-xl) var(--md3-shape-xl);
}

/* --- Navegación / sidebar del admin M3 --- */
.admin-page .nav-link,
.admin-page .list-group-item {
    border-radius: var(--md3-shape-full);
}
.admin-page .nav-link.active,
.admin-page .list-group-item.active {
    background: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    font-weight: 600;
}

/* --- Paginación M3 --- */
.page-link {
    border-radius: var(--md3-shape-full);
    color: var(--md3-primary);
    border-color: var(--md3-outline-variant);
}
.page-item.active .page-link {
    background: var(--md3-primary);
    border-color: var(--md3-primary);
}

/* --- Acordeón M3 --- */
.accordion-item {
    border-radius: var(--md3-shape-l);
    border: 1px solid var(--md3-outline-variant);
    overflow: hidden;
}
.accordion-button:not(.collapsed) {
    background: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(109, 10, 94, .18); }

/* --- Dropdown M3 --- */
.dropdown-menu {
    border-radius: var(--md3-shape-m);
    border: 1px solid var(--md3-outline-variant);
    box-shadow: var(--md3-elev-2);
    padding: 8px;
}
.dropdown-item { border-radius: var(--md3-shape-s); }
.dropdown-item:active { background: var(--md3-primary-container); color: var(--md3-on-primary-container); }