/* ============================================================================
 * modules/agenda/styles/agenda-week.css
 *
 * Vista Semana del módulo Agenda · CSS autosuficiente · cargado via <link>
 * desde index.html · sin dependencias de agenda.js.
 *
 * ÍNDICE
 *   1. Tokens · estados de cita (compartidos con todo el módulo agenda)
 *   2. Tokens · layout de week (slot, header, now-line, hatch, etc.)
 *   3. Wrap (contenedor general)
 *   4. Header sticky · LUN MAR MIE ... DOM con día + mini-stats
 *   5. Grid body · columnas time + day (líneas horarias via linear-gradient)
 *   6. Cells · slots vacíos, hover, unavailable, drop ok/bad
 *   7. Cards · container (positioned absolute, drag, hover, transitions)
 *   8. Cards · estados (11) — DRY via custom properties locales
 *   9. Cards · en_curso pulse (glow only, respeta prefers-reduced-motion)
 *  10. Now-line · línea + dot + etiqueta de hora actual
 *  11. Context menu (click derecho)
 *  12. Bloquear-horario modal (.agw-bs-*)
 *  13. Responsive · mobile (≤768px)
 *  14. Print
 *
 * REGLAS ABSOLUTAS (auditadas)
 *   · Sin border-left como acento (en ninguna parte)
 *   · Sin halos con rings — pulse usa box-shadow exclusivamente
 *   · Sin emojis
 *   · Solo tokens var(--*); fallbacks únicamente en su definición
 *   · Two weights: 400 + 500 (cero 600/700/800)
 *   · Sentence case en labels visuales
 * ========================================================================== */


/* ============================================================================
 * 1. TOKENS · estados de cita (--ag-c-* / --ag-t-* / --ag-m-*)
 *    Consumidos por el JS via inline style="background: var(--ag-c-ate, ...)"
 *    Definirlos en los 3 temas es la única forma de evitar que el fallback
 *    dark-theme se cuele en light (causaba el "gris-verde muerto" sobre fondo
 *    blanco cuando faltaba la definición para :root).
 * ========================================================================== */

:root {
  --ag-c-res: rgba(245, 158, 11, 0.10);  --ag-t-res: #b45309;  --ag-m-res: #d97706;  /* reservada · amber */
  --ag-c-con: rgba(59, 130, 246, 0.10);  --ag-t-con: #1d4ed8;  --ag-m-con: #2563eb;  /* confirmada · blue */
  --ag-c-pag: rgba(109, 40, 217, 0.10);  --ag-t-pag: #5b21b6;  --ag-m-pag: #6d28d9;  /* pagada · violet */
  --ag-c-ate: rgba(34, 197, 94, 0.12);   --ag-t-ate: #15803d;  --ag-m-ate: #16a34a;  /* atendida · green */
  --ag-c-can: rgba(239, 68, 68, 0.10);   --ag-t-can: #b91c1c;  --ag-m-can: #dc2626;  /* cancelada · red */
  --ag-c-nop: rgba(100, 116, 139, 0.10); --ag-t-nop: #475569;  --ag-m-nop: #64748b;  /* no_presenta · slate */
  --ag-c-esp: rgba(234, 88, 12, 0.10);   --ag-t-esp: #c2410c;  --ag-m-esp: #ea580c;  /* en_espera · orange */
}

[data-theme="dark"] {
  --ag-c-res: rgba(245, 158, 11, 0.18);  --ag-t-res: #fcd34d;  --ag-m-res: #fbbf24;
  --ag-c-con: rgba(59, 130, 246, 0.20);  --ag-t-con: #93c5fd;  --ag-m-con: #60a5fa;
  --ag-c-pag: rgba(167, 139, 250, 0.22); --ag-t-pag: #ddd6fe;  --ag-m-pag: #c4b5fd;
  --ag-c-ate: rgba(34, 197, 94, 0.20);   --ag-t-ate: #86efac;  --ag-m-ate: #4ade80;
  --ag-c-can: rgba(239, 68, 68, 0.20);   --ag-t-can: #fca5a5;  --ag-m-can: #f87171;
  --ag-c-nop: rgba(148, 163, 184, 0.16); --ag-t-nop: #cbd5e1;  --ag-m-nop: #94a3b8;
  --ag-c-esp: rgba(251, 146, 60, 0.20);  --ag-t-esp: #fdba74;  --ag-m-esp: #fb923c;
}

[data-theme="midnight"] {
  --ag-c-res: rgba(251, 191, 36, 0.16);  --ag-t-res: #fde68a;  --ag-m-res: #fcd34d;
  --ag-c-con: rgba(96, 165, 250, 0.18);  --ag-t-con: #bfdbfe;  --ag-m-con: #93c5fd;
  --ag-c-pag: rgba(167, 139, 250, 0.20); --ag-t-pag: #e9d5ff;  --ag-m-pag: #d8b4fe;
  --ag-c-ate: rgba(74, 222, 128, 0.18);  --ag-t-ate: #bbf7d0;  --ag-m-ate: #86efac;
  --ag-c-can: rgba(248, 113, 113, 0.18); --ag-t-can: #fecaca;  --ag-m-can: #fca5a5;
  --ag-c-nop: rgba(148, 163, 184, 0.14); --ag-t-nop: #e2e8f0;  --ag-m-nop: #cbd5e1;
  --ag-c-esp: rgba(253, 186, 116, 0.18); --ag-t-esp: #fed7aa;  --ag-m-esp: #fdba74;
}


/* ============================================================================
 * 2. TOKENS · layout específico de Week (--agw-*)
 *    Una sola fuente de verdad por token; los temas solo redefinen lo que
 *    cambia. Reglas abajo usan var() sin fallback (el fallback vive acá).
 * ========================================================================== */

:root {
  /* Geometría */
  --agw-slot-h:           48px;
  --agw-hours:            12;
  --agw-card-radius:      4px;
  --agw-time-col-w:       50px;

  /* Now-line */
  --agw-now-line:         var(--c-brand);
  --agw-now-lbl-bg:       var(--bg-card);

  /* En curso · glow difuso (NUNCA ring / border) */
  --agw-en-curso-glow:    rgba(34, 197, 94, 0.32);

  /* Patterns / surfaces */
  --agw-hatch:            rgba(100, 116, 139, 0.16);
  --agw-stat-bg:          var(--bg-surface);
  --agw-cell-hover:       rgba(109, 40, 217, 0.04);
  --agw-cell-today:       rgba(109, 40, 217, 0.04);

  /* Drag-drop */
  --agw-drop-ok-bg:       rgba(109, 40, 217, 0.12);
  --agw-drop-bad-bg:      rgba(239, 68, 68, 0.10);

  /* Shadows */
  --agw-ctx-shadow:       0 6px 20px rgba(15, 23, 42, 0.10);
  --agw-card-shadow:      0 2px 8px rgba(15, 23, 42, 0.08);

  /* Header */
  --agw-hdr-bg:           var(--bg-card);
  --agw-hdr-fg-num:       var(--tx-base);
  --agw-hdr-fg-lbl:       var(--tx-muted);
  --agw-hdr-today-bg:     rgba(109, 40, 217, 0.08);
  --agw-hdr-today-tx:     var(--c-brand);

  /* Grid lines */
  --agw-grid-line:        var(--border-soft, rgba(15, 23, 42, 0.04));
  --agw-grid-border:      var(--border-soft, rgba(15, 23, 42, 0.06));
}

[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-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-fg-num:       var(--tx-strong, #f1f5f9);
  --agw-hdr-fg-lbl:       var(--tx-secondary, #cbd5e1);
  --agw-hdr-today-bg:     rgba(109, 40, 217, 0.14);
  --agw-hdr-today-tx:     var(--c-brand-light, #a78bfa);
  --agw-grid-line:        rgba(148, 163, 184, 0.10);
  --agw-grid-border:      rgba(148, 163, 184, 0.12);
}

[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-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-fg-num:       var(--tx-strong, #f8fafc);
  --agw-hdr-fg-lbl:       var(--tx-secondary, #cbd5e1);
  --agw-hdr-today-bg:     rgba(109, 40, 217, 0.16);
  --agw-hdr-today-tx:     var(--c-brand-light, #c4b5fd);
  --agw-grid-line:        rgba(148, 163, 184, 0.08);
  --agw-grid-border:      rgba(148, 163, 184, 0.10);
}


/* ============================================================================
 * 3. WRAP
 * ========================================================================== */

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


/* ============================================================================
 * 4. HEADER STICKY
 * ========================================================================== */

.agw-hdr {
  display: grid;
  grid-template-columns: var(--agw-time-col-w) repeat(7, 1fr);
  background: var(--agw-hdr-bg);
  border-bottom: 0.5px solid var(--agw-grid-border);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

.agw-hdr-time {
  background: var(--agw-hdr-bg);
  border-right: 0.5px solid var(--agw-grid-border);
}

.agw-hdr-day {
  padding: 6px 4px 5px;
  text-align: center;
  border-right: 0.5px solid var(--agw-grid-border);
  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;
  font-weight: 500;
  color: var(--agw-hdr-fg-lbl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.agw-hdr-day-num {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--agw-hdr-fg-num);
  margin-top: 2px;
}

/* Día de hoy · resalte */
.agw-hdr-day--today {
  background: var(--agw-hdr-today-bg);
}

.agw-hdr-day--today :where(.agw-hdr-day-lbl, .agw-hdr-day-num) {
  color: var(--agw-hdr-today-tx);
}

/* Domingo · atenuado */
.agw-hdr-day--dom :where(.agw-hdr-day-lbl, .agw-hdr-day-num) {
  opacity: 0.4;
}

/* Mini-stats por día */
.agw-hdr-day-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  flex-wrap: wrap;
  color: var(--agw-hdr-fg-lbl);
}

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

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

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

.agw-stat--curso {
  color: var(--ag-m-ate);
  background: var(--ag-c-ate);
}

.agw-stat--warn {
  color: var(--ag-m-can);
  background: var(--ag-c-can);
}


/* ============================================================================
 * 5. GRID BODY
 *    Las líneas horarias se pintan via linear-gradient repetido sobre cada
 *    columna · evita crear 12+ elementos DOM por columna.
 * ========================================================================== */

.agw-grid {
  display: grid;
  grid-template-columns: var(--agw-time-col-w) repeat(7, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Columnas (compartido entre time y day) */
.agw-col--time,
.agw-col--day {
  position: relative;
  min-height: calc(var(--agw-hours) * var(--agw-slot-h));
  background-image: linear-gradient(
    to bottom,
    transparent calc(var(--agw-slot-h) - 0.5px),
    var(--agw-grid-line) calc(var(--agw-slot-h) - 0.5px),
    var(--agw-grid-line) var(--agw-slot-h)
  );
  background-size: 100% var(--agw-slot-h);
  background-repeat: repeat-y;
  background-position: top left;
}

.agw-col--time {
  border-right: 0.5px solid var(--agw-grid-border);
}

.agw-col--day {
  border-right: 0.5px solid var(--agw-grid-line);
}

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

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

/* Domingo · hatch superpuesto al grid */
.agw-col--dom {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      var(--agw-hatch) 3px,
      var(--agw-hatch) 4px
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--agw-slot-h) - 0.5px),
      var(--agw-grid-line) calc(var(--agw-slot-h) - 0.5px),
      var(--agw-grid-line) var(--agw-slot-h)
    );
  background-size: auto, 100% var(--agw-slot-h);
  background-repeat: repeat, repeat-y;
}

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

/* Etiquetas de hora en columna izquierda */
.agw-time-cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  font-size: 10px;
  color: var(--tx-muted);
  border-bottom: 0.5px solid var(--agw-grid-line);
  box-sizing: border-box;
}


/* ============================================================================
 * 6. CELLS · slots vacíos
 * ========================================================================== */

.agw-cell {
  position: absolute;
  left: 0;
  right: 0;
  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);
  outline-offset: -2px;
}

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


/* ============================================================================
 * 7. CARDS · container
 *    Position absolute con top/height inline desde el JS según hora · duración.
 *    Los colores se aplican via custom properties locales (sección 8).
 * ========================================================================== */

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

  /* Custom properties locales (se setean por modifier en sección 8) */
  background: var(--card-bg, var(--ag-c-res));
}

.agw-card .agw-card-name { color: var(--card-name, var(--ag-t-res)); }
.agw-card .agw-card-meta { color: var(--card-meta, var(--ag-m-res)); }

.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;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agw-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  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;
}


/* ============================================================================
 * 8. CARDS · estados (11 estados · DRY via custom properties locales)
 *    Cada modifier solo redefine 3 custom properties · la regla base de
 *    sección 7 las aplica. Total: 11 líneas en vez de 33.
 * ========================================================================== */

.agw-card--reservada              { --card-bg: var(--ag-c-res); --card-name: var(--ag-t-res); --card-meta: var(--ag-m-res); }
.agw-card--confirmada             { --card-bg: var(--ag-c-con); --card-name: var(--ag-t-con); --card-meta: var(--ag-m-con); }
.agw-card--pagada                 { --card-bg: var(--ag-c-pag); --card-name: var(--ag-t-pag); --card-meta: var(--ag-m-pag); }
.agw-card--atendida               { --card-bg: var(--ag-c-ate); --card-name: var(--ag-t-ate); --card-meta: var(--ag-m-ate); }
.agw-card--cancelada              { --card-bg: var(--ag-c-can); --card-name: var(--ag-t-can); --card-meta: var(--ag-m-can); }
.agw-card--no_presenta            { --card-bg: var(--ag-c-nop); --card-name: var(--ag-t-nop); --card-meta: var(--ag-m-nop); }
.agw-card--en_espera              { --card-bg: var(--ag-c-esp); --card-name: var(--ag-t-esp); --card-meta: var(--ag-m-esp); }
.agw-card--reagendada             { --card-bg: var(--ag-c-con); --card-name: var(--ag-t-con); --card-meta: var(--ag-m-con); }
.agw-card--adicional              { --card-bg: var(--ag-c-ate); --card-name: var(--ag-t-ate); --card-meta: var(--ag-m-ate); }
.agw-card--no_pagada              { --card-bg: var(--ag-c-can); --card-name: var(--ag-t-can); --card-meta: var(--ag-m-can); }
.agw-card--pendiente_cancelacion  { --card-bg: var(--ag-c-esp); --card-name: var(--ag-t-esp); --card-meta: var(--ag-m-esp); }

/* Cancelada · line-through + opacity reducida */
.agw-card--cancelada {
  text-decoration: line-through;
  opacity: 0.78;
}


/* ============================================================================
 * 9. CARDS · en_curso (atención activa) · pulse difuso, glow only
 *    NUNCA con ring solid o border (regla absoluta del sistema).
 * ========================================================================== */

.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; }
}


/* ============================================================================
 * 10. NOW-LINE · indicador de hora actual
 * ========================================================================== */

.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;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--agw-now-line);
  background: var(--agw-now-lbl-bg);
}


/* ============================================================================
 * 11. CONTEXT MENU
 * ========================================================================== */

.agw-ctx {
  position: fixed;
  min-width: 180px;
  padding: 4px 0;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--agw-ctx-shadow);
  font-size: 12px;
  user-select: none;
  z-index: 9999;
}

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

.agw-ctx-item:hover {
  background: var(--bg-hover, var(--surf));
}

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


/* ============================================================================
 * 12. BLOQUEAR-HORARIO MODAL
 * ========================================================================== */

.agw-bs-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

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

.agw-bs-field input {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
  color: var(--tx-base);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

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

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

.agw-bs-ok,
.agw-bs-cancel {
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, background 0.12s;
}

.agw-bs-ok {
  flex: 1;
  border: none;
  background: var(--c-brand);
  color: #fff;
}

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

.agw-bs-cancel {
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--tx-muted);
  font-weight: 400;
}

.agw-bs-cancel:hover {
  background: var(--bg-hover, var(--surf));
}


/* ============================================================================
 * 13. RESPONSIVE · mobile (≤768px)
 * ========================================================================== */

@media (max-width: 768px) {
  :root { --agw-time-col-w: 38px; }

  .agw-hdr-day { padding: 4px 2px; }
  .agw-hdr-day-num { font-size: 14px; }
  .agw-hdr-day-stats { display: none; }

  .agw-time-cell { font-size: 9px; }
  .agw-card { padding: 2px 4px; }
  .agw-card-name { font-size: 10px; }
  .agw-card-meta { font-size: 9px; }
}


/* ============================================================================
 * 14. PRINT
 * ========================================================================== */

@media print {
  :where(.agw-col--day, .agw-col--time, .agw-hdr-day) { background: #fff !important; }
  .agw-card    { box-shadow: none !important; border: 1px solid #ccc !important; }
  .agw-now-line,
  .agw-cell--drop-ok,
  .agw-cell--drop-bad,
  .agw-ctx,
  .agw-bs-wrap { display: none !important; }
}