/*
 * agenda.css — estilos dedicados de agenda.html
 * Movido del bloque <style> inline (Tier D refactor 2026-05-26).
 * Mantenibilidad: 661 lineas extraidas del HTML.
 */

    /* ====================================================
       AGENDA V2 — Ola 15-B (Investig. DrApp + ui-ux-pro-max)
       Layout: timeline día · grilla semana · calendario mes
       Drawer derecho con detalle/acciones · banner sala live
       ==================================================== */

    .agenda-shell {
      display: grid;
      /* 200px: aside compacto — prioridad visual a la grilla de turnos */
      grid-template-columns: 200px 1fr;
      gap: var(--h-space-3);
      align-items: start;
      min-height: 0;
    }
    @media (max-width: 1100px) {
      .agenda-shell { grid-template-columns: 1fr; }
      .agenda-aside { display: none; }
    }

    /* Aside interno: lista de médicos del centro */
    .agenda-aside {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-3);
      position: sticky;
      top: var(--h-space-4);
    }
    .agenda-aside-title {
      font-size: var(--h-text-xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--h-muted);
      font-weight: 600;
      padding: 0 var(--h-space-2);
      margin-bottom: var(--h-space-2);
    }
    .medico-item {
      display: flex;
      align-items: center;
      gap: var(--h-space-2);
      padding: var(--h-space-2);
      border-radius: var(--h-radius-sm);
      cursor: pointer;
      font-size: var(--h-text-sm);
      color: var(--h-ink);
      transition: background var(--h-transition-fast);
      width: 100%;
      background: transparent;
      border: none;
      text-align: left;
    }
    .medico-item:hover { background: var(--h-nest); }
    .medico-item.is-active {
      background: var(--h-brand-primary-soft);
      color: var(--h-brand-primary);
      font-weight: 600;
    }
    .medico-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--h-brand-primary);
      flex-shrink: 0;
    }
    .medico-count {
      margin-left: auto;
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      font-variant-numeric: tabular-nums;
    }
    .medico-item.is-active .medico-count { color: var(--h-brand-primary); }

    /* Banner sala de espera */
    .sala-banner {
      background: var(--h-warn-soft);
      border: 1px solid var(--h-warn);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-3) var(--h-space-4);
      margin-bottom: var(--h-space-4);
      display: flex;
      align-items: center;
      gap: var(--h-space-3);
      cursor: pointer;
      transition: background var(--h-transition-fast);
    }
    .sala-banner:hover { background: var(--h-warn-soft); filter: brightness(0.98); }
    .sala-banner.is-empty {
      background: var(--h-nest);
      border-color: var(--h-hairline);
    }
    .sala-banner-icon {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--h-warn); color: white;
      display: flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: var(--h-text-md);
      flex-shrink: 0;
    }
    .sala-banner.is-empty .sala-banner-icon {
      background: var(--h-muted);
    }
    .sala-banner-text { flex: 1; }
    .sala-banner-title { font-weight: 600; font-size: var(--h-text-md); }
    .sala-banner-meta {
      font-size: var(--h-text-xs);
      color: var(--h-ink-soft);
    }
    .sala-list {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-3);
      margin-bottom: var(--h-space-4);
    }
    .sala-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: var(--h-space-3);
      align-items: center;
      padding: var(--h-space-2);
      border-radius: var(--h-radius-sm);
    }
    .sala-row + .sala-row { border-top: 1px solid var(--h-hairline); }
    .sala-espera-badge {
      padding: 2px 8px;
      border-radius: var(--h-radius-pill);
      font-size: var(--h-text-xs);
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }
    .sala-espera-badge.is-ok    { background: var(--h-ok-soft);    color: var(--h-ok); }
    .sala-espera-badge.is-warn  { background: var(--h-warn-soft);  color: var(--h-warn); }
    .sala-espera-badge.is-danger{ background: var(--h-danger-soft);color: var(--h-danger); }

    /* Toolbar pegada arriba */
    .agenda-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--h-space-2);
      padding: var(--h-space-3);
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      margin-bottom: var(--h-space-4);
    }
    .agenda-toolbar .toolbar-spacer { flex: 1; }

    /* Vista toggle Día/Semana/Mes */
    .vista-toggle {
      display: inline-flex;
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      overflow: hidden;
    }
    .vista-toggle button {
      padding: var(--h-space-2) var(--h-space-3);
      background: var(--h-surface);
      border: none;
      cursor: pointer;
      font-size: var(--h-text-sm);
      color: var(--h-ink);
      transition: all var(--h-transition-fast);
    }
    .vista-toggle button:hover { background: var(--h-nest); }
    .vista-toggle button.is-active {
      background: var(--h-brand-primary);
      color: white;
      font-weight: 600;
    }

    /* ===========================
       VISTA DÍA — Timeline grid
       =========================== */
    .timeline-wrap {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      overflow: hidden;
    }
    .timeline-grid {
      display: grid;
      grid-template-columns: 64px 1fr;
      min-height: 600px;
    }
    .timeline-col-hours {
      border-right: 1px solid var(--h-hairline);
      background: var(--h-nest);
    }
    .timeline-hour-label {
      height: 60px;
      padding: var(--h-space-1) var(--h-space-2);
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      font-variant-numeric: tabular-nums;
      border-bottom: 1px solid var(--h-hairline);
    }
    .timeline-medicos {
      display: grid;
      overflow-x: auto;
      grid-auto-flow: column;
      grid-auto-columns: minmax(220px, 1fr);
    }
    .timeline-medico-col {
      border-right: 1px solid var(--h-hairline);
      position: relative;
      min-width: 220px;
    }
    .timeline-medico-col:last-child { border-right: none; }
    .timeline-medico-header {
      padding: var(--h-space-3);
      background: var(--h-surface);
      border-bottom: 1px solid var(--h-hairline);
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .timeline-medico-nombre {
      font-weight: 600;
      font-size: var(--h-text-sm);
      color: var(--h-ink);
    }
    .timeline-medico-meta {
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      margin-top: 2px;
    }
    .timeline-slots {
      position: relative;
      height: calc(60px * var(--horas, 14));
    }
    .timeline-slot-line {
      height: 60px;
      border-bottom: 1px solid var(--h-hairline);
    }
    .timeline-slot-line.is-half {
      border-bottom-style: dashed;
      border-bottom-color: var(--h-hairline);
    }

    /* Bloque turno */
    .turno-bloque {
      position: absolute;
      left: var(--h-space-1);
      right: var(--h-space-1);
      background: var(--h-info-soft);
      border-left: 3px solid var(--h-info);
      border-radius: var(--h-radius-sm);
      padding: var(--h-space-2);
      cursor: pointer;
      font-size: var(--h-text-xs);
      overflow: hidden;
      transition: all var(--h-transition-fast);
      z-index: 1;
    }
    .turno-bloque:hover {
      box-shadow: var(--h-shadow-md);
      transform: translateY(-1px);
      z-index: 3;
    }
    .turno-bloque.is-selected {
      box-shadow: 0 0 0 2px var(--h-brand-primary);
      z-index: 4;
    }
    .turno-bloque.estado-programado { background: var(--h-info-soft);   border-left-color: var(--h-info); }
    .turno-bloque.estado-confirmado { background: var(--h-ok-soft);     border-left-color: var(--h-ok); }
    .turno-bloque.estado-en_sala    { background: var(--h-warn-soft);   border-left-color: var(--h-warn); }
    .turno-bloque.estado-atendido   { background: var(--h-brand-primary-soft); border-left-color: var(--h-brand-primary); }
    .turno-bloque.estado-no_show    { background: var(--h-danger-soft); border-left-color: var(--h-danger); opacity: 0.7; }
    .turno-bloque.estado-cancelado  { background: var(--h-nest); border-left-color: var(--h-muted); opacity: 0.5; text-decoration: line-through; }
    /* Jerarquía pedida por el centro: el NOMBRE del paciente manda en la
       celda; la hora pasa a dato secundario (la posición vertical ya la da). */
    .turno-paciente {
      font-weight: 600;
      color: var(--h-ink);
      font-size: var(--h-text-sm);
      line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .turno-hora-chip {
      font-family: var(--h-font-mono);
      font-weight: 500;
      font-size: var(--h-text-xs);
      color: var(--h-ink-soft);
      display: inline;
      margin-right: var(--h-space-1);
    }
    .turno-motivo {
      color: var(--h-ink-soft);
      display: inline;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Línea "ahora" */
    .now-indicator {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: var(--h-danger);
      z-index: 5;
      pointer-events: none;
    }
    .now-indicator::before {
      content: "";
      position: absolute;
      left: -6px; top: -4px;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--h-danger);
    }

    /* ===========================
       VISTA SEMANA — Grid 7 cols
       =========================== */
    .semana-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: var(--h-space-2);
    }
    .semana-dia {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-3);
      min-height: 280px;
      transition: all var(--h-transition-fast);
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }
    .semana-dia:hover { border-color: var(--h-brand-primary); }
    .semana-dia.is-hoy {
      border-color: var(--h-brand-primary);
      background: var(--h-brand-primary-soft);
    }
    .semana-dia-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: var(--h-space-2);
    }
    .semana-dia-nombre {
      font-size: var(--h-text-xs);
      text-transform: uppercase;
      color: var(--h-muted);
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .semana-dia-numero {
      font-size: var(--h-text-xl);
      font-weight: 600;
      color: var(--h-ink);
      font-variant-numeric: tabular-nums;
    }
    .semana-dia.is-hoy .semana-dia-numero { color: var(--h-brand-primary); }
    .semana-dia-turnos {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: var(--h-space-2);
      flex: 1;
      overflow: hidden;
    }
    .semana-mini-turno {
      font-size: var(--h-text-xs);
      padding: 4px 6px;
      border-radius: var(--h-radius-sm);
      border-left: 2px solid var(--h-info);
      background: var(--h-info-soft);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .semana-mini-turno.estado-confirmado { background: var(--h-ok-soft); border-left-color: var(--h-ok); }
    .semana-mini-turno.estado-en_sala    { background: var(--h-warn-soft); border-left-color: var(--h-warn); }
    .semana-mini-turno.estado-atendido   { background: var(--h-brand-primary-soft); border-left-color: var(--h-brand-primary); }
    .semana-mini-turno.estado-no_show    { opacity: 0.6; }
    .semana-mini-turno.estado-cancelado  { opacity: 0.4; text-decoration: line-through; }
    .semana-mini-hora {
      font-family: var(--h-font-mono);
      font-weight: 600;
      color: var(--h-ink);
    }
    .semana-mini-mas {
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      text-align: center;
      padding: var(--h-space-1);
    }
    .semana-dia-footer {
      margin-top: var(--h-space-2);
      padding-top: var(--h-space-2);
      border-top: 1px solid var(--h-hairline);
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .semana-densidad-bar {
      height: 4px;
      background: var(--h-nest);
      border-radius: 2px;
      overflow: hidden;
      flex: 1;
      margin-left: var(--h-space-2);
    }
    .semana-densidad-fill {
      height: 100%;
      background: var(--h-brand-primary);
      transition: width var(--h-transition-base);
    }

    /* ===========================
       VISTA MES — Calendario
       =========================== */
    .mes-wrap {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      overflow: hidden;
    }
    .mes-header-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      background: var(--h-nest);
      border-bottom: 1px solid var(--h-hairline);
    }
    .mes-header-cell {
      padding: var(--h-space-2);
      text-align: center;
      font-size: var(--h-text-xs);
      font-weight: 600;
      text-transform: uppercase;
      color: var(--h-muted);
      letter-spacing: 0.05em;
    }
    .mes-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }
    .mes-celda {
      min-height: 90px;
      padding: var(--h-space-2);
      border-right: 1px solid var(--h-hairline);
      border-bottom: 1px solid var(--h-hairline);
      cursor: pointer;
      transition: background var(--h-transition-fast);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mes-celda:nth-child(7n) { border-right: none; }
    .mes-celda:hover { background: var(--h-nest); }
    .mes-celda.is-otro-mes { color: var(--h-faint); background: var(--h-bg); }
    .mes-celda.is-hoy { background: var(--h-brand-primary-soft); }
    .mes-celda-numero {
      font-size: var(--h-text-md);
      font-weight: 500;
      color: var(--h-ink);
      font-variant-numeric: tabular-nums;
    }
    .mes-celda.is-otro-mes .mes-celda-numero { color: var(--h-faint); }
    .mes-celda.is-hoy .mes-celda-numero {
      color: var(--h-brand-primary);
      font-weight: 700;
    }
    .mes-celda-count {
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      font-variant-numeric: tabular-nums;
    }
    .mes-celda-dots {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
      margin-top: auto;
    }
    .mes-celda-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .mes-celda-dot.estado-programado { background: var(--h-info); }
    .mes-celda-dot.estado-confirmado { background: var(--h-ok); }
    .mes-celda-dot.estado-en_sala    { background: var(--h-warn); }
    .mes-celda-dot.estado-atendido   { background: var(--h-brand-primary); }
    .mes-celda-dot.estado-no_show    { background: var(--h-danger); }
    .mes-celda-dot.estado-cancelado  { background: var(--h-muted); }

    /* ===========================
       DRAWER DERECHO
       =========================== */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.20);
      z-index: var(--h-z-modal);
      animation: fadein 100ms ease;
    }
    .drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 420px;
      max-width: 90vw;
      background: var(--h-surface);
      box-shadow: var(--h-shadow-lg);
      z-index: calc(var(--h-z-modal) + 1);
      display: flex;
      flex-direction: column;
      animation: slidein 150ms ease;
    }
    @keyframes fadein  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .drawer-header {
      padding: var(--h-space-4);
      border-bottom: 1px solid var(--h-hairline);
      display: flex;
      justify-content: space-between;
      align-items: start;
    }
    .drawer-title { font-size: var(--h-text-lg); font-weight: 600; }
    .drawer-close {
      background: transparent;
      border: none;
      font-size: var(--h-text-xl);
      cursor: pointer;
      color: var(--h-muted);
      padding: 4px;
      line-height: 1;
    }
    .drawer-close:hover { color: var(--h-ink); }
    .drawer-body {
      padding: var(--h-space-4);
      flex: 1;
      overflow-y: auto;
    }
    .drawer-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: var(--h-space-2);
      padding: var(--h-space-2) 0;
      border-bottom: 1px solid var(--h-hairline);
    }
    .drawer-row-label {
      font-size: var(--h-text-xs);
      text-transform: uppercase;
      color: var(--h-muted);
      font-weight: 600;
      letter-spacing: 0.05em;
      padding-top: 2px;
    }
    .drawer-row-value {
      font-size: var(--h-text-sm);
      color: var(--h-ink);
    }
    .drawer-footer {
      padding: var(--h-space-3) var(--h-space-4);
      border-top: 1px solid var(--h-hairline);
      display: flex;
      flex-wrap: wrap;
      gap: var(--h-space-2);
    }
    .drawer-footer .btn { flex: 1; min-width: 110px; }

    /* Empty state */
    .agenda-empty {
      padding: var(--h-space-10) var(--h-space-5);
      text-align: center;
      color: var(--h-muted);
      background: var(--h-surface);
      border: 1px dashed var(--h-hairline);
      border-radius: var(--h-radius-md);
    }
    .agenda-empty-title {
      font-size: var(--h-text-lg);
      font-weight: 600;
      color: var(--h-ink);
      margin-bottom: var(--h-space-1);
    }

    /* Atajos */
    .kbd {
      font-family: var(--h-font-mono);
      font-size: 10px;
      padding: 1px 5px;
      background: var(--h-nest);
      border: 1px solid var(--h-hairline);
      border-radius: 3px;
      color: var(--h-ink-soft);
    }

    /* Estado dot inline (drawer + chips) */
    .estado-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      vertical-align: middle;
    }
    .estado-dot.estado-programado { background: var(--h-info); }
    .estado-dot.estado-confirmado { background: var(--h-ok); }
    .estado-dot.estado-en_sala    { background: var(--h-warn); }
    .estado-dot.estado-atendido   { background: var(--h-brand-primary); }
    .estado-dot.estado-no_show    { background: var(--h-danger); }
    .estado-dot.estado-cancelado  { background: var(--h-muted); }

    /* UX PR-B: estado-glyph dentro del turno-bloque
       Complementa el color con un ícono SVG para no depender SOLO del color
       (regla a11y "color-not-only"). Se posiciona arriba a la derecha. */
    .estado-glyph {
      position: absolute;
      top: 4px; right: 4px;
      width: 12px; height: 12px;
      opacity: 0.7;
      pointer-events: none;
    }
    .estado-glyph svg { width: 100%; height: 100%; display: block; }

    /* UX PR-B: hover sin layout shift (sin transform).
       El original usaba translateY(-1px) que causa micro-jitter en grilla
       densa. Reemplazado por box-shadow + brightness. */
    .turno-bloque:hover {
      box-shadow: var(--h-shadow-md);
      filter: brightness(1.02);
    }
    /* Sobrescribir la regla previa que usaba transform */
    .turno-bloque:hover {
      transform: none;
    }

    /* UX PR-B: utility classes (reemplazo de style="max-width:..." inline) */
    .w-date { max-width: 170px; }
    .w-select-md { max-width: 200px; }
    .w-select-lg { max-width: 240px; }
    .ml-2 { margin-left: var(--h-space-2); }

    /* UX PR-B: loading skeletons. Muestran que algo está cargando
       en lugar de "no hay nada" durante 1-3s de red. */
    @keyframes skel-shimmer {
      0%   { background-position: -200px 0; }
      100% { background-position: calc(200px + 100%) 0; }
    }
    .skel {
      background: linear-gradient(90deg,
        var(--h-nest) 0%,
        var(--h-surface) 50%,
        var(--h-nest) 100%);
      background-size: 200px 100%;
      background-repeat: no-repeat;
      animation: skel-shimmer 1.4s ease-in-out infinite;
      border-radius: var(--h-radius-sm);
    }
    .skel-line { height: 12px; margin: 6px 0; }
    .skel-block { height: 56px; margin: 8px 0; }
    @media (prefers-reduced-motion: reduce) {
      .skel { animation: none; }
    }

    /* UX PR-C: chip "centro activo" en page-header */
    .centro-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      background: var(--h-nest);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-pill);
      font-size: var(--h-text-xs);
      color: var(--h-ink-soft);
      font-weight: 500;
    }
    .centro-chip svg {
      width: 12px; height: 12px;
      color: var(--h-brand-primary);
    }