/*
 * Estilos comunes de MoviFit: tokens, tipografía y componentes compartidos.
 * Cada vista o layout agrega en su propio archivo solo lo que le es específico.
 */

:root {
    --color-background: #f5f5f5;
    --color-primary: #f48734;
    --color-primary-light: #ffad67;
    --color-secondary: #1c3f66;
    --color-secondary-light: #326a9c;
    --color-secondary-dark: #183859;
    --color-surface: #ffffff;
    --color-surface-soft: #faf8f5;
    --color-text: #193552;
    --color-muted: #536a7e;
    --color-border: #e8e3dc;
    --color-input-border: #9cabb9;
    --color-danger: #a42e22;
    --color-danger-light: #d15145;
    --color-danger-soft: #fbe1de;
    --color-success: #216e4c;
    --color-success-soft: #ddf0e4;
    --color-info: #1d5d8f;
    --color-info-soft: #e1eef8;
    --color-warning: #8a5a00;
    --color-warning-soft: #fdf1d8;
    --color-on-dark: #ffffff;
    --shadow-card: 0 10px 26px rgb(28 63 102 / 10%);
    --shadow-raised: 0 6px 14px rgb(28 63 102 / 18%);
    --shadow-dialog: 0 18px 45px rgb(28 63 102 / 25%);
    --shadow-primary: 0 6px 14px rgb(244 135 52 / 24%);
    --focus-ring: 0 0 0 3px rgb(244 135 52 / 25%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
    --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-light));
    /* Resplandores sutiles de la paleta para fondos (pantallas, sidebar, topbar) */
    --glow-primary: rgb(244 135 52 / 11%);
    --glow-primary-strong: rgb(244 135 52 / 22%);
    --glow-secondary: rgb(28 63 102 / 8%);
    --glow-on-dark: rgb(255 255 255 / 7%);
    --surface-glass: rgb(255 255 255 / 84%);
    --shadow-on-dark: 0 4px 12px rgb(0 0 0 / 14%);
    --gradient-page: radial-gradient(circle at 100% 0, var(--glow-primary), transparent 42%), radial-gradient(circle at 0 100%, var(--glow-secondary), transparent 48%);
    --gradient-sidebar: radial-gradient(120% 45% at 0 100%, var(--glow-primary-strong), transparent 70%), radial-gradient(90% 35% at 100% 0, var(--glow-on-dark), transparent 75%), linear-gradient(180deg, var(--color-secondary), var(--color-secondary-dark));
    --radius-sm: .35rem;
    --radius-md: .45rem;
    --radius-lg: .75rem;
    --transition-fast: .15s ease;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: "Barlow", sans-serif;
    line-height: 1.45;
    margin: 0;
    overflow-x: hidden;
}

h1 {
    color: var(--color-secondary);
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    line-height: 1.15;
    margin: 0;
}

.eyebrow {
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 .3rem;
    text-transform: uppercase;
}

.sr-only { height: 1px; overflow: hidden; position: absolute; width: 1px; }
.text-muted { color: var(--color-muted); }
.texto-multilinea { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* Botones */
.button { align-items: center; border: 0; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; font: inherit; font-size: .95rem; font-weight: 600; gap: .4rem; justify-content: center; min-height: 2.2rem; padding: .35rem .85rem; text-decoration: none; transition: box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast); }
.button:hover { box-shadow: var(--shadow-raised); filter: saturate(1.08); transform: translateY(-1px); }
.button:disabled { cursor: progress; opacity: .7; transform: none; }
.button-primary { background: var(--gradient-primary); box-shadow: var(--shadow-primary); color: var(--color-text); }
.button-secondary { background: var(--gradient-secondary); color: var(--color-on-dark); }
.button-danger { background: var(--gradient-danger); color: var(--color-on-dark); }
.button-outline { background: transparent; border: 1px solid var(--color-secondary); color: var(--color-secondary); }
.button-light { background: linear-gradient(180deg, var(--color-surface), var(--color-background)); border: 1px solid var(--color-border); color: var(--color-secondary); }
.table-link, .text-button { background: none; border: 0; border-radius: .25rem; color: var(--color-secondary); cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-decoration: none; transition: color var(--transition-fast); }
.table-link:hover, .text-button:hover { color: var(--color-primary); }
.text-button-danger, .text-button-danger:hover { color: var(--color-danger); }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-secondary); cursor: pointer; display: inline-flex; height: 2.1rem; justify-content: center; transition: background var(--transition-fast); width: 2.1rem; }
.icon-button:hover { background: var(--color-background); }
.button:focus-visible, .text-button:focus-visible, .table-link:focus-visible, .icon-button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Avisos */
.alert { border-radius: var(--radius-md); margin: .85rem 0; padding: .65rem .8rem; }
.alert-error { background: var(--color-danger-soft); color: var(--color-danger); }
.alert-success { background: var(--color-success-soft); color: var(--color-success); }

/* Encabezados de página y sección */
.page-heading, .section-heading, .heading-actions { align-items: center; display: flex; gap: .65rem; justify-content: space-between; }
.page-heading { margin-bottom: 1.25rem; }
.page-intro { margin: .35rem 0 0; }
.heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.heading-actions form { margin: 0; }
.section-heading { margin: 0 0 .85rem; }
.section-heading h2 { color: var(--color-secondary); font-size: 1.3rem; margin: 0; }
.section-heading p { margin: .25rem 0 0; }

/* Tarjetas y listas de datos */
.info-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.1rem; }
.info-card dl { margin: 0; }
.info-card dt { color: var(--color-muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; margin-bottom: .15rem; text-transform: uppercase; }
.info-card dd { margin: 0; overflow-wrap: anywhere; }
.empty-state { background: var(--color-surface); border: 2px dashed var(--color-input-border); border-radius: var(--radius-lg); padding: 1.75rem; text-align: center; }
.empty-state h2, .empty-state h3 { color: var(--color-secondary); font-size: 1.15rem; margin: 0; }
.empty-state p { margin: .4rem 0 0; }

/* Tablas */
.table-wrap { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow-x: auto; }
.table-wrap table { border-collapse: collapse; min-width: 42rem; width: 100%; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--color-border); padding: .65rem .9rem; text-align: left; }
.table-wrap th { color: var(--color-secondary); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.table-wrap td small { color: var(--color-muted); display: block; margin-top: .1rem; }
.table-wrap tbody tr { transition: background var(--transition-fast); }
.table-wrap tbody tr:hover { background: var(--color-surface-soft); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem .85rem; }
.list-summary { color: var(--color-muted); font-size: .88rem; margin: 0 0 .5rem; }
.row-actions form { margin: 0; }
.status { border-radius: 2rem; display: inline-block; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; }
.status-activo { background: var(--color-success-soft); color: var(--color-success); }
.status-inactivo { background: var(--color-danger-soft); color: var(--color-danger); }
.status-proximo { background: var(--color-info-soft); color: var(--color-info); }
.status-alerta { background: var(--color-warning-soft); color: var(--color-warning); }
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.pagination a, .pagination span { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgb(28 63 102 / 10%); color: var(--color-secondary); display: block; font-weight: 600; min-width: 2.1rem; padding: .35rem .65rem; text-align: center; text-decoration: none; transition: background var(--transition-fast); }
.pagination a:hover { background: var(--color-surface-soft); }
.pagination .active a, .pagination .active span { background: var(--color-primary); color: var(--color-text); }

/* Formularios */
.form-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); max-width: 58rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.form-card fieldset, .modal-body fieldset { border: 0; border-bottom: 1px solid var(--color-border); margin: 0 0 1.1rem; padding: 0 0 1.1rem; }
.form-card fieldset:last-of-type, .modal-body fieldset:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-card legend, .modal-body legend { color: var(--color-secondary); font-size: 1.05rem; font-weight: 600; margin-bottom: .7rem; padding: 0; }
.form-card legend small { color: var(--color-muted); font-size: .85rem; font-weight: 400; }
.form-card > .button { margin-top: 1rem; }
.form-grid { display: grid; gap: .85rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-single { grid-template-columns: 1fr; }
.switch { align-items: center; cursor: pointer; display: inline-flex; font-weight: 600; gap: .5rem; }
.switch input { accent-color: var(--color-primary); height: 1rem; margin: 0; width: 1rem; }
.form-hint { color: var(--color-muted); font-size: .85rem; margin: 0 0 .85rem; }
.required-mark { color: var(--color-danger); }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input, .field select, .field textarea { background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: inherit; font: inherit; min-height: 2.3rem; padding: .35rem .6rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; }
.field textarea { min-height: 4.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-danger); }
.field small { color: var(--color-muted); display: block; font-size: .83rem; margin-top: .2rem; }
.field .field-error, .field-error { color: var(--color-danger); display: block; margin-top: .2rem; }
.input-icon { position: relative; }
.input-icon i { color: var(--color-muted); left: .65rem; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }
.field .input-icon input { padding-left: 2.1rem; }
.password-control { position: relative; }
.password-control input { padding-right: 2.6rem; }
.password-toggle { align-items: center; background: transparent; border: 0; color: var(--color-secondary); cursor: pointer; display: flex; height: 2.15rem; justify-content: center; padding: 0; position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); width: 2.15rem; }
.password-toggle i { font-size: 1.1rem; }
.password-toggle:focus-visible { border-radius: var(--radius-sm); outline: 3px solid var(--color-primary); outline-offset: -2px; }

/* Diálogo modal para altas, ediciones y cambios de estado */
.modal { background: var(--color-surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); color: var(--color-text); max-height: calc(100dvh - 2rem); max-width: min(46rem, calc(100vw - 2rem)); padding: 0; width: 100%; }
.modal-lg { max-width: min(72rem, calc(100vw - 2rem)); }
.modal-md { max-width: min(36rem, calc(100vw - 2rem)); }
.modal-sm { max-width: min(28rem, calc(100vw - 2rem)); }
.modal::backdrop { background: rgb(15 30 45 / 45%); }
.modal form, .modal-contenido { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.modal-header, .modal-footer { align-items: center; display: flex; gap: .55rem; padding: .8rem 1.1rem; }
.modal-header { border-bottom: 1px solid var(--color-border); justify-content: space-between; }
.modal-header h2 { color: var(--color-secondary); font-size: 1.2rem; margin: 0; }
.modal-body { overflow-y: auto; padding: 1rem 1.1rem; }
.modal-body .alert { margin-top: 0; }
.modal-message { margin: 0 0 .9rem; }
.modal-footer { background: var(--color-surface-soft); border-top: 1px solid var(--color-border); justify-content: flex-end; }

/* Avisos destacados dentro de una pantalla */
.notice { align-items: center; border-radius: var(--radius-lg); display: flex; gap: .75rem; margin-bottom: 1rem; padding: .75rem 1rem; }
.notice > i { font-size: 1.4rem; }
.notice > div { flex: 1; min-width: 0; }
.notice p { margin: .1rem 0 0; }
.notice-info { background: var(--color-info-soft); color: var(--color-info); }
.notice-warning { background: var(--color-warning-soft); color: var(--color-warning); }

/* Opciones en tarjeta (radios con título y descripción) */
.choice-group { border: 0; display: grid; gap: .45rem; margin: 0 0 1rem; min-width: 0; padding: 0; }
.modal-body .choice-group legend { color: var(--color-text); font-size: 1rem; margin-bottom: .3rem; }
.choice { align-items: flex-start; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; display: flex; gap: .6rem; padding: .55rem .7rem; transition: border-color var(--transition-fast), background var(--transition-fast); }
.choice:hover { border-color: var(--color-input-border); }
.choice:has(input:checked) { background: var(--color-info-soft); border-color: var(--color-primary); }
.choice input { accent-color: var(--color-primary); margin: .2rem 0 0; }
.choice strong, .choice small { display: block; }
.choice small { color: var(--color-muted); }

/* Selector de alumnos con filtro y scroll infinito (partials/selector_alumnos) */
.candidate-picker { border: 0; margin: 0; min-width: 0; padding: 0; }
.modal-body .candidate-picker legend { color: var(--color-text); font-size: 1rem; margin-bottom: .3rem; }
.candidate-scroll { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: .6rem; max-height: min(17rem, 40vh); overflow-y: auto; padding: .45rem; }
.candidate-options { display: flex; flex-direction: column; gap: .35rem; }
.candidate-option { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; display: grid; gap: 0 .6rem; grid-template-columns: auto 1fr; padding: .45rem .65rem; transition: background var(--transition-fast), border-color var(--transition-fast); }
.candidate-option:hover { border-color: var(--color-input-border); }
.candidate-option:has(input:checked) { background: var(--color-info-soft); border-color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); }
.candidate-option input { accent-color: var(--color-primary); grid-row: 1 / 3; margin: 0; }
.candidate-option small { color: var(--color-muted); }
.candidate-sentinel { height: 1px; }
.candidate-status { color: var(--color-muted); font-size: .9rem; margin: .35rem 0; text-align: center; }
.candidate-status[data-tipo="vacio"] { background: var(--color-info-soft); border: 1px dashed var(--color-info); border-radius: var(--radius-md); color: var(--color-info); font-size: .95rem; font-weight: 600; margin: 0; padding: .9rem; }
.candidate-status[data-tipo="error"] { background: var(--color-danger-soft); border-radius: var(--radius-md); color: var(--color-danger); font-weight: 600; margin: 0; padding: .9rem; }
.candidate-more { margin-top: .4rem; width: 100%; }
.candidate-details { border-top: 1px solid var(--color-border); margin-top: 1.25rem; padding-top: 1.1rem; }
.candidate-selection { margin-top: .75rem; }
.candidate-selection p { color: var(--color-muted); font-size: .9rem; margin: 0 0 .4rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { align-items: center; background: var(--color-info-soft); border: 1px solid var(--color-info); border-radius: 2rem; color: var(--color-info); display: inline-flex; font-size: .88rem; font-weight: 600; gap: .2rem; padding: .15rem .25rem .15rem .65rem; }
.chip-remove { align-items: center; background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: inline-flex; height: 1.5rem; justify-content: center; padding: 0; width: 1.5rem; }
.chip-remove:hover { background: var(--color-surface); }
.chip-remove:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Avisos tras operaciones AJAX */
.toast-region { bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; position: fixed; right: 1rem; z-index: 10; }
.toast { animation: toast-entrada .2s ease; border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); max-width: min(22rem, calc(100vw - 2rem)); padding: .6rem .9rem; }
.toast-success { background: var(--color-success-soft); color: var(--color-success); }
.toast-error { background: var(--color-danger-soft); color: var(--color-danger); }
@keyframes toast-entrada { from { opacity: 0; transform: translateY(.5rem); } }

@media (max-width: 700px) {
    .page-heading, .section-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions { justify-content: flex-start; }
    .form-grid { grid-template-columns: 1fr; }
    .modal-footer .button { flex: 1; }
}