/* ═══════════════════════════════════════════════════════════════════
   AFINADO.CSS — retoques transversales de fidelidad Orbit (Orbit Web)
   Se carga DESPUÉS de lib/panel-original.css. Todo lo que hay aquí
   existe para que el portal se sienta EXACTAMENTE como la extensión
   Orbit: misma fuente, mismos anillos, mismos brillos, mismos toques.
   Valores copiados 1:1 de AntiOrbit/panel.css — no inventes otros.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. FUENTE: Plus Jakarta Sans con respaldo local ──
   panel-original.css ya importa Google Fonts con display=swap.
   Si Google Fonts no carga (portal sin internet estable), este
   @font-face rescata una copia local instalada y, si tampoco hay,
   la pila del body cae en -apple-system/Segoe UI como hace Orbit. */
@font-face{
  font-family:'Plus Jakarta Sans Respaldo';
  src:local('Plus Jakarta Sans'),local('PlusJakartaSans-Regular'),local('Segoe UI'),local('Helvetica Neue');
  font-display:swap;
}
html,body{
  font-family:'Plus Jakarta Sans','Plus Jakarta Sans Respaldo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── 2. SCROLLBARS — finos y glassy como .scroll-body de Orbit ── */
*{scrollbar-width:thin;scrollbar-color:rgba(59,130,246,.25) transparent}
*::-webkit-scrollbar{width:4px;height:4px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:2px}
*::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.35)}
body.dark-mode *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}

/* ── 3. FOCUS RING — el azul exacto de .finput:focus de Orbit ── */
:focus{outline:none}
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.12),0 0 0 1.5px rgba(59,130,246,.35);
  border-radius:8px;
}

/* ── 4. SELECTION — azul Orbit ── */
::selection{background:rgba(59,130,246,.22);color:inherit}
body.dark-mode ::selection{background:rgba(96,165,250,.35)}

/* ── 5. TRANSICIONES BASE — botones y tarjetas responden como Orbit ── */
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
button:active{transform-origin:center}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── 6. ANILLO DEGRADADO DE AVATAR — sello Orbit ──
   (Orbit: avatar con borde 3px rgba(59,130,246,.35) sobre degradado
   #8B5CF6→#3B82F6 y sombra 0 6px 18px rgba(59,130,246,.3)) */
.ow-avatar-anillo{
  padding:3px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#8B5CF6,#3B82F6);
  box-shadow:0 6px 18px rgba(59,130,246,.3);
  display:inline-flex;align-items:center;justify-content:center;
}
.ow-avatar-anillo img,.ow-avatar-anillo .ow-avatar-ini{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(255,255,255,.85);
}
.ow-avatar-ini{
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  color:#fff;font-weight:800;display:flex!important;align-items:center;justify-content:center;
}

/* ═══════════════════════════════════════════════════
   VISTA HOY — la joya con la que abre el día el estudio
   ═══════════════════════════════════════════════════ */
.hoy-vista{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

/* Hero: el degradado azul→violeta EXACTO de .an-hero de Orbit */
.hoy-hero{flex-shrink:0;border-radius:0 0 24px 24px}
.hoy-hero .an-hero-title{font-size:21px}
.hoy-hero-avatar{width:44px;height:44px}
.hoy-hero-avatar .ow-avatar-ini{font-size:16px}

.hoy-cuerpo{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}

/* Contadores (mismos .an-kpi de Orbit; aquí solo la rejilla de 3) */
.hoy-contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hoy-contadores .an-kpi{padding:12px}
.hoy-contadores .an-kpi-icon{width:34px;height:34px;font-size:15px;margin-bottom:8px;border-radius:12px}
.hoy-contadores .an-kpi-value{font-size:18px}
.hoy-kpi-alerta .an-kpi-value{color:var(--red-500)}
.hoy-kpi-alerta{border-color:rgba(239,68,68,.25)!important;box-shadow:0 4px 16px rgba(239,68,68,.1)!important}

/* Tarjeta grande de cita de HOY (base .cita-card de Orbit, más aire) */
.hoy-card{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;cursor:default}
.hoy-card-fila{display:flex;align-items:center;gap:12px}
.hoy-hora-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;height:48px;border-radius:14px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.hoy-hora-num{font-size:15px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hoy-hora-ampm{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.8;margin-top:2px}
.hoy-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}

/* Chips de etapa — colores por etapa, forma .t-badge de Orbit */
.chip-etapa{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}
.chip-etapa.agendada{background:rgba(59,130,246,.1);color:var(--blue-600)}
.chip-etapa.sesion{background:rgba(6,182,212,.12);color:#0891B2}
.chip-etapa.seleccion{background:rgba(245,158,11,.12);color:#D97706}
.chip-etapa.cliente_eligio{background:rgba(139,92,246,.12);color:var(--purple-600)}
.chip-etapa.edicion{background:rgba(236,72,153,.12);color:#DB2777}
.chip-etapa.lista{background:rgba(16,185,129,.12);color:var(--emerald-600)}
.chip-etapa.entregada{background:rgba(107,114,128,.12);color:var(--gray-600)}

/* Chip de tarjeta (candado de la confirmación) */
.chip-tarjeta{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
.chip-tarjeta.lista{background:rgba(16,185,129,.1);color:var(--emerald-600)}
.chip-tarjeta.falta{background:rgba(239,68,68,.1);color:var(--red-500);animation:urgencyPulse 2s ease-in-out infinite}

/* Chip ámbar de atasco ("lleva N días") */
.chip-atasco{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:rgba(245,158,11,.12);color:#D97706;border:1px solid rgba(245,158,11,.25);animation:urgencyPulse 2s ease-in-out infinite}

/* Franja Prime (personalización del cliente) — glassy violeta suave */
.hoy-prime{
  display:flex;flex-direction:column;gap:5px;padding:9px 12px;border-radius:12px;
  background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.14);
}
.hoy-prime-linea{display:flex;align-items:flex-start;gap:6px;font-size:11px;font-weight:600;color:var(--gray-700);line-height:1.4}
.hoy-prime-linea .ico{flex-shrink:0}
body.dark-mode .hoy-prime{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.15)}
body.dark-mode .hoy-prime-linea{color:rgba(255,255,255,.75)}

/* Estados vacío / error — con la voz de Orbit */
.ow-vacio{text-align:center;padding:36px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ow-vacio-ico{width:52px;height:52px;border-radius:16px;background:rgba(59,130,246,.08);display:flex;align-items:center;justify-content:center;font-size:24px}
.ow-vacio-titulo{font-size:13px;font-weight:700;color:var(--gray-700)}
.ow-vacio-sub{font-size:11px;color:var(--gray-400);max-width:260px;line-height:1.5}
.ow-error{
  margin:8px 0;padding:14px;border-radius:16px;text-align:center;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ow-error-txt{font-size:12px;font-weight:600;color:#DC2626;line-height:1.4}
.ow-error .btn-reintentar{
  padding:8px 20px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  box-shadow:0 4px 15px rgba(59,130,246,.35);transition:all .2s;
}
.ow-error .btn-reintentar:hover{box-shadow:0 6px 20px rgba(59,130,246,.5);transform:translateY(-1px)}
body.dark-mode .ow-vacio-titulo{color:rgba(255,255,255,.8)}

/* ═══════════════════════════════════════════════════
   VISTA SESIONES — tablero de etapas (estilo pipeline Orbit)
   ═══════════════════════════════════════════════════ */
.ses-vista{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.ses-cabecera{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 16px;flex-shrink:0}
.ses-titulo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--gray-800)}

/* Filtro por sede — .sede-pill-group exacto del pipeline de Orbit */
.sede-pill-group{display:flex;background:rgba(0,0,0,.05);padding:2px;border-radius:8px}
.sede-pill{padding:4px 10px;border-radius:6px;border:none;background:transparent;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;color:var(--gray-600);transition:all .2s}
.sede-pill.active{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}
body.dark-mode .sede-pill-group{background:rgba(255,255,255,.06)}
body.dark-mode .sede-pill{color:rgba(255,255,255,.5)}
body.dark-mode .sede-pill.active{color:#fff}

/* Tablero horizontal — columnas 0 0 240px como .pipeline-board */
.ses-tablero{display:flex;flex:1;overflow-x:auto;gap:10px;padding:12px 16px;min-height:0}
.ses-col{flex:0 0 240px;display:flex;flex-direction:column;background:rgba(0,0,0,.02);border-radius:12px;border:1px solid var(--border-color);max-height:100%}
.ses-col-head{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid var(--border-color);border-radius:12px 12px 0 0}
.ses-col-nombre{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.ses-col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ses-col-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}
.ses-col-lista{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:50px}
.ses-col-vacia{font-size:10px;color:var(--gray-400);text-align:center;padding:14px 6px;font-weight:500}

/* Colores por etapa (cabecera de columna) */
.ses-col[data-etapa="agendada"] .ses-col-head{background:rgba(59,130,246,.05)}
.ses-col[data-etapa="agendada"] .ses-col-dot{background:#3B82F6}
.ses-col[data-etapa="agendada"] .ses-col-nombre{color:#3B82F6}
.ses-col[data-etapa="agendada"] .ses-col-badge{background:rgba(59,130,246,.15);color:#3B82F6}
.ses-col[data-etapa="sesion"] .ses-col-head{background:rgba(6,182,212,.05)}
.ses-col[data-etapa="sesion"] .ses-col-dot{background:#06B6D4}
.ses-col[data-etapa="sesion"] .ses-col-nombre{color:#0891B2}
.ses-col[data-etapa="sesion"] .ses-col-badge{background:rgba(6,182,212,.15);color:#0891B2}
.ses-col[data-etapa="seleccion"] .ses-col-head{background:rgba(245,158,11,.05)}
.ses-col[data-etapa="seleccion"] .ses-col-dot{background:#F59E0B}
.ses-col[data-etapa="seleccion"] .ses-col-nombre{color:#D97706}
.ses-col[data-etapa="seleccion"] .ses-col-badge{background:rgba(245,158,11,.15);color:#D97706}
.ses-col[data-etapa="cliente_eligio"] .ses-col-head{background:rgba(139,92,246,.05)}
.ses-col[data-etapa="cliente_eligio"] .ses-col-dot{background:#8B5CF6}
.ses-col[data-etapa="cliente_eligio"] .ses-col-nombre{color:#7C3AED}
.ses-col[data-etapa="cliente_eligio"] .ses-col-badge{background:rgba(139,92,246,.15);color:#7C3AED}
.ses-col[data-etapa="edicion"] .ses-col-head{background:rgba(236,72,153,.05)}
.ses-col[data-etapa="edicion"] .ses-col-dot{background:#EC4899}
.ses-col[data-etapa="edicion"] .ses-col-nombre{color:#DB2777}
.ses-col[data-etapa="edicion"] .ses-col-badge{background:rgba(236,72,153,.15);color:#DB2777}
.ses-col[data-etapa="lista"] .ses-col-head{background:rgba(16,185,129,.05)}
.ses-col[data-etapa="lista"] .ses-col-dot{background:#10B981}
.ses-col[data-etapa="lista"] .ses-col-nombre{color:#059669}
.ses-col[data-etapa="lista"] .ses-col-badge{background:rgba(16,185,129,.15);color:#059669}
.ses-col[data-etapa="entregada"] .ses-col-head{background:rgba(107,114,128,.05)}
.ses-col[data-etapa="entregada"] .ses-col-dot{background:#6B7280}
.ses-col[data-etapa="entregada"] .ses-col-nombre{color:#4B5563}
.ses-col[data-etapa="entregada"] .ses-col-badge{background:rgba(107,114,128,.15);color:#4B5563}

/* Mini-tarjeta del tablero — glassy Orbit, SIN drag */
.ses-card{
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;flex-direction:column;gap:6px;transition:all .2s;
}
.ses-card:hover{background:rgba(255,255,255,.75);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.ses-card-nombre{font-size:12px;font-weight:700;color:var(--gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses-card-meta{font-size:10px;color:var(--gray-400);display:flex;gap:6px;flex-wrap:wrap;font-weight:500}
.ses-btn-avanzar{
  align-self:flex-end;padding:5px 12px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
  box-shadow:0 2px 8px rgba(59,130,246,.3);transition:all .2s;
}
.ses-btn-avanzar:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.4)}
.ses-btn-avanzar:active{transform:scale(.95)}
.ses-btn-avanzar:disabled{opacity:.55;cursor:wait;transform:none}
body.dark-mode .ses-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
body.dark-mode .ses-card:hover{background:rgba(255,255,255,.1)}
body.dark-mode .ses-card-nombre{color:rgba(255,255,255,.85)}
body.dark-mode .ses-col{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.06)}
body.dark-mode .ses-titulo{color:rgba(255,255,255,.9)}

/* Modal de confirmación de avance (mismo lenguaje que .abandon-modal) */
.ses-confirm{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.ses-confirm.hidden{display:none}
.ses-confirm-fondo{position:absolute;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}
.ses-confirm-caja{
  position:relative;z-index:1;width:88%;max-width:320px;padding:24px 22px;border-radius:20px;text-align:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 40px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.6);
  animation:confirmAparece .3s ease;
}
@keyframes confirmAparece{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.ses-confirm-ico{font-size:36px;margin-bottom:6px}
.ses-confirm-titulo{font-size:15px;font-weight:800;color:var(--gray-900);margin-bottom:6px}
.ses-confirm-texto{font-size:12px;color:var(--gray-600);line-height:1.5;margin-bottom:6px}
.ses-confirm-correo{
  font-size:11px;font-weight:600;line-height:1.45;margin:8px 0 14px;padding:8px 10px;border-radius:10px;
  background:rgba(59,130,246,.08);color:var(--blue-600);border:1px solid rgba(59,130,246,.12);
}
.ses-confirm-correo.sin-correo{background:rgba(107,114,128,.08);color:var(--gray-500);border-color:rgba(107,114,128,.12)}
.ses-confirm-acciones{display:flex;flex-direction:column;gap:8px}
.ses-confirm-si{padding:11px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3B82F6,#6366F1);box-shadow:0 4px 12px rgba(59,130,246,.3);transition:all .2s}
.ses-confirm-si:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.ses-confirm-no{padding:8px;border-radius:12px;border:1px solid rgba(148,163,184,.2);background:rgba(148,163,184,.05);color:var(--gray-500);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.ses-confirm-no:hover{background:rgba(148,163,184,.12)}
body.dark-mode .ses-confirm-caja{background:rgba(20,20,40,.95);border-color:rgba(255,255,255,.08)}
body.dark-mode .ses-confirm-titulo{color:rgba(255,255,255,.9)}
body.dark-mode .ses-confirm-texto{color:rgba(255,255,255,.6)}