/*
 * Reporte · Ocupación de Boxes.
 *
 * Framework propio `--ocb-*`, acotado a #reporteOcupacionBoxes para no filtrar
 * estilos al resto del sistema. Todo el estilo vive acá: la vista no lleva
 * <style> ni style=" (método de Pacientes).
 *
 * PALETA INSTITUCIONAL: el índigo #3f51b5 de `pacientes/css` —la plantilla del
 * método— más una escala de grises, igual que el resto de la tanda de reportes.
 * La jerarquía normal de la parrilla (agenda abierta → hora tomada) se resuelve
 * DENTRO de esa familia, subiendo la saturación del mismo índigo.
 *
 * Los dos únicos colores ajenos son ESTADOS excepcionales, no categorías, que es
 * lo que la convención permite:
 *   - rojo  → el box llegó a su tope y ya no admite otra atención;
 *   - ámbar → hay una cita sobre un tramo sin agenda que la respalde (anomalía
 *             que el usuario tiene que revisar).
 * No agregar más colores: el profesional y el tipo de atención se distinguen por
 * el TEXTO, nunca por color.
 */

#reporteOcupacionBoxes {
    --ocb-paper: #f8f9fa;
    --ocb-surface: #ffffff;
    --ocb-ink: #2d3748;
    --ocb-muted: #6c757d;
    --ocb-faint: #9aa3ad;
    --ocb-line: #e5e7eb;
    --ocb-line-strong: #d1d5db;
    --ocb-primary: #3f51b5;
    --ocb-primary-dark: #2c3a8c;
    --ocb-primary-soft: #eef0fb;
    --ocb-radius: 14px;

    /* Estados de la parrilla */
    --ocb-config: #eef0fb;    /* agenda abierta, hora libre  (índigo tenue)   */
    --ocb-tomado: #c9d0ef;    /* hora tomada                 (índigo medio)   */
    --ocb-lleno: #f6d5d0;     /* box completo                (rojo sobrio)    */
    --ocb-lleno-ink: #8a3b30;
    --ocb-huerfano: #fdf0d5;  /* cita sin agenda detrás      (ámbar)          */
    --ocb-cerrado: #eceff1;
}

#reporteOcupacionBoxes { max-width: 100%; overflow-x: hidden; }

/* ---------------- Cabecera ---------------- */
#reporteOcupacionBoxes .ocb-head { background: var(--ocb-surface); border: 1px solid var(--ocb-line); border-radius: 16px; padding: 22px 24px; margin-bottom: 14px; }
#reporteOcupacionBoxes .ocb-head h4 { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 700; color: var(--ocb-ink); margin: 0 0 5px; }
#reporteOcupacionBoxes .ocb-head h4 .bi { color: var(--ocb-primary); }
#reporteOcupacionBoxes .ocb-sub { color: var(--ocb-muted); font-size: 12.5px; margin: 0; max-width: 82ch; line-height: 1.55; }
/* Contenedor de acciones de la cabecera: aloja el chip y el botón "¿Cómo se hace?"
   (`data-ayuda-anclaje`). Van juntos en una caja con margin-left:auto porque la caja
   anclada trae su propio margin-left:auto y, suelta en un flex con space-between,
   absorbería el espacio libre y correría el chip hacia el título. */
#reporteOcupacionBoxes .ocb-header-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

#reporteOcupacionBoxes .ocb-chip-head { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ocb-muted); background: var(--ocb-paper); border: 1px solid var(--ocb-line); padding: 5px 11px; border-radius: 6px; white-space: nowrap; }

/* ---------------- Filtros ---------------- */
#reporteOcupacionBoxes .ocb-filtros { background: var(--ocb-surface); border: 1px solid var(--ocb-line); border-radius: var(--ocb-radius); padding: 16px; margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: end; }
#reporteOcupacionBoxes .ocb-campo label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ocb-faint); margin: 0 0 6px; display: block; }
#reporteOcupacionBoxes .ocb-semana-nav { display: flex; gap: 6px; align-items: center; }
#reporteOcupacionBoxes .ocb-semana-nav .form-control { min-width: 0; }
#reporteOcupacionBoxes .ocb-btn { background: var(--ocb-primary); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; white-space: nowrap; width: 100%; }
#reporteOcupacionBoxes .ocb-btn:hover { background: var(--ocb-primary-dark); color: #fff; }
#reporteOcupacionBoxes .ocb-btn--ghost { background: var(--ocb-surface); color: var(--ocb-primary); border: 1px solid var(--ocb-line-strong); }
#reporteOcupacionBoxes .ocb-btn--ghost:hover { background: var(--ocb-primary-soft); color: var(--ocb-primary-dark); }
#reporteOcupacionBoxes .ocb-btn-icono { background: var(--ocb-surface); border: 1px solid var(--ocb-line-strong); border-radius: 8px; color: var(--ocb-ink); padding: 8px 11px; line-height: 1; }
#reporteOcupacionBoxes .ocb-btn-icono:hover { background: var(--ocb-primary-soft); color: var(--ocb-primary-dark); }

/* ---------------- Rango de la semana ---------------- */
#reporteOcupacionBoxes .ocb-rango { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
#reporteOcupacionBoxes .ocb-rango h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ocb-ink); }
#reporteOcupacionBoxes .ocb-rango-sub { color: var(--ocb-muted); font-size: 12px; }

/* ---------------- Tarjeta de box ---------------- */
#reporteOcupacionBoxes .ocb-box { background: var(--ocb-surface); border: 1px solid var(--ocb-line); border-radius: var(--ocb-radius); margin-bottom: 16px; overflow: hidden; }
#reporteOcupacionBoxes .ocb-box-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ocb-line); background: var(--ocb-paper); }
#reporteOcupacionBoxes .ocb-box-nombre { font-size: 14.5px; font-weight: 700; color: var(--ocb-ink); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#reporteOcupacionBoxes .ocb-box-desc { font-size: 11.5px; color: var(--ocb-muted); margin: 3px 0 0; }
#reporteOcupacionBoxes .ocb-kpis { display: flex; gap: 18px; flex-wrap: wrap; }
#reporteOcupacionBoxes .ocb-kpi { text-align: right; }
#reporteOcupacionBoxes .ocb-kpi-valor { font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--ocb-ink); }
#reporteOcupacionBoxes .ocb-kpi-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ocb-faint); }
#reporteOcupacionBoxes .ocb-tag-exclusivo { background: var(--ocb-lleno); color: var(--ocb-lleno-ink); border-radius: 6px; padding: 3px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#reporteOcupacionBoxes .ocb-tag-cap { background: var(--ocb-primary-soft); color: var(--ocb-primary-dark); border-radius: 6px; padding: 3px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- Parrilla ---------------- */
#reporteOcupacionBoxes .ocb-scroll { overflow-x: auto; }
#reporteOcupacionBoxes .ocb-grid { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 760px; }
#reporteOcupacionBoxes .ocb-grid th,
#reporteOcupacionBoxes .ocb-grid td { border: 1px solid var(--ocb-line); padding: 5px 7px; vertical-align: top; }
#reporteOcupacionBoxes .ocb-grid thead th { background: var(--ocb-paper); font-weight: 700; text-align: center; white-space: nowrap; color: var(--ocb-ink); position: sticky; top: 0; z-index: 2; }
#reporteOcupacionBoxes .ocb-grid thead th small { font-weight: 400; color: var(--ocb-muted); }
#reporteOcupacionBoxes .ocb-grid th.ocb-hoy { background: var(--ocb-primary-soft); color: var(--ocb-primary-dark); }
#reporteOcupacionBoxes .ocb-hora { width: 62px; text-align: right; white-space: nowrap; color: var(--ocb-muted); font-variant-numeric: tabular-nums; background: var(--ocb-paper); font-weight: 700; }
#reporteOcupacionBoxes .ocb-celda { min-width: 98px; }
#reporteOcupacionBoxes .ocb-celda--vacia { background: repeating-linear-gradient(45deg, #fbfbfc, #fbfbfc 6px, #f3f4f7 6px, #f3f4f7 12px); }
#reporteOcupacionBoxes .ocb-celda--config { background: var(--ocb-config); }
#reporteOcupacionBoxes .ocb-celda--tomado { background: var(--ocb-tomado); }
#reporteOcupacionBoxes .ocb-celda--lleno { background: var(--ocb-lleno); color: var(--ocb-lleno-ink); }
#reporteOcupacionBoxes .ocb-celda--huerfano { background: var(--ocb-huerfano); }
#reporteOcupacionBoxes .ocb-celda--bloqueado { background: var(--ocb-cerrado); color: var(--ocb-muted); text-align: center; }
#reporteOcupacionBoxes .ocb-medico { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#reporteOcupacionBoxes .ocb-tipo { display: block; color: var(--ocb-muted); font-size: 10px; }
#reporteOcupacionBoxes .ocb-cita { display: block; font-size: 10px; line-height: 1.3; margin-top: 3px; padding-top: 2px; border-top: 1px dotted rgba(45, 55, 72, .25); overflow-wrap: anywhere; }
#reporteOcupacionBoxes .ocb-cita b { font-weight: 700; }

/* ---------------- Leyenda, vacíos y avisos ---------------- */
#reporteOcupacionBoxes .ocb-leyenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 18px; font-size: 11px; color: var(--ocb-muted); border-top: 1px solid var(--ocb-line); background: var(--ocb-surface); }
#reporteOcupacionBoxes .ocb-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
#reporteOcupacionBoxes .ocb-muestra { width: 15px; height: 15px; border: 1px solid var(--ocb-line-strong); border-radius: 3px; display: inline-block; }
#reporteOcupacionBoxes .ocb-aviso { background: var(--ocb-huerfano); border: 1px solid #f2dfae; border-radius: var(--ocb-radius); padding: 11px 15px; font-size: 12.5px; color: var(--ocb-ink); margin-bottom: 14px; }
#reporteOcupacionBoxes .ocb-vacio { background: var(--ocb-surface); border: 1px dashed var(--ocb-line-strong); border-radius: var(--ocb-radius); padding: 36px 20px; text-align: center; color: var(--ocb-muted); font-size: 12.5px; }
#reporteOcupacionBoxes .ocb-vacio i { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: .45; }

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    #reporteOcupacionBoxes .ocb-filtros { grid-template-columns: 1fr 1fr; }
    #reporteOcupacionBoxes .ocb-kpis { width: 100%; justify-content: flex-start; }
    #reporteOcupacionBoxes .ocb-kpi { text-align: left; }
}
@media (max-width: 575.98px) {
    #reporteOcupacionBoxes .ocb-filtros { grid-template-columns: 1fr; }
    #reporteOcupacionBoxes .ocb-head { padding: 16px; }
}