/* ─── Variables ─────────────────────────────────────────────────────────────── */
:root {
/* ── Brand tokens (MDD logo colors) — landing only ── */
--brand-blue: #1B7BD6;
--brand-blue-dark: #1565B8;
--brand-green: #54B948;
--brand-green-dark: #449438;
--brand-blue-soft: #EAF4FB;
--brand-green-soft: #EEF8EC;
--brand-ink: #0B1220;
--brand-paper: #FAFAF7;
--blue: #2563EB; --blue-dark: #1D4ED8; --blue-light: #EFF6FF;
--green: #10B981; --green-light: #ECFDF5;
--indigo: #6366F1; --indigo-light: #EEF2FF;
--purple: #8B5CF6; --purple-light: #F5F3FF;
--orange: #F59E0B; --orange-light: #FFFBEB;
--red: #EF4444; --red-light: #FEF2F2;
--amber: #F59E0B; --amber-light: #FFFBEB;
--teal: #14B8A6; --teal-light: #F0FDFA;
--bg: #F1F5F9; --card: #FFFFFF;
--border: #E5E7EB; --border-light: #F3F4F6;
--text: #1F2937; --text-muted: #6B7280; --text-subtle: #9CA3AF;
--sidebar-bg: #0F172A; --sidebar-w: 230px;
--header-h: 58px;
--radius: 10px; --radius-sm: 7px; --radius-lg: 14px;
--shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 14px rgba(0,0,0,0.08);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
--font: 'Inter', system-ui, -apple-system, sans-serif;
--t: 150ms ease;
}
/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font)}
input,textarea,select{font-family:var(--font)}
/* ─── App shell ─────────────────────────────────────────────────────────────── */
.app-layout{display:flex;min-height:100vh}
/* ─── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar{
width:var(--sidebar-w);height:100vh;background:var(--sidebar-bg);
display:flex;flex-direction:column;
position:fixed;left:0;top:0;z-index:200;
overflow:hidden; /* prevents content push-out; nav scrolls internally */
}
.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;
overflow-y:auto;-webkit-overflow-scrolling:touch}
.sidebar-logo{
display:flex;align-items:center;gap:10px;
padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo-icon{
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-text{font-weight:800;font-size:14px;color:#fff;letter-spacing:-0.01em}
.nav-item{
display:flex;align-items:center;gap:9px;padding:9px 11px;
border-radius:var(--radius-sm);color:#94A3B8;font-size:13.5px;font-weight:500;
transition:background var(--t),color var(--t);
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#CBD5E1}
.nav-item.active{background:rgba(255,255,255,0.1);color:#fff}
.nav-icon{width:17px;height:17px;flex-shrink:0}
.sidebar-footer{padding:12px 8px;border-top:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;gap:8px}
.sidebar-user{display:flex;align-items:center;gap:9px;padding:7px 10px}
.user-avatar{
width:32px;height:32px;background:var(--blue);border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:white;font-weight:800;font-size:12px;flex-shrink:0;
}
.sidebar-user .user-info{min-width:0;flex:1}
.user-name{font-size:12px;font-weight:600;color:#E2E8F0;line-height:1.35;word-break:break-word}
.user-role{font-size:11px;color:#64748B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{
display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;
background:none;border:none;color:#64748B;font-size:13px;font-weight:500;
border-radius:var(--radius-sm);transition:background var(--t),color var(--t);
}
.btn-logout:hover{background:rgba(239,68,68,0.12);color:#FCA5A5}
/* ─── Main wrapper ──────────────────────────────────────────────────────────── */
/* `max-width:100vw` junto a `margin-left` es lo que provocaba scroll horizontal en
tableta: 100vw es el ANCHO COMPLETO de la ventana, así que sumado al margen de
la barra lateral el contenido terminaba fuera de la pantalla. Descontar la barra
lo deja exacto en cualquier ancho. */
.main-wrapper{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;max-width:calc(100vw - var(--sidebar-w))}
/* ─── Top header ────────────────────────────────────────────────────────────── */
.top-header{
position:sticky;top:0;z-index:100;
height:var(--header-h);
background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 24px;gap:16px;
}
/* min-width:0 en los dos lados de la barra superior. Sin esto, un elemento de
flex vale `min-width:auto` y no se encoge por debajo de su contenido: en
tableta (≈820 px) el bloque derecho medía 764 px, no cedía, y empujaba la
página 16 px fuera de la pantalla. Era scroll horizontal en TODAS las
pantallas de la aplicación, no solo en Configuración. */
.top-header-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.top-header-right{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.mobile-menu-btn{
display:none;background:none;border:none;color:var(--text-muted);
padding:6px;border-radius:var(--radius-sm);cursor:pointer;
transition:background var(--t);
}
.mobile-menu-btn:hover{background:var(--border-light)}
.top-search-form{flex:1;max-width:460px;min-width:0}
.top-search-wrap{position:relative}
.top-search-icon{
position:absolute;left:11px;top:50%;transform:translateY(-50%);
width:15px;height:15px;color:var(--text-muted);
}
.top-search-input{
width:100%;padding:8px 12px 8px 34px;
border:1.5px solid var(--border);border-radius:var(--radius-sm);
font-size:13.5px;color:var(--text);background:var(--bg);
transition:border-color var(--t),background var(--t);
}
.top-search-input:focus{outline:none;border-color:var(--blue);background:white}
.top-user-btn{
display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
border-radius:20px;border:1px solid var(--border);background:white;
transition:box-shadow var(--t);cursor:pointer;
}
.top-user-btn:hover{box-shadow:var(--shadow)}
.top-avatar{
width:28px;height:28px;background:var(--blue);border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:white;font-weight:700;font-size:11px;
}
.top-user-name{
font-size:12.5px;font-weight:600;color:var(--text);
/* 23-ago-2026: `.top-header-right` es `flex-shrink:0`, así que un nombre largo
—el de un médico con dos apellidos— estiraba la barra superior y sacaba la
página 23 px a la derecha EN TODAS las pantallas, no solo en Configuración.
Se ve como una franja en blanco al arrastrar en tableta. El nombre se corta
con puntos suspensivos; el completo sigue en el menú que abre el botón. */
max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:900px){.top-user-name{max-width:110px}}
/* ─── Content area ──────────────────────────────────────────────────────────── */
.main-content{flex:1;background:var(--bg);position:relative}
/* No max-width — content fills the full available width after the sidebar.
Form pages use .form-container for their own readable width limits. */
.content-inner{padding:28px 32px}
/* ─── Page header ───────────────────────────────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.page-header-left{flex:1}
.page-title{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-0.02em;margin-bottom:3px}
.page-subtitle{font-size:13.5px;color:var(--text-muted)}
.page-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.meta-chip{display:inline-flex;align-items:center;padding:2px 9px;background:var(--border-light);border-radius:20px;font-size:12px;color:var(--text-muted);font-weight:500}
.meta-chip.blood-type{background:#FEF2F2;color:#DC2626;font-weight:700}
.page-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.back-link{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text-muted);margin-bottom:6px;transition:color var(--t)}
.back-link:hover{color:var(--blue)}
/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 17px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:all var(--t);white-space:nowrap}
.btn-primary{background:var(--blue);color:white;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn-outline{background:white;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue-light)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:transparent}
/* 🚨 18-sep-2026 · ESTA CLASE NO EXISTÍA Y DIECINUEVE PANTALLAS LA USABAN.
`.btn-secondary` se escribía en las plantillas desde hacía meses —«Cobrar sin
consulta», «Guardar como adjunto», los de ajustes y los de finanzas— y aquí
no había ninguna regla con ese nombre. El elemento se quedaba con lo que le
da `.btn` a secas: relleno, tamaño y `border:1.5px solid transparent`. Medido
en el navegador: fondo `rgba(0,0,0,0)`, borde `rgba(0,0,0,0)`. O sea, texto
suelto con aire alrededor.
Importa más de lo que parece: un médico que no ve un recuadro no sabe que
eso se puede apretar. Es el mismo fallo que «el botón no hace nada», sólo que
antes de tocarlo.
Se define como el gris de la casa —blanco con borde— para que acompañe al
azul primario sin competir con él. No se toca `.btn`, así que ninguna de las
diecinueve cambia de tamaño ni de posición: sólo aparece el recuadro. */
.btn-secondary{background:var(--card);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--bg);border-color:var(--text-subtle)}
/* ─── El desplegable propio de `input.combo` (18-sep-2026) ───────────────────
Sustituye al `datalist` nativo, que FILTRA sus opciones por lo que ya está
escrito y por eso no dejaba cambiar una unidad ya elegida. El porqué completo
está en `static/mdd-combo.js`.
`position:fixed` y no `absolute`: estos campos viven dentro de una tabla con
`overflow-x:auto`, y un panel absoluto se recorta contra ese contenedor —
saldría medio desplegable. El sitio lo calcula el .js en cada apertura. */
.mdd-combo-caja{position:fixed;z-index:9000;background:var(--card);
border:1px solid var(--border);border-radius:11px;
box-shadow:0 14px 34px rgba(15,23,42,.18);padding:5px;overflow-y:auto;
max-height:min(52vh,320px);min-width:150px;font-size:13.5px}
.mdd-combo-caja [data-valor]{padding:9px 11px;border-radius:8px;cursor:pointer;
color:var(--text);display:flex;align-items:center;justify-content:space-between;
gap:10px;line-height:1.25}
.mdd-combo-caja [data-valor]:hover,
.mdd-combo-caja .mdd-combo-ojo{background:var(--border-light)}
.mdd-combo-caja .es{font-weight:700;color:var(--blue)}
.mdd-combo-caja .es span{font-weight:700}
/* En un dedo, 34 px no se atinan. WCAG 2.5.5 pide 44. */
@media (hover:none){.mdd-combo-caja [data-valor]{padding:12px 12px;font-size:14px}}
.btn-ghost:hover{background:var(--border-light);color:var(--text)}
.btn-danger{background:var(--red);color:white;border-color:var(--red)}
.btn-danger:hover{background:#DC2626}
.btn-full{width:100%}
.btn-lg{padding:11px 26px;font-size:14.5px;border-radius:var(--radius)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-xs{padding:4px 9px;font-size:11.5px}
/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-light)}
.card-title{font-size:14.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.card-subtitle{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.card-link{font-size:12.5px;color:var(--blue);font-weight:500}
.card-link:hover{text-decoration:underline}
.card-body{padding:18px}
.card-badge{display:inline-flex;padding:3px 9px;background:var(--blue-light);color:var(--blue);border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.card-badge.purple{background:var(--purple-light);color:var(--purple)}
.card-danger{border-color:#FECACA}
/* 25-ago-2026: `.card{overflow:hidden}` RECORTABA los menús del autocompletado
(medicamentos y CIE-10) en el borde de su card, y la card siguiente
(«Pronóstico») parecía taparlos — el médico solo veía dos opciones. Ningún
z-index gana contra un recorte del ancestro. Esta clase se pone SOLO en las
cards que alojan un desplegable; el hidden general se queda para las demás
(hay cards con contenido a sangre que dependen del recorte en las esquinas).
La vigila tests/test_ui_dropdowns_consulta.py. */
.card.card-desplegable{overflow:visible}
.danger-title{color:var(--red)}
.danger-text{font-size:13px;color:var(--text-muted);margin-bottom:12px;line-height:1.5}
/* ─── Stats ─────────────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:14px}
.stat-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:20px;height:20px}
.stat-icon.blue{background:var(--blue-light);color:var(--blue)}
.stat-icon.green{background:var(--green-light);color:var(--green)}
.stat-icon.indigo{background:var(--indigo-light);color:var(--indigo)}
.stat-icon.purple{background:var(--purple-light);color:var(--purple)}
.stat-icon.orange{background:var(--orange-light);color:var(--orange)}
.stat-icon.red{background:var(--red-light);color:var(--red)}
.stat-icon.gray{background:var(--border-light);color:var(--text-muted)}
.stat-number{font-size:28px;font-weight:900;color:var(--text);letter-spacing:-0.03em;line-height:1}
.stat-label{font-size:11.5px;color:var(--text-muted);margin-top:2px}
/* ─── Quick actions ─────────────────────────────────────────────────────────── */
.quick-actions-row{display:flex;gap:10px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px}
.quick-action-card{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:14px 16px;background:var(--card);border:1px solid var(--border);
border-radius:var(--radius);cursor:pointer;min-width:90px;flex-shrink:0;
transition:box-shadow var(--t),transform var(--t);
}
.quick-action-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.qa-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.qa-icon svg{width:18px;height:18px}
.qa-icon.blue{background:var(--blue-light);color:var(--blue)}
.qa-icon.green{background:var(--green-light);color:var(--green)}
.qa-icon.indigo{background:var(--indigo-light);color:var(--indigo)}
.qa-icon.orange{background:var(--orange-light);color:var(--orange)}
.qa-icon.red{background:var(--red-light);color:var(--red)}
.qa-icon.gray{background:var(--border-light);color:var(--text-muted)}
.qa-label{font-size:11.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.2}
/* ─── Dashboard grid ────────────────────────────────────────────────────────── */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* ─── Consultation type badges ──────────────────────────────────────────────── */
.consultation-type-badge{display:inline-flex;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.consultation-type-badge.general{background:var(--blue-light);color:var(--blue)}
.consultation-type-badge.seguimiento{background:var(--green-light);color:var(--green)}
.consultation-type-badge.urgente{background:var(--red-light);color:var(--red)}
.consultation-type-badge.estudios{background:var(--purple-light);color:var(--purple)}
.consultation-type-badge.documento{background:#F0F9FF;color:#0369A1;border:1px solid #BAE6FD}
.consultation-type-badge.lg{font-size:12px;padding:4px 12px}
/* ─── List items ────────────────────────────────────────────────────────────── */
.list-items{display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border-light);transition:opacity var(--t)}
.list-item:last-child{border-bottom:none}
.list-item:hover{opacity:0.78}
.list-item-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:white;flex-shrink:0}
.list-item-avatar.blue,.list-item-avatar.general{background:var(--blue)}
.list-item-avatar.green,.list-item-avatar.seguimiento{background:var(--green)}
.list-item-avatar.red,.list-item-avatar.urgente{background:var(--red)}
.list-item-avatar.purple,.list-item-avatar.estudios{background:var(--purple)}
.list-item-content{flex:1;min-width:0}
.list-item-title{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item-subtitle{font-size:12px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.allergy-dot{color:var(--red);font-size:10px;margin-left:4px}
/* ─── Badges ────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-green{background:var(--green-light);color:var(--green)}
.badge-gray{background:var(--border-light);color:var(--text-muted)}
/* ─── Clinical alerts banner ────────────────────────────────────────────────── */
.clinical-alerts-banner{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.clinical-alerts-banner.compact{margin-bottom:18px}
.alert-banner-item{
display:flex;align-items:flex-start;gap:8px;padding:9px 14px;
border-radius:var(--radius-sm);font-size:13px;line-height:1.5;
}
.alert-banner-item strong{font-weight:700;white-space:nowrap}
.alert-banner-item.red{background:#FEF2F2;color:#991B1B;border-left:3px solid var(--red)}
.alert-banner-item.amber{background:var(--amber-light);color:#78350F;border-left:3px solid var(--amber)}
.alert-banner-item.blue{background:var(--blue-light);color:#1E40AF;border-left:3px solid var(--blue)}
.alert-banner-item.purple{background:var(--purple-light);color:#581C87;border-left:3px solid var(--purple)}
/* ─── Alert chips (table) ───────────────────────────────────────────────────── */
.alert-chips-mini{display:flex;flex-wrap:wrap;gap:4px}
.alert-chip-mini{display:inline-flex;align-items:center;padding:2px 7px;border-radius:12px;font-size:10.5px;font-weight:600}
.alert-chip-mini.red{background:#FEF2F2;color:#DC2626}
.alert-chip-mini.amber{background:var(--amber-light);color:#92400E}
/* ─── Patient quick stats ───────────────────────────────────────────────────── */
.patient-quick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.quick-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.quick-stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:4px}
.quick-stat-value{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4}
.quick-stat-value.followup{color:var(--green);font-size:12.5px}
/* ─── Vitals bar ────────────────────────────────────────────────────────────── */
.vitals-bar{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)}
.vitals-bar-item{flex:1;min-width:90px;background:var(--card);padding:10px 14px;text-align:center}
.vitals-bar-item.glucose{background:var(--orange-light)}
.vitals-bar-item--danger{background:#FEF2F2}.vitals-bar-item--danger .vitals-bar-value{color:#DC2626}
.vitals-bar-item--warning{background:#FFFBEB}.vitals-bar-item--warning .vitals-bar-value{color:#D97706}
.vitals-bar-item--elevated{background:#F5F3FF}.vitals-bar-item--elevated .vitals-bar-value{color:#7C3AED}
.vitals-bar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:2px}
.vitals-bar-value{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.01em}
.vitals-bar-value span{font-size:11px;font-weight:500;color:var(--text-muted)}
/* ─── Vitals chips (timeline) ───────────────────────────────────────────────── */
.vitals-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.vital-chip{display:inline-flex;padding:2px 8px;background:var(--border-light);border-radius:12px;font-size:11px;font-weight:600;color:var(--text-muted)}
.vital-chip.glucose{background:var(--orange-light);color:#92400E}
/* ─── Vitals form grid ──────────────────────────────────────────────────────── */
.vitals-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.vital-input-group{display:flex;flex-direction:column;gap:4px}
.vital-input{text-align:center}
.vital-unit{font-size:11px;color:var(--text-muted);font-weight:500;text-align:center}
.bp-pair{display:flex;align-items:center;gap:4px}
.bp-pair .vital-input{flex:1;min-width:0}
.bp-sep{font-size:16px;font-weight:700;color:var(--text-muted);flex-shrink:0}
/* ─── Search and filters ────────────────────────────────────────────────────── */
.search-filter-bar{margin-bottom:18px;display:flex;flex-direction:column;gap:12px}
.search-form{display:flex;gap:8px;align-items:center}
.search-input-wrap{position:relative;flex:1}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted)}
.search-input{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;background:white;color:var(--text);transition:border-color var(--t)}
.search-input:focus{outline:none;border-color:var(--blue)}
.filter-tabs{display:flex;gap:4px;flex-wrap:wrap}
.filter-tab{padding:5px 13px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--text-muted);border:1.5px solid transparent;background:var(--card);transition:all var(--t)}
.filter-tab:hover{border-color:var(--border);color:var(--text)}
.filter-tab.active{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}
.filter-tab.red.active{background:var(--red-light);color:var(--red);border-color:var(--red)}
.filter-tab.amber.active{background:var(--amber-light);color:#92400E;border-color:var(--amber)}
.filter-tab.green.active{background:var(--green-light);color:var(--green);border-color:var(--green)}
.filter-tab.gray.active{background:var(--border-light);color:var(--text);border-color:var(--border)}
/* ─── Table ─────────────────────────────────────────────────────────────────── */
.patients-table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:9px 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);background:var(--bg);border-bottom:1px solid var(--border)}
.table td{padding:11px 14px;border-bottom:1px solid var(--border-light);font-size:13.5px;color:var(--text)}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:#FAFAFA}
.patient-name-cell{display:flex;align-items:center;gap:9px}
.table-avatar{width:30px;height:30px;background:var(--blue-light);color:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.patient-name{font-weight:600;color:var(--text)}
.patient-email{font-size:12px;color:var(--text-muted)}
.table-actions{display:flex;gap:3px}
.text-muted{color:var(--text-muted)}
.text-subtle{color:var(--text-subtle)}
.text-sm{font-size:13px}
.text-xs{font-size:11.5px}
/* ─── Detail views ──────────────────────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.detail-sidebar{display:flex;flex-direction:column;gap:0}
.patient-profile{display:flex;flex-direction:column;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border-light)}
.profile-avatar{width:60px;height:60px;background:var(--blue);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;margin-bottom:8px}
.profile-name{font-size:15px;font-weight:700;text-align:center}
.info-list{display:flex;flex-direction:column}
.info-item{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-light);font-size:12.5px}
.info-item:last-child{border-bottom:none}
.info-item dt{color:var(--text-muted);font-weight:500;flex-shrink:0}
.info-item dd{color:var(--text);font-weight:600;text-align:right}
.blood-type-val{color:var(--red);font-size:13px}
.measures-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.measure-item{background:var(--bg);border-radius:var(--radius-sm);padding:10px;text-align:center;border:1px solid var(--border-light)}
.measure-val{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-0.02em}
.measure-label{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
.measure-item.bmi-ok .measure-val{color:var(--green)}
.measure-item.bmi-warn .measure-val{color:var(--amber)}
.measure-item.bmi-high .measure-val{color:var(--red)}
.measure-item.bmi-low .measure-val{color:var(--blue)}
.antecedent-block{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.antecedent-block:last-child{border-bottom:none;margin-bottom:0}
.antecedent-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.antecedent-value{font-size:12.5px;color:var(--text);line-height:1.5}
.habits-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.habit-chip{font-size:11.5px;background:var(--border-light);padding:2px 8px;border-radius:12px;color:var(--text-muted)}
/* ─── Timeline ──────────────────────────────────────────────────────────────── */
.timeline{position:relative}
.timeline-item{display:flex;gap:14px;padding-bottom:22px;position:relative}
.timeline-item::before{content:'';position:absolute;left:6px;top:18px;bottom:0;width:2px;background:var(--border)}
.timeline-item:last-child::before{display:none}
.timeline-marker{width:14px;height:14px;border-radius:50%;background:var(--blue);border:2.5px solid white;box-shadow:0 0 0 2px var(--blue);flex-shrink:0;margin-top:4px}
.timeline-item.type-seguimiento .timeline-marker{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.timeline-item.type-urgente .timeline-marker{background:var(--red);box-shadow:0 0 0 2px var(--red)}
.timeline-item.type-estudios .timeline-marker{background:var(--purple);box-shadow:0 0 0 2px var(--purple)}
.timeline-content{flex:1;background:white;border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;border-left:3px solid var(--blue)}
.timeline-item.type-seguimiento .timeline-content{border-left-color:var(--green)}
.timeline-item.type-urgente .timeline-content{border-left-color:var(--red)}
.timeline-item.type-estudios .timeline-content{border-left-color:var(--purple)}
.timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.timeline-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.timeline-date{font-size:12px;font-weight:600;color:var(--text-muted)}
.timeline-actions-row{display:flex;gap:4px}
.timeline-reason{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:7px}
.timeline-body{display:flex;flex-direction:column;gap:4px}
.timeline-diagnosis{font-size:13px;color:var(--text);font-weight:600;margin-bottom:3px}
.timeline-field{font-size:12.5px;color:var(--text-muted);display:flex;gap:5px;flex-wrap:wrap}
.timeline-field-label{font-weight:700;color:var(--text);white-space:nowrap}
.timeline-followup{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--green);margin-top:6px;padding-top:6px;border-top:1px solid var(--border-light)}
/* ─── Consultation detail ───────────────────────────────────────────────────── */
.consultation-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-field{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border-light)}
.detail-field:last-child{border-bottom:none;margin-bottom:0}
.detail-field-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.detail-field-value{font-size:13.5px;color:var(--text);line-height:1.6}
.detail-field-value.highlight{font-weight:700;font-size:15px}
.detail-field-value.bold{font-weight:700}
.detail-field-value.mono{font-family:monospace;font-size:12.5px}
.detail-field-value.followup-val{color:var(--green);font-weight:600}
.diagnosis-field .detail-field-label{color:var(--blue)}
.private-notes-card{border-color:#DDD6FE}
.transcription-text{font-size:13px;color:var(--text-muted);line-height:1.7;font-style:italic}
/* ─── Transcription panel ───────────────────────────────────────────────────── */
.transcription-panel{background:var(--card);border:1px solid var(--purple-light);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.transcription-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background var(--t)}
.transcription-panel-header:hover{background:var(--purple-light)}
.transcription-panel-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--purple)}
.toggle-icon{color:var(--text-muted);font-size:11px}
.transcription-panel-body{padding:12px 16px;border-top:1px solid var(--purple-light)}
/* ─── Forms ─────────────────────────────────────────────────────────────────── */
/* Form containers use generous max-widths so they scale well on wide screens.
Individual field widths stay readable thanks to form-row flex layout. */
.form-container{max-width:980px;margin:0 auto}
.form-container-wide{max-width:1200px}
.form-section{margin-bottom:0}
.form-group{display:flex;flex-direction:column;gap:4px;flex:1}
.form-group-grow{flex:2}
.form-row{display:flex;gap:14px;margin-bottom:14px}
.form-group:not(.form-row > .form-group){margin-bottom:14px}
.form-group:last-child{margin-bottom:0}
.form-label{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.label-note{font-size:11px;font-weight:400;color:var(--text-muted)}
.required{color:var(--red)}
.form-input{padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;color:var(--text);background:white;width:100%;transition:border-color var(--t),box-shadow var(--t)}
.form-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.09)}
.form-textarea{resize:vertical;min-height:75px}
.form-select{cursor:pointer}
.name-prefix-row{display:flex;align-items:stretch;gap:8px}
.name-prefix-select{width:74px;flex:0 0 74px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.label-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.label-dot.red{background:var(--red)}
.label-dot.amber{background:var(--amber)}
.label-dot.blue{background:var(--blue)}
.label-dot.purple{background:var(--purple)}
/* BMI display */
.bmi-display{padding:8px 11px;background:var(--bg);border-radius:var(--radius-sm);font-size:14px;font-weight:700;color:var(--text);border:1.5px solid var(--border);min-height:38px;display:flex;align-items:center}
.bmi-display.bmi-ok{color:var(--green);background:var(--green-light);border-color:var(--green)}
.bmi-display.bmi-warn{color:#92400E;background:var(--amber-light);border-color:var(--amber)}
.bmi-display.bmi-high{color:var(--red);background:var(--red-light);border-color:var(--red)}
.bmi-display.bmi-low{color:var(--blue);background:var(--blue-light);border-color:var(--blue)}
/* ─── Voice upload ──────────────────────────────────────────────────────────── */
.voice-section{border-color:#DDD6FE}
.voice-upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;transition:border-color var(--t),background var(--t);position:relative}
.voice-upload-area.drag-over{border-color:var(--purple);background:var(--purple-light)}
.voice-upload-icon svg{width:36px;height:36px;color:var(--purple);margin:0 auto 10px;display:block}
.voice-upload-area p{font-size:13.5px;color:var(--text-muted);margin-bottom:3px}
.upload-link{color:var(--blue);cursor:pointer;font-weight:700}
.upload-hint{font-size:11.5px;color:var(--text-subtle);display:block;margin-top:3px}
.file-input{display:none}
.selected-file{margin-top:8px;font-size:13px;font-weight:700;color:var(--green)}
.btn-voice{display:flex;align-items:center;gap:7px;margin-top:10px;width:100%;justify-content:center;padding:9px;border:1.5px solid var(--purple);color:var(--purple);background:transparent;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;transition:all var(--t)}
.btn-voice:hover:not(:disabled){background:var(--purple-light)}
.btn-voice:disabled{opacity:0.45;cursor:not-allowed}
/* ─── Alerts ────────────────────────────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:18px;line-height:1.5}
.alert-error{background:var(--red-light);color:#991B1B;border:1px solid #FECACA}
.alert-success{background:var(--green-light);color:#065F46;border:1px solid #A7F3D0}
.alert-info{background:var(--blue-light);color:#1E40AF;border:1px solid #BFDBFE}
/* ─── Empty states ──────────────────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;text-align:center;color:var(--text-muted)}
.empty-state.large{padding:70px 40px}
.empty-state svg{width:44px;height:44px;color:var(--border)}
.empty-state p{font-size:13.5px}
/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(3px)}
.modal-overlay.hidden{display:none}
.modal{background:white;border-radius:var(--radius-lg);padding:30px;max-width:390px;width:90%;box-shadow:var(--shadow-lg);text-align:center}
.modal-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.modal-icon svg{width:22px;height:22px}
.modal-icon.danger{background:var(--red-light);color:var(--red)}
.modal h3{font-size:17px;font-weight:800;margin-bottom:7px}
.modal p{font-size:13.5px;color:var(--text-muted);margin-bottom:22px;line-height:1.5}
.modal-actions{display:flex;gap:10px;justify-content:center}
/* ─── Settings ──────────────────────────────────────────────────────────────── */
.settings-avatar-row{display:flex;align-items:center;gap:14px}
.settings-avatar{width:54px;height:54px;background:var(--blue);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;flex-shrink:0}
.settings-name{font-size:16px;font-weight:800}
.settings-email{font-size:13px;color:var(--text-muted)}
/* ─── Auth ──────────────────────────────────────────────────────────────────── */
.auth-body{background:linear-gradient(135deg,#EFF6FF 0%,#F0FDFA 100%);min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth-container{width:100%;max-width:420px;padding:24px 16px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand-link{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:900;color:var(--text);letter-spacing:-0.02em}
.auth-card{background:white;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.auth-title{font-size:21px;font-weight:900;color:var(--text);margin-bottom:3px;letter-spacing:-0.02em}
.auth-subtitle{font-size:13.5px;color:var(--text-muted);margin-bottom:22px}
.auth-form{display:flex;flex-direction:column}
.auth-form .form-group{margin-bottom:14px}
.auth-form .form-row{margin-bottom:0}
.auth-form .form-row .form-group{margin-bottom:14px}
.auth-footer-text{text-align:center;font-size:13.5px;color:var(--text-muted);margin-top:18px}
.auth-link{color:var(--blue);font-weight:700}
.auth-link:hover{text-decoration:underline}
/* ── Login redesign (2-column + mascot) ─────────────────────────────────── */
/* Card es el ancla — centrada por auth-body flex. Mascota posicionada
absolutamente a su izquierda en desktop. */
.login-wrap{position:relative;width:100%;max-width:420px}
.login-mascot-col{display:none}
.login-mascot-stage{display:flex;align-items:center;justify-content:center}
@keyframes mascotBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
@keyframes mascotCelebrate{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.08) rotate(-4deg)}75%{transform:scale(1.08) rotate(4deg)}}
@keyframes cardShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.login-mascot{width:260px;height:auto;opacity:0;transform-origin:bottom center;transition:opacity .4s ease,transform .25s ease;will-change:transform,opacity;animation:mascotBreathe 4s ease-in-out infinite;-webkit-mask-image:linear-gradient(to bottom,black 84%,transparent 94%);mask-image:linear-gradient(to bottom,black 84%,transparent 94%)}
.login-mascot.mascot-loaded{opacity:1}
.login-mascot.focus-email{transform:scale(1.04)}
.login-mascot.focus-password{transform:scale(1.04);filter:drop-shadow(0 6px 18px rgba(37,99,235,.18))}
.login-mascot.celebrate{animation:mascotCelebrate .5s ease-in-out}
.login-form-col{width:100%}
.login-form-col .auth-brand{margin-bottom:24px;text-align:center}
.login-form-col .auth-card{width:100%}
.auth-card.shake{animation:cardShake .4s ease}
@media(min-width:880px){
.login-mascot-col{display:flex;align-items:center;justify-content:flex-end;position:absolute;right:calc(100% + 40px);top:0;bottom:0;width:300px}
}
.login-form-col .form-input:focus{border-color:var(--blue,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.12);transition:border-color .15s,box-shadow .15s}
.login-form-col .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.28);transition:transform .15s,box-shadow .15s}
/* ─── Landing ───────────────────────────────────────────────────────────────── */
.landing-body{background:white}
.landing-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.landing-nav-inner{max-width:1100px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between}
.landing-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;color:var(--text);letter-spacing:-0.02em}
.landing-nav-actions{display:flex;gap:8px;align-items:center}
.hero{max-width:1100px;margin:0 auto;padding:80px 24px 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-badge{display:inline-block;padding:4px 12px;background:var(--blue-light);color:var(--blue);border-radius:20px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px}
.hero-title{font-size:42px;font-weight:900;color:var(--text);line-height:1.1;letter-spacing:-0.03em;margin-bottom:16px}
.hero-subtitle{font-size:16px;color:var(--text-muted);line-height:1.6;margin-bottom:30px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center}
.hero-card-demo{background:white;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);width:100%;max-width:360px;overflow:hidden}
.demo-header{display:flex;align-items:center;gap:5px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11.5px;color:var(--text-muted)}
.demo-dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
.demo-dot.blue{background:var(--blue)} .demo-dot.green{background:var(--green)}
.demo-patient{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--border-light)}
.demo-avatar{width:38px;height:38px;background:var(--blue);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.demo-name{font-weight:700;font-size:14px} .demo-meta{font-size:11.5px;color:var(--text-muted)}
.demo-timeline{padding:14px;display:flex;flex-direction:column;gap:10px}
.demo-tl-item{display:flex;gap:8px;align-items:flex-start}
.demo-tl-dot{width:8px;height:8px;background:var(--blue);border-radius:50%;margin-top:3px;flex-shrink:0}
.demo-tl-date{font-size:10.5px;color:var(--text-muted)} .demo-tl-title{font-size:12.5px;font-weight:600}
.features{background:var(--bg);padding:80px 24px}
.features-inner{max-width:1100px;margin:0 auto}
.features-title{font-size:30px;font-weight:900;text-align:center;color:var(--text);letter-spacing:-0.02em;margin-bottom:6px}
.features-subtitle{text-align:center;color:var(--text-muted);font-size:15.5px;margin-bottom:44px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:white;border-radius:var(--radius-lg);border:1px solid var(--border);padding:22px;box-shadow:var(--shadow)}
.feature-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.feature-icon svg{width:20px;height:20px}
.feature-icon.blue{background:var(--blue-light);color:var(--blue)} .feature-icon.green{background:var(--green-light);color:var(--green)}
.feature-icon.indigo{background:var(--indigo-light);color:var(--indigo)} .feature-icon.orange{background:var(--orange-light);color:var(--orange)}
.feature-icon.purple{background:var(--purple-light);color:var(--purple)} .feature-icon.teal{background:var(--teal-light);color:var(--teal)}
.feature-card h3{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:5px}
.feature-card p{font-size:13px;color:var(--text-muted);line-height:1.6}
.cta-section{background:var(--blue);padding:80px 24px;text-align:center}
.cta-inner{max-width:600px;margin:0 auto}
.cta-section h2{font-size:30px;font-weight:900;color:white;letter-spacing:-0.02em;margin-bottom:8px}
.cta-section p{font-size:15.5px;color:rgba(255,255,255,0.8);margin-bottom:26px}
.cta-section .btn-primary{background:white;color:var(--blue);border-color:white}
.cta-section .btn-primary:hover{background:var(--blue-light)}
.landing-footer{background:var(--text);padding:22px}
.landing-footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-muted)}
.btn-ghost{color:var(--text-muted);background:transparent;border:none}
/* ─── Utilities ─────────────────────────────────────────────────────────────── */
.hidden{display:none!important}
/* ─── Sidebar overlay (mobile) ──────────────────────────────────────────────── */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;backdrop-filter:blur(2px)}
.sidebar-overlay.hidden{display:none!important}
/* ─── Responsive ────────────────────────────────────────────────────────────── */
/* App shell: the sidebar collapses to a slide-in drawer on tablets & phones
(≤900px) so portrait tablets get the full content width instead of a cramped
column squeezed next to a 230px rail. The hamburger (wired in app.js) toggles it. */
@media (max-width:900px) {
.sidebar{transform:translateX(-100%);transition:transform 0.28s ease}
.sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,0.3)}
.main-wrapper{margin-left:0;max-width:100vw}
.mobile-menu-btn{display:flex}
.top-search-form{display:none}
body.sidebar-open{overflow:hidden}
/* Stack page headers so long action toolbars wrap to full width instead of
overflowing (main-content uses overflow-x:clip, which would clip them). */
.page-header{flex-direction:column;gap:12px}
.page-actions{width:100%}
}
@media (max-width:1024px) {
.stats-grid{grid-template-columns:1fr 1fr}
.consultation-detail-grid{grid-template-columns:1fr}
.patient-quick-stats{grid-template-columns:1fr 1fr}
.features-grid{grid-template-columns:1fr 1fr}
.hero{grid-template-columns:1fr} .hero-visual{display:none}
}
@media (max-width:800px) {
.dashboard-grid{grid-template-columns:1fr}
.detail-grid{grid-template-columns:1fr}
.vitals-bar-item{min-width:70px}
}
@media (max-width:680px) {
.content-inner{padding:18px 14px}
.stats-grid{grid-template-columns:1fr}
.form-row{flex-direction:column}
.page-header{flex-direction:column;gap:12px}
.page-actions{width:100%}
.quick-actions-row{gap:7px}
.patient-quick-stats{grid-template-columns:1fr 1fr}
.vitals-form-grid{grid-template-columns:1fr 1fr}
.features-grid{grid-template-columns:1fr}
.top-search-form{display:none}
.consult-layout{flex-direction:column}
.consult-history-panel{width:100%}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ITERATION 3 ADDITIONS */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Button variants ────────────────────────────────────────────────────── */
.btn-primary-soft{background:var(--blue-light);color:var(--blue);border:1.5px solid transparent}
.btn-primary-soft:hover{background:#DBEAFE;border-color:var(--blue)}
.shortcut-hint{font-size:10px;background:rgba(37,99,235,0.15);padding:1px 5px;border-radius:4px;font-weight:600;margin-left:2px}
/* ─── Nav extras ─────────────────────────────────────────────────────────── */
.nav-item-btn{background:none;border:none;width:100%;text-align:left;color:#94A3B8;font-size:13.5px;font-weight:500;cursor:pointer}
.nav-item-btn:hover{background:rgba(255,255,255,0.06);color:#CBD5E1}
.nav-shortcut{font-size:9.5px;background:rgba(255,255,255,0.08);padding:1px 5px;border-radius:4px;margin-left:auto;color:#64748B}
/* ─── Clinical summary card ──────────────────────────────────────────────── */
.clinical-summary-card{
display:flex;align-items:flex-start;gap:12px;
background:linear-gradient(135deg,#EFF6FF,#F5F3FF);
border:1px solid #C7D2FE;border-radius:var(--radius);
padding:14px 16px;margin-bottom:16px;
}
.cs-icon{width:36px;height:36px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow)}
.cs-content{flex:1;min-width:0}
.cs-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:#6366F1;margin-bottom:3px}
.cs-text{font-size:13.5px;color:var(--text);line-height:1.6}
.cs-empty{color:var(--text-muted);font-style:italic}
.cs-action{flex-shrink:0}
.cs-regen-btn{color:#6366F1;border-color:transparent}
.cs-regen-btn:hover{background:#EEF2FF}
/* ─── Timeline v2 ────────────────────────────────────────────────────────── */
@keyframes slideInTL {
from{opacity:0;transform:translateX(-8px)}
to{opacity:1;transform:translateX(0)}
}
.timeline.v2{position:relative;display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:0;animation:slideInTL 0.35s ease both;opacity:0;position:relative}
.tl-item:last-child .tl-connector{display:none}
.tl-icon{
width:36px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;
padding-top:2px;
}
.tl-icon svg{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--blue-light);color:var(--blue);box-shadow:var(--shadow)}
.tl-item.tl-seguimiento .tl-icon svg{background:var(--green-light);color:var(--green)}
.tl-item.tl-urgente .tl-icon svg{background:var(--red-light);color:var(--red)}
.tl-item.tl-estudios .tl-icon svg{background:var(--purple-light);color:var(--purple)}
.tl-item.tl-documento .tl-icon svg{background:#F0F9FF;color:#0369A1}
.tl-connector{width:2px;background:var(--border);flex:1;min-height:16px;margin-top:4px;align-self:stretch}
.tl-item.tl-seguimiento .tl-connector{background:var(--green-light)}
.tl-item.tl-urgente .tl-connector{background:var(--red-light)}
.tl-item.tl-estudios .tl-connector{background:var(--purple-light)}
.tl-item.tl-documento .tl-connector{background:#E0F2FE}
.tl-card{
flex:1;background:white;border:1px solid var(--border);border-radius:var(--radius);
padding:13px 15px;margin:0 0 12px 10px;
border-left:3px solid var(--blue);
transition:box-shadow var(--t);
}
.tl-card:hover{box-shadow:var(--shadow-md)}
.tl-item.tl-seguimiento .tl-card{border-left-color:var(--green)}
.tl-item.tl-urgente .tl-card{border-left-color:var(--red)}
.tl-item.tl-estudios .tl-card{border-left-color:var(--purple)}
.tl-item.tl-documento .tl-card{border-left-color:#0EA5E9;background:#FAFEFF}
.tl-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.tl-card-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-date{font-size:11.5px;color:var(--text-muted);font-weight:600}
.tl-actions{display:flex;gap:4px;flex-shrink:0}
.tl-reason{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.tl-diagnosis{font-size:13px;color:var(--text);margin:6px 0 4px;line-height:1.5}
.tl-field-label{font-weight:700;color:var(--blue);font-size:12px}
.tl-item.tl-seguimiento .tl-field-label{color:var(--green)}
.tl-item.tl-urgente .tl-field-label{color:var(--red)}
.tl-expandable{max-height:0;overflow:hidden;transition:max-height 0.3s ease;display:flex;flex-direction:column;gap:3px}
.tl-expandable.open{max-height:400px}
.tl-detail{font-size:12.5px;color:var(--text-muted);line-height:1.5;padding-top:3px}
.tl-expand-btn{
display:inline-flex;align-items:center;gap:4px;
font-size:11.5px;font-weight:600;color:var(--blue);
background:none;border:none;cursor:pointer;padding:5px 0;
transition:color var(--t);
}
.tl-expand-btn:hover{color:var(--blue-dark)}
.tl-followup{
display:flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:600;color:var(--green);
margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light);
}
/* ─── Quick Consultation Modal ───────────────────────────────────────────── */
.qc-overlay{
position:fixed;inset:0;background:rgba(15,23,42,0.6);
display:flex;align-items:center;justify-content:center;
z-index:1000;backdrop-filter:blur(4px);
animation:fadeIn 0.15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.qc-overlay.hidden{display:none}
.qc-modal{
background:white;border-radius:var(--radius-lg);
width:100%;max-width:540px;max-height:92vh;overflow-y:auto;
box-shadow:var(--shadow-lg);
animation:slideUp 0.2s ease;
}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.qc-header{padding:18px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qc-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text)}
.qc-hint{font-size:11.5px;color:var(--text-muted);margin:3px 0 0}
.qc-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;transition:background var(--t)}
.qc-close:hover{background:var(--border-light)}
.qc-form{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
.qc-patient-row{display:flex;flex-direction:column;gap:4px}
.qc-label{font-size:12px;font-weight:700;color:var(--text)}
.qc-dx-note{font-size:10.5px;font-weight:400;color:var(--text-muted);margin-left:4px}
.qc-select{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--text);background:white}
.qc-select:focus{outline:none;border-color:var(--blue)}
.qc-fields{display:flex;flex-direction:column;gap:10px}
.qc-field{display:flex;flex-direction:column;gap:3px}
.qc-input{padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;color:var(--text);font-family:var(--font);transition:border-color var(--t)}
.qc-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.08)}
.qc-textarea{resize:none;min-height:60px}
.qc-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qc-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;border-top:1px solid var(--border-light)}
.qc-footer-note{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--text-muted);line-height:1.4;flex:1}
.qc-submit{flex-shrink:0}
/* ─── Clinical templates bar ─────────────────────────────────────────────── */
.templates-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;background:white;border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px}
.templates-label{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.template-btns{display:flex;gap:6px;flex-wrap:wrap}
.template-btn{padding:5px 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;transition:all var(--t)}
.template-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
/* Template applied highlight */
@keyframes templatePulse{0%{border-color:var(--green);background:var(--green-light)}100%{border-color:var(--border);background:white}}
.template-applied{animation:templatePulse 1.2s ease}
/* ─── Consultation layout with history sidebar ───────────────────────────── */
.consult-layout{display:flex;gap:20px;align-items:flex-start}
.consult-main{flex:1;min-width:0}
.consult-history-panel{
width:260px;flex-shrink:0;position:sticky;top:calc(var(--header-h) + 20px);
background:white;border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);overflow:hidden;
}
.chp-section{padding:12px 14px;border-bottom:1px solid var(--border-light)}
.chp-section:last-child{border-bottom:none}
.chp-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:8px}
.chp-alert{font-size:11.5px;padding:5px 8px;border-radius:5px;margin-bottom:5px;line-height:1.4}
.chp-alert.red{background:var(--red-light);color:#991B1B}
.chp-alert.amber{background:var(--amber-light);color:#78350F}
.chp-alert.blue{background:var(--blue-light);color:#1E40AF}
.chp-empty{font-size:12px;color:var(--text-subtle);font-style:italic}
.chp-consult{display:block;padding:8px 0;border-bottom:1px solid var(--border-light);transition:background var(--t);border-radius:4px}
.chp-consult:last-child{border-bottom:none}
.chp-consult:hover{background:var(--bg)}
.chp-consult-header{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.chp-date{font-size:10.5px;color:var(--text-muted)}
.chp-reason{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.3}
.chp-dx{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px}
.chp-meds{font-size:10.5px;color:var(--text-subtle);margin-top:2px}
.chp-measures{display:flex;gap:8px;flex-wrap:wrap}
.chp-measure{font-size:12px;color:var(--text-muted)}
.chp-measure span{font-size:14px;font-weight:800;color:var(--text)}
.chp-measure.bmi span{color:var(--green)}
/* ─── Landing v2 ─────────────────────────────────────────────────────────── */
.section-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--blue);background:var(--blue-light);padding:3px 10px;border-radius:20px;margin-bottom:10px}
.section-label.light{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.15)}
.hero-v2{padding:80px 24px 60px;background:linear-gradient(160deg,#F8FAFF 0%,#EFF6FF 40%,#F5F3FF 100%)}
.hero-v2-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-v2-content{}
.hero-v2-title{font-size:48px;font-weight:900;color:var(--text);line-height:1.08;letter-spacing:-0.03em;margin-bottom:18px}
.hero-accent{color:var(--blue);position:relative}
.hero-v2-sub{font-size:16.5px;color:var(--text-muted);line-height:1.65;margin-bottom:28px;max-width:480px}
.hero-v2-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hero-trust{font-size:12px;color:var(--text-subtle)}
.hero-badge{display:inline-block;padding:4px 12px;background:var(--blue-light);color:var(--blue);border-radius:20px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px}
/* App mockup */
.app-mockup{background:white;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.12),0 4px 16px rgba(0,0,0,0.06);border:1px solid var(--border);overflow:hidden}
.mockup-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
.mockup-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.red-dot{background:#EF4444}.amber-dot{background:#F59E0B}.green-dot{background:#10B981}
.mockup-url{font-size:10.5px;color:var(--text-muted);background:white;border:1px solid var(--border);border-radius:4px;padding:2px 8px;margin-left:8px}
.mockup-content{padding:14px}
.mockup-patient-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mockup-avatar{width:38px;height:38px;background:var(--blue);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;flex-shrink:0}
.mockup-patient-name{font-size:14px;font-weight:800;margin-bottom:3px}
.mockup-chips{display:flex;gap:4px}
.mockup-chip{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.mockup-chip.blue{background:var(--blue-light);color:var(--blue)}
.mockup-chip.green{background:var(--green-light);color:var(--green)}
.mockup-chip.red{background:var(--red-light);color:var(--red)}
.mockup-alerts{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.mockup-alert{font-size:11px;padding:5px 8px;border-radius:5px;font-weight:600}
.mockup-alert.red{background:var(--red-light);color:#991B1B}
.mockup-alert.amber{background:var(--amber-light);color:#78350F}
.mockup-timeline{display:flex;flex-direction:column;gap:8px}
.mockup-tl-item{display:flex;gap:8px;align-items:flex-start}
.mockup-tl-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.mockup-tl-icon svg{width:13px;height:13px}
.mockup-tl-icon.blue{background:var(--blue-light);color:var(--blue)}
.mockup-tl-icon.green{background:var(--green-light);color:var(--green)}
.mockup-tl-content{flex:1}
.mockup-tl-date{font-size:10.5px;color:var(--text-muted);margin-bottom:2px;display:flex;align-items:center;gap:5px}
.mockup-chip-inline{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:10px}
.mockup-chip-inline.seguimiento{background:var(--green-light);color:var(--green)}
.mockup-chip-inline.general{background:var(--blue-light);color:var(--blue)}
.mockup-tl-dx{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.3}
.mockup-vitals-row{display:flex;gap:6px;margin-top:3px}
.mockup-vitals-row span{font-size:9.5px;background:var(--border-light);padding:1px 6px;border-radius:8px;color:var(--text-muted);font-weight:600}
/* Landing how it works */
.how-section{padding:80px 24px;background:var(--bg)}
.how-inner{max-width:1100px;margin:0 auto;text-align:center}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.step{background:white;border-radius:var(--radius-lg);border:1px solid var(--border);padding:24px;box-shadow:var(--shadow)}
.step-num{width:36px;height:36px;background:var(--blue);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;margin:0 auto 12px}
.step h3{font-size:14.5px;font-weight:700;margin-bottom:6px}
.step p{font-size:13px;color:var(--text-muted);line-height:1.5}
/* Landing security section */
.security-section{padding:80px 24px;background:var(--sidebar-bg);color:white}
.security-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.security-content h2{font-size:28px;font-weight:900;margin-bottom:22px;letter-spacing:-0.02em}
.security-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.security-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.85)}
.security-list svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.security-visual{display:flex;justify-content:center}
.lock-card{width:180px;height:180px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;font-size:13px;color:rgba(255,255,255,0.7)}
/* Landing nav links */
.landing-nav-links{display:flex;gap:24px}
.landing-nav-links a{font-size:14px;color:var(--text-muted);font-weight:500;transition:color var(--t)}
.landing-nav-links a:hover{color:var(--text)}
/* Landing responsive */
@media (max-width:900px) {
.hero-v2-inner{grid-template-columns:1fr}
.hero-v2-visual{display:none}
.steps-grid{grid-template-columns:1fr 1fr}
.security-inner{grid-template-columns:1fr}
.security-visual{display:none}
.landing-nav-links{display:none}
}
@media (max-width:600px) {
.hero-v2-title{font-size:34px}
.steps-grid{grid-template-columns:1fr}
.qc-row-2{grid-template-columns:1fr}
.landing-nav-hide-mobile{display:none!important}
}
/* ─── Landing: pricing grid stacks vertically on mobile ─────────────────── */
.landing-pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:28px;
}
@media(max-width:860px){
.landing-pricing-grid{
grid-template-columns:1fr;
max-width:440px;
margin-left:auto;
margin-right:auto;
}
}
/* ─── Landing: brand name always visible, smaller on mobile ─────────────── */
.landing-brand-text{object-fit:contain;display:block}
@media(max-width:600px){
.landing-brand-text{height:20px!important}
.landing-nav-inner{padding:10px 14px}
.hero-v2{padding:44px 16px 32px}
#pricing{padding:48px 16px!important}
.landing-footer-inner{flex-direction:column;gap:6px;text-align:center}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ITERATION 5 — DASHBOARD UI PREMIUM */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Sidebar v2 ─────────────────────────────────────────────────────────── */
.logo-block{display:flex;flex-direction:column;gap:1px}
.logo-sub{font-size:9.5px;color:#475569;font-weight:500;letter-spacing:0.02em;margin-top:1px}
.nav-badge-new{
font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;
background:#10B981;color:white;padding:1px 6px;border-radius:10px;margin-left:auto;
}
.user-avatar-lg{
width:36px;height:36px;background:var(--blue);border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:white;font-weight:800;font-size:13px;flex-shrink:0;
box-shadow:0 0 0 2px rgba(37,99,235,0.3);
}
/* ─── Topbar v2 ──────────────────────────────────────────────────────────── */
.top-search-wrap{position:relative;flex:1}
.top-search-input{padding-right:46px}
.search-kbd{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
font-size:10px;color:var(--text-muted);background:var(--border-light);
padding:2px 6px;border-radius:4px;font-family:var(--font);
border:1px solid var(--border);pointer-events:none;white-space:nowrap;
}
.topbar-qc-btn{
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:var(--radius-sm);
font-size:13px;font-weight:600;cursor:pointer;
background:transparent;border:1.5px solid var(--border);
color:var(--text);transition:all var(--t);white-space:nowrap;
}
/* ─── La barra superior no cabe en tableta ────────────────────────────────────
*
* 23-ago-2026, BUG PREEXISTENTE cazado por las pruebas del reordenado de
* Configuración: a 820 px la barra mide 843 y la página se sale 23 px a la
* derecha —una franja en blanco al arrastrar— **en TODAS las pantallas**, no
* sólo en Configuración. La causa son los cuatro botones de acción con texto
* dentro de un `.top-header-right` que es `flex-shrink:0`.
*
* Se escapó de las pruebas de navegador que ya vigilaban esto porque su médico
* de mentiras tiene un nombre corto y cabía raspando.
*
* Abajo de 1100 px los botones se quedan con su icono: `font-size:0` esconde el
* texto (que es un nodo suelto, sin etiqueta que agarrar) y el SVG no se entera,
* porque trae ancho y alto propios. El `title` da el nombre al pasar el mouse y
* el área táctil no baja de 40 px.
*
* 26-ago-2026 — ERA 980 Y SE QUEDABA CORTO. El umbral se eligió en agosto
* midiendo a 820 px, que era donde se había visto el problema; nadie midió los
* anchos de en medio. Medido ahora en una ventana de 1024 px, SIN tocar nada y
* sin el botón nuevo del buzón:
*
* ventana 1024 → document.scrollWidth = 1050 (26 px de más)
* ventana 1100 → 1100 (ya cabe)
*
* O sea que la franja en blanco al arrastrar seguía ahí para cualquiera con un
* portátil de 1024 px de ancho útil. Salió al medir el botón nuevo en cinco
* anchos en vez de en uno — la misma lección de la nota de arriba, otra vez.
*/
@media(max-width:1100px){
.topbar-qc-btn,.topbar-new-btn{
font-size:0;gap:0;padding:9px 11px;min-width:40px;justify-content:center;
}
.topbar-qc-btn svg,.topbar-new-btn svg{width:16px;height:16px}
}
.topbar-qc-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.topbar-new-btn{white-space:nowrap}
.topbar-qc-wrap{position:relative;display:inline-flex}
/* El menú de «Acciones rápidas» reusa la caja del menú del avatar, pero se
ancla a la IZQUIERDA de su disparador: colgado a la derecha se salía de la
pantalla, porque este botón vive a media barra y no en la esquina. Y repone
`font-size`, que abajo de 1100 px el disparador deja en 0 para quedarse en
icono (ver la nota de `.topbar-qc-btn`). */
.qa-menu{left:0;right:auto;min-width:210px;font-size:13px}
.qa-chevron{transition:transform var(--t)}
#qaBtn[aria-expanded="true"] .qa-chevron{transform:rotate(180deg)}
.top-user-wrap{position:relative}
.top-user-btn{
display:flex;align-items:center;gap:7px;
padding:5px 10px 5px 6px;
border-radius:20px;border:1px solid var(--border);
background:white;transition:box-shadow var(--t);cursor:pointer;
font-family:var(--font);-webkit-appearance:none;appearance:none;
}
.top-user-btn:hover{box-shadow:var(--shadow-md)}
.top-user-btn[aria-expanded="true"]{box-shadow:var(--shadow-md);border-color:rgba(37,99,235,0.3)}
.top-user-chevron{opacity:0.4;transition:transform 0.2s ease;flex-shrink:0}
.top-user-btn[aria-expanded="true"] .top-user-chevron{transform:rotate(180deg);opacity:0.7}
/* ─── User dropdown menu ─────────────────────────────────────────────────── */
.top-user-dropdown{
position:absolute;right:0;top:calc(100% + 8px);
background:white;border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
min-width:230px;z-index:400;overflow:hidden;
animation:dropdownIn 0.15s ease;
}
@keyframes dropdownIn{
from{opacity:0;transform:translateY(-6px) scale(0.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.top-user-dropdown.hidden{display:none!important}
.tud-header{
display:flex;align-items:center;gap:10px;
padding:14px 16px;background:#FAFAFA;
}
.tud-avatar{
width:36px;height:36px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,var(--blue),#6366F1);
color:white;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:14px;
}
.tud-header-info{min-width:0;flex:1}
.tud-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tud-email{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.tud-divider{height:1px;background:var(--border-light)}
.tud-item{
display:flex;align-items:center;gap:9px;width:100%;
padding:10px 16px;font-size:13.5px;font-weight:500;
color:var(--text);cursor:pointer;
background:none;border:none;font-family:var(--font);text-align:left;
transition:background var(--t),color var(--t);text-decoration:none;
}
.tud-item:hover{background:#F0F7FF;color:var(--blue)}
.tud-item svg{color:var(--text-muted);flex-shrink:0;transition:color var(--t)}
.tud-item:hover svg{color:var(--blue)}
.tud-logout:hover{background:#FEF2F2!important;color:var(--red)!important}
.tud-logout:hover svg{color:var(--red)!important}
/* ─── Dashboard hero ─────────────────────────────────────────────────────── */
.dash-hero{
background:linear-gradient(135deg,#EFF6FF 0%,#E0F2FE 55%,#F0FDFA 100%);
border-radius:var(--radius-lg);
border:1px solid rgba(37,99,235,0.1);
padding:28px 32px;
margin-bottom:20px;
overflow:hidden;
position:relative;
}
.dash-hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
.dash-hero-text{flex:1;min-width:0}
.dash-greeting{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-0.02em;margin-bottom:4px}
.dash-greeting-sub{font-size:14px;color:var(--text-muted);margin-bottom:8px}
.dash-date{
display:inline-flex;align-items:center;gap:5px;
font-size:12.5px;color:var(--text-muted);font-weight:500;
background:rgba(255,255,255,0.7);padding:4px 10px;border-radius:20px;
border:1px solid rgba(37,99,235,0.12);margin-bottom:18px;
}
.dash-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-qc-btn{background:rgba(255,255,255,0.8)!important}
.dash-qc-btn:hover{background:white!important}
/* Hero illustration */
.dash-hero-illus{
position:relative;width:240px;height:160px;flex-shrink:0;
}
@media (max-width:860px){.dash-hero-illus{display:none}}
.hi-blob{
position:absolute;right:-30px;bottom:-30px;
width:180px;height:180px;
background:rgba(37,99,235,0.07);border-radius:50%;
}
.hi-card{
position:absolute;background:white;border-radius:12px;
box-shadow:0 6px 24px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
}
.hi-card-main{
right:0;bottom:0;width:155px;padding:13px;
transform:rotate(-4deg);
}
.hi-card-dots{display:flex;gap:4px;margin-bottom:8px}
.hi-dot{width:7px;height:7px;border-radius:50%;background:#E5E7EB}
.hi-dot-g{background:#10B981}
.hi-card-icon{display:flex;justify-content:center;margin-bottom:8px}
.hi-lines{display:flex;flex-direction:column;gap:5px}
.hi-line{height:6px;background:#EFF6FF;border-radius:4px;width:100%}
.hi-line-short{width:65%}
.hi-float-circle{
position:absolute;background:white;border-radius:50%;
box-shadow:0 4px 16px rgba(0,0,0,0.1);
display:flex;align-items:center;justify-content:center;
}
.hi-steth{top:0;right:100px;width:60px;height:60px;transform:rotate(8deg)}
.hi-pulse{top:50px;left:10px;width:40px;height:40px;background:var(--green-light)}
/* ─── KPI grid ───────────────────────────────────────────────────────────── */
.dash-kpi-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;
}
.kpi-card{
background:white;border-radius:var(--radius);border:1px solid var(--border);
box-shadow:var(--shadow);padding:18px 16px 0;
display:flex;align-items:flex-start;gap:13px;
position:relative;overflow:hidden;
transition:transform var(--t),box-shadow var(--t);
cursor:default;
}
/* El `z-index` NO es decorativo, y por eso va junto al `transform`.
*
* 24-ago-2026: la nota negra de ayuda salía tapada por la fila de gráficas del
* Inicio. La causa es que un `transform` CREA UN CONTEXTO DE APILAMIENTO, y este
* aparece justo en el momento en que se muestra el tooltip —al hacer hover—. El
* `z-index:1010` del tooltip quedaba atrapado DENTRO de ese contexto; hacia
* afuera la tarjeta valía `z-index:auto`, y `.trend-card` viene después en el
* DOM, así que ganaba por orden de pintado.
*
* Nunca se había visto porque hasta que existió esa fila no había nada debajo
* que pudiera taparlo. Si alguien quita el `transform`, este `z-index` deja de
* hacer falta — pero no estorba. */
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);z-index:20}
.kpi-card[data-tooltip]{overflow:visible} /* allow tooltip to escape card bounds */
.kpi-icon-wrap{
width:42px;height:42px;border-radius:var(--radius-sm);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kpi-icon-wrap svg{width:20px;height:20px}
.kpi-icon-blue{background:var(--blue-light);color:var(--blue)}
.kpi-icon-green{background:var(--green-light);color:var(--green)}
.kpi-icon-amber{background:var(--orange-light);color:var(--orange)}
.kpi-icon-purple{background:var(--purple-light);color:var(--purple)}
.kpi-body{flex:1;padding-bottom:18px}
.kpi-num{
font-size:32px;font-weight:900;color:var(--text);letter-spacing:-0.04em;line-height:1;margin-bottom:3px;
}
.kpi-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.kpi-micro{font-size:11.5px;color:var(--text-muted)}
.kpi-bar{
position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--radius) var(--radius);
}
.kpi-bar-blue{background:var(--blue)}
.kpi-bar-green{background:var(--green)}
.kpi-bar-amber{background:var(--orange)}
.kpi-bar-purple{background:var(--purple)}
/* ─── Fila de evolución (gráficas mes a mes) ─────────────────────────────── */
/* Cuelga de la fila de KPI de arriba y repite su lenguaje: misma tarjeta, mismo
borde, misma sombra. Cada tarjeta es un número grande que pinta el SERVIDOR
más un lienzo que puede quedarse vacío si el CDN de Chart.js no llega — por
eso el número nunca vive dentro del canvas. */
.dash-trend-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;
}
/* 🚨 Cuatro en el mismo renglón cuando la de Ganancia también se pinta
(3-sep-2026, encargo de Francisco). Va con una clase y NO con
`auto-fit`: con `auto-fit` el número de columnas depende del ancho exacto
de la ventana, y hay pruebas de navegador que lo cuentan. Una clase dice
la intención y se puede medir. */
.dash-trend-grid.con-ganancia{grid-template-columns:repeat(4,1fr)}
.trend-card{
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:15px 16px 12px;position:relative;overflow:hidden;
min-width:0;
}
.trend-head{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.trend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.trend-title{font-size:12.5px;font-weight:700;color:var(--text)}
/* De quién es la gráfica (11-sep-2026). Va en el encabezado de la tarjeta, a
la derecha del título, y es el mismo segmentado de Insumos y Mis finanzas —
más pequeño porque aquí compite con una tarjeta, no con una pantalla. */
.trend-ambito{display:inline-flex;gap:2px;margin-left:auto;padding:2px;min-width:0;
background:#F1F5F9;border:1px solid var(--border);border-radius:999px}
/* El que se encoge es el selector, NO el título: sin esto, «Ganancia por mes»
se partía en dos renglones y esa tarjeta quedaba más alta que sus tres
hermanas de la misma fila. */
.trend-head .trend-title{flex-shrink:0}
.trend-ambito a{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;
color:#64748B;text-decoration:none;white-space:nowrap;max-width:88px;min-width:0;
overflow:hidden;text-overflow:ellipsis}
.trend-ambito a:hover{color:var(--text);background:#fff}
.trend-ambito a.on{background:#0F172A;color:#fff}
.trend-figure{display:flex;align-items:baseline;gap:9px;margin-bottom:2px;flex-wrap:wrap}
.trend-value{
font-size:27px;font-weight:900;color:var(--text);letter-spacing:-0.04em;line-height:1;
}
.trend-delta{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.trend-delta-up{color:#047857} /* verde oscuro: legible como TEXTO, que --green no es */
.trend-delta-down{color:#B91C1C}
.trend-delta-flat{color:var(--text-muted)}
.trend-sub{font-size:11.5px;color:var(--text-muted);margin-bottom:9px}
.trend-canvas{height:96px;position:relative}
.trend-axis{
display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-subtle);
margin-top:5px;font-variant-numeric:tabular-nums;
}
.trend-legend{display:flex;gap:13px;margin-top:9px;flex-wrap:wrap}
.trend-legend span{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;font-weight:600;color:var(--text-muted);
}
.trend-legend i{width:9px;height:9px;border-radius:2.5px;display:inline-block;flex-shrink:0}
/* La tira que sustituye a la fila mientras el médico no tiene dos meses de
historia. Tres lienzos vacíos arriba de todo se ven rotos. */
.trend-invite{
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:16px 20px;margin:0 0 20px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.trend-invite-icon{
width:44px;height:44px;border-radius:11px;background:var(--blue-light);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.trend-invite-text{flex:1;min-width:200px}
.trend-invite-title{font-size:14px;font-weight:700;color:var(--text)}
.trend-invite-sub{font-size:13px;color:var(--text-muted);margin-top:2px}
/* ─── Quick actions grid ─────────────────────────────────────────────────── */
.dash-section-header{margin-bottom:10px}
.dash-section-title{font-size:13.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}
.dash-qactions-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px;
}
.dqa-card{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:16px 10px 14px;background:white;border:1px solid var(--border);
border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;
text-align:center;transition:all var(--t);text-decoration:none;
font-family:var(--font);
}
.dqa-card:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dqa-icon{
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:transform var(--t);
}
.dqa-card:hover .dqa-icon{transform:scale(1.08)}
.dqa-icon svg{width:20px;height:20px}
.dqa-blue{background:var(--blue-light);color:var(--blue)}
.dqa-indigo{background:var(--indigo-light);color:var(--indigo)}
.dqa-green{background:var(--green-light);color:var(--green)}
.dqa-amber{background:var(--orange-light);color:var(--orange)}
.dqa-gray{background:var(--border-light);color:var(--text-muted)}
.dqa-label{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}
/* ─── Dashboard main grid ────────────────────────────────────────────────── */
.dash-main-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-bottom:18px;align-items:start}
.dash-main-left{display:flex;flex-direction:column;gap:0}
.dash-main-right{display:flex;flex-direction:column;gap:0}
/* ─── Empty consultations state ──────────────────────────────────────────── */
.dash-empty-consults{
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:32px 20px;text-align:center;
}
.dec-icon-wrap{
width:72px;height:72px;background:var(--bg);border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);
}
.dec-title{font-size:15px;font-weight:700;color:var(--text)}
.dec-sub{font-size:13px;color:var(--text-muted);max-width:300px;line-height:1.5}
/* ─── Patient list (dashboard) ───────────────────────────────────────────── */
.dash-patient-list{display:flex;flex-direction:column;gap:0}
.dpl-item{
display:flex;align-items:center;gap:12px;
padding:11px 0;border-bottom:1px solid var(--border-light);
transition:background var(--t);
}
.dpl-item:last-child{border-bottom:none}
.dpl-avatar{
width:38px;height:38px;border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--indigo));
color:white;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:14px;flex-shrink:0;
}
.dpl-content{flex:1;min-width:0}
.dpl-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.dpl-meta{font-size:12px;color:var(--text-muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpl-badges{display:flex;gap:4px;flex-wrap:wrap}
.dpl-badge{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:10px}
.dpl-badge.red{background:var(--red-light);color:#DC2626}
.dpl-badge.amber{background:var(--orange-light);color:#92400E}
.dpl-badge.blue{background:var(--blue-light);color:var(--blue)}
.dpl-btn{
padding:5px 12px;border-radius:var(--radius-sm);
font-size:12px;font-weight:600;color:var(--blue);
border:1.5px solid var(--blue);background:white;
cursor:pointer;transition:all var(--t);white-space:nowrap;flex-shrink:0;
}
.dpl-btn:hover{background:var(--blue-light)}
/* ─── Agenda card ────────────────────────────────────────────────────────── */
.dash-agenda-card{margin-bottom:14px}
.dash-agenda-body{padding:16px}
.dash-agenda-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;text-align:center}
.dae-icon{margin-bottom:4px}
.dae-title{font-size:13.5px;font-weight:600;color:var(--text)}
.dae-sub{font-size:12px;color:var(--text-muted);max-width:200px;line-height:1.4}
.dash-agenda-count{text-align:center;padding:14px 0}
.dac-num{font-size:40px;font-weight:900;color:var(--amber);letter-spacing:-0.04em;line-height:1}
.dac-label{font-size:13px;color:var(--text-muted);margin-top:4px;margin-bottom:14px}
/* ─── Mini stats (right sidebar) ─────────────────────────────────────────── */
.dash-mini-stats{display:flex;flex-direction:column;gap:0}
.dms-item{
display:flex;justify-content:space-between;align-items:center;
padding:8px 0;border-bottom:1px solid var(--border-light);font-size:13px;
}
.dms-item:last-child{border-bottom:none}
.dms-item dt{color:var(--text-muted);font-weight:500}
.dms-item dd{font-weight:800;color:var(--text);font-size:15px}
.dms-amber{color:var(--orange)!important}
.dms-red{color:var(--red)!important}
/* ─── Recommended flow ───────────────────────────────────────────────────── */
.dash-flow-card .card-body{padding:20px 24px}
.dash-flow{display:flex;align-items:center;gap:16px}
.df-step{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}
.df-arrow{
flex-shrink:0;color:var(--border);
width:28px;height:28px;
}
.df-arrow svg{width:28px;height:28px;color:#CBD5E1}
.df-num{
width:28px;height:28px;border-radius:50%;
background:var(--blue);color:white;
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;flex-shrink:0;margin-top:2px;
}
.df-icon{
width:44px;height:44px;border-radius:var(--radius-sm);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.df-icon svg{width:20px;height:20px}
.df-icon-blue{background:var(--blue-light);color:var(--blue)}
.df-icon-green{background:var(--green-light);color:var(--green)}
.df-icon-amber{background:var(--orange-light);color:var(--orange)}
.df-text{flex:1;min-width:0}
.df-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px}
.df-sub{font-size:12px;color:var(--text-muted);line-height:1.4}
/* ─── Responsive dashboard ───────────────────────────────────────────────── */
@media (max-width:1100px){
.dash-kpi-grid{grid-template-columns:repeat(2,1fr)}
.dash-trend-grid{grid-template-columns:repeat(3,1fr)}
.dash-trend-grid.con-ganancia{grid-template-columns:repeat(2,1fr)}
.dash-qactions-grid{grid-template-columns:repeat(3,1fr)}
.dash-main-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
.dash-hero{padding:20px 18px}
.dash-greeting{font-size:18px}
.dash-kpi-grid{grid-template-columns:repeat(2,1fr)}
.dash-trend-grid,.dash-trend-grid.con-ganancia{grid-template-columns:1fr}
.dash-qactions-grid{grid-template-columns:repeat(3,1fr)}
.dash-flow{flex-direction:column;gap:12px}
.df-arrow{transform:rotate(90deg);align-self:center}
.topbar-new-btn{display:none}
}
@media (max-width:480px){
.dash-kpi-grid{grid-template-columns:1fr}
.dash-qactions-grid{grid-template-columns:repeat(2,1fr)}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PATIENTS PAGE — Premium redesign */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ─── Hero ───────────────────────────────────────────────────────────────── */
.pt-hero{
background:linear-gradient(135deg,#EFF6FF 0%,#E0F2FE 55%,#F0FDFA 100%);
border-radius:var(--radius-lg);border:1px solid rgba(37,99,235,0.1);
overflow:hidden;margin-bottom:20px;
}
.pt-hero-inner{display:flex;align-items:center;justify-content:space-between;padding:24px 30px}
.pt-hero-title{font-size:28px;font-weight:900;color:var(--text);letter-spacing:-0.03em;margin-bottom:5px}
.pt-hero-sub{font-size:14.5px;color:var(--text-muted);font-weight:400}
.pt-hero-illus{flex-shrink:0;width:380px;height:160px}
.pt-hero-illus svg{width:100%;height:100%}
@media(max-width:860px){.pt-hero-illus{display:none}}
/* ─── KPI row ────────────────────────────────────────────────────────────── */
.pt-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
/* 9-oct-2026 · Oferta del Paciente 0 de su especialidad (patients.html). */
.pt-ejemplo-oferta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
border:1.5px dashed #A7C7F5;border-radius:14px;background:#F5F9FF}
.pt-eo-ico{flex:0 0 34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
background:#E0ECFF;color:#1D4ED8}
.pt-eo-txt{flex:1 1 260px;min-width:0}
.pt-eo-txt b{display:block;font-size:14px;color:#0F172A;line-height:1.35}
.pt-eo-txt span{display:block;font-size:13px;color:#475569;line-height:1.5;margin-top:2px}
.pt-eo-btn{min-height:40px;white-space:nowrap}
@media (max-width:520px){.pt-eo-btn{width:100%}}
.pt-kpi-card{
background:white;border-radius:var(--radius);border:1px solid var(--border);
box-shadow:var(--shadow);padding:16px 18px;
display:flex;align-items:center;gap:14px;
transition:transform var(--t),box-shadow var(--t);cursor:default;
}
.pt-kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pt-kpi-icon{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.pt-kpi-icon svg{width:20px;height:20px}
.pt-kpi-blue{background:var(--blue-light);color:var(--blue)}
.pt-kpi-green{background:var(--green-light);color:var(--green)}
.pt-kpi-amber{background:var(--orange-light);color:var(--orange)}
.pt-kpi-purple{background:var(--purple-light);color:var(--purple)}
.pt-kpi-num{font-size:28px;font-weight:900;color:var(--text);letter-spacing:-0.04em;line-height:1}
.pt-kpi-label{font-size:13px;font-weight:600;color:var(--text);margin-top:2px}
.pt-kpi-micro{font-size:11px;color:var(--text-muted);margin-top:1px}
@media(max-width:900px){.pt-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pt-kpi-row{grid-template-columns:1fr}}
/* ─── Controls row (search + button) ────────────────────────────────────── */
.pt-controls-row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.pt-search-form{flex:1;min-width:0}
.pt-search-wrap{position:relative;display:flex;align-items:center}
.pt-search-icon{
position:absolute;left:13px;width:15px;height:15px;
color:var(--text-muted);flex-shrink:0;pointer-events:none;
}
.pt-search-inp{
width:100%;padding:10px 40px 10px 38px;
border:1.5px solid var(--border);border-radius:var(--radius-sm);
font-size:14px;color:var(--text);background:white;
transition:border-color var(--t),box-shadow var(--t);
font-family:var(--font);
}
.pt-search-inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.09)}
.pt-search-clear{
position:absolute;right:12px;color:var(--text-muted);
display:flex;align-items:center;transition:color var(--t);
}
.pt-search-clear:hover{color:var(--red)}
/* ─── Filter chips row ───────────────────────────────────────────────────── */
.pt-filter-row{
display:flex;align-items:center;gap:10px;
margin-bottom:16px;flex-wrap:wrap;
}
.pt-filter-label{font-size:12.5px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.pt-filter-chips{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto;flex:1}
.pt-chip{
display:inline-flex;align-items:center;padding:5px 14px;
border-radius:20px;font-size:12.5px;font-weight:600;
color:var(--text-muted);border:1.5px solid var(--border);
background:white;transition:all var(--t);white-space:nowrap;cursor:pointer;
}
.pt-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.pt-chip.active{background:var(--blue);color:white;border-color:var(--blue)}
/* ─── Table card ─────────────────────────────────────────────────────────── */
.pt-table-card{margin-bottom:0}
.pt-table-wrap{overflow-x:auto}
.pt-table{width:100%;border-collapse:collapse}
/* Table header */
.pt-th{
text-align:left;padding:11px 8px;
font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;
color:var(--text-muted);background:#FAFAFA;
border-bottom:1.5px solid var(--border);
white-space:nowrap;
display:table-cell;
}
.pt-th:first-child{padding-left:14px}
.pt-th:last-child{text-align:center}
.pt-th{cursor:default}
.pt-th svg{margin-left:3px;opacity:0.5;vertical-align:middle}
.pt-th-actions{text-align:center!important}
/* ── Encabezados que ordenan (17-sep-2026) ─────────────────────────────────
El `` se come el padding del `
` a propósito: así el área de clic es
la celda entera y no sólo las siete letras de «Edad». La flecha apagada de
doble punta dice «esto se puede ordenar» sin gritar; la encendida dice por
dónde va. Antes había una flecha dibujada en «Paciente» que no hacía nada. */
.pt-th-ord{padding:0;cursor:pointer}
.pt-th-ord .pt-th-a{
position:relative;
display:flex;align-items:center;gap:4px;
padding:11px 8px;color:inherit;text-decoration:none;
font:inherit;letter-spacing:inherit;text-transform:inherit;
transition:background .12s ease,color .12s ease;
}
.pt-th-ord:first-child .pt-th-a{padding-left:14px}
/* El aviso de «esto ordena» para las columnas INACTIVAS es el fondo y el
subrayado, no una flecha: una flecha por encabezado cuesta ~64 px del
presupuesto de ancho de la tabla y devuelve el scroll horizontal. */
.pt-th-ord .pt-th-a:hover{background:#F1F5F9;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.pt-th-ord .pt-th-a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* 🚨 ABSOLUTA, y ésta es la línea que sostiene el presupuesto de ancho.
Medido: con la flecha EN FLUJO, «Consultas» crecía 16 px y «Última visita»
12 px al volverse la columna activa — el encabezado es lo que fija el ancho
de esas dos columnas, no el dato—. Un elemento absoluto no aporta nada al
ancho intrínseco, así que la tabla mide exactamente lo mismo esté ordenada
por donde esté. Vive en el canalón de 16 px que dejan los dos `padding` de
8 px, sin tocar el texto de ningún encabezado.
Lo verifica `scripts/medir_ancho_tabla.py`. */
.pt-th .pt-th-flecha{
position:absolute;right:-5px;top:50%;margin-top:-6px;
margin-left:0;opacity:1;flex:0 0 auto;pointer-events:none;
}
.pt-th-ord-on{background:#F5F8FF;color:var(--blue)}
/* ── «Ordenar por» (17-sep-2026) ───────────────────────────────────────────
Vive en el renglón de filtros porque es la misma pregunta: qué veo y en qué
orden. En el móvil no hay encabezados que picar, así que aquí es donde se
ordena; en el escritorio es además el único camino de vuelta a «Registro»,
que no tiene columna en la tabla. */
.pt-orden-y-filtros{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}
.pt-orden-y-filtros .pt-filter-row{flex:1 1 420px;margin-bottom:0;min-width:0}
.pt-orden{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-width:0}
.pt-orden-lbl{font-size:12.5px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.pt-orden-sel{
font-size:12.5px;font-weight:600;color:var(--text);
background:#fff;border:1px solid var(--border);border-radius:8px;
padding:5px 26px 5px 9px;cursor:pointer;max-width:300px;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 8px center;background-size:11px;
}
.pt-orden-sel:hover{border-color:#CBD5E1}
.pt-orden-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* Fold cerrada (344px) y teléfono: el selector se lleva el renglón completo
antes que salir cortado a la mitad de «Última visita». */
@media (max-width: 620px){
.pt-orden{width:100%;order:2}
/* Fold cerrado (344 px): la etiqueta se lleva 100 px que el selector
necesita para decir la opción completa. Se va del dibujo, no del
significado: el `aria-label` del `