/* ============================================================
   MOLAR · App 2026 — capa visual del Manual de marca 2026
   Se carga DESPUÉS del estilo de index.html: solo cambia aspecto
   (colores, letra, bordes, sombras y movimiento). No toca funciones.
   ============================================================ */
:root {
  /* Blanco nube + azul Molar */
  --bg: #F7F9FC;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E3E8EF;
  --ink: #1E2A36;
  --ink-1: #2E3B4A;
  --ink-2: #566373;
  --ink-3: #8A97A8;
  --ink-4: #C6D0DC;
  --brand: #3E6488;
  --brand-deep: #2E4C68;
  --brand-soft: #C9D8E8;
  --brand-tint: #EAF1F8;
  --accent: #ACC0E5;
  --accent-soft: #DCE6F6;
  --accent-tint: #EEF3FB;
  --line: #E6EBF1;
  --line-soft: #EEF2F6;
  --line-strong: #D3DCE6;
  /* colores de especialidad (acentos) */
  --esp-orto: #FFDE53; --esp-rehab: #ACC0E5; --esp-impl: #97D5F6; --esp-ciru: #8477AD; --esp-pedi: #F4ABCC; --esp-endo: #C6D97C;
  --coral: #E8B4A6; --menta: #A8DCC8;
  --franja: linear-gradient(90deg, #FFDE53 0 16.66%, #ACC0E5 16.66% 33.33%, #97D5F6 33.33% 50%, #8477AD 50% 66.66%, #F4ABCC 66.66% 83.33%, #C6D97C 83.33% 100%);
  --grad-azul: linear-gradient(135deg, #3E6488, #5682AC);
  /* sombras suaves, tipo app */
  --sh-xs: 0 1px 2px rgba(30, 42, 54, .04);
  --sh-sm: 0 2px 6px rgba(30, 42, 54, .05);
  --sh-md: 0 6px 18px rgba(30, 42, 54, .07);
  --sh-lg: 0 14px 34px rgba(30, 42, 54, .10);
  --sh-xl: 0 24px 60px rgba(30, 42, 54, .16);
  /* una sola letra: Outfit */
  --ff-display: 'Outfit', 'Segoe UI', sans-serif;
  --ff-body: 'Outfit', 'Segoe UI', -apple-system, sans-serif;
  --ff-mono: 'Outfit', 'Segoe UI', sans-serif; /* números en Outfit (cifras tabulares abajo) */
  --r-md: 14px; --r-lg: 20px; --r-xl: 22px; --r-xxl: 28px;
}

html, body { font-family: var(--ff-body); font-size: 14.5px; letter-spacing: .003em; background: var(--bg); }
input, select, textarea, button { font-family: var(--ff-body); }
h1, h2, h3, h4, .page-title, .modal-title { font-family: var(--ff-display); letter-spacing: -.02em; }
h1, .page-title { font-weight: 500; }

/* ---------- Barra superior: vidrio + franja de especialidades ---------- */
.topnav { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.topnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--franja); opacity: .9; }
.topbar { background: rgba(255, 255, 255, .82); }
.tn-item { font-weight: 500; transition: background .2s var(--ez), color .2s var(--ez), transform .2s var(--ez-spring); }
.tn-item:hover { background: var(--brand-tint); color: var(--brand); }
.tn-item.active, .topnav .tn-item.active, .topnav-inner .tn-item.active { background: var(--grad-azul); color: #fff; box-shadow: 0 6px 16px rgba(62, 100, 136, .28); }
.tn-item:active { transform: scale(.96); }
.nav-item.active { background: var(--grad-azul); box-shadow: 0 6px 16px rgba(62, 100, 136, .25); }

/* ---------- Botones ---------- */
.btn { border-radius: 999px; font-weight: 600; transition: transform .18s var(--ez-spring), box-shadow .2s var(--ez), background .2s var(--ez), border-color .2s var(--ez); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary { background: var(--grad-azul); border-color: transparent; box-shadow: 0 6px 16px rgba(62, 100, 136, .26); }
.btn-primary:hover { background: linear-gradient(135deg, #34567A, #4C76A0); border-color: transparent; box-shadow: 0 10px 22px rgba(62, 100, 136, .32); }

/* ---------- Tarjetas y KPIs ---------- */
.card { border-radius: var(--r-xl); border-color: var(--line); box-shadow: var(--sh-sm); transition: box-shadow .25s var(--ez), transform .25s var(--ez), border-color .2s var(--ez); }
.card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); }
.kpi { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); transition: transform .25s var(--ez-spring), box-shadow .25s var(--ez); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--esp-rehab); }
.kpi:nth-child(6n+2)::before { background: var(--esp-impl); } .kpi:nth-child(6n+3)::before { background: var(--menta); }
.kpi:nth-child(6n+4)::before { background: var(--coral); } .kpi:nth-child(6n+5)::before { background: var(--esp-orto); } .kpi:nth-child(6n)::before { background: var(--esp-ciru); }

/* ---------- Modales: aparecen con resorte ---------- */
.modal { border-radius: 24px; box-shadow: var(--sh-xl); }
.modal-overlay.active .modal, .modal-overlay.show .modal, .modal-overlay.open .modal { animation: molar-pop .28s var(--ez-spring); }
@keyframes molar-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Páginas: entran suave ---------- */
.page.active { animation: molar-entra .35s var(--ez-out); }
@keyframes molar-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(62, 100, 136, .12) !important; }

/* ---------- Avatares con los pasteles de especialidad ---------- */
.avatar { background: var(--accent-soft); color: var(--brand-deep); font-weight: 600; }

/* ---------- Barras de desplazamiento finas ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }

@media (prefers-reduced-motion: reduce) {
  .page.active, .modal-overlay .modal { animation: none !important; }
  .btn, .kpi, .tn-item { transition: none !important; }
}
@media print { .topnav::after { display: none; } }

/* ---------- Ficha del paciente: cabecera con degradado suave y franja ---------- */
.patient-header { background: linear-gradient(135deg, #FFFFFF 0%, #F3F7FC 55%, #FBF1EE 100%); box-shadow: var(--sh-md); border-color: var(--line); }
.patient-header::before { height: 5px; background: var(--franja); }
.patient-avatar-lg { background: linear-gradient(135deg, #DCE6F6, #CDEBFB); border-color: #fff; box-shadow: 0 10px 24px rgba(62, 100, 136, .18); }

/* ---------- Celular: inicio con tarjetas de color y movimiento ---------- */
@media (max-width: 768px) {
  .mv-tit h1 { font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
  .mv-kpi { position: relative; overflow: hidden; border: 0; border-radius: 20px; padding: 14px 14px 13px; box-shadow: var(--sh-sm); transition: transform .2s var(--ez-spring); }
  .mv-kpi:active { transform: scale(.97); }
  .mv-kpis .mv-kpi:nth-child(4n+1) { background: linear-gradient(135deg, #DCE6F6, #EEF3FB); }
  .mv-kpis .mv-kpi:nth-child(4n+2) { background: linear-gradient(135deg, #D3EEFC, #EAF7FE); }
  .mv-kpis .mv-kpi:nth-child(4n+3) { background: linear-gradient(135deg, #DDF0E8, #EEF8F3); }
  .mv-kpis .mv-kpi:nth-child(4n+4) { background: linear-gradient(135deg, #FBE4DD, #FDF1ED); }
  .mv-kpi span { color: var(--ink-2); }
  .mv-kpi b { font-size: 23px; color: var(--ink); }
  .mv-card { border-radius: 20px; box-shadow: var(--sh-sm); }
  .mv-aviso { border-radius: 16px; }
  .mv-barra i { background: linear-gradient(180deg, #ACC0E5, #3E6488); border-radius: 8px 8px 3px 3px; animation: molar-crece .6s var(--ez-out) both; transform-origin: bottom; }
  .mv-barra.hoy i { background: linear-gradient(180deg, #A8DCC8, #4E9A82); }
  .mv-barra:nth-child(2) i { animation-delay: .05s; } .mv-barra:nth-child(3) i { animation-delay: .1s; } .mv-barra:nth-child(4) i { animation-delay: .15s; } .mv-barra:nth-child(5) i { animation-delay: .2s; } .mv-barra:nth-child(6) i { animation-delay: .25s; }
  .mv-kpis .mv-kpi { animation: molar-entra .4s var(--ez-out) both; }
  .mv-kpis .mv-kpi:nth-child(2) { animation-delay: .05s; } .mv-kpis .mv-kpi:nth-child(3) { animation-delay: .1s; } .mv-kpis .mv-kpi:nth-child(4) { animation-delay: .15s; }
  .mv-btn.p { background: var(--grad-azul); box-shadow: 0 6px 16px rgba(62, 100, 136, .26); }
  .mv-btn { border-radius: 14px; }
}
@keyframes molar-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Escritorio: KPIs de reportes y caja con más presencia ---------- */
.kpi .kpi-value, .kpi b, .kpi strong { letter-spacing: -.02em; }
@media (prefers-reduced-motion: reduce) { .mv-kpi, .mv-barra i { animation: none !important; } }
.kpi, .modal-summary-value, .mv-kpi b, td { font-variant-numeric: tabular-nums; }
.tn-more.has-active > button { background: var(--grad-azul) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(62, 100, 136, .28); }
.mini-cal-day.selected { background: var(--grad-azul); color: #fff; box-shadow: 0 4px 10px rgba(62, 100, 136, .3); }

/* ===================== Agenda más fácil de leer (2026-11) =====================
   - El ESTADO va escrito en un chip de color (antes era un puntito).
   - El DOCTOR se reconoce por la barra de color y sus iniciales.
   - Nombres más grandes y en hasta 2 líneas; menos líneas y botones de relleno. */
.ag-est { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--ff-body); letter-spacing: .01em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.ag-est::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ag-est-pendiente, .ag-est-nuevo { background: #FFF1D6; color: #9A6A12; }
.ag-est-confirmada { background: #DDF3E8; color: #1F7A52; }
.ag-est-en-sala { background: #DCE8F6; color: #2E4C68; }
.ag-est-atendida, .ag-est-completada { background: #ECEFF3; color: #566373; }
.ag-est-retraso { background: #FDE3DF; color: #B3412E; }
.ag-est-cancelada, .ag-est-no_asistio, .ag-est-no-asistio { background: #F7E1E1; color: #A33A3A; text-decoration: none; }
.ag-est-reagendada { background: #ECEFF3; color: #566373; }

/* Vista semana */
.week-appt { border-radius: 10px; padding: 5px 7px 5px 8px !important; box-shadow: 0 1px 2px rgba(30, 42, 54, .06); }
.week-appt .wa-fila { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; margin-bottom: 2px; }
.week-appt .wa-fila .ag-est { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.week-appt .wa-time { font-size: 11px !important; opacity: 1 !important; display: inline !important; }
.week-appt .wa-doc { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 5px; color: #fff; font: 700 9.5px/1 var(--ff-body); letter-spacing: .02em; }
.week-appt .wa-name { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.week-appt .wa-motivo { font-size: 11px !important; opacity: .75 !important; }
.week-appt .ag-est { font-size: 9.5px; padding: 2px 6px; }
.week-appt .wa-menu-btn[hidden] { display: none !important; }

/* Vista día */
.appt { border-radius: 10px; box-shadow: 0 1px 2px rgba(30, 42, 54, .06); }
.appt .appt-time { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; }
.appt .appt-patient { font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.appt .appt-treatment { font-size: 11.5px; }
.appt .appt-status-dot, .week-appt .appt-status-dot { display: none !important; }

/* Menos ruido en la cuadrícula: líneas más suaves, la media hora casi invisible */
.week-slot-hint { opacity: 0; transition: opacity .15s; }
.week-slot-hint:hover, div:hover > .week-slot-hint { opacity: 1; }

/* Celular */
.agm-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.agm-doc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.agm-doc i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.agm-meta .ag-est { font-size: 11px; }
.agm-nom { font-size: 16px; font-weight: 600; }

/* Varias citas a la misma hora (vista semana): una cita visible + recuadro "+N citas" con la lista completa */
.wa-overflow-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 100%; min-height: 56px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-deep); border: 1px dashed var(--brand-soft); font-family: var(--ff-body); cursor: pointer; }
.wa-overflow-chip b { font-size: 16px; font-weight: 700; line-height: 1; }
.wa-overflow-chip span { font-size: 10.5px; font-weight: 600; }
.wa-overflow-list { min-width: 250px; border-radius: 14px; box-shadow: var(--sh-lg); padding: 6px; }
.wa-overflow-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-size: 12.5px; }
.wa-overflow-item .wa-doc { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 5px; color: #fff; font: 700 9.5px/1 var(--ff-body); }
.wa-overflow-name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-overflow-item .ag-est { font-size: 9.5px; padding: 2px 6px; }
.wa-overflow-chip { flex-direction: row !important; flex-wrap: wrap; gap: 4px 6px !important; justify-content: flex-start !important; align-items: center !important; padding: 6px 8px; text-align: left; }
.wa-overflow-chip .wa-grupo-hora { font-size: 11px; font-weight: 700; color: var(--brand); }
.wa-overflow-chip b { font-size: 12.5px !important; }
.wa-overflow-chip .wa-grupo-docs { display: flex; gap: 3px; flex-basis: 100%; }
.wa-overflow-chip .wa-doc { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 5px; color: #fff; font: 700 9.5px/1 var(--ff-body); }
.week-appt-overflow[data-dia="5"] .wa-overflow-list, .week-appt-overflow[data-dia="6"] .wa-overflow-list { left: auto; right: 0; }
.wa-overflow-list { top: 100% !important; margin-top: 4px; }
.wa-overflow-list { min-width: 300px !important; max-width: 340px !important; max-height: 340px !important; }
/* Grupos de citas que se cruzan: alto de todo el grupo, sin tapar nada */
.week-appt-overflow { z-index: 6; }
.week-appt-overflow .wa-overflow-chip { height: 100%; align-content: flex-start; overflow: hidden; }
.week-appt-overflow .wa-grupo-nombres { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.week-appt-overflow.open { z-index: 60; }
/* Recuadro de grupo como lista: una fila por cita (hora · nombre · estado), cada fila abre la cita */
.week-appt-overflow .wa-grupo-filas { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.week-appt-overflow .wa-grupo-fila { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .75); font-size: 11.5px; cursor: pointer; }
.week-appt-overflow .wa-grupo-fila:hover { background: #fff; box-shadow: 0 1px 3px rgba(30, 42, 54, .12); }
.week-appt-overflow .wa-grupo-fila b { font-weight: 700; color: var(--brand); font-size: 11px; min-width: 32px; }
.week-appt-overflow .wa-grupo-fila span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
.ag-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; padding: 0 !important; }
.ag-punto::before { display: none; }
.week-appt-overflow .wa-grupo-mas { font-size: 11px; font-weight: 600; color: var(--brand); padding: 2px 6px; }
.week-appt-overflow .wa-grupo-nombres { display: none; }
/* Formulario rápido: la hora de arriba se puede cambiar */
.quick-appt-picker .qap-hora { font: 700 20px/1 var(--ff-body); color: var(--brand-deep); border: 1px solid transparent; border-radius: 10px; padding: 4px 6px; background: var(--brand-tint); width: auto; max-width: 130px; cursor: text; }
.quick-appt-picker .qap-hora:hover { border-color: var(--brand-soft); }
.quick-appt-picker .qap-hora:focus { outline: none; border-color: var(--brand); background: #fff; }
/* Botón para agendar en el horario de un grupo */
.wa-grupo-agendar { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px dashed var(--brand-soft); border-radius: 10px; background: var(--brand-tint); color: var(--brand-deep); font: 600 12.5px var(--ff-body); text-align: left; cursor: pointer; }
.wa-grupo-agendar:hover { background: #fff; border-style: solid; }