/* ============================================================
   HUF — Componente: AgendaGrid (.hd-agenda-grid)
   ------------------------------------------------------------
   Vista de la agenda del día por horas: columnas = colaboradores,
   filas = franjas de 30 min, bloques dimensionados por duración.
   Reemplaza la lectura "una tarjeta con lista de citas por
   colaborador" por un eje de tiempo compartido — el hueco libre de
   cada colaborador se ve de un vistazo, sin leer toda la lista.
   Usado por Peluqueria/Agenda/Index y Gimnasio/Agenda/Index a
   través del partial compartido _AgendaGrid.cshtml.
   ============================================================ */

.hd-agenda-grid {
    --hd-agenda-row-h: 32px;
    display: flex;
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-sm);
    overflow-x: auto;
    background: var(--hd-theme-surface);
}

.hd-agenda-grid__horas {
    flex: 0 0 56px;
    border-right: 1px solid var(--hd-color-border);
}

.hd-agenda-grid__horas-header {
    height: 48px;
    border-bottom: 1px solid var(--hd-color-border);
}

.hd-agenda-grid__hora-tick {
    position: relative;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    text-align: right;
    padding-right: var(--hd-space-2);
}

.hd-agenda-grid__hora-tick span {
    position: absolute;
    top: -7px;
    right: var(--hd-space-2);
}

.hd-agenda-grid__cols {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.hd-agenda-grid__col {
    flex: 1 1 0;
    min-width: 160px;
    border-right: 1px solid var(--hd-color-border);
}

.hd-agenda-grid__col:last-child { border-right: none; }

.hd-agenda-grid__col-header {
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 var(--hd-space-2);
    border-bottom: 1px solid var(--hd-color-border);
    font-weight: 600;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-agenda-grid__col-body {
    position: relative;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--hd-agenda-row-h) - 1px),
        var(--hd-color-border) calc(var(--hd-agenda-row-h) - 1px),
        var(--hd-color-border) var(--hd-agenda-row-h)
    );
}

.hd-agenda-grid__fuera {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(148, 163, 184, 0.06),
        rgba(148, 163, 184, 0.06) 6px,
        transparent 6px,
        transparent 12px
    );
}

.hd-agenda-grid__sin-disponibilidad {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--hd-space-2);
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}

.hd-agenda-grid__bloque {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: var(--hd-radius-sm);
    padding: 4px 8px;
    overflow: hidden;
    border-left: 3px solid;
    font-size: var(--hd-text-meta);
    line-height: 1.25;
    cursor: default;
}

.hd-agenda-grid__bloque-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.hd-agenda-grid__bloque-cliente { opacity: .85; }
.hd-agenda-grid__bloque-detalle { opacity: .7; }

.hd-agenda-grid__bloque--estado-pendiente   { background: rgba(245, 158, 11, 0.16); border-color: #f59e0b; color: #fbbf24; }
.hd-agenda-grid__bloque--estado-confirmada  { background: rgba(34, 197, 94, 0.16);  border-color: #22c55e; color: #4ade80; }
.hd-agenda-grid__bloque--estado-completada  { background: rgba(0, 194, 168, 0.16);  border-color: #00c2a8; color: #2dd4bf; }
.hd-agenda-grid__bloque--estado-cancelada,
.hd-agenda-grid__bloque--estado-no_asistio  { background: rgba(239, 68, 68, 0.12);  border-color: #ef4444; color: #f87171; opacity: .7; text-decoration: line-through; }

[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-agenda-grid__bloque--estado-pendiente  { background: rgba(245, 158, 11, 0.16); color: #92400E; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-agenda-grid__bloque--estado-confirmada { background: rgba(34, 197, 94, 0.14);  color: #166534; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-agenda-grid__bloque--estado-completada { background: rgba(0, 194, 168, 0.16);  color: #00695C; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-agenda-grid__bloque--estado-cancelada,
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-agenda-grid__bloque--estado-no_asistio { background: rgba(239, 68, 68, 0.10); color: #B91C1C; }

@media (max-width: 640px) {
    .hd-agenda-grid__col { min-width: 130px; }
}