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

    /* ============================================================
       RECEPCIÓN V2 — Bento grid + tarjetas + sala live (Ola 16-A)
       ============================================================ */

    .rec-hero {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--h-space-4);
      align-items: center;
      padding: var(--h-space-3) 0 var(--h-space-4);
    }
    .rec-hero-title { font-size: var(--h-text-2xl); font-weight: 600; color: var(--h-ink); }
    .rec-hero-meta { color: var(--h-muted); font-size: var(--h-text-sm); margin-top: 4px; }
    .rec-hero-meta strong { color: var(--h-ink); font-weight: 600; }

    /* Audit 2026-05-20 §2.1 CRITICO — search-first hero.
       Antes: search en franja delgada, mismo peso que el resto.
       Ahora: pill gigante centrado tipo Spotlight/Linear (font 20px+).
       Auto-focus en init + atajo "/" como industry standard. */
    .rec-search-wrap {
      position: relative;
      max-width: 720px;
      margin: 0 auto var(--h-space-6);
      padding: var(--h-space-2) 0;
    }
    .rec-search-row {
      position: relative;
      display: flex;
      align-items: center;
    }
    .rec-search-icon {
      position: absolute;
      left: 20px;
      width: 22px; height: 22px;
      color: var(--h-muted);
      pointer-events: none;
      z-index: 2;
    }
    .rec-search-kbd {
      position: absolute;
      right: 16px;
      display: flex; gap: 4px;
      pointer-events: none;
    }
    .rec-search-input {
      width: 100%;
      font-size: 18px;
      font-weight: var(--h-weight-medium);
      padding: 18px 80px 18px 56px;
      height: auto;
      border-radius: var(--h-radius-xl);
      border: 1px solid var(--h-hairline);
      background: var(--h-surface);
      box-shadow: var(--h-shadow-sm);
      transition: all var(--h-transition-base);
    }
    .rec-search-input:focus {
      border-color: var(--h-brand-primary);
      box-shadow: 0 0 0 4px var(--h-brand-primary-soft), var(--h-shadow-md);
      outline: none;
    }
    .rec-search-hint {
      margin-top: var(--h-space-2);
      text-align: center;
      font-size: var(--h-text-xs);
      color: var(--h-muted);
      letter-spacing: 0.02em;
    }
    .rec-search-hint kbd {
      display: inline-block;
      padding: 1px 5px;
      font-family: var(--h-font-mono);
      font-size: 10px;
      background: var(--h-nest);
      border: 1px solid var(--h-hairline);
      border-radius: 4px;
      color: var(--h-ink-soft);
    }
    .rec-search-results {
      margin-top: var(--h-space-3);
      max-height: 380px;
      overflow-y: auto;
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-sm);
      background: var(--h-bg);
    }
    .rec-result-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--h-space-3);
      align-items: center;
      padding: var(--h-space-3) var(--h-space-4);
      cursor: pointer;
      transition: background var(--h-transition-fast);
    }
    .rec-result-row + .rec-result-row { border-top: 1px solid var(--h-hairline); }
    .rec-result-row:hover { background: var(--h-brand-primary-soft); }
    .rec-result-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--h-brand-primary-soft);
      color: var(--h-brand-primary);
      display: flex; align-items: center; justify-content: center;
      font-weight: 600;
      font-size: var(--h-text-sm);
    }
    .rec-result-nombre { font-weight: 600; color: var(--h-ink); }
    .rec-result-meta { font-size: var(--h-text-xs); color: var(--h-muted); margin-top: 2px; }
    .rec-result-empty {
      padding: var(--h-space-4);
      text-align: center;
      color: var(--h-muted);
      font-size: var(--h-text-sm);
    }

    /* Audit 2026-05-20 §2.2 — CTAs en 2 niveles de jerarquia.
       Antes: 6 cards visualmente identicas en una sola fila.
       Ahora: 2 PRIMARIAS destacadas (Turno + Walk-in, 70% del dia)
              + 4 SECUNDARIAS en bandeja debajo. */

    .rec-cta-section {
      margin-bottom: var(--h-space-6);
    }

    .rec-cta-grid-primary {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--h-space-4);
      margin-bottom: var(--h-space-3);
    }
    @media (max-width: 720px) {
      .rec-cta-grid-primary { grid-template-columns: 1fr; }
    }

    .rec-cta-grid-secondary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--h-space-3);
    }
    @media (max-width: 900px) { .rec-cta-grid-secondary { grid-template-columns: repeat(2, 1fr); } }

    .rec-cta {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-lg);
      padding: var(--h-space-4) var(--h-space-5);
      display: flex; flex-direction: row; align-items: center; gap: var(--h-space-4);
      text-decoration: none;
      color: inherit;
      transition: all var(--h-transition-fast);
      cursor: pointer;
      position: relative;
    }
    .rec-cta-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .rec-cta:hover {
      border-color: var(--h-brand-primary);
      box-shadow: var(--h-shadow-sm);
      transform: translateY(-1px);
    }

    /* Variante primaria — mas grande, icono mas grande, peso visual */
    .rec-cta.is-primary {
      padding: var(--h-space-5) var(--h-space-6);
      min-height: 84px;
      border-width: 1px;
      background: var(--h-surface);
    }
    .rec-cta.is-primary:hover {
      background: linear-gradient(135deg, var(--h-surface) 0%, var(--h-nest) 100%);
    }
    .rec-cta.is-primary .rec-cta-icon {
      width: 52px; height: 52px;
      border-radius: var(--h-radius-md);
      flex-shrink: 0;
    }
    .rec-cta.is-primary .rec-cta-icon svg { width: 26px; height: 26px; }
    .rec-cta.is-primary .rec-cta-title {
      font-size: var(--h-text-lg);
      font-weight: var(--h-weight-semibold);
      line-height: 1.2;
    }
    .rec-cta.is-primary .rec-cta-sub { font-size: var(--h-text-sm); color: var(--h-muted); }

    /* Variante secundaria — compacta */
    .rec-cta.is-secondary {
      padding: var(--h-space-3) var(--h-space-4);
      min-height: 64px;
    }
    .rec-cta.is-secondary .rec-cta-icon {
      width: 40px; height: 40px;
      flex-shrink: 0;
    }
    .rec-cta.is-secondary .rec-cta-icon svg { width: 20px; height: 20px; }
    .rec-cta.is-secondary .rec-cta-title { font-size: var(--h-text-md); font-weight: var(--h-weight-semibold); line-height: 1.2; }
    .rec-cta.is-secondary .rec-cta-sub { font-size: var(--h-text-xs); color: var(--h-muted); }

    .rec-cta-icon {
      width: 36px; height: 36px;
      border-radius: var(--h-radius-sm);
      background: var(--h-brand-primary-soft);
      color: var(--h-brand-primary);
      display: flex; align-items: center; justify-content: center;
    }
    .rec-cta-icon svg { width: 20px; height: 20px; }
    .rec-cta-title { font-weight: 600; font-size: var(--h-text-md); color: var(--h-ink); }
    .rec-cta-sub { font-size: var(--h-text-xs); color: var(--h-muted); }
    .rec-cta-shortcut { display: none; }

    /* Color por categoria */
    .rec-cta[data-cat="paciente"] .rec-cta-icon { background: var(--h-info-soft); color: var(--h-info); }
    .rec-cta[data-cat="turno"] .rec-cta-icon    { background: var(--h-brand-primary-soft); color: var(--h-brand-primary); }
    .rec-cta[data-cat="orden"] .rec-cta-icon    { background: #EFE4F5; color: #8B5CB8; }
    .rec-cta[data-cat="entrega"] .rec-cta-icon  { background: var(--h-ok-soft); color: var(--h-ok); }
    .rec-cta[data-cat="walkin"] .rec-cta-icon   { background: var(--h-warn-soft); color: var(--h-warn); }
    .rec-cta[data-cat="cobro"] .rec-cta-icon    { background: var(--h-accent-ai-soft); color: var(--h-accent-ai); }

    /* Bento grid principal */
    .rec-bento {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--h-space-3);
    }
    @media (max-width: 1100px) {
      .rec-bento { grid-template-columns: 1fr; }
    }

    /* Sala de espera live */
    .sala-card {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      overflow: hidden;
    }
    .sala-header {
      padding: var(--h-space-3) var(--h-space-4);
      background: var(--h-nest);
      border-bottom: 1px solid var(--h-hairline);
      display: flex; justify-content: space-between; align-items: center;
    }
    .sala-header h3 { font-size: var(--h-text-md); font-weight: 600; margin: 0; }
    .sala-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: var(--h-space-3);
      align-items: center;
      padding: var(--h-space-3) var(--h-space-4);
    }
    .sala-row + .sala-row { border-top: 1px solid var(--h-hairline); }
    .sala-row:hover { background: var(--h-nest); }
    .espera-badge {
      padding: 2px 8px;
      border-radius: var(--h-radius-pill);
      font-size: var(--h-text-xs);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .espera-badge.is-ok    { background: var(--h-ok-soft); color: var(--h-ok); }
    .espera-badge.is-warn  { background: var(--h-warn-soft); color: var(--h-warn); }
    .espera-badge.is-danger{ background: var(--h-danger-soft); color: var(--h-danger); }

    /* Audit 2026-05-20 §2.3 — KPIs reducidos a 2 primarios + 2 micro-link.
       Antes: 4 KPIs en linea, los 4 en 0 normalmente.
       Ahora: solo Sala + Proximos como mini-stats inline en bandeja chica. */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--h-space-3);
      margin-bottom: var(--h-space-4);
    }
    @media (max-width: 720px) { .kpi-row { grid-template-columns: 1fr; } }
    .kpi-mini {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      padding: var(--h-space-3);
    }
    .kpi-mini-label { font-size: var(--h-text-xs); color: var(--h-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .kpi-mini-value { font-size: var(--h-text-2xl); font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
    .kpi-mini-trend { font-size: var(--h-text-xs); color: var(--h-muted); margin-top: 2px; }
    .kpi-mini.is-warn .kpi-mini-value { color: var(--h-warn); }
    .kpi-mini.is-danger .kpi-mini-value { color: var(--h-danger); }
    .kpi-mini.is-ok .kpi-mini-value { color: var(--h-ok); }

    /* Inline mini-stats — para "ordenes lab hoy" + "informes pendientes" */
    .kpi-inline {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px;
      background: var(--h-nest);
      border-radius: var(--h-radius-pill);
      font-size: var(--h-text-xs);
      color: var(--h-ink-soft);
      text-decoration: none;
      transition: background var(--h-transition-fast);
    }
    .kpi-inline:hover { background: var(--h-brand-primary-soft); color: var(--h-brand-primary); }
    .kpi-inline strong { font-family: var(--h-font-mono); color: var(--h-ink); font-weight: var(--h-weight-semibold); }

    /* Próximos turnos */
    .proximos-card {
      background: var(--h-surface);
      border: 1px solid var(--h-hairline);
      border-radius: var(--h-radius-md);
      overflow: hidden;
    }
    .proximo-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--h-space-3);
      align-items: center;
      padding: var(--h-space-3) var(--h-space-4);
    }
    .proximo-row + .proximo-row { border-top: 1px solid var(--h-hairline); }
    .proximo-hora {
      font-family: var(--h-font-mono);
      font-weight: 600;
      color: var(--h-brand-primary);
      font-size: var(--h-text-md);
    }
    .proximo-pac { font-weight: 500; color: var(--h-ink); }
    .proximo-meta { font-size: var(--h-text-xs); color: var(--h-muted); }
    .tipo-pill {
      display: inline-block;
      padding: 2px 6px;
      border-radius: var(--h-radius-pill);
      font-size: var(--h-text-xs);
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .tipo-pill.tipo-medico       { background: var(--h-info-soft); color: var(--h-info); }
    .tipo-pill.tipo-laboratorio  { background: var(--h-brand-primary-soft); color: var(--h-brand-primary); }
    .tipo-pill.tipo-imagen       { background: #EFE4F5; color: #8B5CB8; }
    .tipo-pill.tipo-enfermeria   { background: var(--h-warn-soft); color: var(--h-warn); }
    .tipo-pill.tipo-psicologia   { background: var(--h-accent-ai-soft); color: var(--h-accent-ai); }
    .tipo-pill.tipo-kinesiologia { background: var(--h-ok-soft); color: var(--h-ok); }
    .tipo-pill.tipo-nutricion    { background: var(--h-ok-soft); color: var(--h-ok); }
    .tipo-pill.tipo-fonoaudiologia { background: var(--h-info-soft); color: var(--h-info); }

    .rec-empty {
      padding: var(--h-space-5);
      text-align: center;
      color: var(--h-muted);
      font-size: var(--h-text-sm);
    }