/* ────────────────────────────────────────────────────────────────────
 * agenda-week.css — estilos de la vista semanal de Agenda
 *
 * Sprint AGENDA-WEEK-REWRITE · 2026-05-14
 *
 * Tokens REUTILIZADOS (definidos en agenda.css):
 *   --ag-c-*   backgrounds de estado (con 3 modos)
 *   --ag-t-*   text colors de estado
 *   --ag-m-*   meta colors de estado
 *
 * Tokens PROPIOS de week (con :root + [data-theme="dark"] + [data-theme="midnight"]):
 *   --agw-slot-h           alto de slot 1h
 *   --agw-now-line         linea hora actual
 *   --agw-en-curso-glow    pulse de en_curso (glow difuso · NUNCA ring/border)
 *   --agw-hatch            achurado de slot no disponible
 *   --agw-card-radius      radio de cards
 *   --agw-stat-bg          background de mini-stats por dia
 *   --agw-cell-hover       hover de celdas vacias
 *   --agw-cell-today       background suave de columna del dia actual
 *   --agw-now-lbl-bg       background de la etiqueta de la now-line
 *   --agw-drop-ok-bg       background del slot valido para drop
 *   --agw-drop-bad-bg      background del slot invalido para drop
 *   --agw-ctx-shadow       sombra del context menu
 *   --agw-card-shadow      sombra al hover de card
 *
 * REGLAS LUZOkit:
 *   - NO border-left / NO ring solido en cards · solo glow difuso (box-shadow)
 *   - Tokens del sistema solo · cero hex / rgba hardcoded en reglas
 *   - Sentence case en labels
 *   - Two weights only: 400 / 500
 * ──────────────────────────────────────────────────────────────────── */


/* ──────────────────────────── Tokens · light (default) ─────────────── */
:root {
  --agw-slot-h: 48px;
  --agw-now-line: var(--c-brand, #6d28d9);
  --agw-en-curso-glow: rgba(34, 197, 94, 0.32);
  --agw-hatch: rgba(100, 116, 139, 0.16);
  --agw-card-radius: 4px;
  --agw-stat-bg: var(--bg-surface, rgba(15, 23, 42, 0.04));
  --agw-cell-hover: rgba(109, 40, 217, 0.04);
  --agw-cell-today: rgba(109, 40, 217, 0.04);
  --agw-now-lbl-bg: var(--bg-card, #fff);
  --agw-drop-ok-bg: rgba(109, 40, 217, 0.12);
  --agw-drop-bad-bg: rgba(239, 68, 68, 0.10);
  --agw-ctx-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
  --agw-card-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --agw-hdr-today-bg: rgba(109, 40, 217, 0.08);
  --agw-hdr-today-tx: var(--c-brand, #6d28d9);
}

/* ──────────────────────────── Tokens · dark ────────────────────────── */
[data-theme="dark"] {
  --agw-en-curso-glow: rgba(74, 222, 128, 0.42);
  --agw-hatch: rgba(148, 163, 184, 0.10);
  --agw-stat-bg: rgba(255, 255, 255, 0.04);
  --agw-cell-hover: rgba(109, 40, 217, 0.10);
  --agw-cell-today: rgba(109, 40, 217, 0.07);
  --agw-now-lbl-bg: var(--bg-card, #1e293b);
  --agw-drop-ok-bg: rgba(109, 40, 217, 0.20);
  --agw-drop-bad-bg: rgba(239, 68, 68, 0.18);
  --agw-ctx-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  --agw-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --agw-hdr-today-bg: rgba(109, 40, 217, 0.14);
  --agw-hdr-today-tx: #c4b5fd;
}

/* ──────────────────────────── Tokens · midnight ────────────────────── */
[data-theme="midnight"] {
  --agw-en-curso-glow: rgba(74, 222, 128, 0.48);
  --agw-hatch: rgba(148, 163, 184, 0.08);
  --agw-stat-bg: rgba(255, 255, 255, 0.03);
  --agw-cell-hover: rgba(109, 40, 217, 0.10);
  --agw-cell-today: rgba(109, 40, 217, 0.07);
  --agw-now-lbl-bg: var(--bg-card, #0f172a);
  --agw-drop-ok-bg: rgba(109, 40, 217, 0.22);
  --agw-drop-bad-bg: rgba(239, 68, 68, 0.20);
  --agw-ctx-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  --agw-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --agw-hdr-today-bg: rgba(109, 40, 217, 0.16);
  --agw-hdr-today-tx: #c4b5fd;
}


/* ──────────────────────────── Wrapper ──────────────────────────────── */
.agw-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}


/* ──────────────────────────── Header sticky ────────────────────────── */
.agw-hdr {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  background: var(--bg-card, #fff);
  border-bottom: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.08));
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

.agw-hdr-time {
  background: var(--bg-card, #fff);
  border-right: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.08));
}

.agw-hdr-day {
  padding: 6px 4px 5px;
  text-align: center;
  border-right: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.06));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.agw-hdr-day:last-child {
  border-right: none;
}

.agw-hdr-day-lbl {
  font-size: 10px;
  color: var(--tx-muted, #64748b);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.agw-hdr-day-num {
  display: block;
  font-size: 17px;
  color: var(--tx-base, #0f172a);
  font-weight: 500;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.agw-hdr-day-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  flex-wrap: wrap;
}

.agw-stat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--tx-muted, #64748b);
  background: var(--agw-stat-bg);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.3;
}

.agw-stat svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.agw-stat--empty {
  opacity: 0.4;
}

.agw-stat--curso {
  color: var(--ag-m-ate, #4ade80);
  background: var(--ag-c-ate, rgba(34, 197, 94, 0.16));
}

.agw-stat--warn {
  color: var(--ag-m-can, #f87171);
  background: var(--ag-c-can, rgba(239, 68, 68, 0.16));
}

.agw-hdr-day--dom .agw-hdr-day-lbl,
.agw-hdr-day--dom .agw-hdr-day-num {
  opacity: 0.4;
}

.agw-hdr-day--today {
  background: var(--agw-hdr-today-bg);
}

.agw-hdr-day--today .agw-hdr-day-num {
  color: var(--agw-hdr-today-tx);
  font-weight: 500;
}


/* ──────────────────────────── Grid body ────────────────────────────── */
.agw-grid {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.agw-col--time {
  border-right: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.06));
  position: relative;
}

.agw-time-cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  font-size: 10px;
  color: var(--tx-muted, #64748b);
  border-bottom: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.04));
  box-sizing: border-box;
}

.agw-col--day {
  position: relative;
  border-right: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.04));
}

.agw-col--day:last-child {
  border-right: none;
}

.agw-col--today {
  background: var(--agw-cell-today);
}

.agw-col--dom {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    var(--agw-hatch) 3px,
    var(--agw-hatch) 4px
  );
}

.agw-col--dom .agw-cell {
  background: transparent;
  pointer-events: none;
  cursor: default;
}


/* ──────────────────────────── Cells (background grid) ──────────────── */
.agw-cell {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 0.5px solid var(--border-soft, rgba(15, 23, 42, 0.04));
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.1s;
  z-index: 1;
}

.agw-cell:hover {
  background: var(--agw-cell-hover);
}

.agw-cell--unavail {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    var(--agw-hatch) 3px,
    var(--agw-hatch) 4px
  );
  pointer-events: none;
  cursor: default;
}

.agw-cell--drop-ok {
  background: var(--agw-drop-ok-bg);
  outline: 1.5px dashed var(--c-brand, #6d28d9);
  outline-offset: -2px;
}

.agw-cell--drop-bad {
  background: var(--agw-drop-bad-bg);
  outline: 1.5px dashed var(--ag-m-can, #f87171);
  outline-offset: -2px;
}


/* ──────────────────────────── Cards (absolute) ─────────────────────── */
.agw-card {
  position: absolute;
  border-radius: var(--agw-card-radius);
  padding: 3px 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 2;
  min-height: 22px;
  transition: filter 0.15s, box-shadow 0.15s;
}

.agw-card:hover {
  filter: brightness(1.10);
  z-index: 3;
  box-shadow: var(--agw-card-shadow);
}

.agw-card[draggable="true"] {
  cursor: grab;
}

.agw-card[draggable="true"]:active {
  cursor: grabbing;
}

.agw-card--dragging {
  opacity: 0.5;
  z-index: 10;
}

.agw-card-name {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.agw-card-meta {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}

.agw-card-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.agw-card-meta svg {
  flex-shrink: 0;
}

.agw-card-curso {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-weight: 500;
  flex-shrink: 0;
}


/* ──────────────────────────── Card · estado colors ─────────────────── */
.agw-card--reservada   { background: var(--ag-c-res, rgba(245, 158, 11, 0.16)); }
.agw-card--reservada   .agw-card-name { color: var(--ag-t-res, #fcd34d); }
.agw-card--reservada   .agw-card-meta { color: var(--ag-m-res, #fbbf24); }

.agw-card--confirmada  { background: var(--ag-c-con, rgba(59, 130, 246, 0.16)); }
.agw-card--confirmada  .agw-card-name { color: var(--ag-t-con, #93c5fd); }
.agw-card--confirmada  .agw-card-meta { color: var(--ag-m-con, #60a5fa); }

.agw-card--pagada      { background: var(--ag-c-pag, rgba(109, 40, 217, 0.16)); }
.agw-card--pagada      .agw-card-name { color: var(--ag-t-pag, #c4b5fd); }
.agw-card--pagada      .agw-card-meta { color: var(--ag-m-pag, #a78bfa); }

.agw-card--atendida    { background: var(--ag-c-ate, rgba(34, 197, 94, 0.16)); }
.agw-card--atendida    .agw-card-name { color: var(--ag-t-ate, #86efac); }
.agw-card--atendida    .agw-card-meta { color: var(--ag-m-ate, #4ade80); }

.agw-card--cancelada   { background: var(--ag-c-can, rgba(239, 68, 68, 0.16)); }
.agw-card--cancelada   .agw-card-name { color: var(--ag-t-can, #fca5a5); }
.agw-card--cancelada   .agw-card-meta { color: var(--ag-m-can, #f87171); }

.agw-card--no_presenta { background: var(--ag-c-nop, rgba(100, 116, 139, 0.14)); }
.agw-card--no_presenta .agw-card-name { color: var(--ag-t-nop, #94a3b8); }
.agw-card--no_presenta .agw-card-meta { color: var(--ag-m-nop, #64748b); }

.agw-card--en_espera   { background: var(--ag-c-esp, rgba(234, 88, 12, 0.16)); }
.agw-card--en_espera   .agw-card-name { color: var(--ag-t-esp, #fdba74); }
.agw-card--en_espera   .agw-card-meta { color: var(--ag-m-esp, #fb923c); }

.agw-card--reagendada  { background: var(--ag-c-con, rgba(59, 130, 246, 0.14)); }
.agw-card--reagendada  .agw-card-name { color: var(--ag-t-con, #93c5fd); }
.agw-card--reagendada  .agw-card-meta { color: var(--ag-m-con, #60a5fa); }

.agw-card--adicional   { background: var(--ag-c-ate, rgba(34, 197, 94, 0.14)); }
.agw-card--adicional   .agw-card-name { color: var(--ag-t-ate, #86efac); }
.agw-card--adicional   .agw-card-meta { color: var(--ag-m-ate, #4ade80); }

.agw-card--no_pagada   { background: var(--ag-c-can, rgba(239, 68, 68, 0.16)); }
.agw-card--no_pagada   .agw-card-name { color: var(--ag-t-can, #fca5a5); }
.agw-card--no_pagada   .agw-card-meta { color: var(--ag-m-can, #f87171); }

.agw-card--pendiente_cancelacion { background: var(--ag-c-esp, rgba(234, 88, 12, 0.14)); }
.agw-card--pendiente_cancelacion .agw-card-name { color: var(--ag-t-esp, #fdba74); }
.agw-card--pendiente_cancelacion .agw-card-meta { color: var(--ag-m-esp, #fb923c); }


/* ──────────────────────────── En curso · pulse (glow only) ─────────── */
.agw-card--en-curso {
  box-shadow: 0 0 0 2px var(--agw-en-curso-glow);
  animation: agw-pulse 2.4s ease-in-out infinite;
}

@keyframes agw-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--agw-en-curso-glow); }
  50%      { box-shadow: 0 0 0 6px var(--agw-en-curso-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .agw-card--en-curso { animation: none; }
}


/* ──────────────────────────── Now-line ─────────────────────────────── */
.agw-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--agw-now-line);
  z-index: 4;
  pointer-events: none;
  transition: top 0.3s ease;
}

.agw-now-dot {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agw-now-line);
}

.agw-now-lbl {
  position: absolute;
  left: 8px;
  top: -7px;
  font-size: 9px;
  font-weight: 500;
  color: var(--agw-now-line);
  background: var(--agw-now-lbl-bg);
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.3;
}


/* ──────────────────────────── Context menu ─────────────────────────── */
.agw-ctx {
  position: fixed;
  background: var(--bg-card, #fff);
  border: 0.5px solid var(--border, rgba(15, 23, 42, 0.10));
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  font-size: 12px;
  z-index: 9999;
  box-shadow: var(--agw-ctx-shadow);
  user-select: none;
}

.agw-ctx-item {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-base, #0f172a);
  cursor: pointer;
  white-space: nowrap;
}

.agw-ctx-item:hover {
  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
}

.agw-ctx-item svg {
  flex-shrink: 0;
}


/* ──────────────────────────── Bloquear horario modal ───────────────── */
.agw-bs-wrap {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agw-bs-field label {
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-muted, #64748b);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agw-bs-field input {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--border, rgba(15, 23, 42, 0.10));
  border-radius: 7px;
  background: var(--bg-surface, #f8fafc);
  color: var(--tx-base, #0f172a);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.agw-bs-field input:focus {
  outline: 1.5px solid var(--c-brand, #6d28d9);
  outline-offset: -1px;
  border-color: var(--c-brand, #6d28d9);
}

.agw-bs-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.agw-bs-ok {
  flex: 1;
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--c-brand, #6d28d9);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.agw-bs-ok:hover { opacity: 0.85; }

.agw-bs-ok:disabled {
  opacity: 0.5;
  cursor: wait;
}

.agw-bs-cancel {
  padding: 9px 16px;
  border-radius: 7px;
  background: transparent;
  border: 0.5px solid var(--border, rgba(15, 23, 42, 0.10));
  color: var(--tx-muted, #64748b);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.agw-bs-cancel:hover {
  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
}