/* =============================================================================
   Reserva de Salas — estilos base
   Mobile first: todo se apila en pantallas chicas y se expande desde 768px.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Identidad Latitud90 (Manual de Identidad Visual, enero 2023)

   Los seis colores de marca, en su valor exacto. NO se editan: cualquier ajuste
   de la interfaz se hace en la capa de roles de más abajo.
   -------------------------------------------------------------------------- */
:root {
    --brand-sky:    #007E93;   /* Pantone 7704 — color principal */
    --brand-ivory:  #F1E7D4;   /* Pantone 7401 — secundario, reemplazable por blanco */
    --brand-red:    #D54B44;   /* Pantone 2033 */
    --brand-yellow: #FBBD51;   /* Pantone 135  */
    --brand-green:  #4B8C7F;   /* Pantone 2235 */
    --brand-navy:   #1A4B75;   /* Pantone 7686 */
}

/* -----------------------------------------------------------------------------
   Roles — modo claro

   Los componentes usan SÓLO estos, nunca un --brand-* directo ni un hex suelto.
   Así el modo oscuro es una redefinición de esta lista y no un repaso de toda
   la hoja.

   Sobre los contrastes: el marfil sobre cielo da 3,89:1, por debajo del 4,5:1
   que pide WCAG AA para texto normal. El manual admite explícitamente blanco en
   lugar de marfil, y blanco sobre cielo da 4,77:1, así que la barra usa el cielo
   exacto de marca con texto blanco. El marfil queda para superficies amplias,
   que es donde el manual lo quiere.
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --bg: #F6F3ED;             /* marfil rebajado: el lienzo de trabajo */
    --surface: #FFFFFF;
    --surface-2: #FAF7F1;
    --border: #E2DBCE;
    --border-strong: #CFC5B4;

    --text: #16303A;
    --muted: #5C6B73;

    --primary: var(--brand-sky);
    --primary-dark: #00697A;
    --primary-ink: #0F5F6E;    /* 7,29:1 sobre blanco: enlaces y texto pequeño */
    --primary-soft: #E2F0F3;
    --on-primary: #FFFFFF;

    --danger: #A8322C;         /* 6,65:1 — el rojo de marca sólo alcanza 4,27:1 */
    --danger-bg: #FBE9E7;
    --danger-solid: var(--brand-red);

    --ok: #3A6F64;             /* 5,77:1 — el verde de marca se queda en 3,92:1 */
    --ok-bg: #E8F2EF;

    --accent-warm: var(--brand-yellow);

    --topbar-bg: var(--brand-sky);
    --topbar-text: #FFFFFF;
    --topbar-muted: rgba(255, 255, 255, .78);
    --topbar-active: var(--brand-ivory);

    --ring: var(--brand-sky);
    --swatch-ring: rgba(0, 0, 0, .18);
    --today-bg: rgba(251, 189, 81, .26);   /* amarillo de marca, translucido */

    --radius: 10px;
    --shadow: 0 1px 3px rgba(22, 48, 58, .07), 0 4px 12px rgba(22, 48, 58, .05);
}

/* -----------------------------------------------------------------------------
   Roles — modo oscuro

   Elegido, no invertido: los tonos se escogieron sobre las superficies oscuras y
   se comprobaron uno a uno (marfil sobre fondo 13,7:1; cielo aclarado sobre
   superficie 6,6:1; rojo y verde aclarados por encima de 5:1).
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #0E1F2A;
        --surface: #16303E;
        --surface-2: #1C3948;
        --border: #2A4B5C;
        --border-strong: #3B6072;

        --text: var(--brand-ivory);
        --muted: #9FB0BC;

        --primary: #4FC3D9;
        --primary-dark: #6FD3E6;
        --primary-ink: #4FC3D9;
        --primary-soft: #17394A;
        --on-primary: #06232C;

        --danger: #E98077;
        --danger-bg: #3A211F;
        --danger-solid: #E06258;

        --ok: #7FB8AB;
        --ok-bg: #1B3A34;

        --topbar-bg: #0A2E38;
        --topbar-text: var(--brand-ivory);
        --topbar-muted: rgba(241, 231, 212, .72);
        --topbar-active: #6FD3E6;

        --ring: #6FD3E6;
        --swatch-ring: rgba(255, 255, 255, .35);
        --today-bg: rgba(251, 189, 81, .16);

        --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    }
}

/* La elección explícita del usuario gana sobre la del sistema, en ambos sentidos. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0E1F2A;
    --surface: #16303E;
    --surface-2: #1C3948;
    --border: #2A4B5C;
    --border-strong: #3B6072;

    --text: var(--brand-ivory);
    --muted: #9FB0BC;

    --primary: #4FC3D9;
    --primary-dark: #6FD3E6;
    --primary-ink: #4FC3D9;
    --primary-soft: #17394A;
    --on-primary: #06232C;

    --danger: #E98077;
    --danger-bg: #3A211F;
    --danger-solid: #E06258;

    --ok: #7FB8AB;
    --ok-bg: #1B3A34;

    --topbar-bg: #0A2E38;
    --topbar-text: var(--brand-ivory);
    --topbar-muted: rgba(241, 231, 212, .72);
    --topbar-active: #6FD3E6;

    --ring: #6FD3E6;
    --swatch-ring: rgba(255, 255, 255, .35);
    --today-bg: rgba(251, 189, 81, .16);

    --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

/* -----------------------------------------------------------------------------
   Tipografía

   El manual define Nexa (sin serif) y Quincy (serif). Ninguna de las dos es una
   fuente del sistema ni se puede servir por CDN con esta CSP, así que se listan
   primero por si están instaladas y detrás van Century Gothic y Georgia, que son
   las alternativas que el propio manual designa.

   Century Gothic es ancha y de altura de x pequeña: excelente para la barra, los
   titulares y los botones, y mala para una tabla densa de cifras. Por eso el
   cuerpo y los datos siguen con la pila del sistema.
   -------------------------------------------------------------------------- */
:root {
    --font-brand: "Nexa", "Century Gothic", "Questrial", "Futura", "Avenir Next",
                  "Trebuchet MS", system-ui, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-accent: "Quincy CF", "Quincy", Georgia, "Times New Roman", serif;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--primary-ink); }

h1, h2, h3,
.btn,
.topbar {
    font-family: var(--font-brand);
}

h1 { letter-spacing: -.01em; }

/* --- Barra superior ------------------------------------------------------- */
/* El cielo de marca ocupa la barra entera: es la superficie donde el manual
   quiere ver el color principal, y en una herramienta de trabajo es la única
   que puede llevarlo sin estorbar la lectura del contenido. */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .6rem 1.25rem;
    background: var(--topbar-bg);
    color: var(--topbar-text);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--topbar-text);
    margin-right: auto;
}

.topbar__logo {
    display: block;
    width: 26px;
    height: 24px;
    flex: none;
}

.topbar__name {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .01em;
}

.topbar__nav {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
}

.topbar__nav a {
    text-decoration: none;
    color: var(--topbar-text);
    font-size: .92rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    line-height: 1.3;
}

.topbar__nav a:hover { background: rgba(255, 255, 255, .16); }

/* La sección actual se marca con fondo y peso, no sólo con color: sobre el
   cielo, un cambio de tono se pierde. */
.topbar__nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .2);
    font-weight: 700;
}

.topbar__end {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar__exit {
    color: var(--topbar-text);
    font-size: .88rem;
    text-decoration: none;
    opacity: .85;
}

.topbar__exit:hover { opacity: 1; text-decoration: underline; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: transparent;
    color: var(--topbar-text);
    cursor: pointer;
}

.theme-toggle:hover { background: rgba(255, 255, 255, .16); }

/* Se muestra el icono de lo que se va a obtener al pulsar, no el del estado
   actual: es lo que la gente espera de un interruptor de tema. */
.theme-toggle__moon { display: none; }
.theme-toggle[aria-pressed="false"] .theme-toggle__sun { display: none; }
.theme-toggle[aria-pressed="false"] .theme-toggle__moon { display: block; }

.user-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--topbar-text);
}

.user-chip img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
}

/* En pantallas chicas la barra ya lleva logo, menú y botones: el nombre completo
   es lo primero que sobra. */
@media (max-width: 600px) {
    .user-chip__name { display: none; }
}

.badge {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--primary-soft);
    color: var(--primary-dark);
    padding: .1rem .4rem;
    border-radius: 4px;
}

/* --- Contenedores --------------------------------------------------------- */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }

/* --- Botones -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: var(--primary-dark); }

.btn--ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.btn--ghost:hover { background: var(--surface-2); }

/* --- Avisos --------------------------------------------------------------- */
.alert {
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}

.alert--error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* --- Login ---------------------------------------------------------------- */
.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.login__card {
    width: min(420px, 100%);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.25rem 1.75rem;
}

.login__card h1 { margin-bottom: .25rem; }

.login__card p { color: var(--muted); margin-top: 0; }

.btn--google {
    width: 100%;
    margin-top: 1.5rem;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    font-weight: 500;
}

.btn--google:hover { background: var(--surface-2); }

/* --- Página de error ------------------------------------------------------ */
.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.25rem;
}

.error-page .code {
    font-size: 3rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0;
}

/* --- Utilidades ----------------------------------------------------------- */
.is-hidden { display: none !important; }

.alert--ok {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok);
}

.btn--danger {
    background: var(--danger);
}

.btn--danger:hover { filter: brightness(.9); }

.btn.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary);
}

/* =============================================================================
   Calendario (Fase 2)
   ========================================================================== */

.cal__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.cal__views,
.cal__nav {
    display: flex;
    gap: .35rem;
}

.cal__bar .btn {
    padding: .45rem .85rem;
    font-size: .9rem;
}

.cal__title {
    font-size: 1.05rem;
    margin: 0;
    flex: 1 1 100%;
    order: 10;
}

/* El título viene en minúsculas de toLocaleDateString ("jueves, 20 de agosto"):
   sólo se capitaliza la primera letra. Con text-transform: capitalize saldría
   "Jueves, 20 De Agosto De 2026". */
.cal__title::first-letter { text-transform: uppercase; }

.cal__filter {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
}

.cal__filter select,
.field input,
.field select {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}

.cal__panel { padding: .75rem; }

.cal__hint {
    font-size: .85rem;
    margin-top: .75rem;
}

/* --- Vista día: lista por sala (base, hasta 767px) ------------------------ */
.day-grid { display: none; }

.day-list__room {
    padding: .5rem 0 1rem;
    border-bottom: 1px solid var(--border);
}

.day-list__room:last-child { border-bottom: 0; }

.day-list__name {
    font-size: 1rem;
    margin: 0 0 .5rem;
    padding-left: .6rem;
    border-left: 4px solid var(--primary);
}

.day-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    width: 100%;
    text-align: left;
    font: inherit;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    padding: .5rem .65rem;
    margin-bottom: .4rem;
    cursor: pointer;
}

.day-list__item:hover { background: var(--primary-soft); }

.day-list__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.day-list__title { flex: 1 1 auto; }
.day-list__owner { color: var(--muted); font-size: .85rem; width: 100%; }

.day-list__new {
    margin-top: .35rem;
    padding: .4rem .8rem;
    font-size: .85rem;
}

/* --- Modales -------------------------------------------------------------- */
body.has-modal { overflow: hidden; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(32, 33, 36, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal__box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    width: min(540px, 100%);
    margin: auto;
    padding: 1.25rem;
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal__head h2 { margin: 0; }

.modal__close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 .25rem;
}

.modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25rem;
}

/* --- Formulario ----------------------------------------------------------- */
.field { margin-bottom: .85rem; }

.field label {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: .25rem;
}

.field input,
.field select { width: 100%; }

.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 .75rem;
}

.detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    margin: 0;
    font-size: .92rem;
}

.detail dt { color: var(--muted); }
.detail dd { margin: 0; }

/* --- Sugerencias del 409 -------------------------------------------------- */
.suggest {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .75rem;
}

.suggest__group + .suggest__group { margin-top: .75rem; }

.suggest h3 {
    font-size: .85rem;
    margin: 0 0 .4rem;
    color: var(--muted);
    font-weight: 600;
}

.suggest__items {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chip {
    font: inherit;
    font-size: .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 20px;
    padding: .35rem .8rem;
    cursor: pointer;
}

.chip:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
}

@media (min-width: 768px) {
    .container { padding: 2rem 1.25rem; }

    .cal__title {
        flex: 1 1 auto;
        order: 0;
        text-align: center;
    }

    .field-row { grid-template-columns: 1.2fr 1fr 1fr; }

    /* --- Vista día: grilla, una columna por sala ------------------------- */
    .day-list { display: none; }

    .day-grid {
        display: grid;
        grid-template-columns: 56px repeat(var(--cols, 1), minmax(120px, 1fr));
        grid-auto-rows: 26px;
        overflow-x: auto;
    }

    .day-grid__corner {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 3;
    }

    .day-grid__head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--surface);
        border-top: 3px solid var(--primary);
        border-left: 1px solid var(--border);
        padding: .3rem .5rem;
        font-weight: 600;
        font-size: .9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* La hora se alinea con el borde superior de su franja, sin desplazarla
       hacia arriba: la primera etiqueta quedaría tapada por el encabezado. */
    .day-grid__hour {
        font-size: .75rem;
        color: var(--muted);
        text-align: right;
        padding-right: .4rem;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .day-grid__slot {
        border-left: 1px solid var(--border);
        border-top: 1px solid var(--border);
        cursor: pointer;
    }

    /* La media hora se marca más tenue que la hora en punto. */
    .day-grid__slot:nth-child(odd) { border-top-style: dotted; }

    .day-grid__slot:hover { background: var(--primary-soft); }

    .day-grid__event {
        z-index: 2;
        margin: 1px 2px 1px 2px;
        border-radius: 4px;
        padding: .15rem .35rem;
        color: var(--on-primary);
        font-size: .78rem;
        line-height: 1.25;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
    }

    .day-grid__event:hover { filter: brightness(1.08); }

    .day-grid__event-title {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .day-grid__event-meta {
        opacity: .9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =============================================================================
   Panel de salas (Fase 3)
   ========================================================================== */

.room-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.room { padding: .8rem 1rem; }

/* Una sala desactivada se ve apagada, pero legible: sigue siendo consultable. */
.room--off { background: var(--surface-2); }
.room--off .room__name { color: var(--muted); }

.room__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    align-items: start;
}

/* min-width:0 para que el texto largo de equipamiento pueda envolver en vez de
   estirar la columna. */
.room__id { min-width: 0; }

/* Muestra de color: el mismo con el que el calendario pinta la sala. Va dentro
   del título, así que se alinea con el texto y no flota por su cuenta. */
.room__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--swatch-ring);
    flex: none;
}

.room__name {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 .15rem;
}

.room__meta,
.room__usage {
    margin: 0;
    font-size: .88rem;
    line-height: 1.4;
}

.room__usage { font-size: .82rem; }

.badge--off {
    background: var(--surface-2);
    color: var(--muted);
}

/* El formulario se despliega con <details>: sin JavaScript. */
.room-form { margin-top: .5rem; }

.room-form__toggle {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
    color: var(--primary);
    list-style: none;
}

.room-form__toggle::-webkit-details-marker { display: none; }
.room-form__toggle::before { content: "+ "; }
.room-form[open] .room-form__toggle::before { content: "− "; }

/* "Editar" no agrega nada, así que su marcador no puede ser un "+". */
.room-form__toggle--edit::before { content: "✎ "; }
.room-form[open] .room-form__toggle--edit::before { content: "× "; }

.room-form[open] .room-form__toggle { margin-bottom: .85rem; }

/* El selector de color nativo no se estira como los demás campos. */
.field input[type="color"] {
    width: 100%;
    height: 2.4rem;
    padding: .2rem;
    cursor: pointer;
}

@media (min-width: 768px) {
    /* El botón de estado sube a la misma fila que el nombre: sin la columna del
       swatch, cada sala ocupa una tarjeta bastante más compacta. */
    .room__head {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

/* =============================================================================
   Reportes (Fase 4)
   ========================================================================== */

.report-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 .75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.report-filter .field { margin-bottom: .5rem; }

.report-filter__actions {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* --- Tarjetas de resumen -------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1rem;
}

.stat {
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.stat__value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat__label {
    font-size: .82rem;
    color: var(--muted);
}

.report-note {
    font-size: .86rem;
    margin: 0 0 1.25rem;
}

/* --- Gráficos ------------------------------------------------------------- */
.charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-bottom: .85rem;
}

/* Un item de grid trae min-width:auto, así que no puede encogerse por debajo
   del ancho que Chart.js le fija al canvas: sin esto la tarjeta se pasa unos
   píxeles del viewport en móvil y aparece scroll horizontal en toda la página. */
.chart { min-width: 0; }

/* Chart.js necesita un contenedor con altura fija para poder ser responsive:
   con maintainAspectRatio:false y sin altura, el canvas crece sin parar. */
.chart__box {
    position: relative;
    height: 260px;
}

/* --- Tablas --------------------------------------------------------------- */
.report-table { margin-bottom: .85rem; }

/* La tabla scrollea dentro de su caja: en móvil, si no, empuja la página
   entera y aparece scroll horizontal en todo el sitio. */
.table-scroll { overflow-x: auto; }

.report-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.report-table th,
.report-table td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.report-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.report-table tfoot th {
    border-top: 2px solid var(--border);
    border-bottom: none;
}

.report-table .num { text-align: right; }

.report-table td .room__swatch {
    display: inline-block;
    margin: 0 .4rem 0 0;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .report-filter { grid-template-columns: auto auto 1fr; }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .charts { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   Leyenda de salas del calendario
   ========================================================================== */

/* En la vista semana el color es el único dato que dice de qué sala es cada
   bloque. Sin esta leyenda hay que abrir la reserva para saberlo. */
.cal__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: 0 0 .85rem;
    padding: 0;
    font-size: .82rem;
    color: var(--muted);
}

.cal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cal__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--swatch-ring);
    flex: none;
}

/* =============================================================================
   Pulido: estados de foco y transiciones
   ========================================================================== */

/* El navegador ya pinta su anillo de foco (no hay ningún outline:none en esta
   hoja), pero sobre el azul de .btn queda con poco contraste. Se define uno
   propio y consistente, con :focus-visible para que aparezca en navegación por
   teclado y no en cada clic del ratón. */
.btn:focus-visible,
.topbar__nav a:focus-visible,
.room-form__toggle:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Sobre fondo azul, un anillo azul no se ve: ahí el contraste lo da el blanco. */
.btn:not(.btn--ghost):not(.btn--danger):focus-visible {
    outline-color: var(--on-primary);
    outline-offset: -4px;
}

.field input:focus-visible,
.field select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

/* Transiciones cortas: sólo color y sombra, nunca geometría, para no mover
   nada bajo el cursor. */
.btn,
.card,
.topbar__nav a,
.room-form__toggle {
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, box-shadow .12s ease;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* La aritmética de la ocupación va en un desplegable: sólo la necesita quien
   quiera cuadrar el número, y en móvil ocupaba cinco líneas antes del primer
   dato. La advertencia sí queda siempre visible. */
.report-note__detail {
    display: inline;
    margin-left: .25rem;
}

.report-note__detail > summary {
    display: inline;
    cursor: pointer;
    color: var(--primary);
    list-style: none;
}

.report-note__detail > summary::-webkit-details-marker { display: none; }
.report-note__detail > summary::after { content: " ▾"; }
.report-note__detail[open] > summary::after { content: " ▴"; }

/* =============================================================================
   Terceros: FullCalendar y controles nativos
   ========================================================================== */

/* FullCalendar inyecta su propia hoja de estilos en tiempo de ejecución, con
   colores claros fijos. Sin esto, el modo oscuro dejaría un calendario blanco
   dentro de una página oscura. La versión 6 expone estas variables justo para
   eso, así que se mapean a los tokens en vez de pelear con los selectores .fc-*
   a base de !important. */
:root {
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-2);
    --fc-border-color: var(--border);
    --fc-today-bg-color: var(--today-bg);
    --fc-now-indicator-color: var(--danger-solid);
    --fc-neutral-text-color: var(--muted);
    --fc-small-font-size: .82em;
}

/* El encabezado de días y las horas del lateral son texto de FullCalendar y no
   heredan el color del tema. */
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-list-day-text {
    color: var(--text);
}

.fc .fc-col-header-cell-cushion { color: var(--primary-ink); }

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th { border-color: var(--border); }

/* Los widgets nativos de fecha y color traen su propia interfaz: color-scheme es
   lo único que hace que sus interiores (el calendario desplegable, el selector)
   sigan al tema. Ya va declarado en :root de cada modo; aquí se refuerza en los
   propios controles para navegadores que no lo heredan. */
input[type="date"],
input[type="time"],
input[type="color"],
select {
    color-scheme: inherit;
}

/* El badge "admin" vive sobre el cielo de la barra, no sobre una superficie
   clara: necesita su propio par de colores. */
.topbar .badge {
    background: rgba(255, 255, 255, .22);
    color: var(--topbar-text);
}

/* --- Login: marca ---------------------------------------------------------- */
.login__logo {
    display: block;
    width: 170px;
    height: auto;
    margin: 0 auto 1.25rem;
}

/* Se muestra una u otra segun el tema. La marfil solo aparece sobre la tarjeta
   oscura, donde el texto en cielo no llegaria al minimo de contraste. */
.login__logo--marfil { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .login__logo--color { display: none; }
    :root:not([data-theme="light"]) .login__logo--marfil { display: block; }
}

:root[data-theme="dark"] .login__logo--color { display: none; }
:root[data-theme="dark"] .login__logo--marfil { display: block; }

/* El texto del boton es largo: en pantallas chicas tiene que poder envolver en
   vez de desbordar. */
.btn--google {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}

.login__lead {
    color: var(--muted);
    margin: 0 0 .25rem;
}

.login__note {
    margin-top: 1.5rem;
    font-size: .85rem;
}

/* --- Panel de personas ----------------------------------------------------- */
.people__count { margin: 0 0 1rem; font-size: .9rem; }

.people__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.people__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.people__self { font-size: .85rem; font-style: italic; }

.people__hint { font-size: .85rem; margin-top: 1rem; }

/* Nota bajo un campo del formulario: aclara qué hace ese dato, sin competir
   con la etiqueta. */
.field__note {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.35;
}