/* VALUA · El valor de cuidar — hoja de estilos base */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* Marca (tomados del logotipo) */
  --azul: #0a4a9f;
  --azul-600: #0d5bc2;
  --azul-50: #eaf1fb;
  --azul-100: #d5e3f7;
  --marino: #0b2e63;
  --marino-900: #071d40;
  --rojo: #d7141f;
  --rojo-50: #fdecee;
  --cian: #22d3ee;
  --violeta: #7c3aed;

  /* Estados */
  --ok: #0f9d6b;
  --ok-50: #e6f6ef;
  --warn: #d97706;
  --warn-50: #fdf3e2;
  --peligro: var(--rojo);
  --peligro-50: var(--rojo-50);
  --info: var(--azul);
  --info-50: var(--azul-50);

  /* Superficies y texto */
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --borde: #e2e8f1;
  --borde-fuerte: #cdd6e3;
  --texto: #0f1e36;
  --texto-2: #46566e;
  --texto-3: #7a889c;

  --radio: 14px;
  --radio-sm: 9px;
  --sombra: 0 1px 2px rgba(15, 30, 54, .05), 0 4px 16px rgba(15, 30, 54, .05);
  --sombra-lg: 0 12px 40px rgba(11, 46, 99, .16);
  --sidebar-w: 256px;
  --topbar-h: 68px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-600); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--texto-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; z-index: 40;
  transition: transform .25s ease;
}
.sidebar__brand { padding: 22px 22px 18px; border-bottom: 1px solid var(--borde); }
.sidebar__brand img { width: 158px; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 14px 12px 20px; }
.nav-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 14px 12px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; color: var(--texto-2); font-weight: 600; position: relative;
}
.nav-link:hover { background: var(--surface-2); color: var(--texto); }
.nav-link.active { background: var(--azul-50); color: var(--azul); }
.nav-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rojo); }
.nav-link.disabled { opacity: .55; cursor: default; }
.nav-link.disabled:hover { background: none; color: var(--texto-2); }
.nav-link .pronto { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--texto-3); background: var(--surface-2); border: 1px solid var(--borde); border-radius: 20px; padding: 0 7px; }
.sidebar__foot { padding: 14px 22px; border-top: 1px solid var(--borde); font-size: 12px; color: var(--texto-3); }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
}
.topbar__title h1 { font-size: 17px; font-weight: 700; }
.topbar__title p { margin: 0; font-size: 12px; color: var(--texto-3); }
.topbar__spacer { flex: 1; }
.icon-btn.menu-btn { display: none; }
.content { padding: 26px 28px 48px; width: 100%; max-width: 1440px; }

/* ------------------------------------------------------------ Búsqueda global */
.search { position: relative; width: min(420px, 38vw); }
.search input {
  width: 100%; height: 40px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--surface-2); padding: 0 14px 0 40px; outline: none;
}
.search input:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px var(--azul-50); }
.search > svg, .search > span > svg { position: absolute; left: 13px; top: 11px; color: var(--texto-3); }
.search kbd { position: absolute; right: 10px; top: 10px; font: 600 11px var(--font); color: var(--texto-3); border: 1px solid var(--borde); border-radius: 6px; padding: 0 6px; background: #fff; }
.search__results {
  position: absolute; top: 46px; left: 0; right: 0; background: #fff; border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; max-height: 420px; overflow-y: auto; display: none;
}
.search__results.open { display: block; }
.search__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px 10px 4px; }
.search__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texto); cursor: pointer; }
.search__item:hover, .search__item.focus { background: var(--azul-50); color: var(--texto); }
.search__item small { display: block; color: var(--texto-3); font-size: 12px; }
.search__empty { padding: 14px; color: var(--texto-3); text-align: center; }

/* ------------------------------------------------------------ Notificaciones / usuario */
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borde);
  background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--texto-2);
}
.icon-btn:hover { color: var(--azul); border-color: var(--azul-100); }
.badge-dot {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--rojo); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff;
}
.dropdown { position: absolute; right: 0; top: 50px; width: 360px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-lg); display: none; overflow: hidden; }
.dropdown.open { display: block; }
.dropdown__head { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; }
.dropdown__head h3 { font-size: 14px; }
.dropdown__body { max-height: 400px; overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); color: var(--texto); }
.notif:hover { background: var(--surface-2); color: var(--texto); }
.notif__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.notif strong { display: block; font-size: 13px; }
.notif span { font-size: 12px; color: var(--texto-2); }
.lvl-alta .notif__ic { background: var(--rojo-50); color: var(--rojo); }
.lvl-media .notif__ic { background: var(--warn-50); color: var(--warn); }
.lvl-info .notif__ic { background: var(--azul-50); color: var(--azul); }

.user { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 12px; }
.user:hover { background: var(--surface-2); }
.user__txt { text-align: right; line-height: 1.2; }
.user__txt strong { display: block; font-size: 13px; }
.user__txt span { font-size: 11px; color: var(--texto-3); text-transform: capitalize; }
.user .dropdown { width: 200px; top: 52px; }
.user .dropdown button { width: 100%; text-align: left; padding: 11px 16px; border: 0; background: none; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.user .dropdown button:hover { background: var(--rojo-50); color: var(--rojo); }

/* ------------------------------------------------------------ Avatares */
.avatar {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.avatar--xl { width: 96px; height: 96px; border-radius: 24px; font-size: 32px; }

/* ------------------------------------------------------------ Tarjetas */
.card { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.card__head h2 { font-size: 15px; font-weight: 700; }
.card__head p { margin: 2px 0 0; font-size: 12px; color: var(--texto-3); }
.card__body { padding: 18px 20px 20px; }
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }

.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.kpi__top { display: flex; justify-content: space-between; align-items: center; }
.kpi__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.kpi__ic svg.i { width: 21px; height: 21px; }
.kpi__val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.kpi__lbl { font-size: 12px; font-weight: 600; color: var(--texto-2); margin-top: 6px; }
.kpi__tag { font-size: 11px; font-weight: 600; color: var(--texto-3); }
.ic-azul { background: var(--azul-50); color: var(--azul); }
.ic-rojo { background: var(--rojo-50); color: var(--rojo); }
.ic-verde { background: var(--ok-50); color: var(--ok); }
.ic-ambar { background: var(--warn-50); color: var(--warn); }
.ic-cian { background: #e3f8fc; color: #0891b2; }

/* Banner de bienvenida */
.hero {
  position: relative; overflow: hidden; border-radius: 18px; color: #fff; padding: 26px 30px;
  background: linear-gradient(120deg, var(--azul) 0%, var(--marino) 70%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px;
}
.hero::after {
  content: ""; position: absolute; right: -80px; bottom: -140px; width: 420px; height: 320px;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .55), rgba(124, 58, 237, .35) 55%, transparent);
  filter: blur(10px); pointer-events: none;
}
.hero h2 { font-size: 26px; font-weight: 800; }
.hero p { margin: 6px 0 0; opacity: .85; max-width: 560px; }
.hero__fecha { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 6px; }
.hero__stats { display: flex; gap: 12px; position: relative; z-index: 1; }
.hero__stat { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 12px 18px; min-width: 128px; text-align: center; }
.hero__stat strong { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.hero__stat span { font-size: 12px; opacity: .85; }

/* ------------------------------------------------------------ Gráfico */
.chart { position: relative; height: 260px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--borde); stroke-dasharray: 3 4; }
.chart .axis { fill: var(--texto-3); font-size: 11px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: #fff; stroke: var(--azul); stroke-width: 2; }
.chart .dot.hl { fill: var(--rojo); stroke: #fff; stroke-width: 3; }
.chart__tip {
  position: absolute; pointer-events: none; background: var(--marino); color: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; transition: opacity .12s;
}
.chart__tip strong { font-size: 14px; }
.chart-legend { display: flex; gap: 20px; font-size: 12px; color: var(--texto-2); }
.chart-legend b { color: var(--texto); font-size: 15px; display: block; }

/* Top diagnósticos */
.dx { display: flex; flex-direction: column; gap: 16px; }
.dx__row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; }
.dx__rank { font-weight: 800; color: var(--texto-3); font-size: 13px; }
.dx__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx__name small { color: var(--texto-3); font-weight: 600; margin-left: 4px; }
.dx__n { font-weight: 700; font-size: 13px; }
.dx__bar { grid-column: 2 / 4; height: 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--borde); overflow: hidden; }
.dx__bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--azul); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.dx__row:first-child .dx__bar span { background: linear-gradient(90deg, var(--azul), var(--rojo)); }

/* Citas del día */
.agenda-list { display: flex; flex-direction: column; }
.ag { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--borde); }
.ag:last-child { border-bottom: 0; }
.ag__hora { font-weight: 800; font-size: 15px; color: var(--marino); }
.ag__hora small { display: block; font-size: 11px; font-weight: 600; color: var(--texto-3); }
.ag__info strong { display: block; font-size: 13px; }
.ag__info span { font-size: 12px; color: var(--texto-2); }

/* ------------------------------------------------------------ Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.chip--cap { text-transform: capitalize; }
.tbl td.num strong, .tbl td .num { white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--pendiente { background: var(--warn-50); color: var(--warn); }
.chip--confirmada { background: var(--azul-50); color: var(--azul); }
.chip--completada { background: var(--ok-50); color: var(--ok); }
.chip--cancelada { background: var(--rojo-50); color: var(--rojo); }
.chip--masculino { background: var(--azul-50); color: var(--azul); }
.chip--femenino { background: #fceaf3; color: #c2286f; }
.chip--otro { background: #f0ebfd; color: var(--violeta); }
.chip--neutro { background: var(--surface-2); color: var(--texto-2); border: 1px solid var(--borde); }
.chip--neutro::before, .chip--plain::before { display: none; }
.chip svg.i { width: 12px; height: 12px; }
.chip:has(svg)::before { display: none; }

/* ------------------------------------------------------------ Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--azul); color: #fff; }
.btn--primary:hover { background: var(--azul-600); color: #fff; box-shadow: 0 6px 16px rgba(10, 74, 159, .25); }
.btn--ghost { background: #fff; border-color: var(--borde); color: var(--texto); }
.btn--ghost:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.btn--danger { background: var(--rojo); color: #fff; }
.btn--danger:hover { background: #b80f19; color: #fff; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn-icon {
  width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; border: 1px solid var(--borde);
  background: #fff; color: var(--texto-2); cursor: pointer;
}
.btn-icon svg.i { width: 16px; height: 16px; }
.btn-icon:hover { color: var(--azul); border-color: var(--azul-100); background: var(--azul-50); }
.btn-icon.danger:hover { color: var(--rojo); border-color: #f6c5c9; background: var(--rojo-50); }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ Tablas */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.toolbar .search { width: 300px; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--texto); }
.tbl th .arrow { opacity: .4; margin-left: 4px; }
.tbl th.sorted .arrow { opacity: 1; color: var(--azul); }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tbl tbody tr:hover { background: #fafcff; }
.tbl .person { display: flex; align-items: center; gap: 12px; }
.tbl .person strong { display: block; font-size: 13.5px; }
.tbl .person small { color: var(--texto-3); font-size: 12px; }
.tbl .acciones { display: flex; gap: 6px; justify-content: flex-end; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
.pager__btns { display: flex; gap: 6px; }
.pager__btns button { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borde); background: #fff; cursor: pointer; font-weight: 600; }
.pager__btns button.active { background: var(--azul); color: #fff; border-color: var(--azul); }
.pager__btns button:disabled { opacity: .45; cursor: default; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--borde); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.seg button.active { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(15, 30, 54, .12); }

/* ------------------------------------------------------------ Formularios */
.form-section { padding: 22px 24px; border-bottom: 1px solid var(--borde); }
.form-section:last-of-type { border-bottom: 0; }
.form-section__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.form-section__title h3 { font-size: 15px; }
.form-section__title .kpi__ic { width: 32px; height: 32px; border-radius: 9px; }
.form-section__title .kpi__ic svg.i { width: 16px; height: 16px; }
.fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.f { grid-column: span 4; display: flex; flex-direction: column; gap: 6px; }
.f--2 { grid-column: span 2; } .f--3 { grid-column: span 3; } .f--6 { grid-column: span 6; } .f--8 { grid-column: span 8; } .f--12 { grid-column: span 12; }
.f label { font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.f label .req { color: var(--rojo); }
.input, .f input, .f select, .f textarea {
  width: 100%; height: 42px; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 0 12px; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.f textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus, .input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); }
.f.invalid input, .f.invalid select, .f.invalid textarea { border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-50); }
.f .err { font-size: 12px; color: var(--rojo); font-weight: 600; min-height: 0; }
.f .hint { font-size: 12px; color: var(--texto-3); }
.input-unit { position: relative; }
.input-unit span { position: absolute; right: 12px; top: 11px; color: var(--texto-3); font-size: 12.5px; font-weight: 600; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; background: var(--surface-2); border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); position: sticky; bottom: 0; }

.photo-pick { display: flex; align-items: center; gap: 18px; }
.photo-pick .avatar--xl { background: var(--surface-2); border: 2px dashed var(--borde-fuerte); color: var(--texto-3); }
.photo-pick .avatar--xl.has { border-style: solid; border-color: #fff; box-shadow: var(--sombra); }

/* ------------------------------------------------------------ Ficha paciente */
.profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile__card { text-align: center; padding: 28px 22px 22px; }
.profile__card .avatar--xl { margin: 0 auto 14px; }
.profile__card h2 { font-size: 19px; }
.profile__meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.profile__facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.profile__facts div { padding: 12px 6px; border-right: 1px solid var(--borde); }
.profile__facts div:last-child { border-right: 0; }
.profile__facts strong { display: block; font-size: 18px; font-weight: 800; }
.profile__facts span { font-size: 11px; color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.dl { display: grid; grid-template-columns: 104px 1fr; gap: 10px 14px; font-size: 13px; text-align: left; }
.dl dt { color: var(--texto-3); font-weight: 600; }
.dl dd { margin: 0; font-weight: 600; word-break: break-word; }

.imc__val { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.imc__val strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.imc__scale { position: relative; height: 10px; border-radius: 6px; display: grid; grid-template-columns: 3.5fr 6.5fr 5fr 10fr; overflow: hidden; }
.imc__scale i:nth-child(1) { background: #7cc4f0; } .imc__scale i:nth-child(2) { background: #2bb673; }
.imc__scale i:nth-child(3) { background: #f2b33d; } .imc__scale i:nth-child(4) { background: var(--rojo); }
.imc__marker { position: absolute; top: -6px; width: 4px; height: 22px; background: var(--marino); border-radius: 3px; border: 2px solid #fff; box-sizing: content-box; transform: translateX(-50%); transition: left 1s cubic-bezier(.2, .8, .2, 1); }
.imc__track { position: relative; }
.imc__labels { display: grid; grid-template-columns: 3.5fr 6.5fr 5fr 10fr; font-size: 11px; color: var(--texto-3); font-weight: 600; margin-top: 8px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-box { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--rojo-50); color: #9d0f17; font-weight: 600; font-size: 13px; }
.note { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--borde); font-size: 13px; color: var(--texto-2); white-space: pre-line; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); padding: 0 20px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 14px 12px; font-weight: 700; color: var(--texto-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.active { color: var(--azul); border-color: var(--azul); }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--borde); }
.tl { position: relative; padding-bottom: 18px; }
.tl::before { content: ""; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); }
.tl__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl__head strong { font-size: 14px; }
.tl__body { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.vitals { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; font-size: 12px; color: var(--texto-2); }
.vitals b { color: var(--texto); }

/* ------------------------------------------------------------ Estados vacíos / carga / toast */
.empty { padding: 36px 20px; text-align: center; color: var(--texto-3); }
.empty svg.i { width: 34px; height: 34px; margin: 0 auto 10px; display: block; color: var(--borde-fuerte); }
.skeleton { background: linear-gradient(90deg, #eef2f8 25%, #f7f9fc 50%, #eef2f8 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; gap: 10px; align-items: center; min-width: 260px; max-width: 380px; background: var(--marino); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--sombra-lg); animation: toast-in .25s ease; font-weight: 600; }
.toast--error { background: var(--rojo); }
.toast--ok svg.i { color: #6ee7b7; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

.modal-bg { position: fixed; inset: 0; background: rgba(7, 29, 64, .45); backdrop-filter: blur(2px); z-index: 90; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border-radius: 16px; width: min(420px, 100%); box-shadow: var(--sombra-lg); padding: 24px; }
.modal h3 { font-size: 17px; margin-bottom: 8px; }
.modal p { margin: 0 0 20px; color: var(--texto-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
@keyframes fade { from { opacity: 0; } }

.page-loader { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: grid; place-items: center; transition: opacity .3s; }
.page-loader.hide { opacity: 0; pointer-events: none; }
.pulse-mark { width: 64px; animation: latido 1.1s ease-in-out infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.07); } }

.fade-up { animation: fadeup .4s ease both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ Responsive */
.scrim { display: none; }
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-main, .profile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--sombra-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(7, 29, 64, .35); z-index: 35; }
  .main { margin-left: 0; }
  .icon-btn.menu-btn { display: grid; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar__title p, .user__txt, .search kbd { display: none; }
  .search { width: auto; flex: 1; }
  .content { padding: 18px 16px 40px; }
  .f, .f--2, .f--3, .f--6, .f--8 { grid-column: span 12; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .dropdown { position: fixed; left: 12px; right: 12px; width: auto; top: 72px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .kpi__val { font-size: 24px; }
  .topbar__title { display: none; }
  .hero__stats { width: 100%; }
  .hero__stat { flex: 1; min-width: 0; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 8px; }
  .toolbar .search { width: 100%; }
  .card__head { flex-wrap: wrap; }
  .chart-legend { width: 100%; justify-content: space-between; }
  .chart { height: 220px; }
  .ag { grid-template-columns: 56px 1fr; }
  .ag .chip { grid-column: 2; justify-self: start; }
  .search input { padding-right: 8px; }
  .kpi__tag { display: none; }
}
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main { margin: 0; }
}

/* ============================================================ Módulos (fase 2) */
/* Modal de formulario */
.modal--form { padding: 0; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.modal__head h3 { margin: 0; font-size: 16px; }
.modal__body { padding: 20px 22px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin: 20px -22px -20px; padding: 14px 22px; border-top: 1px solid var(--borde); background: var(--surface-2); border-radius: 0 0 16px 16px; position: sticky; bottom: -20px; }
.modal .fields { gap: 12px 14px; }

/* Buscador de paciente */
.picker { position: relative; }
.picker__box { position: relative; }
.picker__box svg.i { position: absolute; left: 12px; top: 12px; color: var(--texto-3); }
.picker__box input { padding-left: 38px !important; }
.picker__sel { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 6px 5px 8px; border: 1px solid var(--azul-100); background: var(--azul-50); border-radius: 10px; }
.picker__sel > span:not(.avatar) { flex: 1; line-height: 1.25; min-width: 0; }
.picker__sel small { display: block; color: var(--texto-3); font-size: 12px; }
.picker__sel .btn-icon { background: transparent; border-color: transparent; }
.picker__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; max-height: 300px; overflow-y: auto; display: none; }
.picker__list.open { display: block; }
.picker__list .search__item small { display: block; }
.f .picker__list { top: auto; margin-top: 4px; position: absolute; }
.f { position: relative; }

/* Encabezado de página con acciones */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2 { font-size: 20px; font-weight: 800; }
.page-head p { margin: 2px 0 0; color: var(--texto-3); font-size: 13px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hero .btn--ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.hero .btn--light { background: #fff; color: var(--azul); }
.hero__actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.mini { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.mini .kpi__ic { width: 38px; height: 38px; border-radius: 10px; }
.mini strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.mini span { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.mini.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mini.clickable:hover, .mini.clickable.active { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); }

.toolbar .input, .toolbar select.input { height: 40px; width: auto; }
.tbl td.wrap { white-space: normal; min-width: 180px; }
.tbl .sub { display: block; color: var(--texto-3); font-size: 12px; }
.tbl tr.clickable { cursor: pointer; }
.num-right { text-align: right; }

.chip--despachada, .chip--emitida, .chip--operativo { background: var(--ok-50); color: var(--ok); }
.chip--anulada, .chip--fuera { background: var(--rojo-50); color: var(--rojo); }
.chip--mantenimiento { background: var(--warn-50); color: var(--warn); }
.chip--reposo { background: var(--azul-50); color: var(--azul); }
.chip--asistencia { background: #e3f8fc; color: #0891b2; }
.chip--salud { background: var(--ok-50); color: var(--ok); }
.chip--general { background: #f0ebfd; color: var(--violeta); }

/* ------------------------------------------------------------ Agenda */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.cal__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.cal__head h2 { font-size: 17px; text-transform: capitalize; min-width: 170px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow { padding: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); text-align: center; border-bottom: 1px solid var(--borde); background: var(--surface-2); }
.cal__day { min-height: 112px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .1s; min-width: 0; }
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day:hover { background: #fafcff; }
.cal__day.otro { background: var(--surface-2); }
.cal__day.otro .cal__n { color: var(--borde-fuerte); }
.cal__day.sel { background: var(--azul-50); box-shadow: inset 0 0 0 2px var(--azul); }
.cal__n { font-weight: 700; font-size: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal__day.hoy .cal__n { background: var(--rojo); color: #fff; }
.cal__ev { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.cal__ev.pendiente { background: var(--warn-50); color: #92400e; border-color: var(--warn); }
.cal__ev.confirmada { background: var(--azul-50); color: var(--azul); border-color: var(--azul); }
.cal__ev.completada { background: var(--ok-50); color: #065f46; border-color: var(--ok); }
.cal__ev.cancelada { background: var(--rojo-50); color: #9d0f17; border-color: var(--rojo); text-decoration: line-through; }
.cal__more { font-size: 11px; color: var(--texto-3); font-weight: 700; padding-left: 4px; }
.cal__dots { display: none; gap: 3px; flex-wrap: wrap; }
.cal__dots i { width: 6px; height: 6px; border-radius: 50%; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); padding: 12px 18px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.day-panel .ag { grid-template-columns: 58px 1fr; }
.ag__acts { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; padding-left: 72px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.slot { border: 1px solid var(--borde-fuerte); background: #fff; border-radius: 8px; height: 34px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.slot:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.slot.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.slot:disabled { background: var(--surface-2); color: var(--borde-fuerte); text-decoration: line-through; cursor: not-allowed; }

/* ------------------------------------------------------------ Consulta / detalle */
.vitals-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.block { padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.block:last-child { border-bottom: 0; }
.block h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 0 0 6px; }
.block p, .block div.txt { margin: 0; white-space: pre-line; }
.vital-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.vital-card { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.vital-card span { font-size: 11px; color: var(--texto-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vital-card strong { display: block; font-size: 18px; font-weight: 800; }
.vital-card small { font-size: 11px; color: var(--texto-3); font-weight: 600; }

/* Tabla editable de medicamentos (receta) */
.rx-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.rx-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); text-align: left; padding: 0 6px; font-weight: 700; }
.rx-table td { padding: 0 3px; vertical-align: top; }
.rx-table input { width: 100%; height: 38px; border: 1px solid var(--borde-fuerte); border-radius: 9px; padding: 0 10px; outline: none; background: #fff; }
.rx-table input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); }
.rx-table .rx-med { position: relative; min-width: 220px; }
.rx-table .rx-med small { display: block; font-size: 11px; color: var(--texto-3); margin-top: 3px; padding-left: 2px; }
.rx-empty { border: 2px dashed var(--borde); border-radius: 12px; padding: 18px; text-align: center; color: var(--texto-3); }

/* ------------------------------------------------------------ Selector de tipo (MSP / certificados) */
.type-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.type-card { text-align: left; border: 1px solid var(--borde); background: #fff; border-radius: var(--radio); padding: 18px; cursor: pointer; box-shadow: var(--sombra); display: flex; gap: 14px; align-items: flex-start; transition: border-color .15s, box-shadow .15s, transform .1s; }
.type-card:hover { border-color: var(--azul); transform: translateY(-1px); }
.type-card.active { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); }
.type-card strong { display: block; font-size: 14.5px; }
.type-card span { font-size: 12.5px; color: var(--texto-3); }
.type-card b { margin-left: auto; font-size: 20px; font-weight: 800; color: var(--azul); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.check-grid label, .check-inline { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.check-grid input, .check-inline input { width: 16px; height: 16px; accent-color: var(--azul); }
.sys-row { display: grid; grid-template-columns: 200px 140px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.sys-row:last-child { border-bottom: 0; }
.sys-row > span { font-weight: 600; font-size: 13px; }
.seg--sm button { padding: 4px 10px; font-size: 12px; }
.dyn-table { width: 100%; border-collapse: collapse; }
.dyn-table th { font-size: 11px; text-transform: uppercase; color: var(--texto-3); text-align: left; padding: 6px; }
.dyn-table td { padding: 4px; }
.dyn-table input, .dyn-table select { width: 100%; height: 36px; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 0 8px; }

/* ------------------------------------------------------------ Inventario / POS */
.stock-bar { width: 90px; height: 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--borde); overflow: hidden; margin-top: 4px; }
.stock-bar span { display: block; height: 100%; background: var(--ok); }
.stock-bar.low span { background: var(--warn); }
.stock-bar.out span { background: var(--rojo); }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 18px; align-items: start; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 16px; max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; align-content: start; }
.prod { text-align: left; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s; }
.prod:hover:not(:disabled) { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); }
.prod:disabled { opacity: .5; cursor: not-allowed; }
.prod strong { font-size: 13.5px; line-height: 1.25; }
.prod small { color: var(--texto-3); font-size: 12px; }
.prod__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.prod__price { font-weight: 800; color: var(--azul); }
.cart { position: sticky; top: calc(var(--topbar-h) + 16px); }
.cart-items { max-height: 300px; overflow-y: auto; }
.cart-row { display: grid; grid-template-columns: 1fr auto auto 28px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.cart-row strong { font-size: 13px; display: block; line-height: 1.25; }
.cart-row small { font-size: 11.5px; color: var(--texto-3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 8px; overflow: hidden; }
.qty button { width: 28px; height: 30px; border: 0; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.qty button svg.i { width: 14px; height: 14px; }
.qty input { width: 42px; height: 30px; border: 0; text-align: center; font-weight: 700; outline: none; }
.totals { display: grid; gap: 6px; font-size: 13.5px; padding: 14px 0 4px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 20px; font-weight: 800; color: var(--marino); border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 4px; }
.pay-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-opts label { border: 1px solid var(--borde-fuerte); border-radius: 9px; padding: 8px; text-align: center; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.pay-opts input { display: none; }
.pay-opts label:has(input:checked) { border-color: var(--azul); background: var(--azul-50); color: var(--azul); }
.rx-banner { background: var(--warn-50); border: 1px solid #f5d9a8; border-radius: var(--radio); padding: 14px 18px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rx-banner h4 { font-size: 11.5px; text-transform: uppercase; color: #92400e; margin: 0 0 4px; letter-spacing: .05em; }
.rx-banner p { margin: 0; font-size: 13px; }

@media (max-width: 1180px) {
  .agenda, .pos, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .cart { position: static; }
  .vitals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .type-cards { grid-template-columns: minmax(0, 1fr); }
  .sys-row { grid-template-columns: 1fr; }
  .rx-banner { grid-template-columns: minmax(0, 1fr); }
  .rx-table, .rx-table tbody, .rx-table tr, .rx-table td { display: block; width: 100%; }
  .rx-table thead { display: none; }
  .rx-table tr { border: 1px solid var(--borde); border-radius: 12px; padding: 8px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rx-table td.rx-med { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cal__day { min-height: 58px; padding: 4px; }
  .cal__ev, .cal__more { display: none; }
  .cal__dots { display: flex; }
  .vitals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ag__acts { padding-left: 0; }
  .toolbar .input, .toolbar select.input { width: 100%; }
}

/* ------------------------------------------------------------ Menú de especialidades */
.nav-esp__head { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.nav-esp__head:hover { color: var(--azul); }
.nav-esp__head svg.i { width: 15px; height: 15px; margin-left: auto; transition: transform .2s; }
.nav-esp.open .nav-esp__head svg.i { transform: rotate(180deg); }
.nav-esp__n { font-size: 10px; background: var(--azul-50); color: var(--azul); border-radius: 10px; padding: 0 6px; letter-spacing: 0; }
.nav-esp__body { display: none; }
.nav-esp.open .nav-esp__body { display: block; }
.nav-esp__search { position: relative; margin: 2px 4px 6px; }
.nav-esp__search svg.i { position: absolute; left: 10px; top: 9px; width: 15px; height: 15px; color: var(--texto-3); }
.nav-esp__search input { width: 100%; height: 34px; border: 1px solid var(--borde); border-radius: 9px; padding: 0 10px 0 32px; font-size: 13px; background: var(--surface-2); outline: none; }
.nav-esp__search input:focus { border-color: var(--azul); background: #fff; }
.nav-esp__list { max-height: 280px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.nav-esp__item { padding: 6px 10px 6px 12px; font-size: 13px; font-weight: 600; gap: 10px; }
.nav-esp__item span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.nav-esp__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nav-esp__count { font-size: 11px; font-weight: 700; color: var(--texto-3); background: var(--surface-2); border: 1px solid var(--borde); border-radius: 10px; padding: 0 6px; }
.nav-esp__all { font-size: 12.5px; color: var(--azul); }
.nav-link.active::before { left: -12px; }

/* ------------------------------------------------------------ Página de especialidad */
.esp-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.esp-menu { position: sticky; top: calc(var(--topbar-h) + 16px); padding: 10px; }
.esp-menu h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 8px 10px 6px; margin: 0; }
.esp-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--texto-2); font-weight: 600; font-size: 13.5px; }
.esp-menu a:hover { background: var(--surface-2); color: var(--texto); }
.esp-menu a.active { background: var(--esp-50, var(--azul-50)); color: var(--esp, var(--azul)); }
.esp-menu a span:nth-child(2) { flex: 1; }
.esp-menu a small { font-size: 11px; color: var(--texto-3); font-weight: 700; }
.esp-hero { background: linear-gradient(120deg, var(--esp, var(--azul)) 0%, var(--marino) 85%); }
.doc-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; align-items: center; background: #fff; }
.doc-card strong { display: block; font-size: 14px; }
.doc-card small { color: var(--texto-3); font-size: 12px; display: block; }
.doc-card .tags { margin-top: 6px; }
.doc-card .acts { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--borde); padding-top: 10px; }
.esp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.esp-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; color: var(--texto); transition: border-color .15s, box-shadow .15s, transform .1s; position: relative; }
.esp-card:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-50); color: var(--texto); transform: translateY(-1px); }
.esp-card.off { opacity: .55; }
.esp-card strong { display: block; font-size: 14px; line-height: 1.25; }
.esp-card small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.esp-card .meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.esp-card .kpi__ic { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.esp-card .edit { position: absolute; top: 8px; right: 8px; }

/* Firma */
.firma-pad { position: relative; border: 2px dashed var(--borde-fuerte); border-radius: 12px; background: #fff repeating-linear-gradient(0deg, transparent 0 39px, #eef2f8 39px 40px); touch-action: none; }
.firma-pad canvas { display: block; width: 100%; height: 200px; cursor: crosshair; }
.firma-pad .linea { position: absolute; left: 10%; right: 10%; bottom: 46px; border-top: 1.5px solid #9aa8bb; pointer-events: none; }
.firma-pad .hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; color: var(--texto-3); pointer-events: none; }
.firma-prev { height: 70px; max-width: 220px; object-fit: contain; }
.firma-box { display: flex; align-items: center; justify-content: center; height: 86px; border: 1px solid var(--borde); border-radius: 10px; background: var(--surface-2); }
@media (max-width: 1000px) { .esp-layout { grid-template-columns: minmax(0, 1fr); } .esp-menu { position: static; } }

/* ============================================================ Fase 4: marca, TEKKI, soporte, reportes, laboratorio */
.brand-dual { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.brand-cliente { max-width: 190px; max-height: 64px; object-fit: contain; }
.brand-con { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.brand-con img { height: 18px; width: auto; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.nav-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); padding: 10px 12px 4px; }
.nav-esp__top .nav-link { padding: 7px 10px 7px 12px; font-size: 13px; }
.nav-esp__top svg.i { width: 16px; height: 16px; }
.user .dropdown button.danger:hover { background: var(--rojo-50); color: var(--rojo); }
.user .dropdown button:hover { background: var(--surface-2); color: var(--texto); }

/* Botones flotantes */
.fab-stack { position: fixed; right: 26px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.fab-tekki, .fab-wa { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 2.5px solid #fff; padding: 0; cursor: pointer; display: grid; place-items: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
.fab-tekki { background: linear-gradient(135deg, var(--marino) 0%, var(--azul) 55%, var(--cian) 100%); box-shadow: 0 6px 24px rgba(0, 58, 140, .45), 0 2px 8px rgba(0, 0, 0, .15); }
.fab-tekki:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 30px rgba(0, 58, 140, .6), 0 0 22px rgba(56, 189, 248, .55); }
.fab-wa { background: #25d366; color: #fff; box-shadow: 0 6px 24px rgba(37, 211, 102, .45), 0 2px 8px rgba(0, 0, 0, .12); }
.fab-wa:hover { transform: scale(1.1) rotate(4deg); box-shadow: 0 8px 30px rgba(37, 211, 102, .6), 0 4px 12px rgba(0, 0, 0, .16); }
.fab-wa svg { width: 34px; height: 34px; }
.fab-tekki::before, .fab-wa::before, .fab-tekki::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #5cc8ff; opacity: .85; animation: fabAura 2.4s cubic-bezier(.25, .8, .25, 1) infinite; pointer-events: none; }
.fab-tekki::after { animation-delay: 1.2s; }
.fab-wa::before { border-color: #25d366; opacity: .8; }
@keyframes fabAura { 0% { transform: scale(.95); opacity: .85; } 60% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } }
.fab-tekki__av { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; pointer-events: none; display: block; }
.fab-tekki__dot { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; background: #22c55e; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 6px #22c55e; animation: fabDot 2s ease-in-out infinite; }
@keyframes fabDot { 50% { box-shadow: 0 0 12px #22c55e; } }
.fab-tip { position: absolute; right: 74px; top: 50%; background: #fff; color: var(--marino); font: 700 .82rem var(--font); padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); border: 1.5px solid #dbeafe; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(10px, -50%); transition: opacity .25s, transform .25s; }
.fab-tip b { font-weight: 800; }
.fab-tip::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right: 0; border-left-color: #fff; }
.fab-tekki:hover .fab-tip, .fab-wa:hover .fab-tip, .fab-tekki:focus-visible .fab-tip, .fab-wa:focus-visible .fab-tip, .fab-wa.saludo .fab-tip { opacity: 1; transform: translate(0, -50%); }
.fab-tekki.on { box-shadow: 0 0 0 4px rgba(92, 200, 255, .35), 0 6px 24px rgba(0, 58, 140, .45); }
.fab-tekki.on .fab-tip { opacity: 0 !important; }
.fab-tekki.on::before, .fab-tekki.on::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fab-tekki::before, .fab-tekki::after, .fab-wa::before, .fab-tekki__dot { animation: none; opacity: 0; } }
.toasts { bottom: 186px; }

/* Panel TEKKI */
.tekki { position: fixed; right: 26px; bottom: 186px; z-index: 61; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 220px)); background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-lg); display: flex; flex-direction: column; overflow: hidden; animation: fadeup .2s ease; }
.tekki__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(120deg, var(--azul), var(--marino)); }
.tekki__head div { flex: 1; line-height: 1.2; }
.tekki__head small { display: block; opacity: .8; font-size: 11.5px; }
.tekki__head .btn-icon { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.tekki__logo { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--marino), var(--azul) 55%, var(--cian)); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(92, 200, 255, .5); display: grid; place-items: center; overflow: hidden; flex: none; }
.tekki__logo img { width: 100%; height: 100%; object-fit: cover; }
.tekki__msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.tk-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.tk-bot { background: #fff; border: 1px solid var(--borde); border-bottom-left-radius: 4px; align-self: flex-start; }
.tk-user { background: var(--azul); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.tk-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tk-links a { font-weight: 700; font-size: 12.5px; }
.tk-typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--texto-3); animation: tkb 1s infinite; }
.tk-typing span:nth-child(2) { animation-delay: .15s; } .tk-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tkb { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tekki__sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; background: var(--surface-2); }
.tekki__sug button { border: 1px solid var(--azul-100); background: #fff; color: var(--azul); border-radius: 16px; padding: 5px 10px; font: 600 12px var(--font); cursor: pointer; }
.tekki__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); }
.tekki__form input { flex: 1; height: 40px; border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 0 12px; outline: none; }
.tekki__form input:focus { border-color: var(--azul); }

/* Reportes */
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.rep-kpis div { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.rep-kpis strong { display: block; font-size: 20px; font-weight: 800; }
.rep-kpis span { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.rep-h { font-size: 13px; margin: 16px 0 6px; }

/* Laboratorio */
.exam-area { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; }
.exam-area > button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; cursor: pointer; font: 700 13.5px var(--font); text-align: left; }
.exam-area > button small { margin-left: auto; color: var(--texto-3); font-weight: 700; }
.exam-area .check-grid { padding: 0 12px 12px; display: none; }
.exam-area.open .check-grid { display: grid; }
.drop { border: 2px dashed var(--borde-fuerte); border-radius: 12px; padding: 18px; text-align: center; color: var(--texto-3); cursor: pointer; display: block; }
.drop:hover, .drop.over { border-color: var(--azul); background: var(--azul-50); color: var(--azul); }
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--borde); }
.file-row:last-child { border-bottom: 0; }
.file-row .kpi__ic { width: 36px; height: 36px; border-radius: 9px; }
.file-row div { flex: 1; min-width: 0; }
.file-row strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row small { color: var(--texto-3); font-size: 12px; }
.chip--solicitada { background: var(--warn-50); color: var(--warn); }
.chip--enviada { background: var(--azul-50); color: var(--azul); }
.chip--en-proceso { background: #e3f8fc; color: #0891b2; }
.chip--resultados { background: #f0ebfd; color: var(--violeta); }
.chip--entregada { background: var(--ok-50); color: var(--ok); }
.chip--leido { background: var(--ok-50); color: var(--ok); }
.chip--enviado { background: var(--rojo-50); color: var(--rojo); }
.chip--archivado { background: var(--surface-2); color: var(--texto-3); }
.chip--urgente { background: var(--rojo); color: #fff; }
.slot.paciente { background: #fdf3e2; color: var(--warn); border-color: #f5d9a8; }
.horario-row { display: grid; grid-template-columns: 140px 110px 110px 120px 1fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.horario-row select, .horario-row input { height: 38px; border: 1px solid var(--borde-fuerte); border-radius: 9px; padding: 0 10px; width: 100%; }
@media (max-width: 760px) { .horario-row { grid-template-columns: 1fr 1fr; } .fab-stack { right: 14px; bottom: 14px; gap: 12px; } .fab-tekki, .fab-wa { width: 54px; height: 54px; } .fab-tekki__av { width: 46px; height: 46px; } .fab-wa svg { width: 30px; height: 30px; } .fab-tip { display: none; } .tekki { bottom: 152px; right: 12px; } .toasts { bottom: 152px; } }
@media print { .fab-stack, .tekki { display: none !important; } }

/* ================================================================ Fase 5 · Antecedentes, modificaciones y receta con stock */
:root { --mod: #b45309; --mod-50: #fff7e6; --mod-200: #fcd9a6; }
.ant-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ant-panel { border: 1px solid var(--borde); border-radius: 14px; background: #fff; overflow: hidden; }
.ant-panel--vacio { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(217, 119, 6, .12); }
.ant-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(180deg, #f6f9ff, #fff); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.ant-tog { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 2px; cursor: pointer; text-align: left; color: var(--marino); font: inherit; }
.ant-tog > svg.i:first-child { width: 20px; height: 20px; color: var(--azul); flex: none; }
.ant-tog strong { display: block; font-size: 14px; }
.ant-tog small { display: block; color: var(--gris); font-size: 12px; font-weight: 500; }
.ant-car { width: 18px; height: 18px; margin-left: auto; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s; }
.ant-tog[aria-expanded="false"] .ant-car { transform: rotate(-90deg); }
.ant-acts { display: flex; gap: 6px; }
.ant-n { background: var(--azul-50); color: var(--azul); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 800; }
.ant-alg { display: flex; gap: 8px; align-items: flex-start; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--borde); }
.ant-alg svg.i { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.ant-alg--si { background: var(--rojo-50); color: var(--rojo); font-weight: 600; }
.ant-alg--ok { background: var(--ok-50); color: var(--ok); }
.ant-alg--nd { background: var(--warn-50); color: #92400e; }
.ant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); background: #fff; overflow: hidden; }
.ant-it { background: #fff; padding: 10px 14px; min-width: 0; box-shadow: inset -1px -1px 0 var(--borde); margin: 0 -1px -1px 0; }
.ant-it span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--gris); margin-bottom: 3px; }
.ant-it p { margin: 0; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; color: #0f1e36; }
.ant-it--nd p { color: #94a3b8; font-style: italic; }
.ant-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.ant-hist li { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.ant-hist__m { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ant-hist__m span { color: var(--gris); font-size: 12px; }
.ant-hist__d { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; font-size: 13px; }
.ant-hist del, .ant-hist ins, .ver-tab del, .ver-tab ins { display: block; text-decoration: none; padding: 6px 8px; border-radius: 8px; white-space: pre-line; overflow-wrap: anywhere; }
.ant-hist del, .ver-tab del { background: var(--rojo-50); color: #7f1d1d; }
.ant-hist ins, .ver-tab ins { background: var(--ok-50); color: #065f46; }
.ant-hist__mot { margin: 8px 0 0; font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.ant-hist__mot svg.i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ver-tab { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.ver-tab th { text-align: left; font-size: 11px; color: var(--gris); text-transform: uppercase; padding: 4px; }
.ver-tab td { padding: 4px; vertical-align: top; }
.ver-tab td:first-child { font-weight: 700; width: 24%; }
@media (max-width: 560px) { .ant-hist__d { grid-template-columns: 1fr; } }

/* Estado de edición de un registro */
.edit-ban { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.edit-ban__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.edit-ban__row > svg.i { width: 20px; height: 20px; flex: none; }
.edit-ban__row > div { flex: 1; min-width: 240px; }
.edit-ban__row b { display: block; }
.edit-ban__row span { color: inherit; opacity: .85; }
.edit-ban--libre { background: var(--azul-50); color: var(--marino); }
.edit-ban--autorizado { background: var(--ok-50); color: #065f46; }
.edit-ban--admin { background: var(--mod-50); color: #78350f; }
.edit-ban--bloqueado { background: #f1f5f9; color: #334155; }
.edit-ban .f textarea { background: #fff; }
form.is-locked .form-section:not(.edit-ban) { opacity: .75; }
form.is-locked .ant-panel { opacity: 1; }
.chip--mod { background: var(--mod-50); color: var(--mod); border: 1px solid var(--mod-200); display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.chip--mod svg.i { width: 12px; height: 12px; }
.hero h2 .chip--mod { font-size: 12px; background: #fff7e6; }
.row--mod > td:first-child { box-shadow: inset 4px 0 0 var(--mod); }
.row--mod { background: #fffbf3; }
.tl--mod::before { border-color: var(--mod); background: var(--mod-50); }
.tl--mod .tl__body { border-left: 3px solid var(--mod); padding-left: 10px; }
.mod-ban { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--mod-200); background: var(--mod-50); color: #78350f; margin-bottom: 14px; font-size: 13px; }
.mod-ban > svg.i { width: 18px; height: 18px; }
.mod-ban span { flex: 1; min-width: 220px; }

/* Receta conectada al stock de farmacia */
.rx-cell-info { margin-top: 4px; }
.rx-info { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 11.5px; }
.rx-calc { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-weight: 700; }
.rx-calc svg.i { width: 12px; height: 12px; }
.stk { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stk--ok { background: var(--ok-50); color: var(--ok); }
.stk--bajo { background: var(--warn-50); color: #92400e; }
.stk--no { background: var(--rojo-50); color: var(--rojo); }
.rx-opt { grid-template-columns: auto 1fr auto; }
.rx-opt > .stk { margin-left: auto; align-self: center; }
.rx-opt--no { opacity: .6; }
.rx-warn { margin-top: 5px; font-size: 12px; color: var(--rojo); font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rx-warn svg.i { width: 14px; height: 14px; }
.rx-warn--alg { color: #9a3412; }
.rx-warn .link { font-size: 12px; }
.rx-row--err td { background: #fff5f5; }
.rx-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.rx-empty .link, .rx-foot .link { display: inline-flex; gap: 5px; align-items: center; }
.rx-empty .link svg.i, .rx-foot .link svg.i { width: 15px; height: 15px; }
.rx-locked { opacity: .65; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--azul); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { color: var(--marino); }
.rx-med { position: relative; }
.rx-med .picker__list { min-width: min(460px, 86vw); }

/* ================================================================ Fase 6 · Flujo de atención */
/* Títulos de sección del menú (Consulta externa, Enfermería…) */
.nav-group.nav-titulo { color: var(--marino); font-weight: 800; letter-spacing: .06em; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.nav-group.nav-titulo::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* Orden de la atención (pasos) */
.flujo-pasos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.flujo-pasos span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; color: var(--gris); }
.flujo-pasos span b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--gris); font-size: 11.5px; }
.flujo-pasos span.on { border-color: var(--azul); color: var(--marino); background: var(--azul-50); }
.flujo-pasos span.on b { background: var(--azul); color: #fff; }

/* Admisión */
.adm-acc { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.adm-buscar { padding: 16px 18px; }
.adm-buscar h3 { margin: 0 0 10px; font-size: 14px; }
.adm-pac { margin-top: 10px; }
.adm-nuevo { display: flex; gap: 12px; align-items: center; padding: 16px 18px; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.adm-nuevo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 74, 159, .12); }
.adm-nuevo b { display: block; color: var(--marino); }
.adm-nuevo span:not(.kpi__ic) { font-size: 12.5px; color: var(--gris); }
@media (max-width: 900px) { .adm-acc { grid-template-columns: 1fr; } }
.row--espera { background: #fffbeb; }

/* Signos vitales */
.sv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sv-alerts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sv-alerts:empty { display: none; }
.sv-fuente { font-size: 11.5px; margin: 8px 0 0; }
.sv-pac { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sv-pac b { display: block; }
.sv-pac span { font-size: 12.5px; color: var(--gris); }
.sv-origen { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--ok-50); color: #065f46; font-size: 13px; margin-bottom: 12px; }
.sv-origen svg.i { width: 17px; height: 17px; flex: none; }
.sv-origen--no { background: var(--surface-2); color: var(--gris); }

/* Consulta: pasos del algoritmo */
.cx-pasos { position: sticky; top: 64px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 10px 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); scrollbar-width: thin; }
.cx-pasos a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px 5px 5px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--gris); text-decoration: none; border: 1px solid transparent; }
.cx-pasos a:hover { border-color: var(--borde); color: var(--marino); }
.cx-pasos a b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 11px; }
.cx-pasos a.ok { color: #065f46; }
.cx-pasos a.ok b { background: var(--ok); color: #fff; }
.form-section[data-paso] { scroll-margin-top: 130px; }
.cx-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-50); color: var(--azul); font-weight: 800; font-size: 13px; flex: none; }
.cx-hint { font-size: 12px; margin-left: auto; font-weight: 500; }

/* Examen físico por regiones / sistemas */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ex-it { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.ex-it--cp { border-color: #fca5a5; background: #fff7f7; }
.ex-nom { font-size: 13px; font-weight: 600; }
.ex-btns { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 8px; overflow: hidden; }
.ex-btns button { border: 0; background: #fff; padding: 4px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; color: var(--gris); }
.ex-btns button + button { border-left: 1px solid var(--borde-fuerte); }
.ex-btns button[data-e="SP"].on { background: var(--ok); color: #fff; }
.ex-btns button[data-e="CP"].on { background: var(--rojo); color: #fff; }
.ex-nota { grid-column: 1 / -1; }
.ex-todo { grid-column: 1 / -1; font-size: 12.5px; }
.ex-res { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-r { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--ok-50); color: #065f46; }
.ex-r--cp { background: var(--rojo-50); color: #7f1d1d; }

/* Exámenes complementarios */
.lab-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; align-items: start; }
.lab-area { border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.lab-area summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; }
.lab-area summary::-webkit-details-marker { display: none; }
.lab-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lab-n:not(:empty) { margin-left: auto; background: var(--azul); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.lab-ex { display: grid; gap: 2px; padding: 0 12px 10px; }
.lab-ck { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; cursor: pointer; }
.orden-prev { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--azul-50); color: var(--marino); font-size: 12.5px; margin-bottom: 8px; }
.orden-prev svg.i { width: 15px; height: 15px; flex: none; }

/* Diagnósticos */
.dx-row { display: grid; grid-template-columns: 1fr 120px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.dx-row .f { margin: 0; }
.dx-tipo button.active[data-t="DEF"] { background: var(--ok); color: #fff; }
.dx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dx-list li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .dx-row { grid-template-columns: 1fr 100px; } .dx-row .dx-tipo { grid-column: 1; } }

/* Recomendaciones rápidas */
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--borde-fuerte); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--marino); }
.rec-chip svg.i { width: 12px; height: 12px; }
.rec-chip:hover { border-color: var(--azul); }
.rec-chip.on { border-style: solid; background: var(--azul-50); }

/* Cierre de la atención */
.cierre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cierre-card { border: 1px solid var(--borde); border-radius: 12px; padding: 14px; background: #fbfcfe; }
@media (max-width: 900px) { .cierre-grid { grid-template-columns: 1fr; } }

/* Atención médica: pacientes listos */
.listos { margin-bottom: 18px; }
.listos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 0 20px 18px; }
.listo { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; border-left: 4px solid var(--ok); }
.listo.espera { border-left-color: var(--warn); }
.listo__top { display: flex; justify-content: space-between; align-items: center; }
.listo .muted { font-size: 12px; }
.listo__sv { font-size: 12px; color: #065f46; }
.listo .btn { margin-top: 6px; justify-self: start; }

/* ---------------------------------------------------------------- Menú guiado de WhatsApp (como BS-CARE) */
.wa-chat { position: fixed; z-index: 70; right: 26px; bottom: 102px; width: 370px; max-height: min(600px, calc(100vh - 130px)); display: flex; flex-direction: column; background: #efeae2; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 20, 60, .3), 0 4px 14px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1), visibility .25s; }
.wa-chat.open { opacity: 1; visibility: visible; transform: none; }
.wa-chat-head { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; background: linear-gradient(135deg, #075e54, #128c7e); color: #fff; }
.wa-chat-avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--marino), var(--azul) 55%, var(--cian)); object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.wa-chat-who { flex: 1; min-width: 0; line-height: 1.25; }
.wa-chat-who strong { display: block; font-size: .95rem; }
.wa-chat-who span { font-size: .72rem; opacity: .9; display: inline-flex; align-items: center; gap: 5px; }
.wa-chat-who i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; }
.wa-chat-close, .wa-chat-restart { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.wa-chat-close:hover, .wa-chat-restart:hover { background: rgba(255, 255, 255, .3); }
.wa-chat-body { flex: 1; overflow-y: auto; min-height: 220px; padding: 1rem .85rem .5rem; display: flex; flex-direction: column; gap: .5rem; background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 14px 14px; }
.wa-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 12px; font-size: .86rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: waMsgIn .25s ease; white-space: pre-line; }
.wa-msg-sami { align-self: flex-start; background: #fff; color: #1f2937; border-top-left-radius: 4px; }
.wa-msg-user { align-self: flex-end; background: #d9fdd3; color: #1f2937; border-top-right-radius: 4px; }
@keyframes waMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wa-typing { display: inline-flex; gap: 4px; padding: .75rem .9rem; }
.wa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: waTyping 1s infinite ease-in-out; }
.wa-typing span:nth-child(2) { animation-delay: .15s; }
.wa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes waTyping { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.wa-options { display: flex; flex-direction: column; gap: .4rem; align-self: stretch; padding-left: .25rem; animation: waMsgIn .3s ease; }
.wa-option { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; padding: .6rem .85rem; border-radius: 12px; border: 1.5px solid #128c7e; background: #fff; color: #075e54; font: 600 .83rem var(--font); transition: background .15s ease, color .15s ease, transform .15s ease; }
.wa-option:hover, .wa-option:focus-visible { background: #128c7e; color: #fff; transform: translateX(3px); outline: none; }
.wa-chat-foot:empty { display: none; }
.wa-chat-foot { padding: .75rem; background: #f0f2f5; border-top: 1px solid rgba(0, 0, 0, .06); }
.wa-final { display: flex; flex-direction: column; gap: .55rem; }
.wa-preview { background: #d9fdd3; border-radius: 10px; padding: .6rem .75rem; font-size: .8rem; color: #1f2937; line-height: 1.45; border-left: 3px solid #25d366; white-space: pre-line; max-height: 150px; overflow: auto; }
.wa-name, .wa-free textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: .6rem .75rem; font: .85rem var(--font); background: #fff; color: #1f2937; resize: none; }
.wa-name:focus, .wa-free textarea:focus { outline: 2px solid #25d366; border-color: transparent; }
.wa-go { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem; border-radius: 999px; background: #25d366; color: #fff !important; font-weight: 800; font-size: .92rem; text-decoration: none; box-shadow: 0 6px 18px rgba(37, 211, 102, .4); transition: background .15s ease, transform .15s ease; }
.wa-go svg { width: 20px; height: 20px; }
.wa-go:hover { background: #1ebe5d; transform: translateY(-1px); }
.wa-free { display: flex; gap: .5rem; align-items: flex-end; }
.wa-send-mini { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 0; background: #25d366; color: #fff; font-size: 1rem; cursor: pointer; }
.fab-wa svg { transition: transform .25s ease, opacity .2s ease; }
.fab-wa.chat-open svg { transform: rotate(90deg) scale(0); opacity: 0; }
.fab-wa.chat-open::after { content: "✕"; position: absolute; font-size: 1.5rem; font-weight: 700; color: #fff; }
.fab-wa.chat-open .fab-tip { display: none; }
.wa-chat-is-open .fab-tekki { opacity: 0; pointer-events: none; transform: scale(.8); }
@media (max-width: 768px) { .wa-chat { right: 10px; left: 10px; bottom: 84px; width: auto; max-height: calc(100vh - 110px); } }
@media (prefers-reduced-motion: reduce) { .wa-chat, .wa-msg, .wa-options { transition: none; animation: none; } }
.sv-grid > .f, .dx-row > .f { grid-column: auto; }
@media (max-width: 560px) { .toolbar { flex-wrap: wrap; } .toolbar .seg { max-width: 100%; overflow-x: auto; } .toolbar select.input { max-width: 100% !important; } }

/* ================================================================ Fase 7 · Chat interno del equipo */
.fab-chat { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 2.5px solid #fff; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #22d3ee 100%); box-shadow: 0 6px 24px rgba(8, 145, 178, .45), 0 2px 8px rgba(0, 0, 0, .15);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
.fab-chat > svg.i { width: 28px; height: 28px; }
.fab-chat:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 30px rgba(8, 145, 178, .6); }
.fab-chat::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #67e8f9; opacity: .8; animation: fabAura 2.4s cubic-bezier(.25, .8, .25, 1) infinite; animation-delay: .6s; pointer-events: none; }
.fab-chat.on { box-shadow: 0 0 0 4px rgba(34, 211, 238, .35), 0 6px 24px rgba(8, 145, 178, .45); }
.fab-chat.on::before { animation: none; opacity: 0; }
.fab-chat.ping { animation: chatPing .6s ease 3; }
@keyframes chatPing { 50% { transform: scale(1.15) rotate(-8deg); } }
.fab-chat:hover .fab-tip, .fab-chat:focus-visible .fab-tip { opacity: 1; transform: translate(0, -50%); }
.fab-chat.on .fab-tip { opacity: 0 !important; }
.fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rojo); color: #fff; font: 800 11.5px/22px var(--font); border: 2px solid #fff; }
.fab-online { position: absolute; bottom: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #22c55e; color: #fff; font: 800 10.5px/16px var(--font); border: 2px solid #fff; }
@media (prefers-reduced-motion: reduce) { .fab-chat::before { animation: none; opacity: 0; } }

/* Los paneles flotantes se abren a la izquierda de los botones */
.tekki { right: 102px !important; bottom: 26px !important; height: min(600px, calc(100vh - 110px)) !important; }
.wa-chat { right: 102px; bottom: 26px; }
.wa-chat-is-open .fab-tekki { opacity: 1; pointer-events: auto; transform: none; }
.toasts { right: 102px !important; bottom: 26px !important; }

.ichat { position: fixed; right: 102px; bottom: 26px; z-index: 70; width: 410px; height: min(640px, calc(100vh - 100px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 20, 60, .28), 0 4px 14px rgba(0, 0, 0, .1); animation: fadeup .2s ease; }
.ichat[hidden] { display: none !important; }
.ichat.drop { outline: 3px dashed #22d3ee; outline-offset: -8px; }
.ichat__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: linear-gradient(135deg, var(--marino), #0e7490); color: #fff; }
.ichat__head .btn-icon { color: #fff; background: rgba(255, 255, 255, .14); border-color: transparent; }
.ichat__head .btn-icon:hover { background: rgba(255, 255, 255, .28); }
.ichat__tit { flex: 1; min-width: 0; line-height: 1.25; }
.ichat__tit strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat__tit small { display: block; font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ichat__tabs { display: flex; padding: 8px 10px 0; gap: 4px; border-bottom: 1px solid var(--borde); }
.ichat__tabs button { flex: 1; border: 0; background: none; padding: 9px; font: 700 13px var(--font); color: var(--gris); border-bottom: 2.5px solid transparent; cursor: pointer; }
.ichat__tabs button.on { color: var(--azul); border-bottom-color: var(--azul); }
.ichat__search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 0 12px; height: 38px; border-radius: 10px; background: var(--surface-2); }
.ichat__search svg.i { width: 16px; height: 16px; color: var(--gris); }
.ichat__search input { flex: 1; border: 0; background: none; outline: none; font: 13.5px var(--font); }
.ichat__list { flex: 1; overflow-y: auto; padding: 4px 6px 10px; }
.ichat__sep { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 10px 10px 4px; }
.ichat__item { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 8px; border: 0; background: none; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; }
.ichat__item:hover { background: var(--surface-2); }
.ichat__av { position: relative; flex: none; }
.ichat__av .avatar { width: 42px; height: 42px; font-size: 14px; }
.ichat__av--grp { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e0f2fe, #cffafe); color: #0e7490; }
.ichat__head .ichat__av--grp { background: rgba(255, 255, 255, .18); color: #fff; }
.ichat__av--grp svg.i { width: 20px; height: 20px; }
.ichat__on { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.ichat__on--in { position: static; display: inline-block; width: 9px; height: 9px; border-width: 0; }
.ichat__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ichat__row { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.ichat__row b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--marino); }
.ichat__row small { font-size: 11px; color: var(--gris); flex: none; }
.ichat__prev { font-size: 12.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat__area { font-size: 10.5px; font-weight: 700; color: #0e7490; background: #ecfeff; border-radius: 999px; padding: 1px 8px; flex: none; }
.ichat__n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #22c55e; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.ichat__msgs { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 6px; background: #f3f6fa; background-image: radial-gradient(rgba(10, 74, 159, .05) 1px, transparent 1px); background-size: 14px 14px; }
.ichat__vacio { margin: auto; text-align: center; color: var(--gris); font-size: 13px; display: grid; gap: 8px; justify-items: center; max-width: 260px; }
.ichat__vacio svg.i { width: 34px; height: 34px; color: #67e8f9; }
.ichat__dia { text-align: center; margin: 6px 0; }
.ichat__dia span { font-size: 11px; font-weight: 700; color: var(--gris); background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ichat__m { position: relative; align-self: flex-start; max-width: 82%; background: #fff; border-radius: 14px; border-top-left-radius: 4px; padding: 7px 10px 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); font-size: 13.5px; animation: waMsgIn .2s ease; }
.ichat__m.mio { align-self: flex-end; background: #dff3ff; border-top-left-radius: 14px; border-top-right-radius: 4px; }
.ichat__m p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ichat__m p + .ichat__meta, .ichat__m > a + p { margin-top: 4px; }
.ichat__autor { display: block; font-size: 11.5px; font-weight: 800; margin-bottom: 2px; }
.ichat__meta { display: block; text-align: right; font-size: 10.5px; color: var(--gris); margin-top: 2px; }
.ichat__tick { font-weight: 800; letter-spacing: -2px; margin-left: 3px; color: #94a3b8; }
.ichat__tick.leido { color: #0ea5e9; }
.ichat__del { position: absolute; top: 4px; left: -30px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #fff; color: var(--rojo); display: none; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ichat__del svg.i { width: 13px; height: 13px; }
.ichat__m:hover .ichat__del { display: grid; }
.ichat__img img { display: block; max-width: 240px; max-height: 260px; border-radius: 10px; object-fit: cover; }
.ichat__audio { display: flex; align-items: center; gap: 6px; }
.ichat__audio > svg.i { width: 18px; height: 18px; color: #0e7490; flex: none; }
.ichat__audio audio { height: 36px; max-width: 230px; }
.ichat__audio small { color: var(--gris); font-size: 11px; }
.ichat__doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(10, 74, 159, .06); color: inherit; text-decoration: none; min-width: 220px; }
.ichat__doc b { display: block; font-size: 13px; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat__doc small { font-size: 11px; color: var(--gris); }
.ichat__doc > svg.i { width: 18px; height: 18px; color: var(--azul); margin-left: auto; flex: none; }
.ichat__docic { width: 36px; height: 36px; border-radius: 8px; background: var(--azul); color: #fff; display: grid; place-items: center; flex: none; }
.ichat__docic svg.i { width: 18px; height: 18px; }
.ichat__adj { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--borde); background: #f8fafc; font-size: 12.5px; }
.ichat__adj[hidden] { display: none; }
.ichat__adj img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.ichat__adj > span:not(.ichat__docic) { flex: 1; min-width: 0; }
.ichat__adj b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat__adj small { color: var(--gris); }
.ichat__comp { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); background: #fff; }
.ichat__comp[hidden] { display: none; }
.ichat__comp textarea { flex: 1; resize: none; border: 1px solid var(--borde-fuerte); border-radius: 18px; padding: 9px 14px; font: 13.5px/1.4 var(--font); max-height: 120px; outline: none; }
.ichat__comp textarea:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.ichat__send { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: #0891b2; color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s, background .15s; }
.ichat__send:hover { background: #0e7490; transform: scale(1.05); }
.ichat__send svg.i { width: 18px; height: 18px; }
.ichat__send[hidden] { display: none; }
.ichat__rec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--borde); background: #fff5f5; font-size: 13px; }
.ichat__rec[hidden] { display: none; }
.ichat__rec .muted { flex: 1; }
.ichat__recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); animation: fabDot 1s ease-in-out infinite; box-shadow: 0 0 8px var(--rojo); }
.ichat__pick { display: grid; gap: 6px; max-height: 280px; overflow: auto; padding: 4px; border: 1px solid var(--borde); border-radius: 10px; }
@media (max-width: 760px) {
  .ichat, .tekki, .wa-chat { left: 8px !important; right: 8px !important; top: 66px; bottom: 8px !important; width: auto !important; height: auto !important; max-height: none !important; z-index: 90; }
  .fab-chat { width: 54px; height: 54px; }
  .ichat-abierto .fab-stack, .wa-chat-is-open .fab-stack { display: none; }
  .toasts { right: 12px !important; bottom: 200px !important; }
}

/* ================================================================ Fase 8 · Correo electrónico */
.cor-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-presets button { border: 1px solid var(--borde-fuerte); background: #fff; border-radius: 999px; padding: 7px 14px; font: 600 12.5px var(--font); color: var(--marino); cursor: pointer; }
.cor-presets button:hover { border-color: var(--azul); }
.cor-presets button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cor-aviso { display: flex; gap: 14px; align-items: flex-start; }
.cor-aviso > svg.i { width: 30px; height: 30px; color: var(--azul); flex: none; }
.ce-adj { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.ce-file { display: inline-flex; align-items: center; gap: 6px; }
.ce-file svg.i { width: 15px; height: 15px; color: var(--azul); }
.ce-file small { color: var(--gris); }
.ce-hist { margin-top: 10px; font-size: 12px; color: var(--gris); }
.ce-hist summary { cursor: pointer; font-weight: 700; color: var(--marino); }
.ce-hist div { padding: 3px 0; }
.ce-res { font-size: 13px; margin: 10px 0 0; min-height: 1em; }
.ce-res.err { color: var(--rojo); font-weight: 600; }

/* ================================================================ Fase 9 · Usuarios y áreas */
.jer { margin-bottom: 18px; padding: 14px 16px; }
.jer__pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jer__pasos > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: #fbfcfe; position: relative; }
.jer__pasos > div:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--gris); font-weight: 800; z-index: 1; }
.jer__pasos b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--gris); font-size: 12px; flex: none; }
.jer__pasos strong { display: block; font-size: 13px; color: var(--marino); }
.jer__pasos small { font-size: 12px; color: var(--gris); }
.jer__pasos .on { border-color: var(--azul); background: var(--azul-50); }
.jer__pasos .on b { background: var(--azul); color: #fff; }
@media (max-width: 800px) { .jer__pasos { grid-template-columns: 1fr; } .jer__pasos > div::after { display: none; } }
.area-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); margin: 1px 0; }
.area-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.area-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; padding: 0 20px 20px; }
.area-card { border: 1px solid var(--borde); border-top: 4px solid var(--c); border-radius: 14px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.area-card.off { opacity: .6; }
.area-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.area-card__top strong { font-size: 15px; color: var(--marino); }
.area-card p { margin: 0; font-size: 12.5px; color: var(--gris); min-height: 1.2em; }
.area-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.area-mods span { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--marino); }
.area-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; font-size: 12px; }
.area-card__foot .muted { display: inline-flex; gap: 5px; align-items: center; }
.area-card__foot svg.i { width: 14px; height: 14px; }
.area-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.area-pick--users { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-height: 220px; overflow: auto; padding: 8px; border: 1px solid var(--borde); border-radius: 10px; }
.area-op, .mod-op { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; background: #fff; }
.area-op { border-left: 4px solid var(--c); }
.area-op:has(input:checked), .mod-op:has(input:checked) { border-color: var(--azul); background: var(--azul-50); }
.area-op:has(input:checked) { border-left-color: var(--c); }
.area-op b, .mod-op b { display: block; font-size: 13px; }
.area-op small, .mod-op small { display: block; font-size: 11.5px; color: var(--gris); line-height: 1.35; }
.area-op input, .mod-op input { margin-top: 3px; }
.mod-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.area-res { margin-top: 8px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; color: var(--marino); }
.area-res svg.i { width: 15px; height: 15px; flex: none; }
#areasBox.is-off .area-pick { opacity: .45; pointer-events: none; }
.area-colores { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.area-colores label { cursor: pointer; }
.area-colores input { position: absolute; opacity: 0; }
.area-colores span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borde-fuerte); }
.area-colores input:checked + span { box-shadow: 0 0 0 2px var(--c); }
.matriz td .sub { font-weight: 500; }
.sin-acceso { display: grid; justify-items: center; gap: 8px; text-align: center; }
.sin-acceso span { max-width: 460px; font-size: 13px; }
.area-op input[type=checkbox], .mod-op input[type=checkbox] { width: 17px; height: 17px; min-height: 0; flex: none; padding: 0; margin: 2px 0 0; accent-color: var(--azul); box-shadow: none; }

/* ================================================================ Fase 10 · Expediente de enfermería y salud infantil */
:root { --sv-rojo: #d7141f; --sv-azul: #1d4ed8; --sv-verde: #15803d; --sv-negro: #111827; --si-alerta: #facc15; --si-alerta-50: #fef9c3; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.chk input[type=checkbox], .si-chk input[type=checkbox] { width: 17px; height: 17px; min-height: 0; flex: none; padding: 0; margin: 0; accent-color: var(--azul); box-shadow: none; }
.btn-icon--sm { width: 28px; height: 28px; vertical-align: middle; }
.btn-icon--sm svg.i { width: 14px; height: 14px; }
/* Colores de las constantes vitales (hoja 020) también en los formularios de signos */
.sv-c label { color: var(--svc, inherit); font-weight: 800; }
.sv-c input { border-left: 4px solid var(--svc, var(--borde)) !important; color: var(--svc, inherit); font-weight: 700; }
.sv-grid [data-sv="frecuencia_cardiaca"], .sv-grid [data-sv="saturacion_o2"] { --svc: var(--sv-rojo); }
.sv-grid [data-sv="temperatura"] { --svc: var(--sv-azul); }
.sv-grid [data-sv="frecuencia_respiratoria"] { --svc: var(--sv-verde); }
.sv-grid [data-sv="presion_arterial"] { --svc: var(--sv-negro); }
.sv-grid [data-sv="frecuencia_cardiaca"] label, .sv-grid [data-sv="saturacion_o2"] label, .sv-grid [data-sv="temperatura"] label, .sv-grid [data-sv="frecuencia_respiratoria"] label, .sv-grid [data-sv="presion_arterial"] label { color: var(--svc); font-weight: 800; }
.sv-grid [data-sv="frecuencia_cardiaca"] input, .sv-grid [data-sv="saturacion_o2"] input, .sv-grid [data-sv="temperatura"] input, .sv-grid [data-sv="frecuencia_respiratoria"] input, .sv-grid [data-sv="presion_arterial"] input { border-left: 4px solid var(--svc); color: var(--svc); font-weight: 700; }

/* Cabecera del expediente */
.enf-head { display: grid; grid-template-columns: minmax(260px, 1.2fr) 2fr auto; gap: 20px; padding: 18px 20px; align-items: center; }
.enf-head__pac { display: flex; gap: 14px; align-items: center; min-width: 0; }
.enf-head__pac .avatar { width: 52px; height: 52px; font-size: 18px; flex: none; }
.enf-head__pac h2 { font-size: 18px; margin: 0 0 2px; }
.enf-head__pac .muted { font-size: 12.5px; }
.enf-head__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.enf-head__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.enf-head__res > div { background: var(--surface-2); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.enf-head__res span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 700; }
.enf-head__res p { margin: 4px 0 2px; font-size: 13px; }
.enf-head__res small { color: var(--texto-3); font-size: 11.5px; }
.enf-head__res .pos { color: var(--azul); } .enf-head__res .neg { color: var(--rojo); }
.enf-head__links { display: flex; flex-direction: column; gap: 6px; }
.enf-tabs { padding: 0 12px; }
.enf-cuerpo { min-height: 240px; }
.enf-tool { gap: 12px; }
.enf-sub { font-size: 13px; margin: 4px 0 10px; color: var(--marino); text-transform: uppercase; letter-spacing: .04em; }
.enf-sub + .fields { margin-bottom: 18px; }
.enf-mas { margin-top: 14px; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; }
.enf-mas summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--texto-2); }
.enf-mas .fields { margin-top: 12px; }
.leyenda020 { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 800; }

/* Hoja 020 */
.h020-wrap { padding: 0 0 6px; }
.h020 { border-collapse: collapse; table-layout: fixed; font-size: 11.5px; margin: 14px 20px; }
.h020 th, .h020 td { border: 1px solid #cfd8e6; padding: 3px 4px; height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h020 th { text-align: left; font-size: 10.5px; font-weight: 800; color: var(--texto-2); background: #f1f6fd; white-space: normal; line-height: 1.15; }
.h020 td.c { text-align: center; font-weight: 700; }
.h020 td.resp { font-weight: 600; color: var(--texto-3); font-size: 10.5px; }
.h020-sec th { background: var(--marino); color: #fff; font-size: 11.5px; letter-spacing: .03em; padding: 6px 8px; }
.h020-sec small { font-weight: 600; opacity: .8; }
.h020-fecha td { background: #e8f7ee; }
.h020-turnos td { text-align: center; font-weight: 800; background: #e8f7ee; font-size: 10.5px; }
.h020-graf td, .h020-graf th { height: auto; background: #fff; }
.h020-tot td, .h020-tot th { background: #f8fafd; }
.h020 .pos { color: var(--azul); } .h020 .neg { color: var(--rojo); }
.h020-edit [data-cuid] { display: block; min-height: 16px; cursor: pointer; border-radius: 4px; }
.h020-edit [data-cuid]:hover { background: var(--azul-50); }
.g020 { display: block; }
.g020 .g-fino { stroke: #e7edf6; stroke-width: 1; }
.g020 .g-10 { stroke: #b8c4d6; stroke-width: 1; }
.g020 .g-dia { stroke: #8fa0b8; stroke-width: 1.4; }
.g-37 { stroke: #111827; stroke-width: 1.6; stroke-dasharray: 7 4; }
.g020 .pt { cursor: help; }
.g020-esc { display: block; font-size: 11px; font-weight: 800; }
.disp { display: inline-flex; flex-direction: column; align-items: center; padding: 1px 6px; border-radius: 6px; background: var(--azul-50); color: var(--azul); font-weight: 700; font-size: 10.5px; cursor: pointer; line-height: 1.2; }
.disp small { font-weight: 500; font-size: 9.5px; color: var(--texto-3); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.disp--col { background: var(--ok-50); color: var(--ok); }
.disp--ret { background: var(--rojo-50); color: var(--rojo); }

/* Balance hídrico */
.bal-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 20px; border-bottom: 1px solid var(--borde); background: var(--surface-2); }
.bal-grp { display: grid; gap: 4px; }
.bal-grp > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-3); }
.bal-grp > div { display: flex; gap: 6px; }
.bal-grp input, .bal-grp select { height: 38px; min-height: 0; padding: 6px 9px; width: 96px; font-size: 13px; }
.bal-grp input[name=ing_tipo], .bal-grp input[name=par_sol] { width: 150px; }
.bal-grp--i > span { color: var(--ok); } .bal-grp--e > span { color: #be185d; }
.bal-tbl th, .bal-tbl td { text-align: center; padding: 8px 8px; font-size: 12.5px; }
.bal-tbl thead tr.bal-g th { background: #d1fae5; color: #065f46; }
.bal-tbl thead tr.bal-g th.bal-e, .bal-tbl thead tr.bal-g2 th:nth-child(n+7):nth-child(-n+10) { background: #fce7f3; color: #9d174d; }
.bal-tbl thead tr.bal-g2 th { background: #fbcfe8; color: #831843; font-size: 11px; }
.bal-tbl thead tr.bal-g2 th:nth-child(-n+6) { background: #a7f3d0; color: #065f46; }
.bal-sub td { background: var(--surface-2); font-weight: 700; color: var(--texto-2); }
.bal-sub td:first-child { text-align: right; }
.bal-i { color: var(--ok); } .bal-e { color: #be185d; }
.bal-pie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.bal-pie > div { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.bal-pie span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.bal-pie b { font-size: 20px; } .bal-pie small { color: var(--texto-3); font-size: 12px; }
.bal-pie .pos { color: var(--azul); } .bal-pie .neg { color: var(--rojo); }

/* Kardex 022 */
.kx-alergia { margin: 16px 20px 0; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--ok-50); }
.kx-alergia.si { background: var(--rojo-50); border-color: #f5b5b9; color: #8f0d14; }
.kx-sn { border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: 1px 8px; font-weight: 800; font-size: 12px; opacity: .45; background: #fff; }
.kx-sn.on { opacity: 1; border-color: currentColor; }
.kx-tbl th.kx-h1 { width: 280px; background: #e8f7ee; }
.kx-tbl th.kx-h2 { text-align: center; background: #e8f7ee; }
.kx-tbl th.hoy, .kx-tbl td.hoy { background: #f2f8ff; }
.kx-med { position: relative; padding-right: 36px !important; }
.kx-med b { display: block; } .kx-med span { display: block; font-size: 12.5px; color: var(--texto-2); }
.kx-med small { display: block; font-size: 11.5px; color: var(--texto-3); }
.kx-med .chip { margin-top: 6px; }
.kx-med .btn-icon { position: absolute; top: 8px; right: 6px; }
.kx-cel { vertical-align: top; min-width: 150px; }
.kx-adm { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 6px; border-radius: 6px; background: var(--ok-50); margin-bottom: 4px; }
.kx-adm.omit { background: var(--rojo-50); text-decoration: line-through; color: var(--rojo); }
.kx-x { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--texto-3); font-size: 15px; line-height: 1; }
.kx-mas { border: 1px dashed var(--borde-fuerte); background: #fff; border-radius: 6px; width: 100%; height: 28px; cursor: pointer; color: var(--azul); display: grid; place-items: center; }
.kx-mas svg.i { width: 14px; height: 14px; }
.kx-fin td { opacity: .6; }

/* Rótulos de sueros */
.rotulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 20px; }
.rotulo { position: relative; border: 1.5px solid var(--texto); border-radius: 10px; padding: 14px 16px 12px; background: #fff; cursor: pointer; display: block; }
.rotulo.fin { border-color: var(--borde-fuerte); opacity: .65; }
.rotulo > input { position: absolute; top: 12px; left: 12px; width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--azul); box-shadow: none; }
.rotulo h5, .rotulo h6 { text-align: center; margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; }
.rotulo h6 { color: var(--texto-2); font-size: 11.5px; margin-bottom: 10px; }
.rotulo p { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px dashed var(--borde-fuerte); font-size: 12.5px; }
.rotulo .rot-goteo { text-align: right; }
.rotulo .rot-2 { display: flex; justify-content: space-between; gap: 10px; }
.rot-acc { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rot-acc .btn { margin-left: auto; }

/* Notas */
.nota-form { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: grid; gap: 10px; }
.nota-form > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.notas { padding: 16px 20px; display: grid; gap: 12px; }
.nota { border: 1px solid var(--borde); border-left: 4px solid var(--azul); border-radius: 12px; padding: 12px 14px; }
.nota.aviso { border-left-color: var(--rojo); background: #fffafa; }
.nota header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; }
.nota p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Salud infantil */
.si-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.si-aviso { margin: 16px 20px 0; padding: 10px 14px; border-radius: 12px; background: #fff8e1; border: 1px solid #fde68a; font-size: 12.5px; color: #78350f; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.si-leyenda { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 12px; }
.si-leyenda i { width: 14px; height: 14px; border-radius: 50%; background: var(--si-alerta); border: 1px solid #ca8a04; display: inline-block; }
.si-alertas:empty { display: none; }
.si-alertas { margin: 12px 20px 0; padding: 10px 14px; border-radius: 12px; background: var(--si-alerta-50); border: 1px solid #fde047; font-size: 12.5px; color: #713f12; }
.si-op { display: flex; flex-wrap: wrap; gap: 6px; }
.si-op button { border: 1.5px solid var(--borde-fuerte); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.si-op button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); background: #fff; }
.si-op button.al::before { background: var(--si-alerta-50); border-color: #eab308; }
.si-op button.on { border-color: var(--azul); color: var(--azul); background: var(--azul-50); }
.si-op button.on::before { background: var(--azul); border-color: var(--azul); }
.si-op button.on.al { border-color: #ca8a04; background: var(--si-alerta); color: #422006; }
.si-op button.on.al::before { background: #a16207; border-color: #a16207; }
.si-op button:disabled { cursor: default; }
.si-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 20px; }
.si-pie .btn { margin-left: auto; }
.si-banda { padding: 16px 20px 6px; }
.si-banda h4 { font-size: 14px; margin: 0 0 10px; color: var(--marino); }
.si-banda.actual h4::after { content: "Edad actual"; margin-left: 8px; font-size: 11px; background: var(--azul-50); color: var(--azul); padding: 2px 8px; border-radius: 999px; }
.si-tbl th { font-size: 11.5px; text-align: center; background: #fff3c4; color: #5b4300; }
.si-tbl td { font-size: 12.5px; text-align: center; }
.si-tbl td:first-child { text-align: left; }
.si-tbl small { display: block; font-size: 10.5px; color: var(--texto-3); font-weight: 700; }
.si-mal { color: var(--rojo) !important; font-weight: 800; }
.si-x { font-weight: 800; color: var(--azul); }
.si-x.al { background: var(--si-alerta); color: #422006; }
.si-vac .si-tbl th { background: #d9f5df; color: #14532d; }
.si-vac tr.vac-atrasada td { background: #fff5f5; }
.si-vac tr.vac-toca td { background: #fffbeb; }
.si-vac tr.vac-aplicada td { background: #f3fbf6; }
.si-vacres { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 16px 20px 0; }
.si-nota { font-size: 11.5px; margin: 8px 0 6px; }
.si-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--borde-fuerte); border-radius: 12px; background: var(--surface-2); }
.si-inline input { height: 36px; min-height: 0; padding: 6px 10px; width: auto; font-size: 13px; }
.si-inline input[type=date] { width: 150px; }
.si-lbl { font-size: 11.5px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; }
.si-chk { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; }
.si-calc { font-size: 12.5px; }
.si-hitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding: 16px 20px 0; }
.si-hito { border: 1px solid #fde68a; border-radius: 14px; overflow: hidden; }
.si-hito.actual { box-shadow: 0 0 0 3px rgba(10, 74, 159, .15); border-color: var(--azul); }
.si-hito h4 { margin: 0; padding: 10px 14px; background: #fde68a; font-size: 13px; color: #422006; display: flex; gap: 8px; align-items: center; }
.si-hito.actual h4 { background: var(--azul-50); color: var(--marino); }
.si-hito__i { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--borde); font-size: 13px; }
.si-hito__i .si-op { flex: none; }
.si-grafwrap { padding: 16px 20px 4px; }
.si-grafwrap h4 { font-size: 14px; margin: 0 0 8px; }
.si-grafwrap small { font-weight: 500; }
.si-graf { width: 100%; max-width: 900px; height: auto; display: block; font-size: 11px; fill: var(--texto-3); }
.si-graf .g-fino { stroke: #eef2f8; }
.si-graf .si-z { font-weight: 800; font-size: 11px; }
.si-graf circle { cursor: help; }
.si-anemia { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; padding: 6px 0 14px; }
.si-anemia p { max-width: 320px; font-size: 13.5px; margin: 0; }
.si-alt { width: auto; }
.si-alt th { background: #dbeafe !important; color: #1e3a8a !important; }

@media (max-width: 1100px) {
  .enf-head { grid-template-columns: 1fr; }
  .enf-head__links { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .enf-head__res { grid-template-columns: 1fr; }
  .bal-pie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bal-grp input, .bal-grp select, .bal-grp input[name=ing_tipo], .bal-grp input[name=par_sol] { width: 100%; }
  .bal-grp, .bal-grp > div { width: 100%; }
  .si-hitos { grid-template-columns: 1fr; }
  .si-hito__i { flex-direction: column; align-items: flex-start; }
  .rotulos { grid-template-columns: 1fr; padding: 14px; }
}
@media print {
  .enf-tabs, .si-head, .enf-head__links, .kx-mas, .kx-x, .btn-icon { display: none !important; }
  .h020 { margin: 0; font-size: 9px; }
  .card { box-shadow: none; border: 0; }
  .table-wrap { overflow: visible !important; }
}
.si-head .seg, .enf-tool .seg, .si-grafwrap + .toolbar .seg, #ind { max-width: 100%; overflow-x: auto; }
.si-head .seg button, .enf-tool .seg button { white-space: nowrap; flex: none; }
@media (max-width: 700px) { .si-op button { white-space: normal; text-align: left; } .si-inline input { flex: 1 1 120px; } }

/* ================================================================ Fase 11 · Roles y cargos del establecimiento, plan de dosis */
.cargo-sug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 20px 0; font-size: 12.5px; }
.cargo-sug button { border: 1px dashed var(--borde-fuerte); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; color: var(--texto-2); }
.cargo-sug button.salud { border-color: #67c7d9; color: #0e7490; }
.cargo-sug button.administrativo { border-color: #a5b0bf; color: #475569; }
.cargo-sug button svg.i { width: 13px; height: 13px; }
.cargos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 20px 22px; }
.cargo-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 0 0 10px; }
.cargos { display: grid; gap: 10px; }
.cargo-card { border: 1px solid var(--borde); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; background: #fff; }
.cargo-card.off { opacity: .55; }
.cargo-card__top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.cargo-card small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.cargo-card p { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-2); }
.cargo-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.cargo-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); }
#cTipo button { display: inline-flex; gap: 6px; align-items: center; }
#cTipo button svg.i { width: 14px; height: 14px; }
@media (max-width: 800px) { .cargos-cols { grid-template-columns: 1fr; } }
/* Kardex: calculadora de horario y dosis programadas */
.kx-calc { margin-top: 16px; border: 1px solid #bfe3cb; background: #f3fbf6; border-radius: 14px; padding: 14px 16px; }
.kx-calc h4 { margin: 0 0 12px; font-size: 14px; color: #14532d; display: flex; gap: 8px; align-items: center; }
.kx-calc h4 svg.i { width: 16px; height: 16px; }
.kx-calc.off .fields > .f:not(.chk), .kx-calc.off .kx-preview { opacity: .45; pointer-events: none; }
.kx-cada { display: flex; flex-direction: column; gap: 6px; }
.kx-cada .seg { align-self: flex-start; }
.kx-preview { margin-top: 12px; font-size: 12.5px; }
.kx-prev-res { margin-bottom: 8px; }
.kx-prev-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kx-prev-dia { font-weight: 800; font-size: 11px; text-transform: uppercase; color: #14532d; margin-left: 4px; }
.kx-prev-t { background: #fff; border: 1px solid #bfe3cb; border-radius: 8px; padding: 3px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-prev-t em, .kx-slot em, .kx-adm em { font-style: normal; font-size: 10px; color: var(--texto-3); margin-right: 4px; font-weight: 700; }
.kx-prog { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; justify-items: start; }
.kx-prog .chip { margin: 0; }
.kx-prog small { color: var(--texto-3); }
.kx-bar { width: 100%; max-width: 200px; height: 6px; border-radius: 99px; background: var(--borde); overflow: hidden; }
.kx-bar i { display: block; height: 100%; background: var(--ok); }
.kx-slot { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; border-radius: 6px; border: 1px dashed var(--borde-fuerte); margin-bottom: 4px; background: #fff; font-variant-numeric: tabular-nums; }
.kx-slot.tarde { border-color: #f5a3a8; background: #fff5f5; }
.kx-slot.ahora { border-color: var(--azul); background: var(--azul-50); }
.kx-slot.fut { color: var(--texto-3); }
.kx-linea { flex: 1; border-bottom: 1px solid var(--borde-fuerte); height: 12px; min-width: 40px; }
.kx-firma { margin-left: auto; border: 0; background: var(--azul); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; cursor: pointer; }
.kx-slot.tarde .kx-firma { background: var(--rojo); }
.kx-adm .kx-quien { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-cel { min-width: 180px; }
.f.chk { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }

/* ================================================================ Fase 12 · Inventario de áreas y carros de paro */
.inv-body { padding: 4px 20px 22px; }
.inv-h { display: flex; gap: 8px; align-items: center; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 18px 0 10px; }
.inv-h svg.i { width: 16px; height: 16px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.inv-ub { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--borde); border-top: 4px solid var(--c); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.inv-ub:hover { box-shadow: var(--sombra-lg); transform: translateY(-1px); }
.inv-ub.carro { border-top-color: var(--rojo); background: linear-gradient(180deg, #fff6f6, #fff 60%); }
.inv-ub__top { display: flex; gap: 12px; align-items: center; }
.inv-ub__top strong { display: block; font-size: 14.5px; }
.inv-ub__top small { color: var(--texto-3); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.inv-ub p { margin: 0; font-size: 12.5px; color: var(--texto-2); }
.inv-ub__resp { font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--texto-2); }
.inv-ub__resp svg.i { width: 14px; height: 14px; }
.inv-ub__kpis { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.inv-ub__kpis span { padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--borde); }
.inv-ub__kpis span.mal { background: var(--rojo-50); border-color: #f5b5b9; color: #8f0d14; }
.inv-ub__kpis span.warn { background: var(--warn-50); border-color: #f5d29a; color: #8a4b05; }
.area-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.inv-aviso { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--rojo-50); border: 1px solid #f5b5b9; color: #8f0d14; font-size: 13px; text-decoration: none; }
.seg-a { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 12.5px; color: var(--texto-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.seg-a.on { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(15, 30, 54, .12); }
.badge-n { background: var(--rojo); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.inv-head { display: flex; gap: 14px; align-items: center; padding: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.inv-head.carro { border: 1.5px solid #f5b5b9; background: linear-gradient(90deg, #fff5f5, #fff 40%); }
.inv-head__t { flex: 1; min-width: 200px; }
.inv-head__t h2 { margin: 0; font-size: 18px; }
.inv-head__t .muted { font-size: 12.5px; }
.inv-resp { display: grid; gap: 2px; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px solid #f5b5b9; font-size: 13px; }
.inv-resp span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rojo); font-weight: 800; }
.inv-resp small { color: var(--texto-3); font-size: 11.5px; }
.inv-resp .btn { margin-top: 6px; justify-self: start; }
.inv-alerta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: var(--warn-50); border: 1px solid #f5d29a; color: #8a4b05; font-size: 13px; }
.inv-alerta > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-tbl td { vertical-align: top; }
.inv-row-al td { background: #fffbf2; }
.inv-link { color: var(--azul) !important; display: flex !important; gap: 4px; align-items: center; }
.inv-link svg.i { width: 12px; height: 12px; }
.inv-menu { position: absolute; z-index: 300; background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; display: grid; min-width: 230px; }
.inv-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--texto); }
.inv-menu button:hover:not(:disabled) { background: var(--azul-50); }
.inv-menu button:disabled { color: var(--texto-3); cursor: not-allowed; }
.inv-vinc { border: 1px dashed var(--borde-fuerte); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; background: var(--surface-2); display: grid; gap: 6px; }
.inv-vinc label { font-weight: 700; font-size: 13px; }
.inv-vinc__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-vinc__row input { flex: 1; min-width: 220px; }
.inv-vias { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-vias label { display: inline-flex; cursor: pointer; }
.inv-vias input { position: absolute; opacity: 0; width: 0; height: 0; }
.inv-vias span { border: 1.5px solid var(--borde-fuerte); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.inv-vias input:checked + span { border-color: var(--azul); background: var(--azul-50); color: var(--azul); }
.inv-vias input:focus-visible + span { outline: 2px solid var(--azul); }
.inv-clin.is-off { opacity: .5; }
.inv-rev input.inv-cont { width: 80px; height: 34px; min-height: 0; padding: 4px 8px; text-align: right; }
.inv-rev tr.dif td { background: #fff4f4; }
.inv-repl { display: grid; gap: 6px; max-height: 300px; overflow: auto; }
.inv-repl label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.inv-repl label.al { border-color: #f5d29a; background: var(--warn-50); }
.inv-repl label > span { flex: 1; }
.inv-repl small { display: block; color: var(--texto-3); font-size: 12px; }
.inv-repl input[type=checkbox] { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--azul); box-shadow: none; flex: none; }
.inv-repl .inv-cant { width: 70px; height: 32px; min-height: 0; padding: 4px 8px; text-align: right; }
.inv-entregas { display: grid; gap: 10px; padding: 16px 20px 20px; }
.inv-ent { border: 1px solid var(--borde); border-left: 4px solid var(--ok); border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.inv-ent.incompleto { border-left-color: var(--rojo); }
.inv-ent header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.inv-ent p { margin: 2px 0; }
.inv-dist { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--borde); font-size: 12px; }
.inv-dist.bajo { background: var(--rojo-50); border-color: #f5b5b9; }
.inv-dist.vence { box-shadow: inset 0 0 0 1px #f59e0b; }
@media (max-width: 700px) { .inv-grid { grid-template-columns: 1fr; } .inv-body { padding: 4px 14px 18px; } .inv-head { padding: 14px; } }

/* ================================================================ Fase 13 · Turnos y guardias */
.tur-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.tur-head__l { display: flex; gap: 8px; align-items: center; }
.tur-head__l .input { min-width: 200px; height: 38px; }
.tur-jefe { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 6px 12px; border-radius: 10px; background: var(--azul-50); color: var(--marino); }
.tur-jefe span { color: var(--texto-3); font-size: 12px; }
.tur-jefe svg.i { width: 15px; height: 15px; }
.tur-jefe a { font-weight: 700; margin-left: 4px; }
.tur-acc { margin-left: auto; display: flex; gap: 8px; }
.tur-ro { margin: -6px 0 12px; font-size: 12.5px; color: var(--texto-3); display: flex; gap: 6px; align-items: center; }
.tur-ro svg.i { width: 14px; height: 14px; }
.tur-tbl { width: 100%; border-collapse: collapse; min-width: 980px; table-layout: fixed; }
.tur-tbl th, .tur-tbl td { border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); padding: 6px; vertical-align: top; }
.tur-tbl thead th { font-size: 12px; font-weight: 600; color: var(--texto-3); text-align: center; padding: 10px 6px; background: var(--surface-2); }
.tur-tbl thead th b { color: var(--texto); font-size: 15px; }
.tur-tbl thead th.hoy { background: var(--azul-50); color: var(--azul); }
.tur-p { width: 210px; text-align: left !important; background: #fff; position: sticky; left: 0; z-index: 1; }
.tur-p b { display: block; font-size: 13px; }
.tur-p small { color: var(--texto-3); font-size: 11.5px; }
.tur-badge { background: var(--azul); color: #fff; border-radius: 6px; padding: 0 6px; font-weight: 700; font-size: 10.5px; }
.tur-cel { position: relative; height: 64px; }
.tur-cel.hoy { background: #f5f9ff; }
.tur-cel.edit { cursor: pointer; }
.tur-cel.edit:hover { background: var(--azul-50); }
.tur-add { display: none; position: absolute; right: 4px; bottom: 4px; color: var(--azul); }
.tur-add svg.i { width: 14px; height: 14px; }
.tur-cel.edit:hover .tur-add { display: block; }
.tur-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--c); background: var(--b); color: #0f1e36; border-radius: 7px; padding: 4px 7px; margin-bottom: 4px; cursor: pointer; font-family: inherit; }
.tur-chip b { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.tur-chip small { font-size: 10.5px; color: #46566e; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tur-chip.manana { --c: #0891b2; --b: #e0f6fb; } .tur-chip.tarde { --c: #d97706; --b: #fdf3e2; } .tur-chip.dia { --c: #0a4a9f; --b: #e6eefb; }
.tur-chip.noche { --c: #6d28d9; --b: #efe9fd; } .tur-chip.g24 { --c: #d7141f; --b: #fdecee; }
.tur-chip.cubierto { opacity: .55; text-decoration: line-through; }
.tur-chip.cubierto small { text-decoration: none; }
.tur-chip.reemplazo { border: 1.5px dashed var(--c); border-left-width: 4px; border-left-style: solid; }
.tur-chip.grande { padding: 10px 14px; margin-bottom: 12px; cursor: default; }
.tur-chip.grande b { font-size: 15px; }
.tur-chip.grande b::first-letter, .tur-mio header b::first-letter, .tur-dev b::first-letter { text-transform: uppercase; }
.tur-chip.grande small { font-size: 13px; }
.tur-res { text-align: center; font-size: 11.5px; color: var(--texto-2); background: var(--surface-2); }
.tur-res span { display: inline-block; margin: 1px 3px; }
.tur-res .falta { color: var(--rojo); font-weight: 700; }
.tur-tbl tfoot th { background: var(--surface-2); font-size: 12px; }
.tur-ley { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; }
.tur-ley .tur-chip { width: auto; display: inline-block; cursor: default; margin: 0; --c: #7a889c; --b: #f3f6fb; }
.tur-ley .tur-chip.manana { --c: #0891b2; --b: #e0f6fb; } .tur-ley .tur-chip.tarde { --c: #d97706; --b: #fdf3e2; } .tur-ley .tur-chip.dia { --c: #0a4a9f; --b: #e6eefb; } .tur-ley .tur-chip.noche { --c: #6d28d9; --b: #efe9fd; } .tur-ley .tur-chip.g24 { --c: #d7141f; --b: #fdecee; }
.tur-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tur-presets button { border: 1px solid var(--borde-fuerte); background: #fff; border-radius: 10px; padding: 7px 8px; font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: left; color: var(--texto); }
.tur-presets button small { display: block; font-weight: 500; color: var(--texto-3); font-size: 11px; }
.tur-presets button.on { border-color: var(--azul); background: var(--azul-50); color: var(--azul); }
.tur-dias { display: flex; gap: 4px; }
.tur-dias label { cursor: pointer; }
.tur-dias input { position: absolute; opacity: 0; width: 0; height: 0; }
.tur-dias span { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 8px; border: 1px solid var(--borde-fuerte); font-weight: 700; font-size: 12.5px; color: var(--texto-3); }
.tur-dias input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.tur-prev { font-size: 13px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; gap: 6px; align-items: center; }
.tur-prev:empty { display: none; }
.tur-prev svg.i { width: 15px; height: 15px; flex: none; }
.tur-det dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 13.5px; margin: 0 0 14px; }
.tur-det dt { color: var(--texto-3); }
.tur-det dd { margin: 0; }
.tur-det__acc { display: flex; gap: 8px; flex-wrap: wrap; }
.tur-h { color: var(--rojo); }
.tur-h4 { margin: 18px 20px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.tur-devs { display: grid; gap: 8px; }
.tur-dev { text-align: left; border: 1px solid var(--borde); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; }
.tur-dev:hover:not(:disabled) { border-color: var(--azul); background: var(--azul-50); }
.tur-dev:disabled { opacity: .5; cursor: not-allowed; }
.tur-dev b { display: block; }
.tur-dev small { color: var(--texto-3); }
.tur-mios { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 18px; }
.tur-mio { border: 1px solid var(--borde); border-top: 4px solid var(--c); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; }
.tur-mio.manana { --c: #0891b2; } .tur-mio.tarde { --c: #d97706; } .tur-mio.dia { --c: #0a4a9f; } .tur-mio.noche { --c: #6d28d9; } .tur-mio.g24 { --c: #d7141f; }
.tur-mio header { display: grid; gap: 2px; }
.tur-mio header b { font-size: 14.5px; }
.tur-mio header span { color: var(--texto-2); font-size: 13px; }
.tur-mio header .chip { justify-self: start; }
.tur-eq { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tur-eq > .tur-eq__t { width: 100%; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.tur-eq__t svg.i { width: 14px; height: 14px; }
.tur-per { background: var(--surface-2); border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.tur-per small { color: var(--texto-3); font-weight: 500; margin-left: 6px; }
.tur-falta { color: var(--rojo); font-style: normal; font-weight: 700; font-size: 12.5px; }
@media (max-width: 700px) { .tur-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tur-acc { margin-left: 0; } .tur-head__l .input { min-width: 0; width: 100%; } .tur-head__l { width: 100%; } }
.area-jefe { display: flex; gap: 6px; align-items: center; font-size: 12.5px; margin: 4px 0 8px !important; }
.area-jefe svg.i { width: 14px; height: 14px; }
.jefes-box { padding: 16px 20px 0; }
.jefes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.jefe-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--borde); border-left: 4px solid var(--c); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.jefe-row > span { display: flex; gap: 6px; align-items: center; }
.jefe-row select { max-width: 60%; height: 36px; min-height: 0; padding: 4px 8px; font-size: 12.5px; }
.tur-conf { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; margin-left: 5px; vertical-align: 1px; font-weight: 800; }
.tur-conf.si { background: var(--ok); color: #fff; }
.tur-conf.no { background: #fff; color: var(--warn); border: 1.5px solid var(--warn); font-size: 14px; line-height: 1; }
.tur-pend { color: var(--warn); }
.tur-reg { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--texto-2); background: var(--azul-50); border-radius: 8px; padding: 7px 10px; }
.tur-reg svg.i { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.tur-confirmar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; background: var(--warn-50); border: 1px solid #f5d29a; color: #7a4205; }
.tur-confirmar > svg.i { width: 22px; height: 22px; flex: none; }
.tur-confirmar > div { flex: 1; display: grid; gap: 2px; min-width: 200px; }
.tur-confirmar span { font-size: 13px; }

/* ================================================================ Fase 14 · Cálculo de dosis (regla de 3) */
.kx-dosis { margin-top: 16px; border: 1px solid #f9c6dc; background: #fff7fb; border-radius: 14px; padding: 14px 16px; }
.kx-dosis h4 { margin: 0 0 12px; font-size: 14px; color: #9d174d; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kx-dosis h4 small { font-weight: 500; color: var(--texto-3); font-size: 12px; }
.kx-dosis h4 svg.i { width: 16px; height: 16px; }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd-col { display: grid; gap: 6px; align-content: start; }
.cd-t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-2); display: flex; gap: 6px; align-items: center; }
.cd-t svg.i { width: 14px; height: 14px; }
.cd-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cd-fila input { width: 84px; height: 40px; min-height: 0; padding: 6px 10px; font-weight: 700; font-size: 15px; }
.cd-fila select { width: auto; height: 40px; min-height: 0; padding: 6px 8px; }
.cd-sep { color: var(--texto-3); font-size: 13px; font-weight: 600; }
.cd-ayuda { font-size: 11.5px; }
.cd-peso { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.cd-peso input { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--azul); box-shadow: none; }
.cd-res { margin-top: 12px; display: grid; gap: 8px; }
.cd-ok { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff; border: 1.5px solid #f472b6; border-radius: 14px; padding: 12px 16px; }
.cd-ok > b { font-size: 22px; color: var(--texto-3); }
.cd-frac { display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: 14px; }
.cd-frac span:first-child { color: #be123c; }
.cd-frac span:last-child { color: #c026d3; }
.cd-frac i { display: block; width: 100%; min-width: 160px; height: 2px; background: #f472b6; border-radius: 2px; }
.cd-vol { display: grid; background: linear-gradient(135deg, #f9a8d4, #f472b6); color: #fff; border-radius: 999px; padding: 8px 22px; }
.cd-vol strong { font-size: 24px; line-height: 1.1; }
.cd-vol small { font-size: 11.5px; opacity: .95; }
.cd-vacio, .cd-err, .cd-warn { font-size: 13px; display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; }
.cd-vacio { background: #fff; border: 1px dashed var(--borde-fuerte); color: var(--texto-2); }
.cd-err { background: var(--rojo-50); color: #8f0d14; }
.cd-warn { background: var(--warn-50); color: #7a4205; }
.cd-vacio svg.i, .cd-err svg.i, .cd-warn svg.i { width: 16px; height: 16px; flex: none; }
.kx-admin { display: grid; gap: 1px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fdf2f8; border: 1px solid #f9c6dc; color: #9d174d; font-size: 12.5px; }
.kx-admin b { font-size: 15px; }
.kx-admin small { color: #9d174d !important; opacity: .8; font-size: 11px !important; }
.kx-admin svg.i { display: none; }
.kx-admin--big { margin: 0 0 12px; padding: 10px 14px; font-size: 14px; }
.kx-admin--big b { font-size: 22px; }
.cd-tabs { flex-wrap: wrap; }
.cd-nota { font-size: 12px; margin: 14px 0 0; }
.cd-goteo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cd-goteo > div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--borde); background: #fff; }
.cd-goteo span { font-size: 11.5px; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.cd-goteo strong { font-size: 22px; color: var(--azul); }
.cd-goteo small { color: var(--texto-3); font-size: 11.5px; }
.cd-pill { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); font-size: 14px; }
.cd-pill strong { color: #be185d; font-size: 17px; }
.cd-tabla { margin-top: 12px; font-size: 12.5px; color: var(--texto-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
@media (max-width: 700px) { .cd-grid, .cd-goteo { grid-template-columns: 1fr; } .cd-frac i { min-width: 120px; } }
.cd-grid { grid-template-columns: 1.35fr 1fr; }
.cd-fila input { width: 72px; }
@media (max-width: 700px) { .cd-grid { grid-template-columns: 1fr; } }

/* ================================================================ Fase 15 · Menú desplegable y consola de administración */
.nav-group.nav-titulo.plegable { cursor: pointer; border-radius: 8px; user-select: none; transition: background .15s; padding-right: 10px; }
.nav-group.nav-titulo.plegable::after { display: none; }
.nav-group.nav-titulo.plegable:hover { background: var(--surface-2); }
.nav-group.nav-titulo.plegable:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.nav-group.nav-titulo.plegable > span:first-child { flex: 1; }
.nav-titulo__n { font-size: 10.5px; font-weight: 700; color: var(--texto-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; letter-spacing: 0; }
.nav-group.nav-titulo.plegable.abierto .nav-titulo__n { display: none; }
.nav-group.nav-titulo.plegable svg.i { width: 15px; height: 15px; transition: transform .2s; transform: rotate(-90deg); color: var(--texto-3); }
.nav-group.nav-titulo.plegable.abierto svg.i { transform: none; }
.sidebar__nav > .nav-plegado { display: none !important; }
.cs-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 16px; }
.cs-head__t { display: flex; gap: 12px; align-items: center; }
.cs-head__t h2 { margin: 0; font-size: 18px; }
.cs-head__t .muted { font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cs-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); }
.cs-tag { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--azul-50); color: var(--marino); font-weight: 600; }
.cs-tag.fun { background: #f3e8ff; color: #6b21a8; }
.cs-matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 6px 20px 18px; }
.cs-matriz h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.cs-item { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--texto-3); }
.cs-item svg.i { width: 15px; height: 15px; }
.cs-item.on { color: var(--texto); font-weight: 600; }
.cs-item.on svg.i { color: var(--ok); }
.cs-item:not(.on) { text-decoration: line-through; opacity: .6; }
.cs-paq { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 4px 20px 16px; }
.cs-paq__c { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--borde); border-left: 5px solid var(--c); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; transition: box-shadow .15s; }
.cs-paq__c.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); border-color: var(--c); }
.cs-paq__c input { width: 18px; height: 18px; min-height: 0; padding: 0; margin-top: 2px; accent-color: var(--c); box-shadow: none; flex: none; }
.cs-paq__c strong { display: block; font-size: 14px; }
.cs-paq__c small { display: block; color: var(--texto-2); font-size: 12px; margin: 2px 0 6px; }
.cs-paq__m { font-size: 11.5px; color: var(--texto-3); font-weight: 700; }
.cs-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 20px 16px; }
.cs-extra h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--texto-3); letter-spacing: .04em; }
.cs-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-checks.col { display: grid; grid-template-columns: 1fr; gap: 4px; }
.cs-checks label { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--borde); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: #fff; }
.cs-checks.col label { border-radius: 8px; }
.cs-checks input { width: 15px; height: 15px; min-height: 0; padding: 0; accent-color: var(--azul); box-shadow: none; }
.cs-checks label:has(input:checked) { border-color: var(--azul); background: var(--azul-50); color: var(--marino); font-weight: 600; }
.cs-prev { margin: 4px 20px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.9; }
.cs-prev svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.modal .cs-prev { margin: 0; }
.cs-pie { display: flex; justify-content: flex-end; gap: 12px; align-items: center; padding: 16px 20px 20px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 4px 20px 20px; }
.cs-pk { border: 1px solid var(--borde); border-top: 4px solid var(--c); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.cs-pk.off { opacity: .55; }
.cs-pk header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cs-pk header strong { font-size: 15px; margin-right: auto; }
.cs-pk p { margin: 0; font-size: 12.5px; color: var(--texto-2); }
.cs-pk footer { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cs-ef { font-size: 12.5px; border-bottom: 1px dotted var(--texto-3); cursor: help; }
.row--off td { opacity: .55; }
@media (max-width: 800px) { .cs-matriz, .cs-extra { grid-template-columns: 1fr; } }
.ic-violeta { background: #f3e8ff; color: #7c3aed; }
.f.cs-prev { display: block; }

/* ---------- Fase 16 · Panel principal de TEKMA: clientes registrados al costado */
.btn--danger-soft { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.btn--danger-soft:hover { background: #fee2e2; }
.btn--ok-soft { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.btn--ok-soft:hover { background: #d1fae5; }
.tk-kpi { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tk-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 46, 99, .1); }
.tk-kpi__sub { margin-top: 3px; font-size: 12px; color: var(--texto-3); }
.tk-kpi .tk-est { font-size: 26px; }
.tk-kpi[data-estado="ok"] .tk-est { color: var(--ok, #059669); }
.tk-kpi[data-estado="alerta"] .tk-est, .tk-kpi[data-k="soporte"][data-estado="alerta"] [data-val] { color: #d97706; }
.tk-kpi[data-estado="mal"] .tk-est { color: #dc2626; }
.tk-cli__head { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 18px 20px 12px; }
.tk-cli__head h2 { margin: 0; font-size: 16px; }
.tk-cli__head p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-2); }
.tk-cli__tools { display: flex; gap: 10px; align-items: center; flex: 0 1 460px; justify-content: flex-end; }
.tk-cli__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--surface-2); flex: 1 1 260px; min-width: 0; }
.tk-cli__search svg.i { width: 16px; height: 16px; color: var(--texto-3); }
.tk-cli__search input { border: 0; background: transparent; box-shadow: none; min-height: 36px; padding: 0; flex: 1; min-width: 0; }
.tk-cli__list { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-content: start; }
.tk-cli__list > .empty, .tk-cli__list > .skeleton { grid-column: 1 / -1; }
@media (max-width: 600px) { .tk-cli__list { grid-template-columns: minmax(0, 1fr); padding: 0 12px 14px; } .tk-cli__tools { flex: 1 1 100%; flex-wrap: wrap; } .tk-cli__tools .btn { width: 100%; justify-content: center; } }
.tk-c { border: 1px solid var(--borde); border-radius: 14px; padding: 12px 12px 10px; display: grid; gap: 8px; background: #fff; }
.tk-c.off { background: #fafafa; }
.tk-c.off header .avatar, .tk-c.off .tk-c__p { opacity: .55; }
.tk-c header { display: flex; gap: 10px; align-items: center; }
.tk-c__t { flex: 1; min-width: 0; }
.tk-c__t strong { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-c__t small { display: block; font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-c__n { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.tk-c__emp { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--marino); font-weight: 600; }
.tk-c__emp b { font-size: 18px; }
.tk-c__emp svg.i { width: 16px; height: 16px; color: var(--azul); align-self: center; }
.tk-c__p { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.tk-c footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px dashed var(--borde); }
.tk-c footer .btn { justify-content: center; padding-inline: 6px; font-size: 12px; white-space: nowrap; }
.tk-c footer .btn svg.i { width: 14px; height: 14px; }
.tk-pq-act { padding: 10px 12px; border-radius: 10px; background: var(--azul-50); font-size: 13px; line-height: 1.9; }
.modal .cs-paq.tk-pq { padding: 0 0 12px; }

.tk-c__ct { display: grid; gap: 3px; font-size: 12px; color: var(--texto-2); }
.tk-c__ct span { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-c__ct svg.i { width: 13px; height: 13px; flex: none; color: var(--texto-3); }
.tk-c header .btn-icon { width: 32px; height: 32px; flex: none; }
.tk-c header .avatar img, .tk-foto .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tk-foto { align-items: flex-start; }
.tk-foto .err { color: var(--rojo); font-size: 12px; font-weight: 600; }

/* ---------- Fase 17 · Color de la especialidad en avatares e iconos de especialidad */
.avatar--esp { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--esp); }
.avatar--esp:has(img) { background: #fff; }
.esp-color { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--esp) 10%, #fff); color: var(--esp); border: 1px solid color-mix(in srgb, var(--esp) 30%, #fff); }
.esp-color i { width: 14px; height: 14px; border-radius: 50%; background: var(--esp); flex: none; }
.esp-color svg.i { width: 18px; height: 18px; }
.esp-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--esp); font-weight: 700; }
.esp-pill svg.i { width: 16px; height: 16px; }
/* Banner de especialidad: insignia corporativa + marca de agua con el icono de la especialidad */
.esp-badge { width: 54px; height: 54px; border-radius: 16px; background: #fff; color: var(--esp, var(--azul)); display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18), inset 0 0 0 3px color-mix(in srgb, var(--esp, var(--azul)) 18%, #fff); }
.esp-badge svg.i { width: 30px; height: 30px; stroke-width: 1.9; }
.esp-marca { position: absolute; right: -28px; bottom: -46px; color: #fff; opacity: .09; pointer-events: none; z-index: 0; }
.esp-marca svg.i { width: 230px; height: 230px; stroke-width: 1.2; }
.esp-hero > * { position: relative; z-index: 1; }
.esp-hero > .esp-marca, .esp-hero .esp-marca { position: absolute; z-index: 0; }
@media (max-width: 700px) { .esp-marca svg.i { width: 150px; height: 150px; } .esp-badge { width: 46px; height: 46px; } .esp-badge svg.i { width: 26px; height: 26px; } }
/* Logo del cliente solo (sin "con VALUA") */
.brand-dual { align-items: center; justify-content: center; width: 100%; }
.brand-cliente { max-width: 200px; max-height: 72px; }
.esp-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.doc-card > div { min-width: 0; }
.doc-card strong { overflow-wrap: anywhere; }
.esp-layout > div { grid-template-columns: minmax(0, 1fr); } .esp-layout .card { min-width: 0; }
.nota-para { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nota-para label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; color: var(--marino); }
.nota-para select { flex: 1 1 260px; min-width: 0; max-width: 420px; }
/* Logo del cliente (empresa que contrató VALUA) en cada banner */
.hero-cliente { position: absolute; top: 14px; right: 16px; z-index: 3; background: #fff; border-radius: 12px; padding: 6px 10px; display: flex; align-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); max-width: 180px; height: 54px; }
.hero-cliente img { max-height: 42px; max-width: 160px; object-fit: contain; display: block; }
.hero[data-logo] { padding-top: 78px; }
@media (min-width: 900px) { .hero[data-logo] { padding-top: 26px; padding-right: 30px; } .hero[data-logo] .hero__stats, .hero[data-logo] > div:last-child { margin-top: 44px; } }

/* ---------- Fase 18 · Servicios de cada especialidad (menú «Servicios del área») */
.serv-head { gap: 12px; flex-wrap: wrap; }
.serv-buscar { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--surface-2); flex: 0 1 320px; min-width: 0; }
.serv-buscar svg.i { width: 16px; height: 16px; color: var(--texto-3); flex: none; }
.serv-buscar input { border: 0; background: transparent; box-shadow: none; min-height: 38px; padding: 0; flex: 1; min-width: 0; }
.serv-cat + .serv-cat { margin-top: 22px; }
.serv-cat h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14.5px; color: var(--esp, var(--marino)); }
.serv-cat h3 svg.i { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--esp-50, var(--azul-50)); color: var(--esp, var(--azul)); }
.serv-cat h3 small { margin-left: auto; color: var(--texto-3); font-weight: 600; font-size: 12px; }
.serv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px; }
.serv-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border: 1px solid var(--borde); border-radius: 11px; background: #fff;
  border-left: 3px solid var(--esp, var(--azul)); transition: box-shadow .15s, transform .15s; }
.serv-item:hover { box-shadow: 0 6px 16px rgba(11, 46, 99, .08); transform: translateY(-1px); }
.serv-item.propio { border-left-style: dashed; }
.serv-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--texto); line-height: 1.3; }
.serv-item .btn { flex: none; padding-inline: 8px; font-size: 12px; opacity: .75; }
.serv-item:hover .btn, .serv-item .btn:focus-visible { opacity: 1; }
.serv-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.serv-add input[name=nuevo] { flex: 2 1 260px; min-width: 0; }
.serv-add select, .serv-add input[name=catNueva] { flex: 1 1 180px; min-width: 0; }
.serv-edit { max-height: min(55vh, 520px); overflow: auto; display: grid; gap: 12px; padding-right: 4px; }
.serv-edit fieldset { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 12px; }
.serv-edit legend { font-weight: 700; font-size: 13px; color: var(--marino); padding: 0 6px; }
.serv-edit legend small { color: var(--texto-3); font-weight: 600; }
.serv-edit .chk { font-size: 13px; align-items: center; }
.serv-edit .btn-icon { width: 26px; height: 26px; }

/* ---------- Áreas que atendieron al paciente ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip { --ac: var(--azul); display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--ac) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
  color: inherit; text-decoration: none; min-width: 0; max-width: 100%; }
a.area-chip[href]:hover { border-color: var(--ac); }
.area-chip svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--ac); color: #fff; flex: none; }
.area-chip span { display: grid; min-width: 0; }
.area-chip b { font-size: 13px; color: color-mix(in srgb, var(--ac) 70%, var(--texto)); }
.area-chip small { font-size: 11.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-chip--sm { padding: 1px 8px 1px 3px; gap: 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: middle;
  color: color-mix(in srgb, var(--ac) 75%, var(--texto)); }
.area-chip--sm svg { width: 16px; height: 16px; padding: 2.5px; border-radius: 50%; }

/* ---------- Recetas en el historial ---------- */
.rx-lista { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.rx-lista li { margin: 2px 0; }
.rx-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rx-entrega { font-size: 12.5px; }
.rx-tl--despachada::before { border-color: var(--ok); }
.rx-tl--pendiente::before { border-color: var(--warn); }
.rx-tl--anulada { opacity: .7; }

/* ---------- Farmacia para especialistas ---------- */
.farm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.farm-stat { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--surface); cursor: pointer; font: inherit; }
.farm-stat strong { font-size: 22px; line-height: 1; }
.farm-stat span { font-size: 12px; color: var(--texto-3); }
.farm-stat--ok strong { color: var(--ok); } .farm-stat--bajo strong, .farm-stat--vence strong { color: #b45309; } .farm-stat--agotado strong { color: var(--rojo); }
.farm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.farm-bar .search { flex: 1 1 260px; }
@media (max-width: 640px) { .farm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Atención del área (especialidad) ---------- */
.esp-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.esp-acc { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--borde);
  background: var(--surface); color: inherit; text-decoration: none; cursor: pointer; font: inherit; text-align: left; min-width: 0; }
.esp-acc:hover { border-color: var(--esp, var(--azul)); box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.esp-acc > svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; flex: none; background: var(--esp-50, #eef2ff); color: var(--esp, var(--azul)); }
.esp-acc span { display: grid; min-width: 0; }
.esp-acc b { font-size: 13.5px; }
.esp-acc small { font-size: 11.5px; color: var(--texto-3); }
.esp-acc--urg > svg { background: #fee2e2; color: #dc2626; }
.esp-farm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .esp-farm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.amb-serv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.amb-serv button { border: 1px solid var(--borde); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.amb-serv button.on { background: var(--esp, var(--azul)); border-color: var(--esp, var(--azul)); color: #fff; }
.serv-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Banner del médico: su foto a la izquierda, color de su especialidad ---------- */
.hero-medico { display: flex; align-items: center; gap: 20px; min-width: 0; position: relative; z-index: 1; }
.hero-medico > div { min-width: 0; }
.hero-foto { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; padding: 4px; background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); display: grid; place-items: center; }
.hero-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hero-foto b { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800;
  background: color-mix(in srgb, var(--esp, var(--azul)) 14%, #fff); color: var(--esp, var(--azul)); }
.hero-foto i { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--esp, var(--azul)); color: #fff; border: 3px solid #fff; }
.hero-foto i svg { width: 17px; height: 17px; }
.hero--medico .hero__stats { margin-top: 44px; }
@media (max-width: 700px) {
  .hero-medico { gap: 14px; }
  .hero-foto { width: 72px; height: 72px; }
  .hero-foto i { width: 28px; height: 28px; } .hero-foto i svg { width: 14px; height: 14px; }
  .hero--medico .hero__stats { margin-top: 0; }
}
.nav-ic-esp { --ac: var(--azul); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--ac); color: #fff; }
.nav-ic-esp svg { width: 14px !important; height: 14px !important; }
.hero--medico .esp-badge { display: none; }

/* ---------- Buzón de mensajes del chat ---------- */
.buzon .card__head h2 { display: flex; align-items: center; gap: 8px; }
.buzon .card__head h2 svg { width: 20px; height: 20px; color: var(--azul); }
.buzon__n { background: var(--rojo); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 1px 8px; }
.buzon__tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.buzon__list { display: grid; padding: 4px 8px 10px; max-height: 430px; overflow: auto; }
.buzon__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 12px;
  background: none; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid var(--borde); min-width: 0; }
.buzon__item:last-child { border-bottom: 0; }
.buzon__item:hover { background: var(--surface-2, #f6f8fb); }
.buzon__item.nuevo { background: color-mix(in srgb, var(--azul) 6%, transparent); }
.buzon__item.nuevo .buzon__prev { color: var(--texto); font-weight: 600; }
.buzon__av { position: relative; flex: none; }
.buzon__on { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid #fff; }
.buzon__grupo { display: grid; place-items: center; background: var(--surface-2, #eef2f7); color: var(--texto-3); }
.buzon__txt { display: grid; min-width: 0; flex: 1; gap: 1px; }
.buzon__row { display: flex; justify-content: space-between; gap: 10px; }
.buzon__row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon__row time { font-size: 11.5px; color: var(--texto-3); flex: none; }
.buzon__txt small { font-size: 11.5px; color: var(--texto-3); }
.buzon__prev { font-size: 13px; color: var(--texto-2, #475569); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon__badge { flex: none; min-width: 22px; height: 22px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.buzon__ir { color: var(--texto-3); flex: none; } .buzon__ir svg { width: 16px; height: 16px; }
.buzon .empty b, .buzon .empty span { display: block; } .buzon .empty b { margin-bottom: 4px; }

/* ---------- Chat: soporte técnico TEKMA siempre activo ---------- */
.ichat__av--tk { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0b4fa8, #0891b2); color: #fff; }
.ichat__av--tk svg { width: 21px; height: 21px; }
.ichat__head .ichat__av--tk { background: rgba(255, 255, 255, .2); }
.ichat__item--tk { background: color-mix(in srgb, #0b4fa8 6%, transparent); border-left: 3px solid #0b4fa8; }
.ichat__tag { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #dbeafe; color: #0b4fa8; margin-left: 4px; }