/* ==========================================================================
   Pin-Go Medic · Sistema de diseño
   Blanco y azul. Claro, clínico y sin ruido visual.
   ========================================================================== */

:root {
  /* Marca — azul cielo y azul marino de Pin-Go Medic */
  --brand-50:  #F1F9FF;
  --brand-100: #DFF1FF;
  --brand-200: #B8E1FF;
  --brand-300: #83CBFC;
  --brand-400: #58B5F7;
  --brand-500: #43A5F5;
  --brand-600: #258AD7;
  --brand-700: #1268AC;
  --brand-800: #0A467A;
  --brand-900: #061C46;

  /* Neutros */
  --n-0:   #FFFFFF;
  --n-25:  #FCFDFF;
  --n-50:  #F7F9FC;
  --n-100: #EFF3F9;
  --n-150: #E6ECF4;
  --n-200: #DCE4EF;
  --n-300: #C2CEDE;
  --n-400: #94A3B8;
  --n-500: #607087;
  --n-600: #4E5D73;
  --n-700: #374357;
  --n-800: #212C3D;
  --n-900: #101827;

  /* Semánticos */
  --green-50: #ECFDF4;  --green-100: #D2F8E3;  --green-500: #0FA968;  --green-700: #047A4B;
  --amber-50: #FFF8EB;  --amber-100: #FDEFCD;  --amber-500: #E08700;  --amber-700: #A35F00;
  --red-50:   #FEF2F2;  --red-100:   #FDE0E0;  --red-500:   #DC2626;  --red-700:   #A31414;
  --violet-50:#F5F3FF;  --violet-100:#E9E4FE;  --violet-500:#7C5CF5;  --violet-700:#5A3ECB;
  --teal-50:  #ECFDFB;  --teal-100:  #CCF6F1;  --teal-500:  #0D9488;  --teal-700:  #0B6B62;

  /* Superficies */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-muted: var(--n-100);
  --border:        var(--n-200);
  --border-soft:   var(--n-150);
  --text:          var(--n-900);
  --text-2:        var(--n-600);
  --text-3:        var(--n-500);
  --accent:        var(--brand-500);
  --accent-soft:   var(--brand-50);
  --accent-text:   var(--brand-700);
  --on-accent:     #FFFFFF;

  /* Formas y elevación */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 11px;  --r-lg: 15px;  --r-xl: 20px;  --r-full: 999px;
  --sh-xs: 0 1px 2px rgba(16, 24, 39, .05);
  --sh-sm: 0 1px 3px rgba(16, 24, 39, .07), 0 1px 2px rgba(16, 24, 39, .04);
  --sh-md: 0 4px 14px rgba(16, 24, 39, .07), 0 1px 3px rgba(16, 24, 39, .05);
  --sh-lg: 0 12px 34px rgba(16, 24, 39, .11), 0 2px 8px rgba(16, 24, 39, .05);
  --sh-brand: 0 6px 18px rgba(67, 165, 245, .24);

  --sidebar-w: 258px;
  --sidebar-collapsed-w: 74px;
  --topbar-h: 62px;
  --bottom-nav-h: 62px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t: 200ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
  --bg:            #0C1220;
  --surface:       #131B2C;
  --surface-2:     #172136;
  --surface-muted: #1B2739;
  --border:        #253148;
  --border-soft:   #1E293C;
  --text:          #E9EFF8;
  --text-2:        #A9B7CC;
  --text-3:        #8494AC;
  --accent:        #58B5F7;
  --accent-soft:   #14243F;
  --accent-text:   #A8C6FC;
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --sh-md: 0 4px 16px rgba(0, 0, 0, .4);
  --sh-lg: 0 14px 38px rgba(0, 0, 0, .5);
  --sh-brand: 0 6px 18px rgba(67, 165, 245, .36);
  color-scheme: dark;
}

/* --- Reinicio -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .93rem; }
p  { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: 18px 0; }

/* Tamaño base de todos los iconos del sistema. */
.icon {
  width: 18px; height: 18px;
  flex-shrink: 0; display: inline-block; vertical-align: middle;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-100); color: var(--brand-800); }

/* Barra de desplazamiento discreta */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }

/* --- Utilidades ------------------------------------------------------------ */

.muted   { color: var(--text-3); }
.dim     { color: var(--text-2); }
.small   { font-size: .82rem; }
.xs      { font-size: .76rem; }
.bold    { font-weight: 650; }
.mono    { font-family: var(--mono); font-size: .86em; }
.center  { text-align: center; }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden  { display: none !important; }
.grow    { flex: 1 1 auto; min-width: 0; }
.w-full  { width: 100%; }
.uppercase { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; }

.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 10px; }
.stack > * + * { margin-top: 12px; }

.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Estructura ------------------------------------------------------------ */

.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  transition: width var(--t), transform var(--t);
}

.sidebar__brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.sidebar__brand img { height: 27px; width: auto; }
.sidebar__brand-mark { display: none; height: 30px; width: 30px; }

.sidebar__nav {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 10px 20px;
}

.nav-group { margin-bottom: 4px; }
.nav-group__title {
  padding: 14px 10px 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 11px; margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 520; font-size: .885rem;
  text-decoration: none; position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; }
.nav-item.is-active::before {
  content: ''; position: absolute; left: -10px; top: 50%; translate: 0 -50%;
  width: 3px; height: 19px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .82; }
.nav-item.is-active .icon { opacity: 1; }
.nav-item__badge {
  margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-500); color: #fff;
  font-size: .68rem; font-weight: 700; border-radius: var(--r-full);
}
.nav-item__badge--soft { background: var(--surface-muted); color: var(--text-2); }

.sidebar__footer { padding: 10px; border-top: 1px solid var(--border-soft); }

.main {
  flex: 1; min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  transition: margin var(--t);
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.content { flex: 1; padding: 22px 24px 60px; width: 100%; max-width: 1560px; margin: 0 auto; }
.content--narrow { max-width: 940px; }

/* Barra lateral colapsada (escritorio) */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .main { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar__brand img { display: none; }
body.sidebar-collapsed .sidebar__brand-mark { display: block; }
body.sidebar-collapsed .sidebar__brand { justify-content: center; padding: 0; }
body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .nav-item span:not(.nav-item__badge) { display: none; }
body.sidebar-collapsed .nav-item__badge { position: absolute; top: 3px; right: 10px; margin: 0; min-width: 8px; height: 8px; padding: 0; font-size: 0; }
body.sidebar-collapsed .nav-group__title { text-align: center; font-size: 0; padding: 12px 0 4px; }
body.sidebar-collapsed .nav-group__title::after { content: '···'; font-size: 12px; letter-spacing: 0; }
body.sidebar-collapsed .sidebar__user-name { display: none; }

/* --- Encabezado de página --------------------------------------------------- */

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-header__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-header h1 { display: flex; align-items: center; gap: 10px; }
.page-header__sub { color: var(--text-3); font-size: .875rem; }
.page-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-3); margin-bottom: 6px; }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }

/* --- Botones ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .875rem; font-weight: 570;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: var(--sh-xs);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: var(--surface-muted); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn .icon { width: 17px; height: 17px; }

.btn--primary {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
  box-shadow: var(--sh-brand);
}
.btn--primary:hover { background: var(--brand-800); border-color: var(--brand-800); }

.btn--soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); box-shadow: none; }
.btn--soft:hover { background: var(--brand-100); }

.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-muted); color: var(--text); }

.btn--danger { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.btn--danger:hover { background: var(--red-700); border-color: var(--red-700); }

.btn--danger-soft { background: var(--red-50); border-color: transparent; color: var(--red-700); box-shadow: none; }
.btn--danger-soft:hover { background: var(--red-100); }

.btn--success { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.btn--success:hover { background: var(--green-700); border-color: var(--green-700); }

.btn--sm { height: 31px; padding: 0 11px; font-size: .81rem; border-radius: var(--r-xs); }
.btn--sm .icon { width: 15px; height: 15px; }
.btn--lg { height: 45px; padding: 0 22px; font-size: .95rem; border-radius: var(--r-md); }
.btn--block { width: 100%; }
.btn--icon { width: 38px; padding: 0; }
.btn--icon.btn--sm { width: 31px; }

.btn-group { display: inline-flex; background: var(--surface-muted); padding: 3px; border-radius: var(--r-sm); gap: 2px; }
.btn-group button, .btn-group a {
  height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 560;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.btn-group button:hover, .btn-group a:hover { color: var(--text); text-decoration: none; }
.btn-group .is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--sh-xs); font-weight: 620; }

/* --- Tarjetas --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
}
.card__header h2, .card__header h3 { font-size: .96rem; font-weight: 640; }
.card__body { padding: 18px; }
.card__body--tight { padding: 12px; }
.card__body--flush { padding: 0; }
.card__footer { padding: 12px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.card--flat { box-shadow: none; }
.card--accent { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--surface) 70%); }

.metric {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
a.metric:hover { box-shadow: var(--sh-md); transform: translateY(-1px); border-color: var(--brand-200); text-decoration: none; }
.metric__label { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .045em; }
.metric__label .icon { width: 15px; height: 15px; }
.metric__value { font-size: 1.72rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.metric__hint { font-size: .78rem; color: var(--text-3); }
.metric--accent .metric__value { color: var(--accent-text); }
.metric--danger .metric__value { color: var(--red-500); }
.metric--warn .metric__value { color: var(--amber-700); }
.metric--good .metric__value { color: var(--green-700); }

/* --- Insignias y chips ------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-full);
  font-size: .745rem; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap;
  background: var(--surface-muted); color: var(--text-2);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge--plain::before { display: none; }
.badge--blue   { background: var(--brand-50);  color: var(--brand-700); }
.badge--green  { background: var(--green-50);  color: var(--green-700); }
.badge--amber  { background: var(--amber-50);  color: var(--amber-700); }
.badge--red    { background: var(--red-50);    color: var(--red-700); }
.badge--violet { background: var(--violet-50); color: var(--violet-700); }
.badge--teal   { background: var(--teal-50);   color: var(--teal-700); }
.badge--slate  { background: var(--surface-muted); color: var(--text-2); }
.badge--solid  { background: var(--brand-700); color: #fff; }

[data-theme="dark"] .badge--blue   { background: #16294a; color: #a9c9fd; }
[data-theme="dark"] .badge--green  { background: #102e22; color: #74dfae; }
[data-theme="dark"] .badge--amber  { background: #33260c; color: #f5c368; }
[data-theme="dark"] .badge--red    { background: #391a1a; color: #f79b9b; }
[data-theme="dark"] .badge--violet { background: #241f47; color: #bcaafb; }
[data-theme="dark"] .badge--teal   { background: #0e2f2c; color: #6fd8cd; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 10px;
  background: var(--surface-muted); border: 1px solid transparent;
  border-radius: var(--r-full); font-size: .8rem; color: var(--text-2);
}
.chip--removable button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0; display: flex; opacity: .6; }
.chip--removable button:hover { opacity: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot--green { background: var(--green-500); }
.dot--amber { background: var(--amber-500); }
.dot--red { background: var(--red-500); }
.dot--blue { background: var(--brand-700); }
.dot--slate { background: var(--n-400); }
.dot--pulse { box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Avatares --------------------------------------------------------------- */

.avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--brand-100); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 680; font-size: .8rem; letter-spacing: .01em;
  overflow: hidden; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar--lg { width: 54px; height: 54px; font-size: 1.1rem; }
.avatar--xl { width: 76px; height: 76px; font-size: 1.5rem; }
.avatar--photo { background: var(--surface-muted); }

/* --- Formularios ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .label {
  font-size: .805rem; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 5px;
}
.label .req { color: var(--red-500); }
.field__hint { font-size: .765rem; color: var(--text-3); }
.field__error { font-size: .765rem; color: var(--red-500); font-weight: 550; display: flex; align-items: center; gap: 4px; }

.input, .select, .textarea {
  width: 100%; min-width: 0;
  height: 39px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .885rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
}
.textarea { height: auto; min-height: 88px; padding: 9px 12px; line-height: 1.55; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--n-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-400);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand-400) 18%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-muted); color: var(--text-3); cursor: not-allowed; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--red-500); }
.input.is-invalid:focus { box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--red-500) 16%, transparent); }

.select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2.4' 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 11px center;
}
[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238494AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

.input--sm, .select--sm { height: 32px; font-size: .82rem; padding-inline: 9px; }
.input--search { padding-left: 35px; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.input-wrap__suffix { position: absolute; right: 11px; font-size: .8rem; color: var(--text-3); }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  cursor: pointer; font-size: .865rem; user-select: none; line-height: 1.45;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--brand-500); cursor: pointer;
}
.check__text { min-width: 0; }
.check__desc { display: block; font-size: .78rem; color: var(--text-3); }

.check-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.check-card:hover { border-color: var(--brand-300); background: var(--surface-2); }
.check-card:has(input:checked) { border-color: var(--brand-400); background: var(--accent-soft); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 40px; height: 23px; border-radius: var(--r-full);
  background: var(--n-300); position: relative; flex-shrink: 0;
  transition: background var(--t);
}
.switch__track::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-sm); transition: transform var(--t);
}
.switch input:checked + .switch__track { background: var(--brand-700); }
.switch input:checked + .switch__track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-full { grid-column: 1 / -1; }

.fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.fieldset__legend {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft); width: 100%;
}
.fieldset__legend .icon { width: 15px; height: 15px; color: var(--accent); }

.form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--border-soft);
}
.form-actions--sticky {
  position: sticky; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); margin: 16px -18px -18px; padding: 13px 18px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* --- Tablas ----------------------------------------------------------------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
  text-align: left; font-weight: 620; font-size: .755rem;
  text-transform: uppercase; letter-spacing: .055em; color: var(--text-3);
  padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table--clickable tbody tr { cursor: pointer; }
.table td.right, .table th.right { text-align: right; }
.table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.table__primary { font-weight: 600; color: var(--text); }
.table__sub { font-size: .78rem; color: var(--text-3); }

.table-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface);
}
.table-toolbar .input-wrap { flex: 1 1 240px; max-width: 380px; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border-soft);
  font-size: .82rem; color: var(--text-3); flex-wrap: wrap;
}
.pagination__pages { display: flex; align-items: center; gap: 4px; }
.pagination__pages a, .pagination__pages span {
  min-width: 31px; height: 31px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); color: var(--text-2); font-weight: 560; text-decoration: none;
}
.pagination__pages a:hover { background: var(--surface-muted); text-decoration: none; }
.pagination__pages .is-current { background: var(--brand-700); color: #fff; }

/* --- Lista de tarjetas para móvil ------------------------------------------- */

.card-list { display: flex; flex-direction: column; }
.card-list__item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-soft);
  color: inherit; text-decoration: none; transition: background var(--t-fast);
}
.card-list__item:last-child { border-bottom: 0; }
.card-list__item:hover { background: var(--surface-2); text-decoration: none; }
.card-list__body { flex: 1; min-width: 0; }
.card-list__title { font-weight: 600; }
.card-list__meta { font-size: .79rem; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-list__aside { text-align: right; flex-shrink: 0; }

/* --- Estados vacíos y esqueletos -------------------------------------------- */

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 52px 24px; text-align: center; color: var(--text-3);
}
.empty__icon {
  width: 54px; height: 54px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.empty__icon .icon { width: 25px; height: 25px; }
.empty h3 { color: var(--text); font-size: 1rem; }
.empty p { max-width: 420px; font-size: .875rem; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border-soft) 37%, var(--surface-muted) 63%);
  background-size: 400% 100%; border-radius: var(--r-xs);
  animation: shimmer 1.4s ease infinite; height: 14px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- Alertas ---------------------------------------------------------------- */

.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px; border-radius: var(--r-md);
  border: 1px solid transparent; font-size: .875rem;
}
.alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert--info    { background: var(--brand-50);  border-color: var(--brand-200);  color: var(--brand-800); }
.alert--success { background: var(--green-50);  border-color: var(--green-100);  color: var(--green-700); }
.alert--warning { background: var(--amber-50);  border-color: var(--amber-100);  color: var(--amber-700); }
.alert--danger  { background: var(--red-50);    border-color: var(--red-100);    color: var(--red-700); }
[data-theme="dark"] .alert--info { background: #14243f; border-color: #24406e; color: #b7d0fd; }
[data-theme="dark"] .alert--success { background: #102e22; border-color: #1b5138; color: #86e7bb; }
[data-theme="dark"] .alert--warning { background: #33260c; border-color: #5c4413; color: #f7ce7e; }
[data-theme="dark"] .alert--danger { background: #391a1a; border-color: #6a2626; color: #fbabab; }

/* --- Notificaciones flotantes ----------------------------------------------- */

.toasts {
  position: fixed; z-index: 200; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 9px; pointer-events: none;
  max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--n-900); color: #fff; box-shadow: var(--sh-lg);
  font-size: .875rem; pointer-events: auto;
  animation: toast-in .22s cubic-bezier(.2, .8, .3, 1);
}
.toast .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast--success .icon { color: #4ade80; }
.toast--error .icon { color: #f87171; }
.toast--warning .icon { color: #fbbf24; }
.toast--info .icon { color: var(--brand-300); }
.toast button { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; padding: 0; margin-left: auto; display: flex; }
.toast button:hover { color: #fff; }
.toast.is-leaving { animation: toast-out .18s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* --- Modales y paneles ------------------------------------------------------ */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(16, 24, 39, .48);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fade-in .16s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  animation: modal-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal--sm { max-width: 420px; }
.modal--lg { max-width: 760px; }
.modal--xl { max-width: 1040px; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.modal__header h2 { font-size: 1.03rem; }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 14px 20px; border-top: 1px solid var(--border-soft); flex-shrink: 0; background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.drawer-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(16,24,39,.45); animation: fade-in .16s ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: min(480px, 100vw); background: var(--surface);
  box-shadow: var(--sh-lg); display: flex; flex-direction: column;
  animation: drawer-in .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

/* --- Menús desplegables ------------------------------------------------------ */

.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  min-width: 208px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  animation: menu-in .13s ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown__menu--left { right: auto; left: 0; }
.dropdown__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--text-2); font: inherit; font-size: .865rem;
  text-align: left; cursor: pointer; text-decoration: none;
}
.dropdown__item:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.dropdown__item .icon { width: 16px; height: 16px; opacity: .75; }
.dropdown__item--danger { color: var(--red-500); }
.dropdown__item--danger:hover { background: var(--red-50); color: var(--red-700); }
.dropdown__divider { height: 1px; background: var(--border-soft); margin: 5px 0; }
.dropdown__label { padding: 7px 10px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }

/* --- Pestañas ---------------------------------------------------------------- */

.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px; border: 0; background: none;
  color: var(--text-3); font: inherit; font-size: .875rem; font-weight: 570;
  cursor: pointer; white-space: nowrap; position: relative; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--accent-text); font-weight: 640; }
.tab.is-active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.tab .icon { width: 16px; height: 16px; }
.tab__count { font-size: .72rem; background: var(--surface-muted); padding: 1px 6px; border-radius: var(--r-full); font-weight: 650; }

/* --- Línea de tiempo --------------------------------------------------------- */

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; }
.timeline__item { position: relative; padding-bottom: 20px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -28px; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.timeline__dot .icon { width: 11px; height: 11px; color: var(--text-3); }
.timeline__dot--accent { border-color: var(--brand-400); background: var(--brand-50); }
.timeline__dot--accent .icon { color: var(--brand-600); }
.timeline__dot--green { border-color: var(--green-500); background: var(--green-50); }
.timeline__dot--green .icon { color: var(--green-700); }
.timeline__dot--red { border-color: var(--red-500); background: var(--red-50); }
.timeline__dot--red .icon { color: var(--red-700); }
.timeline__time { font-size: .765rem; color: var(--text-3); }
.timeline__title { font-weight: 600; font-size: .89rem; }

/* --- Agenda ------------------------------------------------------------------ */

.calendar { display: flex; flex-direction: column; min-height: 480px; }

.cal-grid { display: grid; overflow: auto; position: relative; max-height: calc(100vh - 260px); }
.cal-grid__times { border-right: 1px solid var(--border-soft); }
.cal-time {
  height: 52px; padding: 0 9px; text-align: right;
  font-size: .705rem; color: var(--text-3); position: relative; top: -8px;
}
.cal-col { border-right: 1px solid var(--border-soft); position: relative; min-width: 0; }
.cal-col:last-child { border-right: 0; }
.cal-slot { height: 52px; border-bottom: 1px solid var(--border-soft); transition: background var(--t-fast); }
.cal-slot:nth-child(odd) { border-bottom-style: dashed; border-bottom-color: var(--border-soft); }
.cal-slot.is-droppable { background: var(--brand-50); }
.cal-slot:hover { background: var(--surface-2); cursor: pointer; }
.cal-head {
  position: sticky; top: 0; z-index: 5; padding: 9px 8px; text-align: center;
  background: var(--surface); border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border-soft); font-size: .8rem;
}
.cal-head__day { font-weight: 660; }
.cal-head__date { font-size: 1.22rem; font-weight: 680; letter-spacing: -.02em; }
.cal-head.is-today .cal-head__date { color: #fff; background: var(--brand-700); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

.cal-event {
  position: absolute; left: 3px; right: 3px; z-index: 2;
  padding: 5px 8px; border-radius: var(--r-sm);
  background: var(--brand-50); border-left: 3px solid var(--brand-500);
  font-size: .765rem; overflow: hidden; cursor: pointer;
  box-shadow: var(--sh-xs); color: var(--brand-900);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.cal-event:hover { box-shadow: var(--sh-md); z-index: 4; }
.cal-event.is-dragging { opacity: .5; }
.cal-event__time { font-size: .69rem; opacity: .8; }
.cal-event__title { font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event--green  { background: var(--green-50);  border-left-color: var(--green-500);  color: var(--green-700); }
.cal-event--amber  { background: var(--amber-50);  border-left-color: var(--amber-500);  color: var(--amber-700); }
.cal-event--red    { background: var(--red-50);    border-left-color: var(--red-500);    color: var(--red-700); }
.cal-event--violet { background: var(--violet-50); border-left-color: var(--violet-500); color: var(--violet-700); }
.cal-event--teal   { background: var(--teal-50);   border-left-color: var(--teal-500);   color: var(--teal-700); }
.cal-event--slate  { background: var(--surface-muted); border-left-color: var(--n-400); color: var(--text-2); }
.cal-event--block  { background: repeating-linear-gradient(45deg, var(--n-100), var(--n-100) 6px, var(--n-150) 6px, var(--n-150) 12px); border-left-color: var(--n-400); color: var(--text-2); cursor: default; }

.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red-500); z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); }

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); }
.cal-month__day {
  min-height: 118px; padding: 6px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 3px; background: var(--surface);
}
.cal-month__day.is-other { background: var(--surface-2); }
.cal-month__num { font-size: .8rem; font-weight: 620; color: var(--text-2); align-self: flex-start; padding: 2px 5px; border-radius: var(--r-xs); }
.cal-month__day.is-today .cal-month__num { background: var(--brand-700); color: #fff; }
.cal-month__event {
  font-size: .715rem; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--brand-50); color: var(--brand-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}

/* --- Ficha de paciente -------------------------------------------------------- */

.patient-header {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 18px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.patient-header__info { flex: 1; min-width: 200px; }
.patient-header__name { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; }
.patient-header__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font-size: .83rem; color: var(--text-3); }
.patient-header__meta span { display: inline-flex; align-items: center; gap: 5px; }
.patient-header__meta .icon { width: 14px; height: 14px; }

.data-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: .865rem; align-items: baseline; }
.data-list dt { color: var(--text-3); font-size: .8rem; }
.data-list dd { margin: 0; }

.vital-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.vital {
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-soft); text-align: center;
}
.vital__label { font-size: .69rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 640; }
.vital__value { font-size: 1.16rem; font-weight: 680; letter-spacing: -.02em; }
.vital__unit { font-size: .72rem; color: var(--text-3); font-weight: 500; }

/* Gráfica de líneas simple en SVG */
.sparkline { width: 100%; height: 130px; overflow: visible; }
.sparkline__line { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline__area { fill: url(#mt-grad); opacity: .16; }
.sparkline__dot { fill: var(--surface); stroke: var(--brand-500); stroke-width: 2; }
.sparkline__grid { stroke: var(--border-soft); stroke-width: 1; }
.sparkline__label { font-size: 9.5px; fill: var(--text-3); }

/* --- Editor de nota clínica --------------------------------------------------- */

.soap-grid { display: grid; gap: 14px; }
.soap-box { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.soap-box__head {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.soap-box__letter {
  width: 24px; height: 24px; border-radius: var(--r-xs);
  background: var(--brand-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 720; font-size: .82rem;
}
.soap-box__title { font-weight: 620; font-size: .845rem; }
.soap-box__hint { font-size: .75rem; color: var(--text-3); margin-left: auto; }
.soap-box textarea { border: 0; border-radius: 0; min-height: 108px; }
.soap-box textarea:focus { box-shadow: none; }

.signed-banner {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--r-md); color: var(--green-700); font-size: .865rem;
}
[data-theme="dark"] .signed-banner { background: #102e22; border-color: #1b5138; color: #86e7bb; }

/* --- Firma manuscrita ---------------------------------------------------------- */

.signature-pad {
  border: 2px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface); position: relative; touch-action: none;
}
.signature-pad canvas { display: block; width: 100%; height: 190px; border-radius: var(--r-md); cursor: crosshair; }
.signature-pad__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: .85rem; pointer-events: none;
}
.signature-pad.has-signature .signature-pad__hint { display: none; }

/* --- Búsqueda global (paleta de comandos) --------------------------------------- */

.palette-backdrop {
  position: fixed; inset: 0; z-index: 180; background: rgba(16,24,39,.4);
  backdrop-filter: blur(3px); padding-top: 12vh; display: flex; justify-content: center;
  animation: fade-in .14s ease;
}
.palette {
  width: min(620px, calc(100vw - 32px)); max-height: 66vh;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modal-in .2s cubic-bezier(.2,.8,.3,1);
}
.palette__input {
  display: flex; align-items: center; gap: 11px; padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.palette__input input { border: 0; background: none; font-size: 1rem; width: 100%; color: var(--text); }
.palette__input input:focus { outline: none; }
.palette__results { overflow-y: auto; padding: 6px; }
.palette__item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--r-sm); cursor: pointer; color: inherit; text-decoration: none;
}
.palette__item:hover, .palette__item.is-active { background: var(--accent-soft); text-decoration: none; }
.palette__item .icon { width: 17px; height: 17px; color: var(--text-3); }
.palette__section { padding: 9px 12px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
kbd {
  font-family: var(--font); font-size: .7rem; font-weight: 620;
  padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-3);
}

/* --- Navegación inferior en móvil ----------------------------------------------- */

.bottom-nav { display: none; }

/* --- Autenticación ---------------------------------------------------------------- */

.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;
}
.auth__aside {
  background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-800) 48%, var(--brand-700) 100%);
  color: #fff; padding: 46px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth__aside::after {
  content: ''; position: absolute; right: -160px; bottom: -160px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.auth__aside h2 { font-size: 1.85rem; max-width: 15ch; line-height: 1.22; }
.auth__points { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; }
.auth__point { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; opacity: .95; }
.auth__point .icon { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.auth__main { display: flex; align-items: center; justify-content: center; padding: 34px 24px; background: var(--surface); }
.auth__box { width: 100%; max-width: 384px; }
.auth__logo { height: 38px; margin-bottom: 30px; }

/* --- Impresión --------------------------------------------------------------------- */

.print-sheet {
  background: #fff; color: #111; max-width: 800px; margin: 0 auto;
  padding: 34px 38px; box-shadow: var(--sh-md); border-radius: var(--r-md);
}
.print-header { display: flex; justify-content: space-between; gap: 22px; border-bottom: 2px solid var(--brand-500); padding-bottom: 14px; margin-bottom: 18px; }
.print-header img { max-height: 54px; }
.print-title { font-size: 1.06rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-700); }
.print-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 9px 18px; font-size: .84rem; margin-bottom: 18px; }
.print-meta__label { font-size: .69rem; text-transform: uppercase; letter-spacing: .05em; color: #666; }
.print-rx-item { border-bottom: 1px dashed #ccc; padding: 11px 0; }
.print-rx-item:last-child { border-bottom: 0; }
.print-signature { margin-top: 46px; text-align: center; }
.print-signature__line { border-top: 1px solid #333; width: 260px; margin: 0 auto 6px; padding-top: 6px; }
.print-footer { margin-top: 26px; border-top: 1px solid #ddd; padding-top: 11px; font-size: .74rem; color: #666; text-align: center; }

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .bottom-nav, .no-print, .toasts { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; max-width: none !important; }
  .print-sheet { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; }
  a[href]::after { content: none !important; }
  @page { margin: 14mm; }
}

/* --- Adaptación a pantallas pequeñas -------------------------------------------- */

@media (max-width: 1100px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .form-grid, .form-grid--3, .form-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

@media (max-width: 780px) {
  :root { --topbar-h: 56px; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--sh-lg); width: 274px;
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 59;
    background: rgba(16,24,39,.45); animation: fade-in .16s ease;
  }
  .main { margin-left: 0; }
  .content {
    padding: 16px 14px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px);
  }
  .topbar { padding: 0 12px; }

  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  /* Las tarjetas de métricas caben de dos en dos y evitan un scroll largo. */
  .grid--4, .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .page-header { margin-bottom: 15px; }
  .page-header h1 { font-size: 1.25rem; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }

  .card { border-radius: var(--r-md); }
  .card__body { padding: 14px; }
  .modal { max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: auto; max-height: 92vh; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal__footer { border-radius: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal__footer .btn { flex: 1; }

  .table-hide-sm { display: none; }
  .metric__value { font-size: 1.42rem; }
  .metric__label { font-size: .72rem; }

  /* En pantallas estrechas los renglones se mantienen en una línea y recortan. */
  .card-list__item { padding: 11px 12px; gap: 9px; }
  .card-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-list__meta { font-size: .74rem; }
  .card-list__aside { flex-shrink: 0; }

  .data-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .data-list dt { margin-top: 8px; }

  .tabs { margin-inline: -14px; padding-inline: 14px; }

  /* Los avisos no deben quedar debajo de la barra inferior. */
  .toasts {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
  }

  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border-soft);
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-3); font-size: .655rem; font-weight: 600; text-decoration: none;
    position: relative; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item .icon { width: 21px; height: 21px; }
  .bottom-nav__item.is-active { color: var(--accent-text); }
  .bottom-nav__item .nav-item__badge { position: absolute; top: 6px; right: 50%; margin-right: -20px; }

  .fab {
    position: fixed; right: 16px; z-index: 65;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px);
    width: 54px; height: 54px; border-radius: var(--r-full);
    background: var(--brand-700); color: #fff; border: 0;
    box-shadow: var(--sh-brand), var(--sh-lg);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .fab .icon { width: 25px; height: 25px; }

  .cal-grid { max-height: none; }
  .patient-header { padding: 14px; }
  .form-actions--sticky { margin-inline: -14px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Indicador de conexión de la PWA */
.offline-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 300;
  background: var(--amber-700); color: #fff; text-align: center;
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
  transform: translateY(-100%); transition: transform var(--t);
}
body.is-offline .offline-bar { transform: none; }

/* Barra de progreso superior para navegaciones */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2.5px; z-index: 400;
  background: var(--brand-500); width: 0; opacity: 0;
  transition: width .2s ease, opacity .25s ease;
}
.progress-bar.is-active { opacity: 1; }