/* =====================================================================
   CITA PREVIA — SISTEMA DE DISEÑO FRONT (Etapa 0)
   CSS propio, mobile-first, accesible (objetivo WCAG 2.2 AA).

   Estructura:
     1. Tokens de diseño (variables)
     2. Reset y base
     3. Utilidades de accesibilidad
     4. Layout (header / main / footer / contenedor)
     5. Componentes (botones, formularios, alertas, tarjetas, tablas, modal)
     6. Overlay de carga
     7. TRANSICIÓN: clases heredadas que las vistas aún usan
        (se conservan hasta que cada vista migre en su etapa)

   Theming por organización: se puede sobrescribir cualquier token
   poniendo las variables --cp-* en un contenedor (p. ej. inline desde
   los colores de la entidad Organization) sin tocar este fichero.
   ===================================================================== */

/* =====================================================================
   1. TOKENS DE DISEÑO
   ===================================================================== */
:root {
    /* Marca (azul institucional — color principal #0764bf) */
    --cp-color-primary:        #0764bf;
    --cp-color-primary-strong: #0656a3;
    --cp-color-primary-dark:   #064a8c;
    --cp-color-on-primary:     #ffffff;
    --cp-color-primary-soft:   #e3eef9;

    /* Neutros (fondo frío para que prevalezca el azul) */
    --cp-color-text:        #1f2733;
    --cp-color-text-muted:  #6b7480;
    --cp-color-border:      #e2e6ec;
    --cp-color-border-strong:#c8cfd8;
    --cp-color-bg:          #eef2f7;
    --cp-color-surface:     #ffffff;
    --cp-color-surface-alt: #f5f8fb;

    /* Semánticos */
    --cp-color-success:     #1f7a4d;
    --cp-color-success-bg:  #e3f0e7;
    --cp-color-error:       #c0291f;
    --cp-color-error-bg:    #fdecea;
    --cp-color-warning:     #8a5a00;
    --cp-color-warning-bg:  #fbf3df;
    --cp-color-info:        #2c6394;
    --cp-color-info-bg:     #eaf2fa;

    /* Calendario (estados de hueco) */
    --cp-color-slot-free:     #2e9e5b;
    --cp-color-slot-free-bg:  #dff3e7;
    --cp-color-slot-free-text:#1f7a45;
    --cp-color-slot-blocked:  #eef1f5;
    --cp-color-slot-reserved: #cdd3db;
    /* Calendario ADMIN (celda multi-cita, C-cal-multi · deriva /diseno 2026-06-29). AA verificado. */
    --cp-color-slot-reserved-bg:   #e7d6f7; /* ocupado (morado, paridad v0.15.0) */
    --cp-color-slot-reserved-text: #4a235a;
    --cp-color-slot-partial-bg:    #ffffff; /* parcial: quedan plazas */

    /* Tipografía */
    --cp-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;
    --cp-fs-xs:   0.8125rem;  /* 13px */
    --cp-fs-sm:   0.9375rem;  /* 15px */
    --cp-fs-base: 1rem;       /* 16px */
    --cp-fs-md:   1.125rem;   /* 18px */
    --cp-fs-lg:   1.375rem;   /* 22px */
    --cp-fs-xl:   1.75rem;    /* 28px */
    --cp-fs-2xl:  2.25rem;    /* 36px */
    --cp-lh:      1.55;

    /* Espaciado (escala de 4px) */
    --cp-sp-1: 0.25rem;
    --cp-sp-2: 0.5rem;
    --cp-sp-3: 0.75rem;
    --cp-sp-4: 1rem;
    --cp-sp-5: 1.5rem;
    --cp-sp-6: 2rem;
    --cp-sp-7: 3rem;

    /* Radios, sombras, foco */
    --cp-radius-sm: 6px;
    --cp-radius:    10px;
    --cp-radius-lg: 16px;
    --cp-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --cp-shadow:    0 4px 14px rgba(16, 24, 40, 0.10);
    --cp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);
    --cp-focus-ring: 0 0 0 3px rgba(7, 100, 191, 0.35);

    /* Layout */
    --cp-container: 95%;
    --cp-tap-min:   44px; /* objetivo táctil mínimo accesible */
}

/* =====================================================================
   2. RESET Y BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--cp-font-base);
    font-size: var(--cp-fs-base);
    line-height: var(--cp-lh);
    color: var(--cp-color-text);
    background-color: var(--cp-color-bg);
    -webkit-font-smoothing: antialiased;
    /* Sticky footer: el pie siempre abajo aunque haya poco contenido */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    margin: 0 0 var(--cp-sp-3);
    line-height: 1.2;
    color: var(--cp-color-text);
    font-weight: 700;
}
h1 { font-size: var(--cp-fs-2xl); }
h2 { font-size: var(--cp-fs-xl); }
h3 { font-size: var(--cp-fs-lg); }

p { margin: 0 0 var(--cp-sp-4); }

a {
    color: var(--cp-color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { color: var(--cp-color-primary-dark); }

hr {
    border: 0;
    border-top: 1px solid var(--cp-color-border);
    margin: var(--cp-sp-5) 0;
}

/* Foco visible y coherente en todo lo interactivo */
:focus-visible {
    outline: 3px solid var(--cp-color-primary);
    outline-offset: 2px;
    border-radius: var(--cp-radius-sm);
}

/* Respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =====================================================================
   3. UTILIDADES DE ACCESIBILIDAD
   ===================================================================== */
.cp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Enlace "saltar al contenido" */
.cp-skip-link {
    position: absolute;
    left: var(--cp-sp-2);
    top: -100px;
    z-index: 2000;
    background: var(--cp-color-primary);
    color: var(--cp-color-on-primary);
    padding: var(--cp-sp-2) var(--cp-sp-4);
    border-radius: var(--cp-radius-sm);
    text-decoration: none;
    transition: top 0.15s ease;
}
.cp-skip-link:focus { top: var(--cp-sp-2); color: var(--cp-color-on-primary); }

.cp-text-center { text-align: center; }

/* =====================================================================
   4. LAYOUT
   ===================================================================== */
.cp-container {
    width: 100%;
    max-width: var(--cp-container);
    margin-inline: auto;
    padding-inline: var(--cp-sp-4);
}

.cp-header {
    background: var(--cp-color-primary);
    color: var(--cp-color-on-primary);
    box-shadow: var(--cp-shadow-sm);
}
.cp-header__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-sp-3) var(--cp-sp-4);
    padding-block: var(--cp-sp-4);
    text-align: left;
}
.cp-header__logo {
    display: inline-flex; align-items: center;
}
/* Logo blanco (PNG) directamente sobre el fondo azul de la cabecera */
.cp-header__logo img {
    max-height: 52px; width: auto;
}
/* Acción de cabecera (p. ej. Cancelaciones): a la derecha y centrada vertical */
.cp-header__action {
    margin-left: auto;
    align-self: center;
    font-size: 15px !important;
}
/* Botones de la cabecera (idioma, cancelar cita / hacer reserva): tamaño de texto
   e iconos fijado a 1rem (16px). Los iconos usan em (.cp-btn__ico y .cp-lang__ico
   = 1.15em, caret .7em), así que escalan con este font-size sin tocarlos uno a uno. */
.cp-header__action .cp-btn {
    font-size: 1rem;
}

.cp-main {
    display: block;
    padding-block: var(--cp-sp-6);
    /* Sticky footer: crece para empujar el pie al fondo */
    flex: 1 0 auto;
}

.cp-footer {
    background: var(--cp-color-surface);
    border-top: 1px solid var(--cp-color-border);
    color: var(--cp-color-text-muted);
    font-size: var(--cp-fs-sm);
    padding-block: var(--cp-sp-5);
}
.cp-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-sp-3) var(--cp-sp-5);
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* =====================================================================
   5. COMPONENTES
   ===================================================================== */

/* --- Tarjeta / panel --- */
.cp-card {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    padding: var(--cp-sp-5);
}

/* --- Botones --- */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-sp-2);
    min-height: var(--cp-tap-min);
    padding: var(--cp-sp-3) var(--cp-sp-5);
    font-family: inherit;
    font-size: var(--cp-fs-md);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--cp-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease;
}
.cp-btn:active { transform: translateY(1px); }
/* Nunca subrayar al pasar el ratón/foco (gana a la regla a:hover de Bootstrap) */
.cp-btn:hover, .cp-btn:focus, .cp-btn:focus-visible { text-decoration: none; }
.cp-btn:disabled,
.cp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.cp-btn--primary {
    background: var(--cp-color-primary);
    color: var(--cp-color-on-primary);
    border-color: var(--cp-color-primary-strong);
}
.cp-btn--primary:hover { background: var(--cp-color-primary-strong); color: var(--cp-color-on-primary); }

.cp-btn--secondary {
    background: var(--cp-color-surface);
    color: var(--cp-color-primary-strong);
    border-color: var(--cp-color-primary);
}
.cp-btn--secondary:hover { background: var(--cp-color-primary-soft); }

.cp-btn--ghost {
    background: transparent;
    color: var(--cp-color-text);
    border-color: var(--cp-color-border-strong);
}
.cp-btn--ghost:hover { background: var(--cp-color-surface-alt); }

/* Botón de trazo blanco y relleno vacío (para el fondo azul de la cabecera).
   Hover invertido: relleno blanco con texto/icono azul. */
.cp-btn--outline-white {
    background: transparent;
    color: var(--cp-color-on-primary);
    border-color: var(--cp-color-on-primary);
}
.cp-btn--outline-white:hover,
.cp-btn--outline-white:focus-visible {
    background: var(--cp-color-on-primary);
    color: var(--cp-color-primary);
}
/* Icono recoloreable: toma el color del texto (currentColor) vía máscara,
   así es blanco por defecto y azul en el hover, con un solo PNG. */
.cp-btn__ico {
    flex: 0 0 auto;
    width: 1.15em; height: 1.15em;
    background-color: currentColor;
    -webkit-mask: url('../img/icons/ico-cancelar-cita.png') no-repeat center / contain;
            mask: url('../img/icons/ico-cancelar-cita.png') no-repeat center / contain;
}
/* Variante con icono de calendario + reloj (p. ej. "Reservar nueva cita"). */
.cp-btn__ico--calendar {
    -webkit-mask-image: url('../img/icons/ico-calendar-reloj.png');
            mask-image: url('../img/icons/ico-calendar-reloj.png');
}

.cp-btn--block { width: 100%; }
.cp-btn--lg { font-size: var(--cp-fs-lg); padding: var(--cp-sp-4) var(--cp-sp-6); }

/* --- Selector de idioma (cabecera del front): botón con icono + desplegable --- */
.cp-lang { position: relative; display: inline-block; }
.cp-lang__toggle { cursor: pointer; }
.cp-lang__ico { flex: 0 0 auto; width: 1.15em; height: 1.15em; display: inline-flex; }
.cp-lang__caret { font-size: .7em; line-height: 1; }
.cp-lang__menu {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 150px; margin: 0; padding: var(--cp-sp-1) 0; list-style: none;
    background: var(--cp-color-surface); border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-sm); box-shadow: var(--cp-shadow); z-index: 50;
}
.cp-lang__menu[hidden] { display: none; }
.cp-lang__menu a {
    display: block; padding: var(--cp-sp-2) var(--cp-sp-4);
    color: var(--cp-color-text); text-decoration: none; white-space: nowrap; font-size: var(--cp-fs-sm);
}
.cp-lang__menu a:hover,
.cp-lang__menu a:focus-visible { background: var(--cp-color-primary-soft); color: var(--cp-color-primary-strong); }
.cp-lang__menu a[aria-current="true"] { font-weight: 700; color: var(--cp-color-primary-strong); }

/* --- Formularios --- */
.cp-field { margin-bottom: var(--cp-sp-4); }
.cp-label {
    display: block;
    margin-bottom: var(--cp-sp-2);
    font-weight: 600;
    font-size: var(--cp-fs-sm);
    color: var(--cp-color-text);
}
.cp-input,
.cp-select,
.cp-textarea {
    display: block;
    width: 100%;
    min-height: var(--cp-tap-min);
    padding: var(--cp-sp-3) var(--cp-sp-3);
    font-family: inherit;
    font-size: var(--cp-fs-base);
    color: var(--cp-color-text);
    background: var(--cp-color-surface);
    border: 1.5px solid var(--cp-color-border-strong);
    border-radius: var(--cp-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-textarea { min-height: 96px; resize: vertical; }
.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
    outline: none;
    border-color: var(--cp-color-primary);
    box-shadow: var(--cp-focus-ring);
}
.cp-input::placeholder,
.cp-textarea::placeholder { color: var(--cp-color-text-muted); }

/* Oficina / Sede: si el nombre es largo, recortar el valor mostrado con "…" */
#courts.cp-select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-sp-2);
    cursor: pointer;
    min-height: var(--cp-tap-min);
}
.cp-checkbox input { width: 1.25rem; height: 1.25rem; }

/* --- Alertas / flash --- */
.cp-alert {
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: var(--cp-radius-sm);
    padding: var(--cp-sp-3) var(--cp-sp-4);
    margin-top: var(--cp-sp-4);
    margin-bottom: var(--cp-sp-4);
    font-weight: 500;
}
.cp-alert--success { background: var(--cp-color-success-bg); border-color: var(--cp-color-success); color: #14552a; }
.cp-alert--error   { background: var(--cp-color-error-bg);   border-color: var(--cp-color-error);   color: #8a1d16; }
.cp-alert--warning { background: var(--cp-color-warning-bg); border-color: var(--cp-color-warning); color: #6b4600; }
.cp-alert--info    { background: var(--cp-color-info-bg);    border-color: var(--cp-color-info);    color: #094a6e; }

/* --- Tabla --- */
.cp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cp-color-surface);
    font-size: var(--cp-fs-sm);
}
.cp-table th,
.cp-table td {
    padding: var(--cp-sp-3);
    border: 1px solid var(--cp-color-border);
    text-align: center;
}
.cp-table thead th {
    background: var(--cp-color-primary-soft);
    color: var(--cp-color-primary-dark);
    font-weight: 700;
}
.cp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Modal accesible propio (sin dependencia de Bootstrap JS) --- */
.cp-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--cp-sp-4);
    background: rgba(16, 24, 40, 0.55);
}
.cp-modal.is-open { display: flex; }
.cp-modal__dialog {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--cp-color-surface);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-lg);
}
.cp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-sp-3);
    padding: var(--cp-sp-4) var(--cp-sp-5);
    border-bottom: 1px solid var(--cp-color-border);
}
.cp-modal__title { margin: 0; font-size: var(--cp-fs-lg); }
.cp-modal__close {
    background: none;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--cp-color-text-muted);
    cursor: pointer;
    padding: var(--cp-sp-1) var(--cp-sp-2);
    border-radius: var(--cp-radius-sm);
}
.cp-modal__close:hover { color: var(--cp-color-text); }
.cp-modal__body   { padding: var(--cp-sp-5); }
.cp-modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-sp-3);
    justify-content: flex-end;
    padding: var(--cp-sp-4) var(--cp-sp-5);
    border-top: 1px solid var(--cp-color-border);
}

/* =====================================================================
   6. OVERLAY DE CARGA (spinner CSS, sin imagen externa)
   ===================================================================== */
.cp-spinner {
    width: 48px; height: 48px;
    border: 5px solid var(--cp-color-primary-soft);
    border-top-color: var(--cp-color-primary);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   ETAPA 1 — Calendario raíz (registro de cita)
   ===================================================================== */
.cp-booking { max-width: 760px; margin-inline: auto; }

.cp-booking__intro { margin-bottom: var(--cp-sp-5); }
.cp-booking__title { color: var(--cp-color-primary); margin-bottom: var(--cp-sp-2); }
.cp-booking__lead { font-size: var(--cp-fs-md); margin-bottom: var(--cp-sp-3); }
.cp-booking__warn { display: inline-block; margin-top: var(--cp-sp-1); color: var(--cp-color-error); }
.cp-booking__legal { font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); }

.cp-link-btn {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--cp-color-primary-strong);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cp-link-btn:hover { color: var(--cp-color-primary-dark); }

.cp-booking__obligados {
    text-align: left;
    background: var(--cp-color-surface-alt);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius);
    padding: var(--cp-sp-4) var(--cp-sp-5);
    font-size: var(--cp-fs-sm);
    margin-bottom: var(--cp-sp-4);
}
.cp-booking__obligados ul { margin: 0; padding-left: 1.2em; }
.cp-booking__obligados li { margin-bottom: var(--cp-sp-2); }

.cp-booking__cancel-link { margin-top: var(--cp-sp-4); margin-bottom: 0; }

.cp-booking__filters { margin-top: var(--cp-sp-5); }

.cp-booking__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-sp-3);
    margin-top: var(--cp-sp-4);
}
.cp-booking__privacy { font-size: var(--cp-fs-sm); }

.cp-booking__freeday { margin: var(--cp-sp-5) 0; }

/* =====================================================================
   ETAPA 1 (rediseño completo) — Front de cita previa
   Maqueta de referencia: intro + filtros en rejilla + resultados a dos
   columnas (calendario de huecos + panel "Tu cita"). Paleta verde.
   Solo lo usa index.html.twig (escritorio). La vista móvil sigue
   usando .cp-booking* de arriba.
   ===================================================================== */
.cp-book { max-width: 100%; margin-inline: auto; }

/* ── INTRO (título + subtítulo + acción) ── */
.cp-intro {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: var(--cp-sp-4);
    margin-bottom: var(--cp-sp-5);
}
.cp-intro__text { max-width: 60ch; }
.cp-intro__badge {
    display: inline-flex; align-items: center; gap: var(--cp-sp-2);
    font-size: var(--cp-fs-xs); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--cp-color-primary);
    background: var(--cp-color-primary-soft);
    padding: var(--cp-sp-1) var(--cp-sp-3); border-radius: 999px;
    margin-bottom: var(--cp-sp-3);
}
.cp-intro__badge::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cp-color-primary);
}
.cp-intro__title { font-size: var(--cp-fs-2xl); color: var(--cp-color-text); margin: 0 0 var(--cp-sp-2); }
@media (min-width: 720px) { .cp-intro__title { font-size: 2.5rem; } }
.cp-intro__lead { font-size: var(--cp-fs-md); color: var(--cp-color-text-muted); margin: 0; }

/* ── PANEL DE FILTROS ── */
.cp-panel {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    padding: var(--cp-sp-5);
    margin-bottom: var(--cp-sp-5);
}
.cp-panel--narrow { max-width: 520px; }

/* ── CANCELACIÓN DE RESERVA (/cancelacion) ── */
.cp-cancel { width: 80%; margin-inline: auto; margin-top: var(--cp-sp-6); }
.cp-cancel .cp-field + .cp-field { margin-top: var(--cp-sp-4); }
.cp-cancel__messages { margin-top: var(--cp-sp-4); transition: opacity 0.4s ease; }
.cp-cancel__messages.is-hiding { opacity: 0; }
.cp-cancel__actions { margin-top: var(--cp-sp-5); }
.cp-cancel__actions .cp-btn { width: 100%; }
.cp-cancel__hint {
    margin: var(--cp-sp-3) 0 0;
    font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); text-align: center;
}

/* Rejilla FLUIDA: los filtros VISIBLES ocupan siempre el ancho completo, sin dejar huecos. `auto-fit`
   crea tantas columnas como quepan y COLAPSA las que quedan vacías al ocultar un filtro (p. ej.
   «Oficina / Sede» cuando el trámite tiene una sola oficina, o «Fecha» desactivada), repartiendo el
   ancho entre los que quedan (1, 2, 3 o 4 en una sola línea según el espacio). `min(100%, 220px)` como
   mínimo del track evita el desbordamiento en móvil (§45): baja a 100% cuando el contenedor es más
   estrecho que 220px y, por encima, fija 220px (no depende del min-content del Select2, cuyo texto no
   encoge; el rótulo se corta con elipsis). Sustituye a la antigua rejilla fija de 2/4 columnas. */
.cp-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--cp-sp-4);
    align-items: end;
}
.cp-filters__item { margin: 0; }
.cp-filters__item--full { grid-column: 1 / -1; }
/* etiqueta de filtro en versalitas */
.cp-filters .cp-label {
    text-transform: uppercase; letter-spacing: 0.05em;
    font-size: var(--cp-fs-xs); color: var(--cp-color-text-muted);
}
/* La fecha y el botón Buscar comparten celda */
.cp-filters__date { display: flex; gap: var(--cp-sp-3); align-items: flex-end; }
.cp-filters__date .cp-field { flex: 1 1 auto; margin: 0; }
.cp-filters__date .cp-btn { flex: 0 0 auto; }

/* ── Móvil: cabecera centrada y fecha/buscar apilados a todo el ancho ── */
@media (max-width: 719px) {
    .cp-header__inner { justify-content: center; text-align: center; }
    .cp-header__action { margin-left: 0; }

    .cp-filters__date { flex-direction: column; align-items: stretch; }
    .cp-filters__date .cp-field { width: 100%; }
    /* El input de fecha ocupa todo el ancho (como el resto de campos);
       -webkit-appearance: none evita que iOS conserve su ancho intrínseco */
    .cp-filters__date .cp-input {
        width: 100%; min-width: 0;
        -webkit-appearance: none; appearance: none;
    }
    .cp-filters__date .cp-btn { width: 100%; }
}

/* ── AVISO LEGAL (tira cálida) ── */
.cp-notice {
    margin-top: var(--cp-sp-4);
    background: var(--cp-color-warning-bg);
    border: 1px solid #ecd9a8;
    border-radius: var(--cp-radius);
    padding: var(--cp-sp-3) var(--cp-sp-4);
    font-size: var(--cp-fs-sm);
    color: #6b5410;
}
.cp-notice strong { color: var(--cp-color-text); }
.cp-notice__hl { color: var(--cp-color-primary-strong); font-weight: 700; }
.cp-notice__legal { margin: var(--cp-sp-2) 0 0; color: var(--cp-color-text-muted); }
.cp-notice__obligados {
    background: #fff; border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius); padding: var(--cp-sp-4);
    margin-top: var(--cp-sp-3); color: var(--cp-color-text);
}
.cp-notice__obligados ul { margin: 0; padding-left: 1.2em; }
.cp-notice__obligados li { margin-bottom: var(--cp-sp-2); }

/* ── RESULTADOS: dos columnas (calendario + resumen) ── */
.cp-results { display: grid; grid-template-columns: 1fr; gap: var(--cp-sp-5); align-items: start; }
@media (min-width: 880px) { .cp-results { grid-template-columns: minmax(0, 1fr) 300px; } }

/* Tarjeta del calendario */
.cp-cal {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    padding: var(--cp-sp-5);
}
.cp-cal__head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: var(--cp-sp-3); margin-bottom: var(--cp-sp-4);
}
.cp-cal__range { margin: 0; font-size: var(--cp-fs-lg); }
.cp-cal__sub { margin: 2px 0 0; font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); }
.cp-cal__freeday {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--cp-color-primary);
    display: inline-flex; align-items: center; gap: var(--cp-sp-2);
}
.cp-cal__freeday:hover { color: var(--cp-color-primary-dark); }

.cp-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Leyenda */
.cp-legend {
    display: flex; flex-wrap: wrap; gap: var(--cp-sp-4); list-style: none;
    margin: var(--cp-sp-4) 0 0; padding: var(--cp-sp-4) 0 0;
    border-top: 1px solid var(--cp-color-border);
    font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted);
}
.cp-legend li { display: inline-flex; align-items: center; gap: var(--cp-sp-2); }
.cp-legend__swatch { width: 18px; height: 18px; border-radius: 6px; }
.cp-legend__swatch--free     { background: var(--cp-color-slot-free-bg); }
.cp-legend__swatch--selected { background: var(--cp-color-slot-free); }
.cp-legend__swatch--blocked  { background: var(--cp-color-slot-blocked); border: 1px solid var(--cp-color-border); }

/* ── PANEL "TU CITA" ── */
.cp-summary {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    padding: var(--cp-sp-5);
}
@media (min-width: 880px) { .cp-summary { position: sticky; top: var(--cp-sp-5); } }
.cp-summary__title { margin: 0 0 var(--cp-sp-4); font-size: var(--cp-fs-lg); }
.cp-summary__row { margin-bottom: var(--cp-sp-4); }
.cp-summary__label {
    display: block; font-size: var(--cp-fs-xs); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--cp-color-text-muted);
    margin-bottom: 2px;
}
.cp-summary__value { font-weight: 600; overflow-wrap: anywhere; }
.cp-summary__value--empty { font-weight: 400; color: var(--cp-color-text-muted); }
.cp-summary__divider { border: 0; border-top: 1px solid var(--cp-color-border); margin: var(--cp-sp-4) 0; }
.cp-summary__slot {
    background: var(--cp-color-slot-free-bg); color: var(--cp-color-slot-free-text);
    border-radius: var(--cp-radius); padding: var(--cp-sp-3) var(--cp-sp-4);
    font-weight: 700; margin-bottom: var(--cp-sp-4);
}
.cp-summary__hint { font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); margin: 0; }

/* ---------------------------------------------------------------------
   Confirmación de cita (/reservar/{id}/confirmacion): pila de cards
   (cabecera con acento + paneles detalles/solicitante en rejilla).
   --------------------------------------------------------------------- */
.cp-confirm { display: flex; flex-direction: column; gap: var(--cp-sp-5); }
/* Cabecera: icono + título + badge de estado, con barra de acento a la izquierda. */
.cp-confirm__hero {
    display: flex; align-items: center; gap: var(--cp-sp-4);
    border-left: 4px solid var(--cp-color-border-strong);
}
.cp-confirm__hero--success { border-left-color: var(--cp-color-success); }
.cp-confirm__hero--warning { border-left-color: var(--cp-color-warning); }
.cp-confirm__icon {
    flex: 0 0 auto; width: var(--cp-sp-7); height: var(--cp-sp-7);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: var(--cp-fs-xl); font-weight: 700; line-height: 1;
}
.cp-confirm__icon--success { background: var(--cp-color-success-bg); color: var(--cp-color-success); }
.cp-confirm__icon--warning { background: var(--cp-color-warning-bg); color: var(--cp-color-warning); }
.cp-confirm__hero-text { flex: 1 1 auto; min-width: 0; }
.cp-confirm__hero-badge { flex: 0 0 auto; align-self: center; }
.cp-confirm__title { margin: 0; font-size: var(--cp-fs-xl); font-weight: 700; }
.cp-confirm__sub { margin: var(--cp-sp-1) 0 0; color: var(--cp-color-text-muted); }
.cp-confirm__code { color: var(--cp-color-primary); font-weight: 700; }
/* Rejilla de paneles (cada uno es una .cp-card). */
.cp-confirm__grid { display: grid; grid-template-columns: 1fr; gap: var(--cp-sp-5); }
@media (min-width: 720px) { .cp-confirm__grid { grid-template-columns: 1fr 1fr; } }
.cp-confirm__panel--full { grid-column: 1 / -1; }
.cp-confirm__panel-title {
    margin: 0 0 var(--cp-sp-4); padding-bottom: var(--cp-sp-3);
    font-size: var(--cp-fs-md); font-weight: 700; color: var(--cp-color-primary);
    border-bottom: 2px solid var(--cp-color-primary-soft);
}
.cp-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--cp-sp-3); }
.cp-confirm__hint { margin: 0; font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); }
/* Lista de definición clave/valor: etiqueta y valor SIEMPRE en la misma línea. */
.cp-deflist { margin: 0; }
.cp-deflist__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--cp-sp-4);
    padding: var(--cp-sp-3) 0; border-bottom: 1px solid var(--cp-color-border);
}
.cp-deflist__row:last-child { border-bottom: 0; }
.cp-deflist__label { flex: 0 0 auto; color: var(--cp-color-text-muted); margin: 0; }
.cp-deflist__value {
    flex: 1 1 auto; margin: 0; font-weight: 700; color: var(--cp-color-text);
    text-align: right; overflow-wrap: anywhere;
}
/* Badge/pill de estado. */
.cp-badge {
    display: inline-block; padding: var(--cp-sp-1) var(--cp-sp-3);
    border-radius: var(--cp-radius-sm); font-size: var(--cp-fs-xs); font-weight: 700;
    white-space: nowrap;
}
.cp-badge--success { background: var(--cp-color-success-bg); color: var(--cp-color-success); }
.cp-badge--warning { background: var(--cp-color-warning-bg); color: var(--cp-color-warning); }
.cp-badge--error   { background: var(--cp-color-error-bg);   color: var(--cp-color-error); }
.cp-badge--info    { background: var(--cp-color-info-bg);    color: var(--cp-color-info); }
/* Barra de impersonación (ver la app «como» otro usuario): aviso + botón de volver. */
.cp-impersonate {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cp-sp-4); flex-wrap: wrap;
}
/* ---------------------------------------------------------------------
   Pantalla de llamadas (tablero de SALA, /pantalla-llamadas): pantalla completa,
   sin cabecera, con el logo de la entidad y letras enormes (escalan con el ancho).
   --------------------------------------------------------------------- */
.cp-board-page { margin: 0; background: var(--cp-color-surface); }
.cp-board { min-height: 100vh; padding: clamp(1rem, 3vw, 2.5rem); }
/* Cabecera: logo + lema centrados (como lapalma). */
.cp-board__brand { text-align: center; margin-bottom: clamp(1rem, 3vh, 2rem); }
.cp-board__logo { max-height: clamp(3.5rem, 9vh, 8rem); width: auto; }
.cp-board__brandname { display: block; font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 800; color: var(--cp-color-primary); }
.cp-board__slogan { margin: var(--cp-sp-3) 0 0; font-size: clamp(0.9rem, 1.6vw, 1.25rem); color: var(--cp-color-text-muted); }
/* Títulos de sección: centrados y azules (lapalma .textHeader). */
.cp-board__title {
    text-align: center; margin: clamp(1rem, 3vh, 2rem) 0 var(--cp-sp-3);
    font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 700; color: var(--cp-color-primary);
}
/* Tablas: cabecera centrada + filas grandes y centradas (lapalma .textTable/.text). */
.cp-board__table { width: 100%; border-collapse: collapse; }
.cp-board__table th {
    text-align: center; font-weight: 700; padding: var(--cp-sp-3);
    border: 1px solid var(--cp-color-border); background: var(--cp-color-surface-alt);
}
.cp-board__table td {
    text-align: center; padding: var(--cp-sp-3); border: 1px solid var(--cp-color-border);
    font-size: clamp(1.25rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; color: var(--cp-color-primary);
}
.cp-board__table tbody tr:nth-child(odd) { background: var(--cp-color-surface-alt); }
.cp-board__empty td { font-size: var(--cp-fs-lg); font-weight: 400; color: var(--cp-color-text-muted); }
/* Última llamada: parpadea y se agranda un poco respecto al resto (lapalma .parpadea + .big-text). */
.cp-board__last td { animation: cp-parpadeo 2s linear infinite; font-size: clamp(1.75rem, 4vw, 3rem) !important; }
@keyframes cp-parpadeo { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cp-board__last td { animation: none; } }

/* =====================================================================
   7. TRANSICIÓN — clases heredadas en uso por vistas aún sin migrar.
   Se conservan (modernizadas con tokens) para no romper nada antes de
   que cada vista se rediseñe en su etapa. Se irán retirando.
   ===================================================================== */

/* Flash heredado (default/base lo sigue emitiendo) */
.flash-notice {
    background-color: var(--cp-color-success-bg);
    color: #14552a;
    border-left: 5px solid var(--cp-color-success);
    border-radius: var(--cp-radius-sm);
    padding: var(--cp-sp-3) var(--cp-sp-4);
    margin-top: var(--cp-sp-4);
    margin-bottom: var(--cp-sp-3);
    font-weight: 600;
}
/* Variantes del flash heredado: `.flash-notice` (declarado después de `.cp-alert--*`) pisaba sus colores y el aviso
   (§59) y el error salían en verde de éxito. Con las dos clases, manda la variante. */
.flash-notice.cp-alert--warning {
    background-color: var(--cp-color-warning-bg);
    color: #6b4600;
    border-left-color: var(--cp-color-warning);
}
.flash-notice.cp-alert--error {
    background-color: var(--cp-color-error-bg);
    color: #8a1d16;
    border-left-color: var(--cp-color-error);
}
.flash-error {
    background-color: var(--cp-color-error-bg);
    color: #8a1d16;
    border-left: 5px solid var(--cp-color-error);
    border-radius: var(--cp-radius-sm);
    padding: var(--cp-sp-3) var(--cp-sp-4);
    margin-bottom: var(--cp-sp-3);
    font-weight: 600;
}

@media (max-width: 510px) { .logomovil { width: 100%; } }
.navbar-default { background-color: var(--cp-color-surface); }
#page-wrapper { margin-left: 11px; margin-right: 11px; }

/* Muestra circular del color actual en el formulario de configuración (C12). */
.cp-color-swatch {
    display: inline-block; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--cp-color-border, #ccc); vertical-align: middle; margin-left: 8px;
}

.table .center { text-align: center; }

.centerbutton { text-align: center; margin-top: 10px; margin-bottom: 10px; }
.titlesection { color: var(--cp-color-text-muted); }
.filter { margin-top: 40px; margin-bottom: 64px; }
.list { padding: 6px; }

/* Calendario semanal (index / indexmobile) — rediseño compartido vía #id.
   Huecos tipo "pill": Disponible (verde claro) · Seleccionado (verde sólido)
   · No disponible / reservado (crema). */
.filter-calendar { text-align: center; }
#table-calendar { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 520px; }
#table-calendar th,
#table-calendar td { text-align: center; vertical-align: middle; }
/* Semanal (desktop): columna de horas ajustada al rango; el resto se reparte por igual */
#table-calendar:not(.cp-day-table) { table-layout: fixed; }
#table-calendar:not(.cp-day-table) thead th:first-child,
#table-calendar:not(.cp-day-table) .hours { width: 92px; }

/* Cabecera: día de la semana (versalita) + número grande */
#table-calendar thead th {
    padding: var(--cp-sp-2) var(--cp-sp-1) var(--cp-sp-3);
    color: var(--cp-color-text-muted); font-size: var(--cp-fs-xs);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 2px solid var(--cp-color-border); line-height: 1.3;
}
#table-calendar thead th .cp-cal__daynum {
    display: block; font-size: var(--cp-fs-lg); color: var(--cp-color-text);
    letter-spacing: 0; margin-top: 2px;
}
#table-calendar thead th:first-child { border-bottom-color: transparent; }

/* Columna de franjas horarias */
#table-calendar .hours {
    color: var(--cp-color-text-muted); font-size: var(--cp-fs-xs);
    font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
    text-align: right; padding-right: var(--cp-sp-2);
}

/* Huecos: todas las celdas son "pills" de la misma altura */
#table-calendar tbody td:not(.hours) {
    height: 44px; border-radius: 999px; font-weight: 700; font-size: var(--cp-fs-sm);
    background: var(--cp-color-slot-blocked); color: var(--cp-color-text-muted);
}
/* No disponible: punto sutil en lugar de texto */
#table-calendar tbody td:not(.hours):not(.free):not(.reserved) { font-size: 0; }
#table-calendar tbody td:not(.hours):not(.free):not(.reserved)::after {
    content: "\00B7"; font-size: var(--cp-fs-lg); color: var(--cp-color-border-strong);
}
/* Hueco libre: pill verde clara, interactiva */
#table-calendar .free { background: transparent; padding: 0; }
#table-calendar .free a {
    display: flex; align-items: center; justify-content: center;
    height: 44px; border-radius: 999px; text-decoration: none; font-weight: 700;
    font-size: var(--cp-fs-lg);
    background: var(--cp-color-slot-free-bg); color: var(--cp-color-slot-free-text);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
#table-calendar .free a:hover,
#table-calendar .free a:focus-visible {
    background: var(--cp-color-slot-free); color: #fff; outline: none;
    transform: translateY(-1px); box-shadow: var(--cp-shadow-sm);
}
/* Hueco seleccionado (marcado por JS al elegirlo) */
#table-calendar .free.is-selected a {
    background: var(--cp-color-slot-free); color: #fff; box-shadow: var(--cp-focus-ring);
}
/* Reservado/ocupado: pill crema, sin destacar el nombre */
#table-calendar .reserved { background: transparent; padding: 0; }
#table-calendar .reserved a {
    display: flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 var(--cp-sp-2); border-radius: 999px;
    text-decoration: none; font-weight: 600; font-size: var(--cp-fs-xs);
    background: var(--cp-color-slot-reserved); color: var(--cp-color-text-muted);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ── Calendario móvil: lista de horas de un solo día (#table-calendar.cp-day-table) ── */
#table-calendar.cp-day-table { width: 100%; min-width: 0; border-collapse: collapse; border-spacing: 0; }
#table-calendar.cp-day-table tbody td {
    display: block; height: auto; border-radius: var(--cp-radius);
    padding: 0; margin-bottom: var(--cp-sp-2); font-weight: 600; font-size: var(--cp-fs-md);
}
#table-calendar.cp-day-table tbody td::after { content: none; }   /* anula el punto del desktop */
#table-calendar.cp-day-table .free { padding: 0; }
#table-calendar.cp-day-table .free a {
    justify-content: space-between; height: auto;
    padding: var(--cp-sp-3) var(--cp-sp-4); border-radius: var(--cp-radius);
    font-size: var(--cp-fs-md);
}
#table-calendar.cp-day-table .free a:hover,
#table-calendar.cp-day-table .free a:focus-visible { transform: none; }
#table-calendar.cp-day-table .cp-slot__chev { font-size: var(--cp-fs-xl); line-height: 1; }
/* Estado vacío: ningún hueco libre para el día seleccionado */
.cp-empty {
    text-align: center; padding: var(--cp-sp-6) var(--cp-sp-4);
    background: var(--cp-color-surface-alt); border: 1px dashed var(--cp-color-border-strong);
    border-radius: var(--cp-radius);
}
.cp-empty__title { margin: 0 0 var(--cp-sp-1); font-weight: 700; color: var(--cp-color-text); }
.cp-empty__hint { margin: 0; font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted); }
.cp-cal__nav { margin-top: var(--cp-sp-4); }
.cp-cal__nav .cp-btn { width: 100%; }

/* Modales secundarios heredados (free-day / loading) */
.modal-body-2 { position: relative; text-align: center; padding-top: 20px; }
.modal-footer-2 { text-align: center; padding-top: 5px; padding-bottom: 13px; }
.layer-cancel-button { text-align: center; margin-bottom: 20px; }

/* Overlay de carga heredado — ahora con spinner CSS (sin gif externo) */
.modalLoading {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
}
.modalLoading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin: -24px 0 0 -24px;
    border: 5px solid var(--cp-color-primary-soft);
    border-top-color: var(--cp-color-primary);
    border-radius: 50%;
    animation: cp-spin 0.8s linear infinite;
}
body.loading .modalLoading { display: block; }

/* ── Court Landing (tótem) ── */
.court-landing-wrapper { max-width: 800px; margin: 40px auto; padding: 0 16px; text-align: center; }
.court-landing-title { color: var(--cp-color-primary); font-size: 36px; font-weight: bold; margin-bottom: 6px; }
.court-landing-subtitle { font-size: 20px; color: #333; margin-bottom: 0; }
.court-landing-hr { margin: 24px 0; }
.court-landing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.court-landing-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 24px; border-radius: 16px; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.12); cursor: pointer;
}
.court-landing-btn:hover, .court-landing-btn:focus {
    transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.18); text-decoration: none;
}
.court-landing-btn--cancel { background-color: #f0f4f8; border: 3px solid #9ab0c8; color: #2c4a6e; }
.court-landing-btn--cancel:hover { background-color: #dde8f2; color: #2c4a6e; }
.court-landing-btn--new { background-color: var(--cp-color-primary); border: 3px solid var(--cp-color-primary-strong); color: #fff; }
.court-landing-btn--new:hover { background-color: var(--cp-color-primary-strong); color: #fff; }
.court-landing-btn__icon { font-size: 64px; margin-bottom: 16px; line-height: 1; }
.court-landing-btn__label { font-size: 28px; font-weight: bold; margin-bottom: 8px; }
.court-landing-btn__sub { font-size: 15px; opacity: 0.8; }
.court-landing-cuestify-hr { margin-top: 300px; border-top: 2px solid black; }
.court-landing-cuestify { margin-top: 40px; }
.court-landing-cuestify__title { color: var(--cp-color-primary); font-size: 24px; font-weight: bold; margin-bottom: 16px; text-align: center; }
.court-landing-cuestify__iframe { width: 100%; height: 160px; border: none; }
@media (max-width: 520px) {
    .court-landing-grid { grid-template-columns: 1fr; }
    .court-landing-btn { padding: 36px 16px; }
    .court-landing-btn__icon { font-size: 48px; }
    .court-landing-btn__label { font-size: 22px; }
}

/* ── Court Reprint ── */
.reprint-wrapper { max-width: 640px; margin: 40px auto; padding: 0 16px; text-align: center; }
.reprint-title { color: var(--cp-color-primary); font-size: 36px; font-weight: bold; margin-bottom: 6px; }
.reprint-subtitle { font-size: 20px; color: #333; }
.reprint-hr { margin: 24px 0; }
.reprint-desc { font-size: 18px; color: #444; margin-bottom: 24px; }
.reprint-error { background: var(--cp-color-error-bg); border: 1px solid #e57373; color: var(--cp-color-error); border-radius: 8px; padding: 12px 20px; font-size: 16px; margin-bottom: 20px; }
.reprint-form { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.reprint-input { width: 100%; max-width: 320px; font-size: 32px; text-align: center; padding: 16px; border: 3px solid var(--cp-color-primary); border-radius: 12px; outline: none; letter-spacing: 4px; }
.reprint-input:focus { border-color: var(--cp-color-primary-strong); box-shadow: 0 0 0 3px rgba(0,110,181,0.2); }
.reprint-btn-submit { width: 100%; max-width: 320px; padding: 18px; font-size: 22px; font-weight: bold; background-color: var(--cp-color-primary); color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
.reprint-btn-submit:hover { background-color: var(--cp-color-primary-strong); }
.reprint-back { display: inline-block; margin-top: 24px; font-size: 16px; color: var(--cp-color-primary); text-decoration: none; }
.reprint-back:hover { text-decoration: underline; }
.reprint-found__msg { font-size: 20px; color: var(--cp-color-success); font-weight: bold; margin-bottom: 16px; }

/* ── Botón Volver al inicio (tótem) ── */
.btn-back-landing { display: inline-block; padding: 14px 36px; font-size: 20px; font-weight: bold; background-color: #fff; color: var(--cp-color-primary); border: 3px solid var(--cp-color-primary); border-radius: 10px; text-decoration: none; transition: background 0.15s, color 0.15s, transform 0.1s; box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.btn-back-landing:hover, .btn-back-landing:focus { background-color: var(--cp-color-primary); color: #fff; text-decoration: none; transform: scale(1.04); }
.btn-back-landing--lg { padding: 18px 48px; font-size: 24px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }

/* ── Court Calendar: rejilla de horas ── */
#hours-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 0; }
.hour-btn { display: inline-block; min-width: 90px; padding: 14px 18px; border-radius: 8px; font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.hour-btn--free { background-color: var(--cp-color-primary); color: #fff; border: 2px solid var(--cp-color-primary-strong); }
.hour-btn--free:hover, .hour-btn--free:focus { background-color: var(--cp-color-primary-strong); color: #fff; text-decoration: none; transform: scale(1.05); }

/* ── Ticket (oculto en pantalla, visible al imprimir) ── */
#ticket-print { display: none; }
@media print {
    /* Quita la cabecera/pie automáticos del navegador (fecha, título de la página y URL) en el
       recibo del tótem: con margen de página 0, Chrome/Firefox no los pintan. */
    @page { margin: 0; }
    html, body { margin: 0 !important; }
    /* §35 · El recibo AÍSLA el ticket ocultando el resto de la página. Se acota a `body.cp-kiosk-page`
       (solo el layout del kiosko la lleva) para NO dejar en blanco el resto de páginas del admin/ciudadano
       al usar Ctrl+P — antes `body *` era global y ocultaba TODA página sin `#ticket-print`. El `@page`
       sigue global: solo el kiosko depende de él y en otras páginas es inocuo (suprime el cromo del navegador). */
    body.cp-kiosk-page * { visibility: hidden !important; }
    body.cp-kiosk-page #ticket-print, body.cp-kiosk-page #ticket-print * { visibility: visible !important; }
    body.cp-kiosk-page #ticket-print {
        display: block !important; position: fixed; top: 0; left: 0;
        width: 72mm; font-family: var(--cp-font-mono); font-size: 11px;
        color: #000; background: #fff; padding: 4mm;
    }
    .ticket-header { font-size: 15px; font-weight: bold; text-align: center; margin-bottom: 2px; }
    .ticket-org { text-align: center; font-weight: bold; margin-bottom: 2px; }
    .ticket-hr { border: none; border-top: 1px dashed #000; margin: 4px 0; }
    .ticket-table { width: 100%; border-collapse: collapse; }
    .ticket-table td { padding: 1px 2px; vertical-align: top; }
    .ticket-label { font-weight: bold; white-space: nowrap; width: 1%; }
    .ticket-footer { text-align: center; font-size: 10px; margin-top: 4px; }
    /* §52 · Nº de turno destacado: es lo que el ciudadano compara con el tablero de la sala, así que
       tiene que leerse de un vistazo y a distancia de brazo. Con 3 caracteres (X7K) ocupa ~90px de los
       ~272 útiles del papel de 72 mm, y con un id largo de respaldo sigue cabiendo. */
    .ticket-turno-label { text-align: center; font-size: 10px; font-weight: bold; letter-spacing: 1px; margin-top: 2px; }
    .ticket-bignum { text-align: center; font-size: 46px; font-weight: bold; line-height: 1.1; margin: 0 0 2px; }
}

/* ── Impresión del backoffice (Ctrl+P en los edit): documento limpio ──────────────
   Solo queda LOGO centrado arriba + título (.page-header) + tarjetas (.panel). Fuera el
   cromo (navbars superior y lateral), la barra de impersonación, los flashes y los botones
   de acción. El logo de impresión (`.cp-admin__print-header`) va oculto en pantalla. */
.cp-admin__print-header { display: none; }

@media print {
    .cp-admin .navbar-static-top,
    .cp-admin .navbar-static-side,
    .cp-admin .cp-impersonate,
    .cp-admin .flash-notice { display: none !important; }
    /* El contenido ocupa todo el ancho (sin el margen del sidebar) y con márgenes de papel.
       `min-height: 0` ANULA el `min-height: 1300px` que SB-Admin fuerza en `#page-wrapper` a ≥768px
       (el print A4 ~794px entra en ese breakpoint) → sin páginas vacías ni contenido empujado fuera. */
    .cp-admin #page-wrapper { margin: 0 !important; padding: 12mm 14mm !important; width: 100% !important; min-height: 0 !important; }
    /* Todos los botones de acción fuera (cabecera + pie del formulario). */
    .cp-admin .btn,
    .cp-admin .cp-form__actions { display: none !important; }
    /* Logo de impresión, centrado arriba. */
    .cp-admin__print-header { display: block !important; text-align: center; margin-bottom: 10mm; }
    .cp-admin__print-header img { max-height: 24mm; width: auto; }
    /* Título sin margen superior; tarjetas planas. SIN `break-inside: avoid`: en Chrome, un panel
       MÁS ALTO que la página con esa regla puede DESAPARECER al imprimir (era el caso de «Datos de la
       cita»). Se deja el corte natural entre páginas → todos los cards aparecen siempre. */
    .cp-admin .page-header { margin-top: 0; }
    .cp-admin .panel { box-shadow: none !important; }
}

/* =====================================================================
   ACCESO / LOGIN (administración)
   Tarjeta centrada sobre la imagen de fondo, con velo azul para dar
   contraste y un aire más profesional.
   ===================================================================== */
.cp-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-sp-5);
    background:
        linear-gradient(135deg, rgba(7, 100, 191, 0.78) 0%, rgba(6, 74, 140, 0.86) 100%),
        url('../img/registre_horari.jpg') no-repeat center center fixed;
    background-size: cover;
}
.cp-login__card {
    width: 100%;
    max-width: 420px;
    background: var(--cp-color-surface);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-lg);
    overflow: hidden;
}
/* Banda azul superior con el logo blanco */
.cp-login__head {
    background: linear-gradient(105deg, var(--cp-color-primary-dark) 0%, var(--cp-color-primary) 100%);
    color: var(--cp-color-on-primary);
    padding: var(--cp-sp-6) var(--cp-sp-6) var(--cp-sp-5);
    text-align: center;
}
.cp-login__logo { max-height: 56px; width: auto; margin-bottom: var(--cp-sp-4); }
.cp-login__title {
    margin: 0; color: var(--cp-color-on-primary);
    font-size: var(--cp-fs-lg); font-weight: 700;
}
.cp-login__subtitle {
    margin: var(--cp-sp-1) 0 0;
    color: rgba(255, 255, 255, 0.85); font-size: var(--cp-fs-sm);
}
.cp-login__body { padding: var(--cp-sp-6); }
.cp-login__options {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cp-sp-3); margin: var(--cp-sp-2) 0 var(--cp-sp-5);
}
.cp-login__remember {
    display: inline-flex; align-items: center; gap: var(--cp-sp-2);
    font-size: var(--cp-fs-sm); color: var(--cp-color-text-muted);
    margin: 0; cursor: pointer; user-select: none;
}
.cp-login__remember input { width: 16px; height: 16px; accent-color: var(--cp-color-primary); }
.cp-login .cp-field { margin-bottom: var(--cp-sp-4); }
.cp-login__error {
    margin-bottom: var(--cp-sp-4);
}
.cp-login__foot {
    margin: var(--cp-sp-5) 0 0;
    text-align: center; font-size: var(--cp-fs-xs); color: var(--cp-color-text-muted);
}

/* =====================================================================
   PANEL DE ADMINISTRACIÓN (/admin)
   Lavado de cara sobre el tema SB-Admin (Bootstrap 3 + metisMenu).
   Todo va scopeado bajo .cp-admin para no afectar a las vistas públicas.
   Se conservan los hooks que metisMenu/Bootstrap necesitan
   (#side-menu, .nav-second-level, .collapse, .arrow): solo se reestiliza.
   ===================================================================== */
.cp-admin { background: var(--cp-color-bg); }

/* Sin subrayado en ningún enlace de la cabecera ni del menú lateral */
.cp-admin .navbar-static-top a,
.cp-admin .navbar-static-side a,
.cp-admin .navbar-static-top a:hover,
.cp-admin .navbar-static-top a:focus,
.cp-admin .navbar-static-side a:hover,
.cp-admin .navbar-static-side a:focus { text-decoration: none; }

/* ── Cabecera superior (color sólido de la instancia, con logo) ── */
.cp-admin .navbar-static-top {
    background: var(--cp-color-primary);
    border: none;
    box-shadow: var(--cp-shadow-sm);
    border-radius: 0;
}
.cp-admin .navbar-static-top .navbar-header { display: flex; align-items: center; }
.cp-admin .navbar-brand {
    display: inline-flex; align-items: center; gap: var(--cp-sp-3);
    height: auto; padding: var(--cp-sp-3) var(--cp-sp-4);
    color: var(--cp-color-on-primary); font-weight: 700; font-size: var(--cp-fs-md);
}
.cp-admin .navbar-brand:hover,
.cp-admin .navbar-brand:focus { color: var(--cp-color-on-primary); }
.cp-admin .navbar-brand__logo { max-height: 38px; width: auto; }
.cp-admin .navbar-toggle { border-color: rgba(255,255,255,0.5); }
.cp-admin .navbar-toggle .icon-bar { background-color: #fff; }

/* Enlaces de la derecha (usuario, mesa, logout) */
.cp-admin .navbar-top-links > li > a {
    color: rgba(255,255,255,0.92);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cp-admin .navbar-top-links > li > a:hover,
.cp-admin .navbar-top-links > li > a:focus {
    color: #fff; background: rgba(255,255,255,0.12);
}
.cp-admin .navbar-top-links .dropdown-menu {
    border: none; border-radius: var(--cp-radius-sm); box-shadow: var(--cp-shadow);
    overflow: hidden; padding: var(--cp-sp-1) 0;
}
.cp-admin .navbar-top-links .dropdown-menu > li > a {
    color: var(--cp-color-text); padding: var(--cp-sp-2) var(--cp-sp-4);
}
.cp-admin .navbar-top-links .dropdown-menu > li > a:hover {
    background: var(--cp-color-primary-soft); color: var(--cp-color-primary-dark);
}

/* ── Barra lateral ── */
.cp-admin .navbar-static-side { background: var(--cp-color-surface); }
.cp-admin .navbar-default.navbar-static-side {
    box-shadow: inset -1px 0 0 var(--cp-color-border);
}
/* Que ocupe todo el alto de la pantalla (a partir de tablet) */
@media (min-width: 768px) {
    .cp-admin .navbar-static-side {
        top: 53px;
        bottom: 0;
        min-height: calc(100vh - 53px);
    }
    .cp-admin .sidebar-collapse { min-height: calc(100vh - 53px); }
}
.cp-admin .navbar-static-side ul li { border-bottom: none; }

/* Tarjeta del logotipo de la organización */
.cp-admin .user-panel {
    padding: var(--cp-sp-5) var(--cp-sp-4);
    text-align: center; background: var(--cp-color-surface-alt);
    border-bottom: 1px solid var(--cp-color-border);
}
.cp-admin .user-panel .image img {
    max-height: 110px !important; max-width: 110px !important;
    border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-sm);
    background: #fff; padding: var(--cp-sp-2);
}
.cp-admin .sidebar-search { border-bottom: none !important; }

/* Enlaces del menú lateral (primer nivel) */
.cp-admin #side-menu > li > a {
    display: flex; align-items: center; gap: var(--cp-sp-3);
    padding: var(--cp-sp-3) var(--cp-sp-4);
    color: var(--cp-color-text); font-weight: 600; font-size: 15px;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cp-admin #side-menu > li > a .fa:first-child { width: 20px; text-align: center; color: var(--cp-color-text-muted); }
.cp-admin #side-menu > li > a:hover,
.cp-admin #side-menu > li > a:focus {
    background: var(--cp-color-primary-soft); color: var(--cp-color-primary-dark);
    border-left-color: var(--cp-color-primary);
}
.cp-admin #side-menu > li > a:hover .fa:first-child { color: var(--cp-color-primary); }
.cp-admin #side-menu > li.active > a {
    background: var(--cp-color-primary-soft); color: var(--cp-color-primary-dark);
    border-left-color: var(--cp-color-primary);
}
.cp-admin #side-menu .arrow { margin-left: auto; transition: transform 0.15s ease; }
.cp-admin #side-menu .arrow:before { content: "\f105"; } /* angle-right > (colapsado) */
.cp-admin #side-menu li.active > a .arrow:before { content: "\f106"; } /* angle-up ^ (expandido) */

/* Submenús (segundo nivel) — Bootstrap .collapse controla la visibilidad */
.cp-admin .nav-second-level { background: var(--cp-color-surface-alt); }
.cp-admin .nav-second-level > li > a {
    display: block; padding: var(--cp-sp-2) var(--cp-sp-4) var(--cp-sp-2) calc(var(--cp-sp-4) + 32px);
    color: var(--cp-color-text-muted); font-size: 14px;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cp-admin .nav-second-level > li > a:hover,
.cp-admin .nav-second-level > li > a:focus,
.cp-admin .nav-second-level > li.active > a {
    background: var(--cp-color-primary-soft); color: var(--cp-color-primary-dark);
    border-left-color: var(--cp-color-primary);
}

/* ── Área de contenido ── */
.cp-admin #page-wrapper {
    background: var(--cp-color-bg);
    border-left: none;
    margin-right: 0;
    /* Suelo de 12px para listados y formularios: el root del documento es
       10px y los tokens se autoraron para 16px, por lo que el texto base
       quedaba en 8–11px. Subimos los cuatro tokens pequeños a 12px y
       flotamos el texto heredado; los tokens >=12px (lg/xl/2xl) no se tocan. */
    font-size: 12px;
    --cp-fs-xs:   12px;
    --cp-fs-sm:   12px;
    --cp-fs-base: 12px;
    --cp-fs-md:   12px;
}
/* Sin esto, la regla pública (#page-wrapper margin-left:11px) deja el
   contenido por debajo de la barra lateral absoluta. */
@media (min-width: 768px) {
    .cp-admin #page-wrapper { margin-left: 250px; padding: 1px 30px; min-height: calc(100vh - 53px); }
}
.cp-admin .page-header {
    margin: var(--cp-sp-5) 0 var(--cp-sp-5);
    padding-bottom: var(--cp-sp-4);
    border-bottom: 1px solid var(--cp-color-border);
    font-size: var(--cp-fs-2xl); font-weight: 700; color: var(--cp-color-text);
}

/* Paneles genéricos del admin (Bootstrap .panel) con aire del sistema cp- */
.cp-admin .panel {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
}
.cp-admin .panel-default > .panel-heading {
    background: var(--cp-color-surface-alt);
    border-bottom: 1px solid var(--cp-color-border);
    color: var(--cp-color-text); font-weight: 700;
    padding: var(--cp-sp-4) var(--cp-sp-5);
    border-radius: var(--cp-radius) var(--cp-radius) 0 0;
}
.cp-admin .panel-body { padding: var(--cp-sp-5); }

/* ── Cuadrícula de estadísticas "Número de citas por mes" ── */
.cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--cp-sp-4);
}
.cp-stat {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius);
    padding: var(--cp-sp-4);
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.cp-stat:hover { box-shadow: var(--cp-shadow); transform: translateY(-2px); }
.cp-stat__month {
    font-size: var(--cp-fs-xs); font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--cp-color-text-muted);
    margin-bottom: var(--cp-sp-2);
}
.cp-stat__num {
    font-size: var(--cp-fs-2xl); font-weight: 700; line-height: 1;
    color: var(--cp-color-primary); font-variant-numeric: tabular-nums;
}
.cp-stat__label { font-size: var(--cp-fs-xs); color: var(--cp-color-text-muted); margin-top: var(--cp-sp-1); }
/* Mes actual destacado */
.cp-stat--current {
    border-color: var(--cp-color-primary);
    background: var(--cp-color-primary-soft);
}
.cp-stat--current .cp-stat__month { color: var(--cp-color-primary-dark); }

/* ── Listados (tablas + DataTables) ──────────────────────────────── */
/* Barra superior del listado: título + botón de acción */
.cp-admin .cp-list-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cp-sp-4); flex-wrap: wrap;
    clear: both; width: 100%;
}
.cp-admin .cp-list-head .page-header { margin: var(--cp-sp-5) 0; border: none; padding-bottom: 0; }

/* Los enlaces con aspecto de botón nunca van subrayados */
.cp-admin a.btn,
.cp-admin a.btn:hover,
.cp-admin a.btn:focus { text-decoration: none; }

/* Botón "Añadir ..." (reestiliza el btn-info de Bootstrap) */
.cp-admin .btn-info {
    background: var(--cp-color-primary); border-color: var(--cp-color-primary);
    color: var(--cp-color-on-primary); font-weight: 600;
    border-radius: var(--cp-radius-sm); padding: var(--cp-sp-2) var(--cp-sp-4);
    box-shadow: none; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cp-admin .btn-info:hover,
.cp-admin .btn-info:focus {
    background: var(--cp-color-primary-strong); border-color: var(--cp-color-primary-strong);
    color: var(--cp-color-on-primary);
}

/* Tabla */
.cp-admin .table {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius);
    border-collapse: separate; border-spacing: 0; overflow: hidden;
    margin-bottom: var(--cp-sp-4);
}
.cp-admin .table > thead > tr > th {
    background: var(--cp-color-surface-alt);
    color: var(--cp-color-text-muted);
    font-size: var(--cp-fs-xs); font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    border-bottom: 1px solid var(--cp-color-border);
    padding: var(--cp-sp-3) var(--cp-sp-4); vertical-align: middle;
}
.cp-admin .table > tbody > tr > td {
    padding: var(--cp-sp-3) var(--cp-sp-4); vertical-align: middle;
    border-top: 1px solid var(--cp-color-border);
    color: var(--cp-color-text);
}
.cp-admin .table.table-bordered,
.cp-admin .table.table-bordered > thead > tr > th,
.cp-admin .table.table-bordered > tbody > tr > td { border-left: none; border-right: none; }
.cp-admin .table-striped > tbody > tr:nth-of-type(odd) { background: var(--cp-color-surface); }
.cp-admin .table-striped > tbody > tr:nth-of-type(even) { background: var(--cp-color-surface-alt); }
.cp-admin .table-hover > tbody > tr:hover { background: var(--cp-color-primary-soft); }

/* Botones de acción de fila (editar / borrar) */
.cp-admin .btn-xs { border-radius: var(--cp-radius-sm); padding: 4px 8px; }
.cp-admin .btn-success {
    background: var(--cp-color-primary); border-color: var(--cp-color-primary); color: #fff;
}
.cp-admin .btn-success:hover,
.cp-admin .btn-success:focus {
    background: var(--cp-color-primary-strong); border-color: var(--cp-color-primary-strong); color: #fff;
}
.cp-admin .btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.cp-admin .btn-danger:hover,
.cp-admin .btn-danger:focus { background: #a93226; border-color: #a93226; color: #fff; }
.cp-admin .btn-tarifa { background: var(--cp-color-success); border-color: var(--cp-color-success); color: #fff; }
.cp-admin .btn-tarifa:hover,
.cp-admin .btn-tarifa:focus { background: #185f3c; border-color: #185f3c; color: #fff; }

/* Controles de DataTables (buscador, selector, info, paginación) */
.cp-admin .dataTables_wrapper { margin-top: var(--cp-sp-2); }
.cp-admin .dataTables_length,
.cp-admin .dataTables_filter,
.cp-admin .dataTables_info { color: var(--cp-color-text-muted); font-size: var(--cp-fs-sm); }
.cp-admin .dataTables_length select,
.cp-admin .dataTables_filter input {
    border: 1px solid var(--cp-color-border); border-radius: var(--cp-radius-sm);
    padding: var(--cp-sp-1) var(--cp-sp-2); background: var(--cp-color-surface);
    color: var(--cp-color-text); margin-left: var(--cp-sp-2);
}
.cp-admin .dataTables_filter input:focus,
.cp-admin .dataTables_length select:focus {
    outline: none; border-color: var(--cp-color-primary); box-shadow: var(--cp-focus-ring);
}
.cp-admin .dataTables_paginate .pagination > li > a,
.cp-admin .dataTables_paginate .pagination > li > span {
    color: var(--cp-color-primary); border-color: var(--cp-color-border);
}
.cp-admin .dataTables_paginate .pagination > .active > a,
.cp-admin .dataTables_paginate .pagination > .active > a:hover,
.cp-admin .dataTables_paginate .pagination > .active > span {
    background: var(--cp-color-primary); border-color: var(--cp-color-primary); color: #fff;
}
.cp-admin .dataTables_paginate .pagination > li > a:hover {
    background: var(--cp-color-primary-soft); color: var(--cp-color-primary-dark);
}

/* Modal de confirmación de borrado */
.cp-admin .modal-content { border: none; border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-lg); }
.cp-admin .modal-header { border-bottom: 1px solid var(--cp-color-border); padding: var(--cp-sp-4) var(--cp-sp-5); }
.cp-admin .modal-title { font-weight: 700; color: var(--cp-color-text); }
.cp-admin .modal-body { padding: var(--cp-sp-5); color: var(--cp-color-text); }
.cp-admin .modal-footer { border-top: 1px solid var(--cp-color-border); padding: var(--cp-sp-3) var(--cp-sp-5); }
.cp-admin #button-delete { background: #c0392b; border-color: #c0392b; color: #fff; }
.cp-admin #button-delete:hover { background: #a93226; border-color: #a93226; }

/* ── Formularios (caja .box + campos) ────────────────────────────── */
/* Tarjeta contenedora del formulario */
.cp-admin .box {
    clear: both;
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
    overflow: hidden;
    margin-top: var(--cp-sp-2);
}
.cp-admin .box-header {
    padding: var(--cp-sp-4) var(--cp-sp-5);
    border-bottom: 1px solid var(--cp-color-border);
    background: var(--cp-color-surface-alt);
}
.cp-admin .box-header .box-title {
    margin: 0; font-size: var(--cp-fs-md); font-weight: 700; color: var(--cp-color-text);
}
.cp-admin .box-body { padding: var(--cp-sp-5); }
.cp-admin .box-footer {
    padding: var(--cp-sp-4) var(--cp-sp-5);
    border-top: 1px solid var(--cp-color-border);
    background: var(--cp-color-surface-alt);
    overflow: hidden;
}

/* Filas etiqueta + campo */
.cp-admin .form-group { margin-bottom: var(--cp-sp-4); }
/* Las plantillas no envuelven label+campo en .row, así que las columnas
   flotadas dejan el .form-group con altura 0; lo contenemos con un clearfix. */
.cp-admin .box-body .form-group::before,
.cp-admin .box-body .form-group::after { content: ""; display: table; }
.cp-admin .box-body .form-group::after { clear: both; }
.cp-admin .control-label {
    font-weight: 600; color: var(--cp-color-text);
    padding-top: 9px; font-size: var(--cp-fs-sm);
}

/* Campos de texto y selects */
.cp-admin .form-control {
    height: auto; min-height: 40px;
    padding: var(--cp-sp-2) var(--cp-sp-3);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-sm);
    color: var(--cp-color-text); background: var(--cp-color-surface);
    box-shadow: none; font-size: var(--cp-fs-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-admin .form-control:focus {
    border-color: var(--cp-color-primary); box-shadow: var(--cp-focus-ring); outline: none;
}
/* Campo con error de validación (`aria-invalid`, §59): borde de error, no solo el texto. */
.cp-admin .form-control[aria-invalid="true"] {
    border-color: var(--cp-color-error);
    box-shadow: inset 0 0 0 1px var(--cp-color-error);
}
.cp-admin .form-control[aria-invalid="true"]:focus { box-shadow: var(--cp-focus-ring); }

/* Grupos de checkboxes en línea (p.ej. "Días abierto"): el widget es un
   div.form-control con pares <input><label> pegados; les damos aire. */
.cp-admin .box-body .form-control:has(> input[type="checkbox"]) { line-height: 2.2; }
.cp-admin .box-body .form-control > input[type="checkbox"] {
    width: auto; min-height: 0; margin: 0 0.4em 0 0; vertical-align: middle;
}
.cp-admin .box-body .form-control > input[type="checkbox"] + label {
    margin: 0 1.6em 0 0; font-weight: 400; vertical-align: middle;
    color: var(--cp-color-text); cursor: pointer;
}

/* select2 (v4) alineado con los form-control */
.cp-admin .select2-container { width: 100% !important; }
.cp-admin .select2-container--default .select2-selection--single,
.cp-admin .select2-container--default .select2-selection--multiple {
    min-height: 40px; border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-sm); background: var(--cp-color-surface);
}
.cp-admin .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px; padding-left: var(--cp-sp-3); color: var(--cp-color-text);
}
.cp-admin .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.cp-admin .select2-container--default.select2-container--focus .select2-selection--single,
.cp-admin .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--cp-color-primary); box-shadow: var(--cp-focus-ring);
}
.cp-admin .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--cp-color-primary-soft); border-color: var(--cp-color-primary);
    color: var(--cp-color-primary-dark); border-radius: var(--cp-radius-sm);
}
.cp-admin .select2-dropdown {
    border-color: var(--cp-color-border); border-radius: var(--cp-radius-sm);
    box-shadow: var(--cp-shadow);
}
/* El desplegable de select2 se inserta en <body> (fuera de .cp-admin),
   por eso el suelo de 12px se aplica sin ese ámbito. */
.select2-dropdown,
.select2-dropdown .select2-results__option,
.select2-dropdown .select2-search__field { font-size: 12px; }
.cp-admin .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--cp-color-primary);
}

/* Botones del pie del formulario */
.cp-admin .btn-primary {
    background: var(--cp-color-primary); border-color: var(--cp-color-primary);
    color: var(--cp-color-on-primary); font-weight: 600;
    border-radius: var(--cp-radius-sm); padding: var(--cp-sp-2) var(--cp-sp-5);
    box-shadow: none;
}
.cp-admin .btn-primary:hover,
.cp-admin .btn-primary:focus {
    background: var(--cp-color-primary-strong); border-color: var(--cp-color-primary-strong);
    color: var(--cp-color-on-primary);
}
.cp-admin .box-footer .btn { border-radius: var(--cp-radius-sm); padding: var(--cp-sp-2) var(--cp-sp-5); font-weight: 600; }
/* Mensajes de error de validación */
.cp-admin .help-block,
.cp-admin .form-group .text-danger,
.cp-admin ul.help-block { color: #c0392b; font-size: var(--cp-fs-xs); margin-top: var(--cp-sp-1); }

/* ── Helpers de maquetación de listados/formularios del admin ── */
/* Cabecera de página: título a la izquierda, botón "Añadir" a la derecha.
   `clear/width` evitan que se solape con el `.col-xs-12` flotado del layout, y
   `min-width:0` deja que el título encoja en vez de desbordar el contenedor. */
.cp-admin .cp-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cp-sp-4); flex-wrap: wrap;
    clear: both; width: 100%;
}
.cp-admin .cp-page-head .page-header {
    flex: 1 1 auto; min-width: 0;
    margin: var(--cp-sp-5) 0; border: none; padding-bottom: 0;
}
.cp-admin .cp-page-head__action { flex: 0 0 auto; white-space: nowrap; }
/* Botones de acción por fila (editar/eliminar) en línea. */
.cp-admin .cp-actions { display: flex; gap: var(--cp-sp-2); align-items: center; }
.cp-admin .cp-inline-form { display: inline; margin: 0; }
/* Pie del formulario: Cancelar / Guardar alineados a la derecha. */
.cp-admin .cp-form__actions {
    display: flex; justify-content: flex-end; gap: var(--cp-sp-3);
    padding-top: var(--cp-sp-4); border-top: 1px solid var(--cp-color-border);
}
/* <legend> usado como etiqueta de un grupo de campos (p. ej. "Días de la semana") en el
   formulario horizontal: neutraliza el estilo nativo del <legend> de Bootstrap (border-bottom
   a todo el ancho + font-size grande) para que se vea como un .control-label más. */
.cp-admin .cp-fieldset-legend {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* ===========================================================================
   ADMIN · Calendario de Reservas (/admin/calendar/list)
   El #table-calendar comparte ID con el calendario público, cuyas reglas de
   "pills" redondeadas no encajan en la rejilla del admin (celdas con iconos de
   acción + enlace de la reserva). Aquí se neutralizan, manteniendo el tema cp-.
   =========================================================================== */
/* Caja de filtros: todos los filtros en una sola línea; acciones en su propia fila */
.cp-admin .cp-calendar-filter { margin-bottom: var(--cp-sp-5); }
.cp-admin .cp-filter-row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cp-sp-4);
}
.cp-admin .cp-filter-row > .form-group { margin-bottom: 0; flex: 1 1 0; min-width: 140px; }
.cp-admin .cp-filter-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--cp-sp-3); margin-top: var(--cp-sp-4);
}
.cp-admin .cp-calendar-filter .control-label { display: block; padding-top: 0; margin-bottom: var(--cp-sp-1); }

/* Rejilla del calendario: celdas rectangulares y compactas (no pills 999px) */
.cp-admin #table-calendar { border-spacing: 3px; min-width: 0; }
.cp-admin #table-calendar thead th {
    background: var(--cp-color-surface-alt); border-bottom: 2px solid var(--cp-color-border);
    border-radius: var(--cp-radius-sm); padding: var(--cp-sp-2) var(--cp-sp-2) var(--cp-sp-2);
    line-height: 1.3;
}
.cp-admin #table-calendar thead th { font-size: 12px; }
.cp-admin #table-calendar tbody td:not(.hours) {
    height: auto; border-radius: var(--cp-radius-sm); font-weight: 600;
    font-size: 12px; vertical-align: middle;
}
.cp-admin #table-calendar tbody td:not(.hours):not(.free):not(.reserved)::after { color: var(--cp-color-border-strong); }
/* Columna de franjas horarias: texto blanco centrado, reducido para que no desborde */
.cp-admin #table-calendar .hours {
    font-size: 10px; font-weight: 700; text-align: center; padding: var(--cp-sp-1) 2px;
    color: #fff; background: var(--cp-color-primary); border-radius: var(--cp-radius-sm);
    white-space: nowrap; letter-spacing: -0.02em;
}

/* Hueco libre: pill verde que ocupa toda la celda (truco height:1px en la td) */
.cp-admin #table-calendar tbody td.free { padding: 0; height: 1px; }
.cp-admin #table-calendar .free a {
    display: flex; height: 100%; min-height: 38px; border-radius: var(--cp-radius-sm); font-size: 14px;
}
/* Reservado: morado pastel; nº de reserva y nombre en líneas distintas y centrados */
.cp-admin #table-calendar .reserved {
    background: #e6d5f7; border-radius: var(--cp-radius-sm);
    padding: var(--cp-sp-2); text-align: center; white-space: normal !important;
}
.cp-admin #table-calendar .reserved a {
    display: block !important; height: auto; padding: 0; margin: 2px 0 0; background: transparent;
    border-radius: 0; font-weight: 600; font-size: 12px; line-height: 1.3;
    color: #4a2c6f; white-space: normal; overflow: visible; text-align: center;
    word-break: break-word; overflow-wrap: anywhere;
}
.cp-admin #table-calendar .reserved a .cp-res-id,
.cp-admin #table-calendar .reserved a .cp-res-name { display: block; }
.cp-admin #table-calendar .reserved a .cp-res-id { font-weight: 700; }
.cp-admin #table-calendar .reserved.videoconferencia { box-shadow: inset 0 0 0 2px var(--cp-color-primary); }
.cp-admin #table-calendar .reserved .btn-xs { margin: 0 2px 2px 0; }

/* Gestor de Cola del Día: tarjeta con cabecera, tabla y leyenda integradas */
.cp-admin .cp-queue { margin-top: var(--cp-sp-5); }
.cp-admin .cp-queue__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--cp-sp-3);
}
.cp-admin .cp-queue__head .cp-queue__title {
    display: flex; align-items: center; gap: var(--cp-sp-2);
    margin: 0; font-size: var(--cp-fs-md); font-weight: 700; color: var(--cp-color-primary);
}
.cp-admin .cp-queue__title .fa { color: var(--cp-color-primary); }
.cp-admin .cp-queue__count {
    background: var(--cp-color-primary); color: var(--cp-color-on-primary);
    font-size: var(--cp-fs-xs); font-weight: 700; border-radius: 999px;
    min-width: 22px; padding: 3px 8px;
}
.cp-admin .cp-queue__count:empty { display: none; }
.cp-admin .cp-queue__toggle {
    display: inline-flex; align-items: center; gap: var(--cp-sp-2);
    margin: 0; font-size: var(--cp-fs-sm); font-weight: 500; color: var(--cp-color-text-muted);
    cursor: pointer; user-select: none;
}
.cp-admin .cp-queue__toggle input { margin: 0; cursor: pointer; }
.cp-admin .cp-queue__body { padding-top: var(--cp-sp-4); }

/* Tabla de la cola: filas conservan su color de leyenda (style inline del JS) */
.cp-admin #table-daily-tickets { margin-bottom: var(--cp-sp-3); }
.cp-admin #table-daily-tickets > thead > tr > th:first-child,
.cp-admin #table-daily-tickets > tbody > tr > td:first-child { text-align: center; }
.cp-admin #table-daily-tickets > tbody > tr > td:last-child { white-space: nowrap; }
/* La fila ya lleva color; el hover añade un velo sutil sin tapar el color */
.cp-admin #table-daily-tickets.table-hover > tbody > tr:hover > td {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.06);
}
/* Iconos-botón de acción: espaciado uniforme */
.cp-admin #table-daily-tickets .btn-xs { margin: 0 1px; }
.cp-admin #table-daily-tickets .label-success {
    font-size: var(--cp-fs-xs); padding: 4px 8px; border-radius: var(--cp-radius-sm);
}

/* Leyenda: chips alineados con puntos de color (mismos colores que el JS) */
.cp-admin .cp-queue__legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--cp-sp-4);
    padding-top: var(--cp-sp-2); font-size: var(--cp-fs-xs); color: var(--cp-color-text-muted);
}
.cp-admin .cp-legend { display: inline-flex; align-items: center; gap: var(--cp-sp-2); }
.cp-admin .cp-legend__dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle;
}
.cp-admin .cp-legend__dot--reservation { background: #d6eaf8; border: 1px solid #aed6f1; }
.cp-admin .cp-legend__dot--walkin { background: #fdebd0; border: 1px solid #f5cba7; }
.cp-admin .cp-legend__dot--done { background: #fa91ee; border: 1px solid #e670cc; }

/* ===========================================================================
   FRONT · Piso de legibilidad: tamaño mínimo de letra 12px
   El root del documento es 10px, por lo que los tokens pequeños rendían por
   debajo de 12px (xs 8.1 / sm 9.4 / base 10 / md 11.25). Se suben a 12px y se
   fija un piso para el texto heredado. Los tamaños ≥12px (lg/xl/2xl) se dejan
   tal cual. Solo afecta al front (cabecera/main/footer públicos), no al admin.
   =========================================================================== */
.cp-skip-link,
.cp-header,
.cp-main,
.cp-footer {
    font-size: 12px;
    --cp-fs-xs:   12px;
    --cp-fs-sm:   12px;
    --cp-fs-base: 12px;
    --cp-fs-md:   12px;
}
/*
 * Tokens de diseño — Cita Previa (identidad de lapalma).
 * DERIVA 2026-06-25 (M-004): re-capturados del export de Claude design "Cita Previa.html" que
 * aporta el cliente (referencia real). Supersede la 1ª captura (front.css legacy, azul #0764bf).
 * Cambios: azul #155fc2, tipografía Public Sans, radios más redondeados, paleta refinada.
 * Accesibilidad WCAG 2.2 AA verificada (warning normalizado de #b07d20→#8a5a00; muted #5a6675).
 * El export NO cumplía el contrato (:root+var): valores extraídos/normalizados aquí.
 * NO editar a ojo: cambios pasan por el flujo (deriva M-004) y se re-congelan en /diseno.
 */
:root {
    /* Marca (azul institucional) */
    --cp-color-primary:        #155fc2;
    --cp-color-primary-strong: #0c57b4;
    --cp-color-primary-dark:   #0a4c9e;
    --cp-color-on-primary:     #ffffff;
    --cp-color-primary-soft:   #e8f0fb;

    /* Neutros (slate frío) */
    --cp-color-text:         #1f2733;
    --cp-color-text-muted:   #5a6675; /* AA (#7a8696 del diseño solo AA-large → secundario) */
    --cp-color-text-soft:    #7a8696;
    --cp-color-border:       #d4dae2;
    --cp-color-border-strong:#bcc5d0;
    --cp-color-bg:           #eef1f5;
    --cp-color-surface:      #ffffff;
    --cp-color-surface-alt:  #eaeef3;

    /* Semánticos (AA sobre blanco) */
    --cp-color-success:     #1d7a3e;
    --cp-color-success-bg:  #eaf6ee;
    --cp-color-error:       #c0291f;
    --cp-color-error-bg:    #fdecea;
    --cp-color-warning:     #8a5a00; /* normalizado del #b07d20 del diseño (fallaba AA en texto) */
    --cp-color-warning-bg:  #fbf4dc;
    --cp-color-info:        #2c6394;
    --cp-color-info-bg:     #eaf2fa;

    /* Calendario (huecos) */
    --cp-color-slot-free:     #159a47;
    --cp-color-slot-free-bg:  #d9efdf;
    --cp-color-slot-free-text:#14692f;
    --cp-color-slot-blocked:  #eef1f5;
    --cp-color-slot-reserved: #d4dae2;

    /* Tipografía — Public Sans (con respaldo system; cargar self-host por RGPD, ver radiografía) */
    --cp-font-base: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;
    --cp-fs-xs:   0.8125rem;
    --cp-fs-sm:   0.9375rem;
    --cp-fs-base: 1rem;
    --cp-fs-md:   1.125rem;
    --cp-fs-lg:   1.375rem;
    --cp-fs-xl:   1.75rem;
    --cp-fs-2xl:  2.25rem;
    --cp-lh:      1.55;

    /* Espaciado (escala 4px) */
    --cp-sp-1: 0.25rem;  --cp-sp-2: 0.5rem;  --cp-sp-3: 0.75rem;  --cp-sp-4: 1rem;
    --cp-sp-5: 1.5rem;   --cp-sp-6: 2rem;    --cp-sp-7: 3rem;

    /* Radios (más redondeados, del diseño: 8/12/18) */
    --cp-radius-sm: 8px;
    --cp-radius:    12px;
    --cp-radius-lg: 18px;

    /* Sombras / foco */
    --cp-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --cp-shadow:    0 4px 14px rgba(16, 24, 40, 0.10);
    --cp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);
    --cp-focus-ring: 0 0 0 3px rgba(21, 95, 194, 0.35);

    /* Layout */
    --cp-container: 95%;
    --cp-tap-min:   44px;
}

/* ── Vista de día en móvil (selector de día + lista de horas) — añadido en revisión ── */
.cp-cal__mobile { display: none; }
.cp-cal__daysel { display: flex; flex-wrap: wrap; gap: var(--cp-sp-2); margin-bottom: var(--cp-sp-4); }
.cp-cal__daytab[aria-current="true"] { background: var(--cp-color-primary); color: var(--cp-color-on-primary); border-color: var(--cp-color-primary); }
@media (max-width: 719px) {
  .cp-cal__week { display: none; }
  .cp-cal__mobile { display: block; }
}

/* ── Revisión: navegación del calendario en una línea + horas móviles verdes ── */
.cp-cal__nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cp-sp-2); }
.cp-cal__navbtn { padding-left: var(--cp-sp-3); padding-right: var(--cp-sp-3); font-size: var(--cp-fs-lg); line-height: 1; }
.cp-slots { display: flex; flex-wrap: wrap; gap: var(--cp-sp-2); list-style: none; padding: 0; margin: 0; }
.cp-slots .cp-slot--free {
    display: flex; align-items: center; justify-content: center;
    min-width: 5rem; min-height: var(--cp-tap-min);
    padding: var(--cp-sp-2) var(--cp-sp-3);
    background: var(--cp-color-slot-free-bg);
    color: var(--cp-color-slot-free-text);
    border: 1px solid var(--cp-color-slot-free);
    border-radius: var(--cp-radius);
    font-weight: 600; text-decoration: none;
}
.cp-slots .cp-slot--free:hover,
.cp-slots .cp-slot--free:focus-visible { background: var(--cp-color-slot-free); color: var(--cp-color-on-primary); }

/* ── Revisión: la barra de navegación ocupa todo el ancho (‹ izq · Ir a primer día centro · › der) ── */
.cp-cal__head { flex-wrap: wrap; }
.cp-cal__nav { width: 100%; justify-content: space-between; }

/* ── Revisión: ‹ › pequeños y casi cuadrados + "Ir a primer día disponible" más grande ──
   Especificidad .cp-cal__nav … (0-2-0) para vencer al heredado .cp-cal__nav .cp-btn{width:100%} */
.cp-cal__nav .cp-cal__navbtn {
    flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem;
    padding: 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--cp-fs-lg); line-height: 1;
}
.cp-cal__nav .cp-cal__freeday {
    flex: 0 1 auto; width: auto;
    font-size: var(--cp-fs-lg); font-weight: 700;
}

/* ── Tótem kiosko (C-totem-c): sin header, contenedor centrado ── */
.cp-kiosk-page { background: var(--cp-color-bg); min-height: 100vh; margin: 0; }
.cp-kiosk-main { max-width: 760px; margin: 0 auto; padding: var(--cp-sp-7) var(--cp-sp-5); }

/* ── §60.5-A · Calendario público en columnas por día (C-franjas-d) ──
   Cada día es una columna con su propia lista de horas libres (componente reservar/_day-column).
   Escritorio: siete columnas en fila; los días pasados/cerrados se pliegan a una columna estrecha con «—».
   Móvil (< 720 px): una sola columna, la del día elegido en las pestañas. Sin scroll horizontal a 320 px. */
.cp-days { display: flex; gap: var(--cp-sp-2); align-items: flex-start; min-width: 0; }
.cp-daycol { flex: 1 1 0; min-width: 0; }
.cp-daycol.is-folded { flex: 0 0 3rem; }
.cp-daycol__head {
    margin: 0 0 var(--cp-sp-2); padding: var(--cp-sp-2) var(--cp-sp-1) var(--cp-sp-3);
    text-align: center; color: var(--cp-color-text-muted); font-size: var(--cp-fs-xs);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3;
    border-bottom: 2px solid var(--cp-color-border);
}
.cp-daycol__head .cp-cal__daynum {
    display: block; font-size: var(--cp-fs-lg); color: var(--cp-color-text); letter-spacing: 0; margin-top: 2px;
}
.cp-daycol__none { margin: 0; text-align: center; color: var(--cp-color-text-muted); font-size: var(--cp-fs-sm); }
.cp-daycol__dash { font-size: var(--cp-fs-lg); }
.cp-daycol.is-folded .cp-daycol__nonetext {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cp-daycol__group + .cp-daycol__group { margin-top: var(--cp-sp-3); }
.cp-daycol__hour {
    margin: 0 0 var(--cp-sp-1); font-size: var(--cp-fs-xs); font-weight: 700;
    color: var(--cp-color-text-muted); font-variant-numeric: tabular-nums;
}
.cp-slots--col { flex-direction: column; flex-wrap: nowrap; }
.cp-slots--col .cp-slot--free,
.cp-slots--chips .cp-slot--free { min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.cp-slots--chips { gap: var(--cp-sp-1); }
.cp-slots .is-selected .cp-slot--free {
    background: var(--cp-color-slot-free); color: var(--cp-color-on-primary); box-shadow: var(--cp-focus-ring);
}
.cp-slots .cp-slot--free:focus-visible { outline: 3px solid var(--cp-color-primary); outline-offset: 2px; }
.cp-cal__daysel { display: none; }
@media (max-width: 719px) {
    .cp-cal__daysel { display: flex; }
    .cp-daycol, .cp-daycol.is-folded { display: none; flex: 1 1 auto; }
    .cp-daycol.is-active { display: block; }
    .cp-daycol__head { text-align: left; }
    .cp-daycol__none { text-align: left; }
    .cp-daycol.is-folded .cp-daycol__dash { display: none; }
    .cp-daycol.is-folded .cp-daycol__nonetext { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
    .cp-slots--col { flex-direction: row; flex-wrap: wrap; }
    .cp-slots--col .cp-slot--free { width: auto; min-width: 5rem; }
    .cp-slots--chips .cp-slot--free { width: auto; min-width: 4.5rem; }
}

/* ── §60.11 · Columna de horas salvo semana mixta (C-franjas-f, 60-A → b) ──
   Escritorio: la tabla clásica (.cp-cal__week) en toda semana de un solo sistema; las columnas por día
   (.cp-cal__bydays) solo con el modificador --mixed. Móvil: siempre las columnas (la tabla ya se oculta arriba).
   display:none en la vista que no toca, para que el lector de pantalla no lea dos veces las mismas horas. */
.cp-cal__bydays { display: none; }
.cp-cal__bydays--mixed { display: block; }
@media (max-width: 719px) {
    .cp-cal__bydays { display: block; }
    .cp-legend .cp-legend__table { display: none; }
}