/* =========================================================================
   Clínica Dursi — Estilos globales (sobre el tema de tema.css)
   ========================================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--text); font-weight: 600; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

.text-muted { color: var(--text-muted) !important; }
hr { border-color: var(--border); opacity: 1; }

/* ----- Scrollbars temáticos (claros, finos y sutiles) ----------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(28,28,32,.24) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(28,28,32,.24);
  border-radius: 999px;
  border: 2px solid transparent;     /* "padding" que adelgaza el thumb */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(28,28,32,.38); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ----- Layout: topbar + sidebar + contenido --------------------------- */
.layout { display: flex; min-height: 100vh; }

/* Shell grafito: re-mapeamos los tokens dentro del sidebar/topbar a la paleta
   profunda. Así todos los selectores hijos (que consumen --surface/--text/
   --accent) heredan el shell sin reescribir cada regla. El --accent local
   fija el oro del shell y le gana al [data-module] del <body>, así el shell
   queda estable aunque el módulo recoloree el workspace. */
.sidebar, .topbar {
  --surface-1:    var(--shell-bg);
  --surface-2:    var(--shell-surface);
  --surface-3:    rgba(255, 255, 255, .10);
  --surface-grad: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
  --border:       var(--shell-border);
  --border-soft:  rgba(255, 255, 255, .07);
  --text:         var(--shell-text);
  --text-muted:   #cfc9bd;
  --text-faint:   var(--shell-muted);
  --accent:       var(--shell-accent);
  --accent-2:     var(--shell-accent);
  --accent-soft:  var(--shell-active-bg);
  --accent-line:  rgba(212, 180, 106, .45);
}

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(190deg, var(--shell-bg) 15%, var(--shell-bg-2));
  border-right: 1px solid var(--shell-border);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1030;
  transition: transform .25s ease;
}
/* Scrollbar del nav sobre grafito: thumb claro translúcido (el global es oscuro) */
.sidebar__nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: padding-box; }
.sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); background-clip: padding-box; }
.sidebar__brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--border);
  background-image: var(--surface-grad);
}
.sidebar__brand .brand-mark {
  flex: 0 0 auto; border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Wordmark (bases/_marca.html): "CLÍNICA" chico y espaciado sobre "DURSI" en
   oro metálico, como el logo. Sirve igual sobre el shell grafito y sobre blanco. */
.marca {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--font-head); line-height: 1;
}
.marca__sup {
  font-size: .5rem; font-weight: 600; letter-spacing: .5em;
  margin: 0 -.5em .22rem 0;            /* compensa el tracking del último carácter */
  color: var(--text-muted);
  text-transform: uppercase;
}
.marca__nom {
  font-size: 1.32rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--oro-metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.sidebar__brand .marca__sup { color: var(--shell-muted); }

/* flex:1 + min-height:0 → el nav scrollea dentro del sidebar (sin min-height:0
   el item flex crece con el contenido y no aparece el scroll en mobile). */
.sidebar__nav { padding: .7rem .55rem 1.4rem; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
/* Encabezado de sección: agrupa visualmente, con divisor superior sutil */
.sidebar__section {
  text-transform: uppercase; font-size: .65rem; font-weight: 600; letter-spacing: .16em;
  color: var(--text-faint);
  padding: .55rem .85rem .4rem;
  margin: .7rem .35rem .15rem;
  border-top: 1px solid var(--border-soft);
}
.sidebar__nav > .nav-item-link:first-child + .sidebar__section,
.sidebar__nav > .sidebar__section:first-child { border-top: 0; margin-top: .2rem; }

.nav-item-link {
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; margin: .14rem 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: .95rem;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* Barra de acento del item activo: pseudo-elemento (más prolijo que border-left) */
.nav-item-link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; transform: translateY(-50%);
  border-radius: 0 3px 3px 0; background: var(--accent);
  transition: height var(--dur) var(--ease);
}
.nav-item-link i {
  font-size: 1.05rem; width: 1.25rem; text-align: center; flex: 0 0 1.25rem;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-item-link:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.nav-item-link:hover i { color: var(--accent); }
.nav-item-link.active {
  background: var(--accent-soft); color: var(--text); font-weight: 600;
}
.nav-item-link.active::before { height: 60%; }
.nav-item-link.active i { color: var(--accent); }

/* ----- Grupos colapsables del sidebar -------------------------------- */
.nav-group { display: flex; flex-direction: column; }
.nav-group__toggle {                       /* reusa .nav-item-link, resetea el <button> */
  width: 100%; background: none; border: none;
  text-align: left; cursor: pointer; font: inherit;
}
.nav-group__label { flex: 1; }             /* empuja el caret a la derecha */
.nav-group__caret {
  font-size: .75rem !important; width: auto !important;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease); opacity: .8;
}
.nav-group.is-open .nav-group__caret { transform: rotate(180deg); }
/* Grupo activo (módulo actual): el toggle se pinta con el acento del módulo */
.nav-group.is-active > .nav-group__toggle {
  color: var(--text); background: var(--accent-soft); font-weight: 600;
}
.nav-group.is-active > .nav-group__toggle::before { height: 60%; }
.nav-group.is-active > .nav-group__toggle i { color: var(--accent); }
/* Región colapsable: animamos max-height (height:auto no es animable) */
.nav-group__items {
  display: flex; flex-direction: column; position: relative;
  max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease);
  padding-left: 1.05rem; margin: .1rem 0 .1rem .5rem;
}
.nav-group.is-open > .nav-group__items { max-height: 24rem; }  /* tope > grupo más alto */
.nav-group__items::before {                /* riel de anidado */
  content: ""; position: absolute; left: .35rem; top: .15rem; bottom: .15rem;
  width: 1.5px; border-radius: 2px; background: var(--border);
}
.nav-group__sub { font-size: .9rem; padding: .5rem .8rem; color: var(--text-faint); }
.nav-group__sub i { font-size: .92rem; }
.nav-group__sub::before { left: -1.05rem; }   /* alinea su barra con el riel */
.nav-group__sub.active {
  background: var(--accent-soft); color: var(--text); font-weight: 600;
}
.nav-group__sub.active::before { height: 55%; }

.content { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
/* Red de seguridad: si algo del workspace se pasa de ancho (una tabla, un chip
   largo), que lo pague ese elemento y no la pantalla entera. Sin esto el <body>
   scrollea a la derecha y la topbar —que mide el ancho del viewport— queda
   cortada a mitad de camino. Es `clip` y no `hidden` a propósito: `hidden`
   crearía un contexto de scroll y el `position: sticky` de la topbar dejaría
   de pegarse arriba. */
.content { overflow-x: clip; }

.topbar {
  height: var(--topbar-h);
  background: rgba(27,27,31,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--shell-border);
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.2rem;
}
.topbar .btn-burger { display: none; background: none; border: 0; color: var(--text); font-size: 1.3rem; }
.topbar__spacer { flex: 1; }

/* Volver (js/volver.js): solo con la app instalada, donde no hay atrás del
   navegador. iOS no siempre expone display-mode: el JS marca .es-standalone. */
.btn-volver {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; margin: 0 -.6rem 0 -.5rem;
  border-radius: 50%; color: var(--shell-text); font-size: 1.35rem; text-decoration: none;
  transition: background-color .15s;
}
.btn-volver:hover, .btn-volver:focus-visible { background: var(--shell-active-bg); color: var(--shell-text); }
.btn-volver:active { background: var(--shell-surface); }
@media (display-mode: standalone) { .btn-volver { display: inline-flex; } }
.es-standalone .btn-volver { display: inline-flex; }

/* Gesto de volver desde el borde (iOS instalada, js/volver.js): una burbuja
   que sigue al dedo y se marca con el acento cuando ya alcanza para volver. */
.volver-gesto {
  position: fixed; left: 0; top: 50%; z-index: 2000; pointer-events: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--shell-bg-2); color: var(--shell-text); font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; transform: translate(-56px, -50%);
  transition: opacity .15s, background-color .15s;
}
.volver-gesto.is-listo { background: var(--accent); }
/* Los "← Listado" de la cabecera de página son el atrás de quien usa el
   navegador; dentro de la app duplican al del topbar. */
@media (display-mode: standalone) { .solo-navegador { display: none !important; } }
.es-standalone .solo-navegador { display: none !important; }

/* Topbar en celular: a 390px desbordaba y el menú del usuario quedaba cortado.
   Queda burger · volver · título · iconos; el nombre y el tema van al menú. */
@media (max-width: 575.98px) {
  .topbar { gap: .4rem; padding-inline: .6rem; }
  .topbar .me-2 { margin-right: .15rem !important; }
  .topbar .crumbs__root, .topbar .crumbs__sep { display: none; }
  .topbar .crumbs__current { font-size: .95rem; }
  .topbar .theme-toggle { display: none; }
  .topbar__txt { display: none; }
  .topbar__user.dropdown-toggle::after { display: none; }
  .btn-volver { margin: 0 -.35rem; }
}

/* ----- Breadcrumb del topbar (reemplaza el título repetido) ----------- */
.crumbs { display: flex; align-items: center; gap: .45rem; font-size: .86rem; min-width: 0; }
.crumbs__root { color: var(--text-muted); display: inline-flex; align-items: center; transition: color .15s; }
.crumbs__root:hover { color: var(--accent); }
.crumbs__sep { font-size: .62rem; color: var(--text-faint); }
.crumbs__current {
  color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.page { padding: 1.4rem 1.6rem 3rem; }

/* ----- Cabecera de página (hero header por módulo) -------------------- */
.page__head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.page__head__bar {
  align-self: stretch; width: 4px; min-height: 42px; border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), var(--accent-line));
}
.page__head__icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.3rem; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.page__head__titles { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.page__head h1 {
  margin: 0; font-family: var(--font-head); font-size: 1.75rem; font-weight: 600;
  line-height: 1.1; letter-spacing: .01em;
}
.page__head__sub { margin: 0; font-size: .82rem; color: var(--text-muted); }
.page__head .spacer { flex: 1; }

/* ----- Pills / control segmentado (tema oscuro) ---------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: transparent;
  --bs-nav-pills-link-active-color: var(--text);
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nav-pills .nav-link {
  border-radius: calc(var(--radius-sm) - 3px);
  padding: .35rem .9rem; font-size: .88rem; font-weight: 600;
  color: var(--text-muted); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-pills .nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-pills .nav-link.active {
  color: var(--text); background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* ----- Tarjetas / paneles -------------------------------------------- */
.card-d {
  background: var(--surface-1);
  background-image: var(--surface-grad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card-d--accent {
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
}
.card-d__body { padding: var(--sp-4) var(--sp-4); }

/* Cabecera de card reutilizable: título (Cinzel) + acción a la derecha.
   Unifica el patrón que antes se improvisaba con body + border-bottom inline. */
.card-d__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.card-d__head__title {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; color: var(--text);
}
.card-d__head__title i { color: var(--accent); font-size: 1rem; }

/* Variante sin padding: para alojar tablas/listas a sangre dentro de la card.
   overflow:hidden para que el contenido respete el radio de la card. */
.card-d--flush { overflow: hidden; }
.card-d--flush .card-d__body { padding: 0; }

/* ----- Configuración: grupos colapsables (colapsan solo en mobile) ---- */
.config-group { overflow: hidden; }
.config-group__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: none; border: 0; text-align: left; color: var(--text);
  font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.config-group__head:hover { background: var(--surface-2); }
.config-group__chevron {
  flex: 0 0 auto; color: var(--accent); font-size: .9rem;
  transition: transform var(--dur) var(--ease);
}
.config-group__head[aria-expanded="true"] .config-group__chevron { transform: rotate(180deg); }
.config-group__body { padding: 0 var(--sp-4) var(--sp-4); }
.config-group__icono { color: var(--accent); margin-right: var(--sp-2); font-size: .95em; }

/* Buscador del índice: filtra los ítems de todas las tarjetas a la vez. */
.config-buscador { position: relative; max-width: 420px; margin-bottom: var(--sp-4); }
.config-buscador > .bi-search {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.config-buscador .form-control { padding-left: calc(var(--sp-3) * 2 + 1em); }


/* Desktop/tablet: los grupos quedan siempre abiertos, sin toggle ni chevron. */
@media (min-width: 768px) {
  .config-group__body.collapse:not(.show) { display: block; }
  .config-group__head { cursor: default; pointer-events: none; }
  .config-group__head:hover { background: none; }
  .config-group__chevron { display: none; }
}

/* Cards clickeables (envuelven <a>): elevación al hover.
   .kpi se excluye: tiene su propio hover con glow más abajo. */
a.card-d:not(.kpi):hover, .card-d--hover:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

/* ----- Formularios: sistema de anchos (reemplaza max-width inline) ---- */
.form-narrow { max-width: 640px; }
.form-std    { max-width: 880px; }
.form-wide   { max-width: 1180px; }

/* Tarjeta de sección dentro de un form en grilla */
.form-section { height: 100%; }            /* iguala alturas de columnas en la fila */
.form-section .card-d__body { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.form-section__head {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; color: var(--text);
  padding-bottom: .7rem; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
}
/* Icono de sección en un "slot" de acento (ancla visual del bloque) */
.form-section__head i {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center;
  color: var(--accent); font-size: .95rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
/* Barra de acciones: separada y consistente al pie del form */
.form-actions {
  display: flex; gap: .6rem; align-items: center;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
}

/* ----- Panel del paciente (dashboard) -------------------------------- */
.dash-hero { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.2rem; flex-wrap: wrap; }
.dash-avatar {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
}
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-hero__meta { flex: 1; min-width: 220px; }
.dash-hero__meta h1 { margin: 0; font-family: var(--font-head); font-size: 1.5rem; line-height: 1.15; }
.dash-hero__sub { color: var(--text-muted); font-size: .86rem; margin-top: .15rem; }
.dash-hero__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.dash-hero__actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: flex-start; }

/* Próximo turno: más visible que un badge (es lo que se pregunta primero), pero
   con el mismo lenguaje: acento suave, borde fino, sin saturar. */
.dash-hero__agenda { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .55rem; }
.dash-hero__turno {
  display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .38rem .75rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--text); font-size: .84rem; line-height: 1.2; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
a.dash-hero__turno:hover { border-color: var(--accent); color: var(--text); }
.dash-hero__turno .bi { color: var(--accent); }
.dash-hero__turno-lbl { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.dash-hero__turno-esp { color: var(--text-muted); }
.dash-hero__turno--vacio { background: transparent; border-color: var(--border); color: var(--text-muted); }
.dash-hero__turno--vacio .bi { color: var(--text-muted); }
.dash-hero__turno-mas {
  background: none; border: 0; padding: .2rem .35rem;
  color: var(--accent); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.dash-hero__turno-mas:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  .dash-hero__turno { width: 100%; }
}

.stat-tile {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .9rem; display: inline-block;
}
.stat-tile--sm { padding: .5rem .8rem; text-align: center; min-width: 92px; }
.stat-tile--danger { border-color: rgba(192,57,43,.35); }
.stat-tile__num { font-family: var(--font-head); font-size: 1.7rem; line-height: 1; color: var(--text); }
.stat-tile--danger .stat-tile__num { color: var(--danger); }
.stat-tile__lbl { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }
/* KPI que filtra un listado: click = ver el detalle del número. */
.stat-tile--btn { font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.stat-tile--btn:hover:not(:disabled) { border-color: var(--accent); }
.stat-tile--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-tile--btn.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.stat-tile--btn:disabled { cursor: default; opacity: .6; }

.filtros {
  background: var(--surface-1);
  background-image: var(--surface-grad);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}

/* Fila de un resumen que filtra el listado de abajo (caja: "Por método").
   El embudo aparece al pasar para decir que la fila hace algo. */
.fila-filtro { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.fila-filtro:hover, .fila-filtro:focus-visible { background: var(--surface-2); outline: none; }
.fila-filtro__icono { font-size: .72rem; color: var(--text-faint); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.fila-filtro:hover .fila-filtro__icono, .fila-filtro:focus-visible .fila-filtro__icono,
.fila-filtro.is-activa .fila-filtro__icono { opacity: 1; color: var(--accent); }
.fila-filtro.is-activa { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* Aviso del filtro activo: repite las cifras de la fila para comparar. */
.filtro-activo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
  padding: .55rem .8rem; margin-bottom: .75rem; font-size: .85rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--accent-soft);
}
.filtro-activo[hidden] { display: none; }
.filtro-activo__nombre { font-weight: 600; color: var(--accent); }
.filtro-activo__cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.filtro-activo__esperado { color: var(--accent); font-weight: 600; }

/* ----- Botones -------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm); font-weight: 600;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.97); }          /* sensación de "presión" */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--accent-soft), 0 0 0 1px var(--accent-line);
}
.btn-accent {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.btn-accent:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-contrast);
  box-shadow: 0 6px 18px -6px var(--accent-line);
}
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
/* Botón de modo encendido (ej. "Varias piezas"): tiene que verse activo. */
.btn-ghost.activo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ----- Tablas (desktop) ---------------------------------------------- */
/* El contenedor es una .card-d; recortamos para que la tabla respete el radio */
.tabla-wrap { overflow: hidden; }
/* Tabla sin versión en cards (detalles, reportes, recibos): no puede
   desaparecer ni quedar recortada en el celular, así que se desplaza dentro de
   su propia caja. Al imprimir no hay scroll posible: ahí se deja ver entera. */
.tabla-scroll { overflow-x: auto; }
@media print { .tabla-scroll { overflow-x: visible; } }
.tabla-d { width: 100%; border-collapse: collapse; }
.tabla-d thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); font-weight: 600;
  padding: .8rem 1.1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tabla-d thead th:first-child { padding-left: 1.3rem; }
.tabla-d thead th:last-child  { padding-right: 1.3rem; }
.tabla-d tbody td {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.tabla-d tbody td:first-child { padding-left: 1.3rem; }
.tabla-d tbody td:last-child  { padding-right: 1.3rem; }
.tabla-d tbody tr:last-child td { border-bottom: 0; }
/* Zebra muy sutil para guiar la lectura horizontal */
.tabla-d tbody tr:nth-child(even) { background: rgba(134, 104, 31, .03); }
.tabla-d tbody tr { transition: background var(--dur-fast) var(--ease); }
.tabla-d tbody tr:hover { background: var(--accent-soft); }
/* Fila/card que navega al detalle (Listado con `urlFila`) */
.tabla-d tbody tr[data-href], .card-row[data-href] { cursor: pointer; }
.card-row[data-href]:active { background: var(--accent-soft); }

/* ----- Listados anchos (catálogos con muchas columnas) ----------------
   El .tabla-wrap recorta (overflow:hidden) para respetar el radio de la card:
   en una tabla de once columnas eso se comía las últimas y, con ellas, el lápiz
   de editar, que quedaba fuera de la pantalla y sin forma de alcanzarlo. Acá la
   tabla se desplaza dentro de su propia caja y la columna de acciones viaja
   pegada al borde derecho, siempre a la vista. */
.tabla-wrap.tabla-scroll { overflow-x: auto; }
.tabla-acc-sticky thead th:last-child,
.tabla-acc-sticky tbody td:last-child {
  position: sticky; right: 0; z-index: 2;
  white-space: nowrap;   /* los iconos de la fila, en una sola línea */
  background: var(--surface-1);
  border-left: 1px solid var(--hairline);
}
.tabla-acc-sticky thead th:last-child { z-index: 3; background: var(--surface-2); }
/* La celda pegada es opaca: la zebra y el hover, que son un velo translúcido
   sobre la card, se le vuelven a pintar encima para que no corte la fila. */
.tabla-acc-sticky tbody tr:nth-child(even) td:last-child {
  background-image: linear-gradient(rgba(134, 104, 31, .03), rgba(134, 104, 31, .03));
}
.tabla-acc-sticky tbody tr:hover td:last-child {
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}
/* Columnas numéricas: cifras tabulares alineadas a la derecha.
   Global y no sólo dentro de .tabla-d, porque los importes formateados también
   viven en las cards de mobile, en los dashboards y en spans sueltos.
   El nowrap es lo que evita que "$ 1.234.567,89" se parta al medio en mobile. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-row__line .num { text-align: right; }

/* ----- Tabla de items editable (presupuesto) -------------------------
   Diez columnas de inputs. Con table-layout:auto cada <input> reclama su
   ancho intrinseco (~20 caracteres), el reparto termina parejo y la unica
   columna que puede traer nueve digitos ("107.450,00") es la que se corta,
   mientras "Cant." o "Pieza" sobran ancho para un digito. Con layout fijo
   manda el <colgroup> y cada columna mide lo que su dato necesita.
   El padding tambien baja: el de .tabla-d esta pensado para listados de
   cinco columnas, no para diez. */
.tabla-items { table-layout: fixed; min-width: 1104px; }
.tabla-items thead th,
.tabla-items tbody td { padding-left: .55rem; padding-right: .55rem; }
.tabla-items thead th:first-child,
.tabla-items tbody td:first-child { padding-left: 1.1rem; }
.tabla-items thead th:last-child,
.tabla-items tbody td:last-child { padding-right: 1.1rem; }
.tabla-items .c-serv   { width: 23%; }
.tabla-items .c-desc   { width: 17%; }
.tabla-items .c-pieza  { width: 74px; }
.tabla-items .c-cant   { width: 84px; }
.tabla-items .c-precio { width: 190px; }
.tabla-items .c-sc     { width: 64px; }
.tabla-items .c-pct    { width: 88px; }
.tabla-items .c-imp    { width: 132px; }
.tabla-items .c-acc    { width: 48px; }
/* El importe se lee de derecha a izquierda tambien mientras se tipea. */
.tabla-items td.num .form-control { text-align: right; }
/* Precio en la moneda del item: selector chico de moneda pegado al importe;
   debajo, el equivalente en la moneda del presupuesto cuando difieren. */
.tabla-items .it-precio-grupo { flex-wrap: nowrap; }
.tabla-items .it-precio-grupo .it-moneda { flex: 0 0 auto; width: auto; max-width: 68px; padding-right: 1.4rem; }
.tabla-items .it-conv { display: block; font-size: .72rem; margin-top: 2px; }
/* "Sin cargo" es un tilde, no un dato numerico: va centrado en su columna. */
.tabla-items .td-sc { text-align: center; }
.tabla-items .td-sc .form-check-input { margin: 0; }

/* En mobile la fila se vuelve una card (regla 3 del proyecto). A diferencia
   de los listados no se puede renderizar un bloque .cards-d aparte: los
   campos son de un formset y duplicar los <input> rompe el POST. Asi que se
   transforma la MISMA tabla con display:grid y las etiquetas salen del
   data-label de cada celda. */
@media (max-width: 860px) {
  .tabla-items { min-width: 0; table-layout: auto; display: block; }
  .tabla-items colgroup,
  .tabla-items thead { display: none; }
  .tabla-items tbody { display: block; }
  .tabla-items tbody tr.item-row {
    position: relative;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem .7rem;
    background: var(--surface-1);
    background-image: var(--surface-grad);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
  }
  /* La zebra y el hover del listado no tienen sentido sobre una card. */
  .tabla-items tbody tr:nth-child(even),
  .tabla-items tbody tr:hover { background: var(--surface-1); }
  .tabla-items tbody td,
  .tabla-items tbody td:first-child,
  .tabla-items tbody td:last-child {
    display: block; border-bottom: 0; padding: 0;
  }
  .tabla-items tbody td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: .15rem;
    text-align: left;   /* el dato va a la derecha, la etiqueta no */
    color: var(--text-faint); font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
  }
  .tabla-items .td-serv,
  .tabla-items .td-desc { grid-column: 1 / -1; }
  .tabla-items .td-serv { padding-right: 2.2rem; }   /* deja lugar al boton de quitar */
  /* Moneda + importe no entran en media card: el precio va a lo ancho y el
     selector de moneda no crece. */
  .tabla-items .td-precio { grid-column: 1 / -1; }
  .tabla-items .it-precio-grupo .it-moneda { flex: 0 0 76px; width: 76px; max-width: 76px; }
  /* El tilde suelto es un blanco chico para el dedo: se agranda y se alinea
     con el resto de los datos de la card. */
  .tabla-items .td-sc { text-align: left; }
  .tabla-items .td-sc .form-check-input { width: 1.25rem; height: 1.25rem; }
  /* Total y particular son resultado, no carga: van al pie de la card como
     etiqueta + importe en una misma linea. */
  .tabla-items .td-total,
  .tabla-items .td-part {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--hairline); padding-top: .35rem;
  }
  .tabla-items .td-total::before,
  .tabla-items .td-part::before { margin-bottom: 0; }
  .tabla-items .td-part { font-weight: 600; color: var(--accent); }
  .tabla-items .td-acc { position: absolute; top: .55rem; right: .6rem; }
}

/* Pie de totales del presupuesto: tres columnas en desktop, tres lineas
   etiqueta/importe en mobile (en col-4 fijo "$ 2.149.000,00" se parte al medio). */
/* Deuda pendiente del presupuesto (detalle): total, lo vencido y cada cuota. */
.deuda-pres__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.deuda-pres__total { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deuda-pres__mas { color: var(--text-muted); font-weight: 400; margin: 0 .4rem; }
.deuda-pres__alerta { color: var(--danger); font-size: .85rem; margin-top: .15rem; }
.deuda-pres--vencida { border-left: 3px solid var(--danger); }
.deuda-pres__lista { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--border-soft);
  max-height: 16rem; overflow-y: auto; }
.deuda-pres__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem 1.5rem;
  align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--border-soft); font-size: .88rem; }
.deuda-pres__fila:last-child { border-bottom: none; }
.deuda-pres__vence { color: var(--text-muted); white-space: nowrap; }
.deuda-pres__fila.is-vencida .deuda-pres__vence { color: var(--danger); font-weight: 600; }
.deuda-pres__monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 7.5rem; }
.deuda-pres__monto small { display: block; color: var(--text-muted); font-weight: 400; font-size: .72rem; }
@media (max-width: 575.98px) {
  .deuda-pres__total { font-size: 1.3rem; }
  /* Concepto y vencimiento apilados a la izquierda; el monto a la derecha. */
  .deuda-pres__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; }
  .deuda-pres__vence { grid-column: 1; font-size: .78rem; }
  .deuda-pres__monto { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 0; }
}

.totales-pres__item { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.totales-pres__lbl { color: var(--text-muted); font-size: .8rem; }
.totales-pres__val { font-size: 1.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totales-pres__val--sec { font-size: 1rem; }
.totales-pres__val--acc { color: var(--accent); }
@media (max-width: 767.98px) {
  .totales-pres__item {
    flex-direction: row; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--hairline); padding-bottom: .4rem;
  }
  .totales-pres__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ----- Cards en mobile (las tablas se transforman) ------------------- */
.cards-d { display: none; }
.card-row {
  background: var(--surface-1);
  background-image: var(--surface-grad);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-sm);
}
.card-row__line {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .32rem 0; border-bottom: 1px solid var(--hairline);
}
.card-row__line:last-child { border-bottom: 0; }
.card-row__label {
  color: var(--text-faint); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto;
}

@media (max-width: 860px) {
  .tabla-wrap { display: none; }
  .cards-d { display: block; }
}

/* ----- Badges de estado ---------------------------------------------- */
.badge-estado {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1;
  white-space: nowrap;   /* un pill partido en dos líneas se lee como un error */
  border: 1px solid transparent;          /* borde sutil: "flota" mejor sobre cualquier superficie */
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.badge-estado--ok   { background: var(--success-soft); color: var(--success); border-color: rgba(31,138,91,.28); }
.badge-estado--off  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(192,57,43,.28); }

/* Estados del turno */
.badge-estado--prog { background: rgba(86,107,112,.12); color: var(--text-muted); border-color: rgba(86,107,112,.26); }
.badge-estado--conf { background: var(--accent-soft);   color: var(--accent);     border-color: var(--accent-line); }
.badge-estado--pag  { background: var(--success-soft);  color: var(--success);    border-color: rgba(31,138,91,.28); }
.badge-estado--espera { background: rgba(126,87,194,.12); color: #7e57c2;         border-color: rgba(126,87,194,.28); }
/* Completado: verde profundo, NO el azul de --info (era el mismo color que el
   azul petróleo de "confirmado", que es justo el estado del que hay que distinguirlo). */
.badge-estado--real { background: var(--terminal-soft); color: var(--terminal);   border-color: rgba(30,92,67,.30); }
.badge-estado--canc { background: var(--danger-soft);   color: var(--danger);     border-color: rgba(192,57,43,.28); }
.badge-estado--aus  { background: var(--warning-soft);  color: var(--warning);    border-color: rgba(184,121,26,.28); }
/* Estado terminal (completado): además del color, más peso tipográfico. Sin
   tachado: un line-through se lee como "anulado", que es Cancelado, no esto. */
.badge-estado--terminal { font-weight: 700; letter-spacing: .02em; }

/* Marca de bloqueo (turno no habilitado para el especialista) */
.badge-bloqueo {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem;
  padding: .2rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border);
}
.alert-bloqueo {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
  background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(192,57,43,.3);
}
/* Turno completado: estado terminal. No es una advertencia como sus hermanas
   .alert-bloqueo / .alert-mora — es un acuse de recibo, y por eso va en verde. */
.alert-cerrado {
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .85rem;
  background: var(--terminal-soft); color: var(--terminal); border: 1px solid rgba(30,92,67,.30);
}
.alert-mora {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .82rem;
  background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(184,121,26,.3);
}
/* Turno bloqueado en el calendario: atenuado + rayado */
.fc-event.turno-bloqueado { opacity: .55; }
.fc-event.turno-bloqueado .fc-event-main { font-style: italic; }
/* Sobreturno: borde punteado para distinguirlo de un turno agendado normal, aun
   cuando ya esté autorizado y lleve el color de su estado. */
.fc-event.turno-sobreturno { border-left: 4px dashed rgba(255,255,255,.85) !important; }

/* ----- Paginación ----------------------------------------------------- */
/* Barra de paginación: navegación centrada sobre el ancho de la tabla, con el
   resumen anclado a la izquierda. Las 3 columnas (1fr auto 1fr) dejan la nav
   ópticamente centrada aunque el resumen ocupe lugar; la 3ª queda vacía a
   propósito, es lo que mantiene el equilibrio. */
.paginacion {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--sp-3); margin-top: var(--sp-4);
}
.paginacion:empty { margin-top: 0; }
.paginacion__resumen { color: var(--text-muted); font-size: .85rem; }
.paginacion__nav {
  grid-column: 2; display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center;
}
.paginacion__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; color: var(--text-faint); user-select: none;
}
.paginacion button {
  min-width: 36px; min-height: 36px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-sm); padding: .35rem .7rem; cursor: pointer; font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.paginacion button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.paginacion button.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.paginacion button:disabled { opacity: .4; cursor: default; }

/* Scroll infinito (mobile): sentinel invisible + loader al cargar más. */
.listado-sentinel { width: 100%; height: 1px; }
.listado-cargando { display: flex; justify-content: center; padding: 1rem 0; color: var(--text-muted); }
.listado-cargando .spinner-border { width: 1.25rem; height: 1.25rem; border-width: .18em; color: var(--accent); }
/* En mobile la paginación clásica no se usa (la maneja el scroll infinito). */
@media (max-width: 860px) {
  .paginacion { display: none; }
}

/* ----- Formularios ---------------------------------------------------- */
.form-control, .form-select {
  min-height: var(--control-h);
  background: var(--bg);                /* más oscuro que la card: el input "se hunde" */
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: .45rem .75rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-control:hover, .form-select:hover { border-color: var(--text-faint); }
.form-control:focus, .form-select:focus {
  background: var(--surface-2); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control::placeholder { color: var(--text-faint); }
.form-label {
  color: var(--text-muted); font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; margin-bottom: .35rem;
}
textarea.form-control { min-height: 84px; }
/* Input file: el botón interno de Bootstrap trae fondo claro propio; lo llevamos al tema. */
.form-control[type="file"]::file-selector-button {
  background: var(--surface-2); color: var(--text);
  border: 0; border-inline-end: 1px solid var(--border);
  padding: .45rem .75rem; margin: -.45rem .75rem -.45rem -.75rem;
  transition: background var(--dur-fast) var(--ease);
}
/* El :not() extra iguala/supera la especificidad de la regla de hover de Bootstrap
   (si no, Bootstrap gana y deja fondo claro con texto blanco). */
.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background: var(--accent-soft); color: var(--text);
}
/* Checks/radios: acento champagne al marcar */
.form-check-input { background-color: var(--bg); border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Bootstrap list-group: sin tematizar trae fondo blanco propio (se ve fuera de
   tema en el checklist del modal de cierre). Lo atamos a las variables. */
.list-group {
  --bs-list-group-bg: var(--surface-2);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-bg: var(--surface-1);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-active-bg: var(--surface-1);
}

/* ----- Mensajes ------------------------------------------------------- */
.mensajes { position: fixed; top: calc(var(--topbar-h) + .6rem); right: 1rem; z-index: 1080; max-width: 360px; }

/* ----- Select2 oscuro (alineado al alto/foco de los inputs) ----------- */
.select2-container--default .select2-selection--single {
  background: var(--bg); border: 1px solid var(--border); height: var(--control-h);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text); line-height: calc(var(--control-h) - 2px); padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h) - 2px); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.select2-dropdown {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent-soft); color: var(--text); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--surface-1); color: var(--text); }
.select2-search--dropdown .select2-search__field { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); }
/* multiselect */
.select2-container--default .select2-selection--multiple {
  background: var(--bg); border: 1px solid var(--border); min-height: var(--control-h);
  border-radius: var(--radius-sm);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--text-muted); }
.select2-container--default .select2-selection--multiple .select2-search__field { color: var(--text); }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-left: .4rem; padding-right: 1.9rem; }
/* El buscador del multiselect va escrito dentro de la caja: sin la lupa no se
   nota que se puede tipear para filtrar. */
.select2-container--default .select2-selection--multiple { position: relative; }
.select2-container--default .select2-selection--multiple::after {
  content: "\F52A"; font-family: "bootstrap-icons"; color: var(--text-muted);
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: .9rem;
}
/* placeholder + clear */
.select2-container--default .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection__clear { color: var(--text-muted); }
/* Select2 dentro de un input-group (ej.: paciente + botón "+" de alta rápida).
   Bootstrap no conoce al container, así que hay que hacerlo flexear a mano y
   comerle el redondeo del lado donde se pega el botón. */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; min-width: 0; }
.input-group > .select2-container .select2-selection--single {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}

/* loading / no-results */
.select2-results__option.loading-results,
.select2-results__option.select2-results__message { color: var(--text-muted); }

/* ----- Odontograma ---------------------------------------------------- */
/* Paleta por pestañas de categoría: con el catálogo completo (patología,
   restauraciones, posición…) las franjas apiladas eran ocho renglones antes de
   llegar a los dientes. Se ve una categoría por vez. */
.odo-paleta { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
.odo-paleta-barra {
  display: flex; align-items: flex-end; gap: .5rem;
  border-bottom: 1px solid var(--border);
}
/* Las pestañas scrollean si no entran; el botón borrar queda siempre visible. */
.odo-paleta-tabs { display: flex; gap: .1rem; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.odo-paleta-tabs::-webkit-scrollbar { display: none; }
.odo-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); padding: .35rem .7rem; font-size: .8rem;
  white-space: nowrap; cursor: pointer; flex: 0 0 auto;
}
.odo-tab:hover { color: var(--text); }
.odo-tab.activa { color: var(--text); border-bottom-color: var(--accent); }
.odo-paleta .odo-borrar { flex: 0 0 auto; margin: 0 0 .3rem .45rem; }
.odo-paleta-chips { display: none; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; }
.odo-paleta-chips.activa { display: flex; }
.odo-estado {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; cursor: pointer;
}
.odo-estado:hover { color: var(--text); }
.odo-estado.activo { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.odo-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.odo-borrar { font-style: italic; }

.odo-arcada { margin: .6rem 0; overflow-x: auto; }
.odo-arcada-tit { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-bottom: .2rem; }
/* Fila con los dos cuadrantes de la arcada. Desktop: lado a lado (una fila de
   16). El gap central hace las veces de línea media. */
.odo-arcada-row { display: flex; gap: 10px; align-items: flex-end; }
.odo-svg { display: block; max-width: 100%; height: auto; }
.odo-base { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.odo-cara { fill: transparent; stroke: var(--bg); stroke-width: 1; cursor: pointer; transition: fill .1s; }
.odo-cara:hover { stroke: var(--accent); stroke-width: 1.5; }
.odo-num { fill: var(--text-faint); font-size: 10px; font-family: var(--font-ui); }
.odo-simbolo {
  fill: #fff; font-size: 14px; font-weight: 600; font-family: var(--font-ui);
  paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: 2.5px;
  pointer-events: none;
}
.odo-simbolo-pos { font-size: 10px; stroke-width: 2px; }
.odo-hint { font-size: .8rem; color: var(--text-faint); margin: -.4rem 0 .8rem; transition: color .2s; }
.odo-hint--flash { color: var(--accent); }

/* ----- Modo multiselección de piezas (plan) --------------------------------
   Con el modo activo la unidad deja de ser la cara y pasa a ser la pieza: el
   hover resalta el diente entero y la cara clickeada ya no se distingue. */
.odo-modo-sel .odo-cara:hover { stroke: var(--bg); stroke-width: 1; }
.odo-modo-sel g[data-pieza]:hover .odo-base { stroke: var(--accent-line); stroke-width: 2; }
.odo-modo-sel g[data-pieza]:hover .odo-diente { filter: brightness(1.12); }
.odo-modo-sel .odo-num { cursor: pointer; }
g.is-sel .odo-base { stroke: var(--accent); stroke-width: 2.5; }
g.is-sel .odo-num { fill: var(--accent); font-weight: 700; }
g.is-sel .odo-diente { filter: drop-shadow(0 0 3px var(--accent-line)); }

/* ----- Odontograma en mobile: cuadrantes apilados (dientes más grandes) --- */
@media (max-width: 575.98px) {
  /* menos padding en la card del odontograma => más ancho para las piezas */
  #odontograma { margin: 0 -.4rem; }
  .odo-arcada-row { flex-direction: column; gap: .55rem; align-items: stretch; }
  /* cada cuadrante ocupa el ancho completo: 8 piezas a buen tamaño */
  .odo-arcada-row .odo-svg { width: 100%; }
  .odo-num { font-size: 9px; }
  /* paleta más compacta: chips más chicos para no ocupar tanto alto */
  .odo-paleta { margin-bottom: .75rem; }
  .odo-tab { padding: .3rem .5rem; font-size: .75rem; }
  /* La categoría abierta es una tira deslizable: ni siquiera una sola entra
     completa en un celular. */
  .odo-paleta-chips.activa {
    flex-wrap: nowrap; overflow-x: auto; gap: .3rem;
    padding-bottom: .15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .odo-paleta-chips::-webkit-scrollbar { display: none; }
  .odo-estado { flex: 0 0 auto; }
  .odo-estado { padding: .28rem .55rem; font-size: .74rem; gap: .3rem; }
  .odo-sw { width: 10px; height: 10px; }
}
.odo-tip {
  position: fixed; z-index: 3000; pointer-events: none;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .4rem .6rem; font-size: .78rem; line-height: 1.35;
  white-space: pre-line; max-width: 260px;
  box-shadow: var(--shadow-md);
}

/* ----- Odontograma anatómico ------------------------------------------ */
.odo-anat-hit { fill: transparent; cursor: pointer; }
.odo-anat:hover .odo-diente { filter: brightness(1.18); }
.odo-diente { transition: opacity .15s; }

/* Colores semánticos del plan (avance del tratamiento) */
:root {
  --odo-pre: #d9534f;          /* preexistente / anterior: rojo */
  --odo-pendiente: #3b82f6;    /* pendiente / a realizar: azul */
  --odo-realizado: #3fae6a;    /* realizado: verde */
}
.odo-leyenda {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem;
  font-size: .78rem; color: var(--text-muted);
}
.odo-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }

/* Checklist de condiciones de boca completa (gingivitis, sarro, periodontitis…).
   Va debajo del odontograma pero fuera del lienzo, que se repinta entero. */
.odo-condiciones { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.odo-condiciones.cond--vacio { display: none; }
.odo-condiciones__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.odo-condiciones__titulo { font-size: .82rem; font-weight: 600; color: var(--text); }
.odo-condiciones__sub { font-size: .74rem; color: var(--text-faint); }
/* Auto-fit: en desktop entran varias por fila; en mobile cae a una sola.
   align-items:start para que cada ítem mida lo suyo: con el stretch por
   defecto, tildar uno estiraba a toda su fila (la nota agrega un renglón). */
.cond-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .5rem .9rem; align-items: start;
}
.cond-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .6rem; transition: border-color .15s, background .15s;
}
.cond-item.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.cond-item.is-guardado { border-color: var(--success); }
.cond-item .form-check { margin: 0; flex: 0 0 auto; }
.cond-item .form-check-label { font-size: .82rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.cond-item.is-on .form-check-label { color: var(--text); }
/* La nota solo aparece cuando la condición está marcada: sin tilde no hay qué
   aclarar. Va en su propio renglón (flex-basis 100%) porque al lado del nombre
   quedaba un campo de dos centímetros donde no entraba ni "sector inferior". */
.cond-item .js-cond-nota { display: none; flex: 1 0 100%; min-width: 0; font-size: .76rem; }
.cond-item.is-on .js-cond-nota { display: block; }
.cond-error { margin-top: .5rem; }

@media (max-width: 575.98px) {
  .cond-lista { grid-template-columns: 1fr; }
}

/* Captura a PNG (PDF del presupuesto): paleta clara momentánea, el PDF es
   papel blanco. La aplica/quita odontograma_snapshot.js sin repintar. */
.odo-captura {
  --surface-2: #f1efe9;      /* base de las piezas */
  --border: #b9b4a9;         /* borde de las piezas */
  --bg: #ffffff;             /* separador de caras */
  --text-faint: #6a675f;     /* números FDI */
}

/* ----- Detalle de presupuesto ------------------------------------------ */
/* Totales: tres cifras alineadas, la carga del paciente en acento */
.tot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); text-align: right; }
.tot-grid__label {
  color: var(--text-faint); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem;
}
.tot-grid__val { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tot-grid__val--accent { color: var(--accent); font-size: 1.35rem; }
@media (max-width: 575.98px) {
  .tot-grid { grid-template-columns: 1fr; text-align: left; }
  .tot-grid > div { display: flex; justify-content: space-between; align-items: baseline; }
  .tot-grid__label { margin-bottom: 0; }
}
/* Mensajes de la explicación clínica (feedback AJAX) */
.exp-msg { font-size: .78rem; color: var(--text-muted); min-height: 1.1rem; margin-top: .35rem; }
.exp-msg--error { color: var(--danger); }

/* ----- Plan de tratamiento (modal en cascada + tabla resumen) ---------- */
.mt-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.mt-tipo {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: .38rem .8rem; font-size: .84rem; cursor: pointer;
}
.mt-tipo:hover { color: var(--text); }
.mt-tipo.activo { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
/* Los chips van agrupados por especialidad: sin esto, el modal de una pieza es
   un muro de 19 chips sueltos. */
.mt-seccion + .mt-seccion { margin-top: .7rem; }
.mt-seccion__tit { margin-bottom: .3rem; }

/* Barra sobre el arco dental: la puerta a los tratamientos que no son de una
   pieza. Va acá y no dentro de #odontograma, que el JS repinta entero. */
.plan-acciones { margin-bottom: .8rem; }

/* ----- Barra de la multiselección ------------------------------------------
   Vive fuera de #odontograma (que se repinta entero) y aparece solo con el modo
   activo. Va al ras del pie de la pantalla —de borde a borde del área de
   trabajo, sin margen ni esquinas— para que se lea como parte de la aplicación
   y no como una tarjeta suelta flotando encima. El JS la cuelga de <body>:
   .page tiene transform y ahí un position:fixed no sería fijo. */
.plan-selbar { display: none; }
.plan-selbar.is-on {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem;
  padding: .85rem 1.6rem;
  background: var(--surface-1); border-top: 1px solid var(--accent-line);
  box-shadow: 0 -10px 30px rgba(18, 38, 43, .12);
  position: fixed; z-index: 1035;
  left: var(--sidebar-w); right: 0; bottom: 0;
  animation: selbar-in var(--dur-fast) var(--ease-out);
}
@keyframes selbar-in { from { opacity: 0; transform: translateY(100%); } }
.plan-selbar__n {
  font-weight: 600; color: var(--accent); white-space: nowrap;
  font-size: 1rem; font-variant-numeric: tabular-nums;
}
.plan-selbar__chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-width: 120px; }
.plan-selbar__chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text);
  border-radius: 999px; padding: .2rem .6rem; font-size: .84rem;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.plan-selbar__chip:hover { border-color: var(--danger); }
.plan-selbar__chip i { font-size: .68rem; color: var(--text-faint); }
.plan-selbar__chip:hover i { color: var(--danger); }
.plan-selbar__mas { font-size: .82rem; color: var(--text-muted); align-self: center; }
.plan-selbar__vacio { font-size: .86rem; color: var(--text-faint); }
.plan-selbar__grupo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.plan-selbar__grupo .btn { padding: .45rem .9rem; font-size: .88rem; }
/* La barra tapa el pie del contenido: se le da colchón mientras dura el modo. */
body.plan-sel-on .page { padding-bottom: 6rem; }
/* Sin sidebar (≤992px) la barra arranca contra el borde izquierdo. */
@media (max-width: 992px) {
  .plan-selbar.is-on { left: 0; }
}

/* En el celular la barra se come parte de la pantalla, así que se ordena por
   riesgo: arriba el estado (contador + chips) y los atajos; abajo, pegado al
   pulgar, solo el botón que abre el wizard. Si se toca de más se abre un modal
   que se cancela — nunca se pierde la selección. */
@media (max-width: 767.98px) {
  .plan-selbar.is-on {
    gap: .45rem; padding: .55rem .7rem;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(18, 38, 43, .16);
  }
  .plan-selbar__n { font-size: .9rem; }
  /* Los chips no empujan a los botones: una sola fila que scrollea. */
  .plan-selbar__chips { flex-wrap: nowrap; overflow-x: auto; gap: .3rem; }
  .plan-selbar__grupo { width: 100%; gap: .35rem; }
  /* Atajos y salida: los cuatro se reparten una fila angosta. El texto se
     abrevia (sin "Arcada") pero no desaparece: cuatro iconos sueltos no se
     entienden, y en pantalla táctil no hay title que valga. */
  .plan-selbar__grupo .btn { flex: 1; justify-content: center; padding: .42rem .2rem; font-size: .82rem; }
  /* El CTA ocupa el ancho completo y es lo más grande de la barra. */
  #plan-sel-planificar { flex: 1 0 100%; padding: .6rem; font-size: .95rem; }
  body.plan-sel-on .page { padding-bottom: 12rem; }
}

/* =========================================================================
   Wizard por pasos.
   ========================================================================= */
.wz__label-mobile {
  display: none;
  color: var(--text-muted); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.wz__steps { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.wz__step {
  display: flex; align-items: center; gap: .55rem;
  padding: 0; min-height: 44px;          /* blanco táctil en tablet */
  background: none; border: 0;
  color: var(--text-muted); font-size: .86rem;
  cursor: default; text-align: left;
}
.wz__step.is-done { color: var(--text); cursor: pointer; }
.wz__step.is-current { color: var(--text); }
.wz__dot {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wz__step.is-current .wz__dot {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.wz__step.is-done .wz__dot { background: var(--accent); color: var(--accent-contrast); box-shadow: none; }
.wz__bar { height: 3px; background: var(--border); border-radius: 2px; }
.wz__bar-fill {
  height: 100%; width: var(--p, 33%);
  background: var(--accent); border-radius: 2px;
  transition: width var(--dur-slow) var(--ease-out);
}
.wz__pane:focus { outline: none; }

/* Dentro de un modal el stepper vive en el header: ocupa todo el ancho debajo
   del título, y en pantallas chicas se reemplaza por el rótulo textual. */
.modal-header .wz-head { width: 100%; }
@media (max-width: 575.98px) {
  .wz__steps { display: none; }
  .wz__label-mobile { display: block; margin-bottom: .5rem; }
}
.mt-caras { display: flex; gap: .4rem; }
.mt-cara {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  font-weight: 600; cursor: pointer;
}
.mt-cara:hover { color: var(--text); }
.mt-cara.activo { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.mt-sugerido {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: .4rem; background: var(--surface-1);
}
.mt-precio {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); padding: .7rem .9rem; font-size: .9rem;
}
.mt-precio__total { border-top: 1px solid var(--border); margin-top: .4rem; padding-top: .4rem; }
/* Clase propia y no `.d-flex`: esa utilidad de Bootstrap es !important y gana
   sobre el display:none de .toggle(), así que la fila de sugeridos no se podía
   ocultar cuando el tratamiento no tenía ninguno. */
.mt-precio__fila { display: flex; justify-content: space-between; }
.plan-totales { font-size: .9rem; }
.plan-total { color: var(--accent); font-size: 1.05rem; }

/* ----- Kanban (trabajos de laboratorio) ------------------------------- */
.kanban { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.kanban-col {
  flex: 0 0 240px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column;
  max-height: 100%;   /* se acota al alto del tablero (ver body.kanban-page) */
}
.kanban-col__head {
  padding: .6rem .8rem; border-bottom: 1px solid var(--border); flex: 0 0 auto;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  display: flex; justify-content: space-between; align-items: center;
}
.kanban-count { background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; }
.kanban-drop {
  padding: .6rem; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: .5rem; overflow-y: auto;
}
.kanban-drop.over { background: var(--accent-soft); }
.kanban-card {
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: .6rem .7rem; cursor: grab; position: relative;
}
.kanban-card.drag { opacity: .5; }
.kanban-card__pac { font-weight: 600; }
.kanban-card__lab { color: var(--text-muted); font-size: .82rem; }
.kanban-card__desc { color: var(--text-faint); font-size: .78rem; margin-top: .2rem; }
.kanban-card__edit { position: absolute; top: .4rem; right: .5rem; color: var(--text-faint); }
.kanban-card__edit:hover { color: var(--accent); }

/* Página de tablero: el área de contenido toma el alto del viewport y el kanban
   flexea para llenar lo que queda. Así cada columna se acota a la pantalla y las
   tarjetas scrollean DENTRO de cada columna, sin scroll de página. */
body.kanban-page .content { height: 100vh; height: 100dvh; overflow: hidden; }
body.kanban-page .topbar { flex: 0 0 auto; }
/* Sin padding inferior: el tablero (y su scroll horizontal) llega hasta el fondo. */
body.kanban-page .page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: .6rem; }
body.kanban-page .kanban { flex: 1 1 auto; min-height: 0; padding-bottom: 0; }

@media (max-width: 700px) {
  /* En mobile la columna ocupa casi todo el ancho (se pasa de a una). */
  .kanban-col { flex: 0 0 82vw; max-width: 340px; }
}

/* ----- Badges de estado (extra) -------------------------------------- */
.badge-estado--info { background: var(--info-soft); color: var(--info); border-color: rgba(43,111,138,.28); }
.badge-estado--wait { background: var(--warning-soft); color: var(--warning); border-color: rgba(184,121,26,.28); }

/* ----- Home / panel: KPIs -------------------------------------------- */
.home__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.home__hello { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.home__avatar {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.3rem;
  color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 1.15rem 1.25rem; height: 100%;
  background-image: var(--surface-grad);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Halo de acento que se enciende en el hover (esquina superior derecha) */
.kpi::before {
  content: ""; position: absolute; top: -45px; right: -45px;
  width: 130px; height: 130px; pointer-events: none;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  opacity: .55; transition: opacity var(--dur) var(--ease);
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md), var(--glow-accent);
}
.kpi:hover::before { opacity: 1; }
.kpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.kpi__chip {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.15rem;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform var(--dur) var(--ease-out);
}
.kpi:hover .kpi__chip { transform: scale(1.06) rotate(-3deg); }
.kpi__chip--success { color: var(--success); background: var(--success-soft); border-color: rgba(31,138,91,.42); }
.kpi__chip--danger  { color: var(--danger);  background: var(--danger-soft);  border-color: rgba(192,57,43,.42); }
.kpi__chip--warning { color: var(--warning); background: var(--warning-soft); border-color: rgba(184,121,26,.42); }
.kpi__label {
  color: var(--text-faint); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; line-height: 1.25; padding-top: .15rem;
  /* Reserva dos líneas para que el valor quede alineado entre todas las cards */
  min-height: 2.4em;
}
.kpi__value {
  font-size: 1.8rem; font-weight: 700; line-height: 1.05; margin-top: .55rem;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap;          /* el prefijo "$" nunca se separa del número */
}
.kpi--sm .kpi__value { font-size: 1.55rem; }
.kpi__foot { font-size: .77rem; margin-top: .4rem; color: var(--text-muted); }
.kpi__foot .dot { opacity: .5; margin: 0 .15rem; }
/* Mini barra de progreso (ej. realizados vs total del día) */
.kpi__bar { height: 5px; border-radius: 99px; background: var(--surface-3); margin-top: .75rem; overflow: hidden; }
.kpi__bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--dur-slow) var(--ease-out);
}

/* KPIs compactos en teléfonos: menos padding/altura para que entren mejor.
   Desktop/tablet quedan intactos (ver diseño base arriba). */
@media (max-width: 575.98px) {
  .kpi { padding: .8rem .85rem; }
  .kpi__top { gap: .5rem; }
  .kpi__chip {
    width: 34px; height: 34px; border-radius: 10px; font-size: .95rem;
  }
  .kpi__label {
    font-size: .64rem; letter-spacing: .04em; min-height: 2.1em; padding-top: 0;
  }
  .kpi__value { font-size: 1.4rem; margin-top: .25rem; }
  .kpi--sm .kpi__value { font-size: 1.3rem; }
  .kpi__foot { font-size: .68rem; margin-top: .2rem; }
  .kpi__bar { margin-top: .5rem; height: 4px; }
  /* halo un poco más chico para el card reducido */
  .kpi::before { width: 100px; height: 100px; top: -35px; right: -35px; }
}

/* ----- Home / panel: agenda de hoy ----------------------------------- */
.agenda-hoy__item {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.3rem; border-bottom: 1px solid var(--border-soft);
  color: var(--text); position: relative;
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
/* Indicador de acento que aparece a la izquierda en el hover */
.agenda-hoy__item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--accent);
  transition: height var(--dur-fast) var(--ease);
}
.agenda-hoy__item:hover { padding-left: 1.55rem; background: var(--surface-2); color: var(--text); }
.agenda-hoy__item:hover::before { height: 60%; }
.agenda-hoy__item:last-child { border-bottom: 0; }
.agenda-hoy__hora {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent);
  min-width: 3.2rem; padding: .15rem .4rem; border-right: 1px solid var(--border-soft);
}
.agenda-hoy__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .1rem; }
.agenda-hoy__pac { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-hoy__sub { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Home / panel: accesos rápidos --------------------------------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.quick {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.3rem .6rem; background: var(--surface-1); color: var(--text-muted);
  text-align: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.quick:hover { background: var(--surface-2); color: var(--text); }
.quick__ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quick__ic i { font-size: 1.3rem; color: var(--accent); }
.quick:hover .quick__ic { transform: translateY(-2px); border-color: var(--accent-line); background: var(--accent-soft); }
.quick span { font-size: .82rem; font-weight: 600; }

/* ----- Modales (tema oscuro premium) --------------------------------- */
.modal-content {
  background: var(--surface-1);
  background-image: var(--surface-grad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--text);
}
.modal-content .modal-header,
.modal-content .modal-footer { border-color: var(--border); }
.modal-content .modal-title { font-family: var(--font-head); font-weight: 600; }
/* Modales/offcanvas ahora son claros: la X oscura por defecto es la correcta.
   Reseteamos cualquier btn-close-white heredada de plantillas para que no
   quede blanca (invisible) sobre la superficie clara. */
.modal-content .btn-close, .offcanvas.panel-turno .btn-close { filter: none; opacity: .55; }
.modal-content .btn-close:hover, .offcanvas.panel-turno .btn-close:hover { opacity: .9; }
.modal-backdrop.show { backdrop-filter: blur(3px); opacity: .55; }
/* Entrada premium del cuadro (Bootstrap ya hace fade del backdrop) */
.modal.fade .modal-dialog {
  transform: scale(.97) translateY(8px);
  transition: transform var(--dur) var(--ease-out);
}
.modal.show .modal-dialog { transform: none; }

/* ----- Panel lateral del turno (offcanvas tema oscuro premium) -------
   Tematizado vía las variables propias de Bootstrap 5.3: así el propio
   componente arma su fondo/borde/color con la paleta oscura. */
.offcanvas.panel-turno {
  --bs-offcanvas-width: min(460px, 92vw);
  --bs-offcanvas-bg: var(--surface-1);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-border-color: var(--border);
  --bs-offcanvas-border-width: 1px;
  --bs-offcanvas-box-shadow: var(--shadow);
  background-image: var(--surface-grad);
}
.offcanvas.panel-turno .offcanvas-header {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-4);
}
.offcanvas.panel-turno .offcanvas-title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}
.offcanvas.panel-turno .offcanvas-title i { color: var(--accent); margin-right: .35rem; }
.offcanvas.panel-turno .offcanvas-body { padding: var(--sp-4) var(--sp-4); }
/* Turnos de un paciente (buscador de la agenda). Cada fila es una card: se lee
   igual en desktop y en el teléfono, sin tabla que transformar. */
.turnos-pac { display: flex; flex-direction: column; gap: .4rem; }
.turnos-pac__titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: .5rem;
}
.turnos-pac__toggle {
  background: none; border: 0; padding: 0; color: inherit;
  font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.turnos-pac__toggle .bi { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.turnos-pac__toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }
.turnos-pac__vacio {
  padding: .9rem; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); text-align: center; font-size: .88rem;
}
.turno-pac {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; align-items: center;
  width: 100%; text-align: left; padding: .6rem .75rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.turno-pac:hover, .turno-pac:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); }
.turno-pac__cuando { font-size: .92rem; }
.turno-pac__quien { grid-column: 1; color: var(--text-muted); font-size: .8rem; }
.turno-pac__estado { grid-column: 2; grid-row: 1 / span 2; }
.turno-pac--ajena { opacity: .75; }
.kbd-atajo {
  font-size: .68rem; padding: .05rem .35rem; margin-left: .25rem;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: none; vertical-align: middle;
}
@media (max-width: 575.98px) {
  #panelPaciente.offcanvas { --bs-offcanvas-width: 100vw; }
  .kbd-atajo { display: none; }   /* sin teclado físico, el atajo es ruido */
}

/* Backdrop sutil: el calendario sigue siendo el contexto, no se oscurece de más */
.offcanvas-backdrop.show { backdrop-filter: blur(2px); opacity: .35; }

/* Dropdown oscuro: micro-entrada.
   Solo opacidad: NO animar transform (Popper lo usa inline para posicionar). */
.dropdown-menu { box-shadow: var(--shadow-sm); }
.dropdown-menu.show { animation: fz-fade-in var(--dur-fast) var(--ease) both; }

/* ----- Sidebar responsive -------------------------------------------- */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1025; }
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .content { margin-left: 0; }
  .topbar .btn-burger { display: inline-block; }
}

/* ----- Ajustes específicos de dark mode ------------------------------- */
/* Botón de tema en el topbar: solo ícono, encaja en el shell grafito */
.theme-toggle { padding: .3rem .55rem; }
.theme-toggle i { font-size: 1.05rem; }
/* En dark el workspace es oscuro: la X de modales/offcanvas debe aclararse */
:root[data-theme="dark"] .modal-content .btn-close,
:root[data-theme="dark"] .offcanvas.panel-turno .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .7; }
:root[data-theme="dark"] .modal-content .btn-close:hover,
:root[data-theme="dark"] .offcanvas.panel-turno .btn-close:hover { opacity: 1; }
/* Scrollbars claros sobre el workspace oscuro (el thumb global es grafito) */
:root[data-theme="dark"] * { scrollbar-color: rgba(255,255,255,.20) transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); background-clip: padding-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); background-clip: padding-box; }

/* ===== Laboratorio: shell slim del técnico + tarjeta urgente ===== */
.shell-slim .content { margin-left: 0; }
.shell-slim .topbar { padding-inline: 1rem; }
.kanban-card.is-urgente { border-left-color: var(--danger); }

/* ===== Selector de coordenadas de una sede (configuraciones/_sede_mapa.html) ===== */
.sede-mapa {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.sede-mapa__head {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: .75rem;
}
.sede-mapa__titulo { font-weight: 600; }
.sede-mapa__ayuda { margin: .25rem 0 0; color: var(--text-muted); font-size: .85rem; max-width: 62ch; }
.sede-mapa__msg {
  margin-bottom: .6rem; padding: .5rem .75rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text); font-size: .85rem;
}
.sede-mapa__msg:empty { display: none; }
.sede-mapa__opciones { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.sede-mapa__opciones:empty { display: none; }
.sede-mapa__opciones button {
  width: 100%; text-align: left; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .4rem .7rem;
  color: var(--text); font-size: .82rem; line-height: 1.4; cursor: pointer;
}
.sede-mapa__opciones button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.sede-mapa__msg.is-error { background: rgba(217, 83, 79, .12); color: var(--danger); }
.sede-mapa__lienzo {
  height: 340px; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden; z-index: 0;
}
/* Solo se ve si Leaflet no pudo inicializar (.is-error en el contenedor). */
.sede-mapa__fallo { display: none; color: var(--text-muted); font-size: .85rem; }
.sede-mapa.is-error .sede-mapa__lienzo { display: none; }
.sede-mapa.is-error .sede-mapa__fallo { display: block; }
:root[data-theme="dark"] .sede-mapa__lienzo .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6);
}
@media (max-width: 576px) { .sede-mapa__lienzo { height: 260px; } }

/* =====================================================================
   COTIZACIÓN DEL DÓLAR (topbar) — bases/_navbar_dolar.html
   Vive sobre el shell grafito: usa la paleta --shell-* para el trigger y la
   del dropdown oscuro de Bootstrap para el detalle.
   ===================================================================== */
.dolar-nav[hidden] { display: none; }

.dolar-nav__trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .4rem;
  background: none; border: 0;   /* el chip ya trae su propio borde */
  color: var(--shell-text);
}
.dolar-nav__trigger .bi { font-size: 1.05rem; line-height: 1; }
.dolar-nav__trigger:hover, .dolar-nav__trigger:focus,
.dolar-nav__trigger.show { background: none; border: 0; box-shadow: none; color: var(--shell-accent); }
.dolar-nav__trigger:hover .dolar-chip { border-color: var(--shell-accent); }

/* En mobile el trigger es solo el icono: recupera el marco de los demás
   botones de la topbar (tema / notificaciones) para no quedar suelto. */
@media (max-width: 991.98px) {
  .dolar-nav__trigger {
    border: 1px solid var(--shell-border);
    border-radius: var(--radius-sm);
    padding: .3rem .55rem;
  }
}
.dolar-nav__trigger::after { display: none; }   /* el caret suma ruido al lado de los chips */

.dolar-chip {
  align-items: center; gap: .35rem;
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: 999px;
  padding: .1rem .55rem;
  line-height: 1.4; white-space: nowrap;
}
.dolar-chip__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--shell-muted);
}
.dolar-chip__val {
  font-size: .82rem; font-weight: 600;
  color: var(--shell-text); font-variant-numeric: tabular-nums;
}
.dolar-chip--blue .dolar-chip__tag { color: var(--shell-accent); }
.dolar-nav--loading .dolar-chip { opacity: .55; }
.dolar-nav--stale .dolar-chip__val { color: var(--shell-muted); }

/* El JS oculta el chip/fila del blue si la API no lo devolvió; hay que ganarle
   a las utilidades d-*-inline-flex de Bootstrap, que traen !important. */
.dolar-chip[hidden], .dolar-quote[hidden] { display: none !important; }

/* ----- Dropdown de detalle ------------------------------------------ */
.dolar-nav__menu { min-width: 296px; padding: .35rem .25rem; }

.dolar-nav__head, .dolar-nav__foot {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; font-size: .7rem; color: var(--shell-muted);
}
.dolar-nav__head {
  justify-content: space-between; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.dolar-nav__refresh {
  border: 0; background: transparent; color: var(--shell-muted);
  border-radius: var(--radius-sm); padding: .1rem .3rem; line-height: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dolar-nav__refresh:hover { color: var(--shell-accent); background: var(--shell-surface); }
.dolar-nav--loading .dolar-nav__refresh i { animation: dolar-spin .8s linear infinite; }
@keyframes dolar-spin { to { transform: rotate(360deg); } }

.dolar-quote {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem .75rem; border-radius: var(--radius-sm);
}
.dolar-quote:hover { background: var(--shell-surface); }
.dolar-quote__name {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600; color: var(--shell-text); white-space: nowrap;
}
.dolar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shell-accent); flex: 0 0 auto; }
.dolar-dot--blue { background: #7aa7d6; }

.dolar-quote__pair { display: inline-flex; gap: .9rem; }
.dolar-quote__cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.dolar-quote__lbl {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--shell-muted);
}
.dolar-quote__val {
  font-size: .84rem; font-weight: 600; color: var(--shell-text); font-variant-numeric: tabular-nums;
}

.dolar-nav__foot {
  border-top: 1px solid var(--shell-border); margin-top: .2rem; padding-top: .45rem;
}


/* ===== Modal de cierre: chips y tarjetas de control ==================
   Los pasos usan el stepper .wz__* (el mismo del modal del plan). Los chips
   reemplazan a los selects de "cuándo" y "horario" de cada control: un toque
   en vez de abrir un desplegable, que en la tablet del sillón es lo que pesa. */
.cierre-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: .3rem .85rem;
  min-height: 34px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cierre-chip:hover { color: var(--text); border-color: var(--accent); }
.cierre-chip.is-activa {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
/* "¿Necesita volver?" sin contestar al confirmar. */
#cierre-volver-opciones.is-falta .cierre-chip { border-color: var(--danger); color: var(--danger); }

.cierre-control {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, .5rem);
  padding: .75rem 2.5rem .75rem .85rem;
  margin-bottom: .6rem;
  background: var(--surface-1);
}
.cierre-control .ctl-quitar {
  position: absolute; top: .35rem; right: .35rem;
  color: var(--text-muted);
}
.cierre-control .ctl-quitar:hover { color: var(--danger); }
/* ===== Paso "Próximo turno": acordeón de turnos con la agenda adentro ====
   Cada turno a agendar es una tarjeta: cabecera (qué y cuándo) y un cuerpo
   que solo se ve en la activa, con el servicio y la agenda vertical (semana;
   día en el celular). El diálogo pasa a modal-xl en este paso. */
.cierre-control .ctl-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem;
  cursor: pointer; min-height: 1.6rem;
}
.cierre-control .ctl-chevron { color: var(--text-muted); transition: transform .15s ease; }
.cierre-control .ctl-titulo { font-weight: 600; }
.cierre-control .ctl-resumen { font-size: .85rem; }
.cierre-control .ctl-resumen--mal { color: var(--danger); }
.cierre-control .ctl-cuerpo { display: none; margin-top: .75rem; }
.cierre-control .ctl-servicio-campo { flex: 1 1 280px; max-width: 460px; }
.cierre-control.is-activa { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cierre-control.is-activa .ctl-cuerpo { display: block; }
.cierre-control.is-activa .ctl-chevron { transform: rotate(90deg); }
.cierre-control:not(.is-activa) .ctl-cabecera:hover .ctl-titulo { color: var(--accent); }
/* Colapsada, la cabecera entera abre la tarjeta: sin botones que se coman el click. */
.cierre-control:not(.is-activa) .ctl-volver-propuesta { display: none; }
.cierre-proximo__agenda { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
/* Alto natural: un solo scroll (el del modal), con la fila de días pegada
   arriba. Las horas se acotan a la jornada (ver `ajustarRango`). */
.cierre-cal { transition: opacity .15s ease; }
/* El paso de la agenda usa casi toda la pantalla. */
.modal-dialog.cierre-dialog--agenda { --bs-modal-margin: .75rem; }
@media (min-width: 1200px) {
  .modal-dialog.cierre-dialog--agenda { max-width: min(1440px, 96vw); }
}
.cierre-cal.is-loading { opacity: .55; }
/* La toolbar de la agenda principal es sticky con márgenes negativos (para
   cubrir la tarjeta de borde a borde): acá adentro tapaba la fila de días. */
.cierre-cal.fc .fc-toolbar.fc-header-toolbar {
  position: static; margin: 0 0 .5rem; padding: 0; background: transparent; border-radius: 0;
}
.cierre-cal .fc-toolbar-title { font-size: 1rem; }
.cierre-cal .fc-timegrid-col-frame { cursor: pointer; }
/* La agenda principal corre los encabezados de día debajo de su topbar
   (sticky con top calculado); acá adentro van pegados arriba de la grilla. */
/* Pegada al borde del modal: el padding del body dejaba ver turnos por arriba. */
.cierre-cal.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
  top: calc(-1 * var(--bs-modal-padding, 1rem));
  /* Por encima de la propuesta (z-index 5) y de los fondos: al scrollear, los
     turnos pasan por DEBAJO de la fila de días. */
  z-index: 8;
  background: var(--surface-1);
}
.cierre-cal .cierre-evt { font-size: .74rem; line-height: 1.15; overflow: hidden; }
.cierre-cal-leyenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  font-size: .76rem; color: var(--text-muted);
}
.cierre-ley { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px;
              border: 1px solid var(--border); vertical-align: -1px; margin-right: .2rem; }
.cierre-ley--prop { background: var(--accent); border-color: var(--accent); }
.cierre-ley--libre { background: var(--surface-1); }
.cierre-ley--nodisp { background: var(--fc-no-disp); }
.cierre-ley--bloqueo { background: var(--fc-bloqueo); }
.cierre-cal-aviso {
  font-size: .82rem; padding: .35rem .6rem; border-radius: var(--radius-sm, .5rem);
  background: var(--danger-soft, rgba(217, 83, 79, .12)); color: var(--danger);
}
/* Los tokens de fondo de la agenda viven en #tab-cal (turno_list.html) y el
   modal cuelga fuera de ese árbol: acá se repiten con los mismos valores. */
#modalCierre {
  --fc-no-disp: rgba(15, 42, 48, .07); --fc-bloqueo: var(--danger-soft);
  --fc-completado: #1e5c43; --fc-sin-cargo: #d6336c;
}
:root[data-theme="dark"] #modalCierre {
  --fc-no-disp: rgba(0, 0, 0, .38); --fc-bloqueo: rgba(229, 120, 110, .22);
  --fc-completado: #2d6b55; --fc-sin-cargo: #f06595;
}
/* Turno propuesto: el acento del tema con borde punteado (todavía no existe);
   el elegido a mano, borde lleno. Las de las otras tarjetas, atenuadas. */
.cierre-cal .fc-event.cierre-prop {
  background: var(--accent) !important; border: 2px dashed rgba(255, 255, 255, .85) !important;
  color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); z-index: 5;
}
.cierre-cal .fc-event.cierre-prop.is-elegida { border-style: solid !important; }
.cierre-cal .fc-event.cierre-prop.is-otra { opacity: .5; }
.cierre-cal .fc-event.cierre-turno { cursor: default; }


/* ===== Lista de insumos del cierre ===================================
   Las tres columnas de la derecha (cantidad, stock, quitar) van a ancho
   fijo para que queden a plomo entre filas. Antes cada fila se acomodaba
   sola con flex libre y la del insumo agregado a mano traía un botón de
   más: alcanzaba para correr los inputs de todo el bloque. */
.cierre-insumo-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.cierre-insumo-row .ins-nombre { flex: 1 1 auto; min-width: 0; }
.cierre-insumo-row .ins-cant   { flex: 0 0 5rem; width: 5rem; text-align: right; }
.cierre-insumo-row .ins-aviso  { flex: 0 0 8rem; }
.cierre-insumo-row .ins-quitar {
  flex: 0 0 auto;
  padding: .15rem .4rem;
  color: var(--text-muted);
}
.cierre-insumo-row .ins-quitar:hover { color: var(--danger); }

/* En pantalla chica se parte en dos renglones: arriba el tilde y el nombre
   (que puede ser largo), abajo la cantidad, el stock y el botón de quitar,
   sangrados a la altura del nombre. Dejarlo en una sola línea hacía que el
   nombre largo empujara la X a un renglón propio y cada fila quedaba distinta. */
@media (max-width: 575.98px) {
  .cierre-insumo-row { flex-wrap: wrap; }
  .cierre-insumo-row .ins-nombre { flex: 0 0 calc(100% - 1.5rem); }
  .cierre-insumo-row .ins-cant   { margin-left: 1.5rem; }
  .cierre-insumo-row .ins-aviso  { flex: 1 1 auto; }
  .cierre-insumo-row .ins-quitar { margin-left: auto; }
}

/* =========================================================================
   Ficha del paciente: rail de contexto + workspace de una sección por vez.
   Reemplazó a la doble pestaña (pills de Bootstrap + pills a mano del
   odontograma), que obligaba a navegar por dos ejes para llegar a lo mismo.
   ========================================================================= */
.ficha-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  align-items: start;
}
.ficha-work { min-width: 0; }   /* sin esto el grid se estira con tablas anchas */

/* ----- Rail ------------------------------------------------------------ */
.ficha-rail {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-3));
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.ficha-rail__pac { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ficha-rail__avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-head); font-size: .95rem;
}
.ficha-rail__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ficha-rail__ident { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ficha-rail__ident strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-rail__ident span { font-size: .76rem; color: var(--text-muted); }

/* ----- Navegación de secciones ---------------------------------------- */
.ficha-nav { display: flex; flex-direction: column; gap: 2px; }
.ficha-nav__item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  color: var(--text-muted); font-size: .86rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ficha-nav__item i { font-size: 1rem; flex: 0 0 auto; }
.ficha-nav__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-nav__item:hover { background: var(--surface-2); color: var(--text); }
.ficha-nav__item.activo {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; box-shadow: inset 2px 0 0 var(--accent);
}
/* Contador de pendientes del plan: informa sin gritar. */
.ficha-nav__n {
  flex: 0 0 auto; font-style: normal; font-size: .7rem; font-weight: 600;
  background: var(--warning-soft); color: var(--warning);
  border-radius: 999px; padding: .05rem .4rem;
}

/* ----- Alertas clínicas (alergias, medicación) ------------------------- */
.ficha-rail__alertas { display: flex; flex-direction: column; gap: .5rem; }
.ficha-alerta {
  display: flex; gap: .5rem;
  border-radius: var(--radius-sm); padding: .5rem .6rem;
  font-size: .78rem; line-height: 1.35;
}
.ficha-alerta i { font-size: .95rem; flex: 0 0 auto; margin-top: .05rem; }
.ficha-alerta strong { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.ficha-alerta p { margin: .1rem 0 0; overflow-wrap: anywhere; }
.ficha-alerta--danger  { background: var(--danger-soft);  color: var(--danger); }
.ficha-alerta--warning { background: var(--warning-soft); color: var(--warning); }

/* ----- KPIs del resumen dental ---------------------------------------- */
.ficha-rail__resumen { border-top: 1px solid var(--border-soft); padding-top: var(--sp-3); }
.ficha-rail__resumen h6 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: .5rem;
}
.ficha-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.ficha-kpi {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: .4rem .5rem; text-align: center;
}
.ficha-kpi b { display: block; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.1; }
.ficha-kpi span { font-size: .68rem; color: var(--text-muted); }
.ficha-kpi--ok   b { color: var(--success); }
.ficha-kpi--warn b { color: var(--warning); }
.ficha-kpi--off  b { color: var(--text-faint); }
.ficha-rail__pie { font-size: .68rem; color: var(--text-faint); margin: .5rem 0 0; }

/* ----- Cabecera de sección -------------------------------------------- */
.ficha-sec__head {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.ficha-sec__titulo { flex: 1 1 12rem; min-width: 0; }
.ficha-sec__titulo h5 { margin: 0; font-family: var(--font-head); font-size: 1.1rem; }
.ficha-sec__sub { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.ficha-sec__tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ficha-sec__ver { width: auto; max-width: 15rem; }

.ficha-bloque { border-top: 1px solid var(--border-soft); padding-top: var(--sp-3); }
.ficha-bloque__tit {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: .6rem;
}
.ficha-vacio { text-align: center; color: var(--text-muted); padding: var(--sp-5) var(--sp-3); }
.ficha-vacio i { font-size: 2rem; color: var(--text-faint); display: block; margin-bottom: .5rem; }
.ficha-vacio p { margin-bottom: .75rem; }

/* El campo de alergias se marca en el formulario igual que en el rail: es el
   dato que puede arruinar una atención. */
.ficha-campo-alerta { border-left: 3px solid var(--danger); padding-left: .7rem; }
.ficha-campo-alerta .form-label { color: var(--danger); }

/* ----- Timeline clínico ------------------------------------------------ */
.tl-nueva { margin-bottom: var(--sp-3); }
.tl-filtros { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.tl-filtro {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: .28rem .7rem; font-size: .78rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tl-filtro:hover { color: var(--text); }
.tl-filtro.activo { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }

.tl { list-style: none; margin: 0; padding: 0 0 0 1.6rem; position: relative; }
/* Riel vertical que une los eventos. */
.tl::before {
  content: ""; position: absolute; left: .58rem; top: .4rem; bottom: .4rem;
  width: 2px; background: var(--border-soft);
}
.tl-item { position: relative; display: flex; gap: .7rem; padding: .55rem 0; }
.tl-item__ic {
  position: absolute; left: -1.6rem; top: .55rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem;
  background: var(--surface-3); color: var(--text-muted);
  border: 2px solid var(--surface-1);
}
.tl-item__cuerpo { flex: 1; min-width: 0; }
.tl-item__top { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tl-item__top strong { font-size: .88rem; font-weight: 600; }
.tl-item__top time { font-size: .74rem; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.tl-item__txt { margin: .2rem 0 0; font-size: .84rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tl-item__pie { margin-top: .2rem; font-size: .74rem; color: var(--text-faint); }
.tl-item__editar {
  border: 0; background: none; padding: 0 .15rem; margin-left: .3rem;
  color: var(--text-faint); font-size: .8rem; line-height: 1;
}
.tl-item__editar:hover { color: var(--accent); }
.tl-editar { margin-top: .35rem; }
/* Cada tipo de evento se distingue por el color del nodo, no por el fondo:
   el ojo recorre la columna de puntos sin que el texto pierda contraste. */
.tl-item--nota        .tl-item__ic { background: var(--accent-soft);  color: var(--accent); }
.tl-item--turno       .tl-item__ic { background: var(--info-soft);    color: var(--info); }
.tl-item--tratamiento .tl-item__ic { background: var(--success-soft); color: var(--success); }
.tl-item--estudio     .tl-item__ic { background: var(--warning-soft); color: var(--warning); }
.tl-item--adjunto     .tl-item__ic { background: var(--surface-3);    color: var(--text-muted); }
.tl .skeleton-row { display: flex; flex-direction: column; gap: .3rem; padding: .55rem 0; }

/* ----- Mobile: el rail se vuelve una fila de chips ---------------------- */
@media (max-width: 991.98px) {
  .ficha-layout { grid-template-columns: minmax(0, 1fr); }
  .ficha-rail { position: static; padding: var(--sp-2) var(--sp-3); }
  /* El nombre ya está en el hero, justo arriba: repetirlo solo gasta alto. */
  .ficha-rail__pac { display: none; }
  .ficha-nav {
    flex-direction: row; gap: .35rem;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--sp-3) * -1); padding: 0 var(--sp-3);
  }
  .ficha-nav::-webkit-scrollbar { display: none; }
  .ficha-nav__item {
    flex: 0 0 auto; width: auto; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem;
  }
  .ficha-nav__item.activo { box-shadow: none; border-color: var(--accent-line); }
  /* Los KPIs pasan a una tira horizontal: en dos filas empujaban el contenido
     de la sección casi fuera de la primera pantalla. */
  .ficha-rail__resumen { border-top: 0; padding-top: 0; }
  .ficha-rail__resumen h6 { display: none; }
  .ficha-kpis {
    display: flex; gap: .35rem;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--sp-3) * -1); padding: 0 var(--sp-3);
  }
  .ficha-kpis::-webkit-scrollbar { display: none; }
  .ficha-kpi {
    flex: 0 0 auto; display: flex; align-items: baseline; gap: .3rem;
    padding: .3rem .6rem; white-space: nowrap;
  }
  .ficha-kpi b { display: inline; font-size: .95rem; }
  .ficha-rail__pie { display: none; }
}

@media (max-width: 575.98px) {
  .ficha-sec__tools { width: 100%; }
  .ficha-sec__ver { flex: 1 1 auto; max-width: none; }
  .tl-item__top time { margin-left: 0; width: 100%; }
}

/* ===== Errores de validación =========================================
   Django pinta los errores de campo como <ul class="errorlist">. Sin estilo
   propio se ven como una lista con viñeta gris, indistinguibles de un texto
   de ayuda: el operador toca "Guardar", la pantalla no cambia y parece que el
   sistema no hizo nada. Acá se les da peso de error. */
.errorlist {
  list-style: none;
  margin: .4rem 0 0;
  padding: .45rem .7rem;
  border-left: 3px solid var(--danger);
  border-radius: .25rem;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .85rem;
}
.errorlist li + li { margin-top: .2rem; }
/* Adentro de un campo compacto (tabla, formset) alcanza con el texto. */
.errorlist.errorlist--inline {
  padding: 0; border: 0; background: none; margin-top: .2rem;
}

/* ===== Campanita de notificaciones (templates/notificaciones/_campanita.html)
   Vive dentro del .topbar, así que consume los tokens del shell. El ancho
   acompaña la pantalla (hasta 520px) y el texto hace wrap: el .dropdown-item
   de Bootstrap trae nowrap y cortaba los avisos largos. Cabeza y pie quedan
   fijos; solo scrollea la lista. */
.noti-menu {
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--border);
  width: clamp(360px, 32vw, 520px);
  max-height: min(680px, calc(100vh - var(--topbar-h) - 1.5rem));
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius, .6rem);
}
.noti-menu.show { display: flex; flex-direction: column; }
.noti-menu__cabeza {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.noti-menu__cabeza strong { font-size: .95rem; }
.noti-menu__count {
  font-size: .72rem; font-weight: 600;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.noti-menu__cabeza .btn-link { color: var(--accent); font-size: .8rem; }
.noti-menu__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.noti-menu__vacio {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 2rem 1rem; color: var(--text-muted); font-size: .85rem;
}
.noti-menu__vacio .bi { font-size: 1.6rem; opacity: .6; }
.noti-menu__pie {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .6rem; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--accent); text-decoration: none;
}
.noti-menu__pie:hover { background: var(--surface-2); color: var(--accent); }

.noti-item {
  display: grid; grid-template-columns: 32px 1fr; gap: .75rem;
  align-items: start;
  padding: .7rem 1rem;
  white-space: normal;
  border-left: 3px solid transparent;
  color: var(--text);
}
.noti-item + .noti-item { border-top: 1px solid var(--border-soft, var(--border)); }
.noti-item:hover, .noti-item:focus { background: var(--surface-2); color: var(--text); }
.noti-item__icono {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: .95rem;
}
.noti-item__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.noti-item__cabeza { display: flex; align-items: baseline; gap: .75rem; }
.noti-item__titulo { flex: 1; min-width: 0; font-weight: 600; font-size: .86rem; line-height: 1.3; }
.noti-item__fecha {
  flex: none; font-size: .72rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.noti-item__mensaje {
  font-size: .82rem; line-height: 1.4; color: var(--text-muted);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Nivel ALERTA: la campanita mezcla avisos de rutina con plata que no entra
   (un turno regalado, uno fiado). Se distinguen sin robarse la lista: barra
   roja al costado, título e ícono en rojo, no un fondo lleno. */
.noti-item--alerta { border-left-color: var(--danger); }
.noti-item--alerta .noti-item__titulo { color: var(--danger); }
.noti-item--alerta .noti-item__icono {
  background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger);
}

/* Mobile: hoja de ancho completo debajo del topbar (Popper la posicionaría
   pegada a la campanita y se saldría de la pantalla). */
@media (max-width: 575.98px) {
  .noti-menu.show {
    position: fixed !important;
    inset: calc(var(--topbar-h) + .25rem) .5rem auto .5rem !important;
    transform: none !important;
    width: auto;
    max-height: calc(100vh - var(--topbar-h) - 1rem);
  }
}

/* Categorías de la bandeja: el mapa de qué avisos recibe uno. Es una fila que
   scrollea en mobile en vez de apilarse, para no empujar la lista fuera de
   pantalla. */
.noti-cats {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.noti-cat {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-muted);
  font-size: .82rem; line-height: 1.2; cursor: pointer;
}
.noti-cat:hover { border-color: var(--accent-line); color: var(--text); }
.noti-cat.activa {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}
.noti-cat__n { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.noti-cat.activa .noti-cat__n { color: inherit; }
/* Los sin leer de esa categoría: es el único número que pide acción. */
.noti-cat__nuevo {
  min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center;
}
@media (max-width: 575.98px) {
  .noti-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .noti-cat { flex: 0 0 auto; }
  .noti-cats::-webkit-scrollbar { display: none; }
}

/* =========================================================================
   NOTAS RÁPIDAS — panel flotante tipo "sticky notes", compartido por sede.
   Cuelga de <body> (no de .page, que tiene transform). z 1045: sobre el
   sidebar y la barra del plan, debajo de los modales (1055).
   ========================================================================= */
.notas {
  --nota-bg: #fffdf6;          /* papel apenas cálido sobre el workspace claro */
  --nota-fab: var(--accent);
  --nota-gap: 1rem;            /* margen lateral */
  --nota-bottom: 1rem;         /* altura del FAB: sube si hay otra barra al pie */
  --nota-fab-size: 52px;
}
:root[data-theme="dark"] .notas { --nota-bg: var(--surface-1); }

.notas__fab {
  position: fixed; right: var(--nota-gap); bottom: var(--nota-bottom); z-index: 1045;
  width: var(--nota-fab-size); height: var(--nota-fab-size); border-radius: 50%;
  border: 0; background: var(--nota-fab); color: var(--accent-contrast);
  font-size: 1.3rem; box-shadow: var(--shadow-lift);
  display: grid; place-items: center; transition: transform .15s ease, box-shadow .15s ease;
}
.notas__fab:hover { transform: translateY(-2px); }
.notas.is-abierto .notas__fab { transform: scale(.9); opacity: .9; }
.notas__badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--danger); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 20px; text-align: center;
}

/* El alto sigue a la cantidad de notas; como máximo, lo que entra bajo el topbar. */
.notas__panel {
  position: fixed; right: var(--nota-gap); z-index: 1045;
  bottom: calc(var(--nota-bottom) + var(--nota-fab-size) + .6rem);
  width: 320px; max-width: calc(100vw - 2 * var(--nota-gap));
  max-height: calc(100vh - var(--topbar-h) - var(--nota-bottom) - var(--nota-fab-size) - 2rem);
  display: flex; flex-direction: column;
  background: var(--nota-bg); color: var(--text);
  border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  animation: notas-in .16s ease-out;
}
.notas__panel[hidden] { display: none; }
@keyframes notas-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.notas__head { display: flex; align-items: center; gap: .4rem; padding: .55rem .6rem .45rem .8rem; }
.notas__icono { color: var(--accent); }
.notas__titulo { flex: 1; font-weight: 600; font-size: .92rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notas__sede { font-weight: 400; color: var(--text-muted); }
.notas__btn {
  border: 0; background: transparent; color: var(--text-muted);
  width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center;
}
.notas__btn:hover, .notas__btn.is-activo { background: var(--accent-soft); color: var(--accent); }

.notas__alta {
  display: flex; align-items: center; gap: .5rem; margin: 0 .6rem .4rem;
  padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-muted);
}
.notas__alta:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.notas__alta[hidden] { display: none; }
.notas__alta input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .9rem; }

.notas__lista { list-style: none; margin: 0; padding: .1rem .3rem .5rem; overflow-y: auto; overscroll-behavior: contain; }
.notas__item {
  display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .5rem;
  border-radius: var(--radius-sm);
}
.notas__item + .notas__item { border-top: 1px solid var(--hairline); }
.notas__item:hover { background: var(--accent-soft); }
.notas__check { margin-top: .2rem; flex-shrink: 0; cursor: pointer; }
.notas__cuerpo { flex: 1; min-width: 0; }
.notas__texto { font-size: .9rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.notas__meta { font-size: .72rem; color: var(--text-faint); margin-top: .15rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .4rem; }
.notas__item.is-hecha .notas__texto { text-decoration: line-through; color: var(--text-muted); }
.notas__item.is-hecha { opacity: .72; }
.notas__item.is-archivada .notas__meta { color: var(--warning); }
.notas__borrar {
  border: 0; background: transparent; color: var(--text-faint); padding: .1rem .25rem;
  border-radius: 6px; opacity: 0; transition: opacity .12s;
}
.notas__item:hover .notas__borrar, .notas__borrar:focus { opacity: 1; }
.notas__borrar:hover { color: var(--danger); }
@media (hover: none) { .notas__borrar { opacity: .7; } }
.notas__editor {
  width: 100%; resize: vertical; font: inherit; color: var(--text); background: var(--surface-1);
  border: 1px solid var(--accent-line); border-radius: 6px; padding: .2rem .35rem; outline: 0;
}
.notas__vacio { padding: .4rem .8rem .9rem; font-size: .85rem; color: var(--text-faint); text-align: center; }
.notas__vacio[hidden] { display: none; }

/* Categorías: tag con el color de la categoría (--tag) */
.notas__tag {
  --tag: var(--text-muted);
  display: inline-flex; align-items: center; gap: .25rem; max-width: 100%;
  padding: 0 .45rem; height: 18px; border-radius: 9px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--tag) 14%, transparent);
  color: color-mix(in srgb, var(--tag) 82%, var(--text));
  font-size: .68rem; font-weight: 600; line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.notas__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tag); flex-shrink: 0; }
button.notas__tag:hover { border-color: color-mix(in srgb, var(--tag) 45%, transparent); }
.notas__tag--vacio { background: transparent; color: var(--text-faint); padding: 0 .2rem; opacity: 0; order: 2; }
.notas__tag--vacio::before { display: none; }
.notas__item:hover .notas__tag--vacio, .notas__tag--vacio:focus { opacity: 1; }
@media (hover: none) { .notas__tag--vacio { opacity: .7; } }
:root[data-theme="dark"] .notas__tag { color: color-mix(in srgb, var(--tag) 60%, #fff); }

.notas__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.notas__cat-sel {
  border: 0; background: transparent; color: var(--text-muted); padding: 0 .1rem;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0;
}
.notas__cat-sel:hover { background: var(--accent-soft); color: var(--accent); }

.notas__pop {
  position: fixed; z-index: 1046; width: 230px; padding: .35rem;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.notas__pop[hidden] { display: none; }
.notas__pop-lista { max-height: 220px; overflow-y: auto; }
.notas__pop-op, .notas__pop-nueva {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--text); font-size: .85rem;
  padding: .35rem .5rem; border-radius: 6px;
}
.notas__pop-op:hover, .notas__pop-nueva:hover { background: var(--accent-soft); }
.notas__pop-op.is-actual { font-weight: 600; }
.notas__pop-op.is-actual::after { content: '\F26E'; font-family: bootstrap-icons; margin-left: auto; color: var(--accent); }
.notas__pop-op .bi { color: var(--text-faint); font-size: .8rem; width: 10px; }
.notas__pop-nueva { color: var(--accent); border-top: 1px solid var(--hairline); margin-top: .2rem; border-radius: 0 0 6px 6px; }
.notas__pop-nueva[hidden], .notas__pop-form[hidden] { display: none; }
.notas__pop-form { display: flex; flex-direction: column; gap: .45rem; padding: .4rem .3rem .2rem; border-top: 1px solid var(--hairline); margin-top: .2rem; }
.notas__swatches { display: flex; flex-wrap: wrap; gap: .3rem; }
.notas__swatch {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; position: relative;
}
.notas__swatch.is-actual { border-color: var(--surface-1); box-shadow: 0 0 0 2px var(--text); }
.notas__swatch--libre { display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); font-size: .7rem; overflow: hidden; }
.notas__swatch--libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Convivencia con otros flotantes de la esquina */
body.notas-on #notiToastContainer { bottom: calc(1rem + 52px) !important; }
body.plan-sel-on .notas { --nota-bottom: 5.5rem; }
@media (max-width: 575.98px) {
  body.plan-sel-on .notas { --nota-bottom: 11.5rem; }
}

/* ----- Listado general de notas ----- */
.notas-lst__texto { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 42ch; }
.notas-lst__texto.is-hecha { text-decoration: line-through; color: var(--text-muted); }

.notas-hist__nota { padding: .7rem .8rem; margin-bottom: 1rem; border-radius: var(--radius-sm);
  background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.notas-hist { list-style: none; margin: 0; padding: 0 0 0 .4rem; border-left: 2px solid var(--border); }
.notas-hist__ev { display: flex; gap: .7rem; padding: .45rem 0 .45rem .2rem; position: relative; }
.notas-hist__ev > .bi {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  margin-left: -1.05rem; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-muted); font-size: .8rem;
}
.notas-hist__ev--creada > .bi, .notas-hist__ev--restaurada > .bi { color: var(--accent); border-color: var(--accent-line); }
.notas-hist__ev--hecha > .bi { color: var(--success); }
.notas-hist__ev--eliminada > .bi { color: var(--danger); }
.notas-hist__detalle { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.notas-cats { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.notas-cats__fila { display: flex; align-items: center; gap: .4rem; border-radius: var(--radius-sm); transition: background .3s; }
.notas-cats__fila.is-ok { background: var(--success-soft); }
.notas-cats__fila--nueva { padding-top: .6rem; border-top: 1px solid var(--hairline); }
.notas-cats__color { width: 32px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); flex-shrink: 0; cursor: pointer; }

/* Inventario: desglose del stock por lugar físico (alertas, ficha).
   Chips chicos y apagados: el total es el dato principal, el reparto lo
   acompaña. Un lugar en cero se ve más tenue; uno en negativo, en rojo. */
.stock-desglose { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin-top: .3rem; }
.stock-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
  font-size: .7rem; line-height: 1.2; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
}
.stock-chip b { color: var(--text); font-weight: 600; }
.stock-chip--cero { opacity: .55; }
.stock-chip--neg, .stock-chip--neg b { color: var(--danger); border-color: rgba(192,57,43,.28); }
/* Listado: dónde está el stock, en una línea de texto debajo del total. */
.stock-donde { margin-top: .3rem; font-size: .72rem; line-height: 1.3; color: var(--text-muted); }
.stock-donde__neg { color: var(--danger); }
.stock-fila { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; }
.stock-fila--cero { color: var(--text-muted); }
.stock-fila--total { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .5rem; font-weight: 600; }

/* Presupuesto · Financiación: selector de plantilla y guardado inline */
.fin-plantilla { flex: 0 1 320px; min-width: 220px; }
.fin-guardar { width: auto; flex: 1 1 380px; max-width: 520px; }
@media (max-width: 575.98px) {
  .fin-plantilla, .fin-guardar { flex-basis: 100%; max-width: none; }
}

/* ===== Modal de cierre: fotos de la atención (paso Evolución) =========
   En táctil el recuadro abre la cámara; en la compu, drag & drop. */
.cierre-drop {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 1.3rem 1rem;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cierre-drop .bi { font-size: 1.8rem; display: block; margin-bottom: .25rem; }
.cierre-drop:hover, .cierre-drop:focus-visible, .cierre-drop.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  outline: none;
}
.cierre-drop.is-lleno { opacity: .5; pointer-events: none; }
.cierre-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  margin-top: .6rem;
}
.cierre-fotos:empty { display: none; }
.cierre-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.cierre-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cierre-foto__pdf {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: .4rem; font-size: .7rem; color: var(--text-muted); text-align: center;
  word-break: break-all;
}
.cierre-foto__pdf .bi { font-size: 1.8rem; color: var(--danger); }
.cierre-foto__quitar {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.cierre-foto__quitar:hover { background: var(--danger); }