/* =====================================================================
   ARMONIX — Sistema de diseño del producto
   IBM Plex Sans + Mono · radio máx 6px · sin gradientes · panel denso.
   ===================================================================== */

:root {
  /* Marca */
  --azul:        #0078E4;
  --teal:        #00A89C;
  --marino:      #002454;
  /* Estructura */
  --negro:       #111418;
  --blanco:      #FFFFFF;
  --gris-0:      #FAFBFC;
  --gris-1:      #F2F4F7;
  --gris-2:      #E4E7EC;
  --gris-3:      #CDD3DC;
  --gris-4:      #98A2B3;
  --gris-5:      #667085;
  --texto:       #1A1F26;
  --texto-tenue: #667085;
  /* Estados */
  --ok:          #0E9F6E;
  --warn:        #C77700;
  --error:       #D92D20;
  --ok-bg:       #E6F4EC;
  --warn-bg:     #FBF1E0;
  --error-bg:    #FBE9E7;
  /* Métricas */
  --radio:       10px;
  --radio-sm:    7px;
  --radio-lg:    14px;
  --borde:       1px solid var(--gris-2);
  --borde-fuerte:1px solid var(--gris-3);
  /* Sombras suaves en capas (modernización) */
  --sombra:      0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sombra-md:   0 2px 4px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.08);
  --sombra-lg:   0 10px 28px rgba(16,24,40,.14), 0 3px 8px rgba(16,24,40,.08);
  /* Gradientes sutiles de marca */
  --grad-marino: linear-gradient(135deg, #013a7a 0%, #002454 100%);
  --grad-azul:   linear-gradient(135deg, #1f8cee 0%, #0066c4 100%);
  --grad-teal:   linear-gradient(135deg, #14b9ac 0%, #008f85 100%);
  --grad-pagina: radial-gradient(1200px 600px at 100% -5%, rgba(0,120,228,.06), transparent 60%),
                 radial-gradient(900px 500px at -5% 110%, rgba(0,168,156,.06), transparent 55%);
  /* Movimiento */
  --trans:       .18s cubic-bezier(.4, 0, .2, 1);
  --topbar-h:    52px;
  --nav-w:       210px;
  --fuente:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:        'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* El atributo hidden oculta poniendo display:none… pero CUALQUIER display del
   CSS le gana, y entonces el elemento sigue ahí, invisible, tragándose todos
   los clics. Pasó con el velo de las guías: al cerrarlas el sistema parecía
   colgado. Aquí se le devuelve la última palabra, para toda la aplicación. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--texto);
  background: var(--gris-1);
  background-image: var(--grad-pagina);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

code, .mono, .num { font-family: var(--mono); }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; color: var(--marino); }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }

/* ── Layout shell ──────────────────────────────────────────── */
.app { min-height: 100vh; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  /* Barrido de marca: la barra nace en blanco bajo el logotipo y va virando
     al azul hasta el marino del extremo derecho. Así el logo se apoya sobre
     blanco sin necesidad de una placa recortada detrás, que se veía pegada.
     Las paradas están puestas para que cada texto caiga en una zona con
     contraste suficiente: la sección sobre el blanco, el usuario y «Salir»
     sobre el azul oscuro. */
  background: linear-gradient(90deg,
      #ffffff 0%, #ffffff 16%, #d6e8fa 32%, var(--azul) 52%, var(--marino) 88%);
  color: #fff;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem; z-index: 50;
  box-shadow: 0 2px 10px rgba(0,36,84,.18);
}
.topbar .brand { display: flex; align-items: center; flex: none; }
.topbar .brand:hover { text-decoration: none; }
/* El logotipo ya incluye el nombre de la clínica: sin texto al lado, sin caja. */
.topbar .brand-logo { height: 38px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: .82rem; opacity: .9; }
.topbar .user b { color: #fff; }
.topbar .pill {
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  padding: .25rem .6rem; border-radius: var(--radio-sm); font-size: .78rem;
}

.nav {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--nav-w);
  background: var(--blanco); border-right: var(--borde);
  overflow-y: auto; padding: .5rem 0; z-index: 40;
}
.nav .grupo { padding: .5rem 1rem .25rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gris-4); font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem; color: var(--texto); font-size: .86rem;
  border-left: 3px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans), padding-left var(--trans);
}
.nav a:hover { background: var(--gris-1); text-decoration: none; padding-left: 1.15rem; }
.nav a.activo { border-left-color: var(--azul);
  background: linear-gradient(90deg, rgba(0,120,228,.12), rgba(0,120,228,0) 80%);
  color: var(--marino); font-weight: 600; }
.nav a .ic { width: 17px; height: 17px; flex: none; color: var(--gris-5); display: inline-flex;
  transition: color var(--trans), transform var(--trans); }
.nav a:hover .ic { transform: scale(1.08); }
.nav a.activo .ic { color: var(--azul); }
.ic svg { width: 100%; height: 100%; display: block; }
/* Breadcrumb de sección en la barra superior */
/* La sección vive sobre la parte clara del barrido: tinta oscura, no blanca. */
.topbar .crumb-top { display: flex; align-items: center; gap: .4rem; color: var(--marino);
  font-size: .88rem; font-weight: 600; padding-left: .7rem; margin-left: .4rem;
  border-left: 1px solid rgba(0,36,84,.16); }
.topbar .crumb-top .ic { width: 16px; height: 16px; display: inline-flex; color: var(--teal); }

.main {
  margin-left: var(--nav-w); margin-top: var(--topbar-h);
  padding: 1.25rem 1.5rem; min-height: calc(100vh - var(--topbar-h));
}

.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-head .spacer { flex: 1; }

/* ── Panel / card ──────────────────────────────────────────── */
.panel {
  background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  transition: box-shadow var(--trans), transform var(--trans);
}
.panel:hover { box-shadow: var(--sombra-lg); }
.panel .panel-head {
  padding: .6rem .9rem; border-bottom: 0;
  background: var(--grad-marino); border-radius: var(--radio) var(--radio) 0 0;
  font-weight: 600; font-size: .88rem; color: #fff;
  display: flex; align-items: center; gap: .5rem;
  letter-spacing: .01em;
}
.panel .panel-head .ic { color: var(--teal); width: 16px; height: 16px; display: inline-flex; }
.panel .panel-head .btn { color: var(--texto); }

/* Ayuda por panel: un signo de interrogación pegado al título que abre la guía
   en la lámina de ESE panel. Se va al extremo derecho de la cabecera y vive
   discreto hasta que se lo mira; en una pantalla con ocho paneles, ocho iconos
   gritando serían ruido. */
.panel .panel-head .ayuda-panel {
  margin-left: auto; flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; opacity: .75;
  transition: opacity var(--trans), background var(--trans), transform var(--trans);
}
.panel .panel-head .ayuda-panel svg { width: 15px; height: 15px; }
.panel .panel-head .ayuda-panel:hover { opacity: 1; background: rgba(255, 255, 255, .28); }
.panel .panel-head .ayuda-panel:active { transform: scale(.92); }
.panel .panel-head .ayuda-panel:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
/* En una cabecera que ya lleva .spacer, el margin-left:auto sobra. */
.panel .panel-head .spacer ~ .ayuda-panel { margin-left: 0; }
/* Variante de cabecera con acento de color (teal/azul) por tipo de panel */
.panel.acento-teal .panel-head { background: var(--grad-teal); }
.panel.acento-azul .panel-head { background: var(--grad-azul); }
.panel .panel-body { padding: .9rem; }
.panel .panel-body.dense { padding: 0; }

/* Regla del sistema: los items de una grilla toman SU altura de contenido (no se estiran
   a la del más alto), evitando los espacios en blanco. Las tarjetas KPI sí igualan altura. */
.grid { display: grid; gap: 1rem; align-items: start; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid.cols-2 { grid-template-columns: 1fr; } }

/* Columnas independientes: cada columna apila sus paneles sin huecos entre filas. */
.fcols { display: flex; gap: 1rem; align-items: flex-start; }
.fcols > .fcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) { .fcols { flex-direction: column; } }

/* Masonry: empaqueta varios paneles en columnas sin espacios entre filas. */
.masonry { column-count: 2; column-gap: 1rem; }
.masonry > .panel { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 1rem; }
@media (max-width: 900px) { .masonry { column-count: 1; } }

/* ── KPI cards ─────────────────────────────────────────────── */
.kpi { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  padding: .9rem 1rem; align-self: stretch; box-shadow: var(--sombra-md);
  position: relative; overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
  animation: popIn .4s var(--trans) both; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }
/* Barra de acento superior con gradiente (reemplaza el border-top plano). */
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-azul); }
.kpi .label { font-size: .72rem; color: var(--texto-tenue); text-transform: uppercase;
  letter-spacing: .04em; }
.kpi .valor { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--marino);
  margin-top: .25rem; }
.kpi .sub { font-size: .75rem; color: var(--texto-tenue); margin-top: .15rem; }
.kpi.azul::before { background: var(--grad-azul); }
.kpi.teal::before { background: var(--grad-teal); }
.kpi.marino::before { background: var(--grad-marino); }
.kpi.warn::before { background: linear-gradient(135deg, #e09100, var(--warn)); }
.kpi.error::before { background: linear-gradient(135deg, #ef5b50, var(--error)); }
.kpi.ok::before { background: linear-gradient(135deg, #18b67e, var(--ok)); }

/* ── Tablas ────────────────────────────────────────────────── */
table.tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.tabla th {
  text-align: left; padding: .5rem .75rem; background: var(--gris-0);
  border-bottom: var(--borde-fuerte); color: var(--gris-5);
  font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  position: sticky; top: 0;
}
table.tabla td { padding: .5rem .75rem; border-bottom: var(--borde); transition: background var(--trans); }
table.tabla tbody tr { transition: background var(--trans); }
table.tabla tbody tr:hover td { background: rgba(0,120,228,.05); }
table.tabla tr.clickable { cursor: pointer; }
table.tabla td.num, table.tabla th.num { text-align: right; font-family: var(--mono); }
/* Aparición escalonada de filas al renderizar (suave, se reinicia en cada repintado). */
table.tabla tbody tr { animation: rowIn .32s ease both; }
table.tabla tbody tr:nth-child(1){animation-delay:.02s} table.tabla tbody tr:nth-child(2){animation-delay:.05s}
table.tabla tbody tr:nth-child(3){animation-delay:.08s} table.tabla tbody tr:nth-child(4){animation-delay:.11s}
table.tabla tbody tr:nth-child(5){animation-delay:.14s} table.tabla tbody tr:nth-child(6){animation-delay:.17s}
table.tabla tbody tr:nth-child(7){animation-delay:.2s}  table.tabla tbody tr:nth-child(8){animation-delay:.23s}
table.tabla tbody tr:nth-child(n+9){animation-delay:.25s}

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  font-family: var(--fuente); font-size: .84rem; font-weight: 500;
  padding: .45rem .85rem; border-radius: var(--radio);
  border: 1px solid var(--gris-3); background: var(--blanco); color: var(--texto);
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans), transform var(--trans), filter var(--trans);
}
.btn:hover { background: var(--gris-1); border-color: var(--gris-4); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,120,228,.3); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* Botones de color: gradiente sutil + leve elevación al pasar el cursor. */
.btn.primary { background: var(--grad-azul); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(0,120,228,.3); }
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,120,228,.36); }
.btn.teal { background: var(--grad-teal); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(0,168,156,.3); }
.btn.teal:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,168,156,.36); }
.btn.ok { background: linear-gradient(135deg, #18b67e, var(--ok)); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(14,159,110,.3); }
.btn.ok:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,159,110,.36); }
.btn.danger { background: var(--blanco); border-color: var(--error); color: var(--error); }
.btn.danger:hover { background: var(--error); color: #fff; border-color: var(--error); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217,45,32,.32); }
.btn.sm { padding: .32rem .6rem; font-size: .78rem; }
.btn.block { width: 100%; }
.btn .ic { width: 15px; height: 15px; display: inline-flex; flex: none; }

/* ── Formularios ───────────────────────────────────────────── */
.campo { margin-bottom: .8rem; }
.campo label { display: block; font-size: .76rem; font-weight: 600; color: var(--gris-5);
  margin-bottom: .25rem; }
.campo .hint { font-size: .72rem; color: var(--texto-tenue); margin-top: .2rem; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search],
input[type=tel], input[type=url], select, textarea {
  width: 100%; font-family: var(--fuente); font-size: .86rem;
  padding: .45rem .55rem; border: 1px solid var(--gris-3); border-radius: var(--radio-sm);
  background: var(--blanco); color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,120,228,.12);
}
textarea { min-height: 70px; resize: vertical; }

/* Controles nativos → lenguaje Armonix (sin estilos por defecto del sistema). */
input[type=checkbox], input[type=radio] { accent-color: var(--azul); width: auto; cursor: pointer; }
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 15px;
}
select:disabled { color: var(--gris-5); background-color: var(--gris-1); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: .85; }
input[type=file] { font-size: .82rem; padding: .3rem .4rem; }
input[type=file]::file-selector-button {
  font-family: var(--fuente); font-size: .8rem; font-weight: 500; cursor: pointer;
  margin-right: .6rem; padding: .35rem .7rem; border-radius: var(--radio);
  border: 1px solid var(--gris-3); background: var(--gris-0); color: var(--texto);
  transition: background .12s, border-color .12s;
}
input[type=file]::file-selector-button:hover { background: var(--gris-1); border-color: var(--gris-4); }

/* Combobox: input con datalist → flecha + popup propio (el nativo no se posiciona bien
   dentro de overlays con transform). El despliegue real lo controla App (combo) en JS. */
input[list], input[data-list] {
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 15px;
}
.combo-pop {
  position: fixed; z-index: 300; background: var(--blanco);
  border: var(--borde-fuerte); border-radius: var(--radio-sm);
  box-shadow: 0 6px 20px rgba(16,24,40,.18); max-height: 240px; overflow-y: auto;
  min-width: 140px; display: none;
}
.combo-pop.show { display: block; }
.combo-pop .opt { padding: .4rem .6rem; font-size: .85rem; cursor: pointer; border-bottom: 1px solid var(--gris-1); white-space: nowrap; }
.combo-pop .opt:last-child { border-bottom: 0; }
.combo-pop .opt:hover, .combo-pop .opt.activo { background: var(--azul); color: #fff; }
.combo-pop .vacio { padding: .5rem .6rem; color: var(--texto-tenue); font-size: .8rem; }
.form-row { display: grid; gap: .8rem; }
.form-row.c2 { grid-template-columns: 1fr 1fr; }
.form-row.c3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.checkrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; font-size: .85rem; }
.checkrow input { width: auto; }

/* Formulario presentado como tarjeta con secciones (patrón reutilizable). */
.form-card { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden; }
.form-card > .fc-body { padding: 1.1rem 1.15rem .4rem; }
.form-sec { margin-bottom: 1.15rem; }
.form-sec > .sec-tit { display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: var(--grad-marino); padding: .45rem .75rem;
  border-radius: var(--radio-sm); margin-bottom: .85rem; box-shadow: var(--sombra); }
.form-sec > .sec-tit .ic { width: 15px; height: 15px; color: var(--teal); display: inline-flex; }
.form-actions { display: flex; gap: .5rem; align-items: center; justify-content: flex-end;
  padding: .7rem 1.15rem; background: var(--gris-0); border-top: var(--borde);
  position: sticky; bottom: -1rem; }
.form-actions .spacer { flex: 1; }

/* ── Badges / estados ──────────────────────────────────────── */
.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: var(--radio-sm);
  font-size: .72rem; font-weight: 600; line-height: 1.4;
  background: var(--gris-1); color: var(--gris-5); border: 1px solid var(--gris-2);
}
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: #BFE3CE; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: #EAD7AE; }
.badge.error { background: var(--error-bg); color: var(--error); border-color: #F1C9C4; }
.badge.azul { background: #E4F1FD; color: var(--azul); border-color: #BFDDF8; }
.badge.teal { background: #E0F4F2; color: var(--teal); border-color: #B8E4DF; }

/* ── Toolbar / filtros ─────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .search { flex: 1; min-width: 200px; }

/* Chips de filtro rápido (toggle) */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem;
  border: 1px solid var(--gris-3); background: var(--blanco); color: var(--gris-5);
  border-radius: var(--radio); font-size: .78rem; font-weight: 500; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; }
.chip:hover { background: var(--gris-1); border-color: var(--gris-4); }
.chip.activo { background: var(--marino); border-color: var(--marino); color: #fff; font-weight: 600; }
.chip .n { font-family: var(--mono); opacity: .75; font-size: .72rem; }

/* Botones de acción solo-icono dentro de tablas densas */
.btn.ico { padding: .3rem .4rem; }
.btn.ico .ic { width: 16px; height: 16px; display: inline-flex; }

/* Columna de acciones en tablas: botones apilados y SIMÉTRICOS (mismo ancho). */
.acciones { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 124px; }
.acciones .btn { width: 100%; justify-content: center; }
.acciones a.btn { text-decoration: none; }

/* ── Overlays (drawers/modales apilados) ───────────────────── */
.overlay-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,40,.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 100; opacity: 0; transition: opacity var(--trans);
  pointer-events: none;   /* invisible y SIN capturar clics cuando está oculto */
}
.overlay-backdrop.show { opacity: 1; pointer-events: auto; }
.overlay {
  position: fixed; top: 0; right: 0; bottom: 0; width: 720px; max-width: 94vw;
  background: var(--blanco); z-index: 101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease;
  border-left: var(--borde-fuerte); box-shadow: -2px 0 8px rgba(16,24,40,.12);
}
.overlay.show { transform: translateX(0); }
.overlay.ancho { width: 980px; }
/* Variante modal compacto y centrado (para mini-acciones como "+ agregar"). */
.overlay.mini {
  top: 14vh; right: auto; bottom: auto; left: 50%;
  width: 440px; max-width: 92vw; height: auto; max-height: 72vh;
  border: var(--borde-fuerte); border-radius: var(--radio);
  box-shadow: 0 8px 30px rgba(16,24,40,.28);
  transform: translateX(-50%) scale(.96); opacity: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.overlay.mini.show { transform: translateX(-50%) scale(1); opacity: 1; }
.overlay.mini .overlay-body { flex: 0 1 auto; }
.overlay-head {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem;
  border-bottom: var(--borde); background: var(--gris-0);
}
.overlay-head .crumb { font-size: .76rem; color: var(--texto-tenue); }
.overlay-head .titulo { font-weight: 600; color: var(--marino); font-size: .98rem; }
.overlay-head .spacer { flex: 1; }
.overlay-head .cerrar {
  border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--gris-5); padding: .1rem .4rem; border-radius: var(--radio-sm);
}
.overlay-head .cerrar:hover { background: var(--gris-2); }
.overlay-body { flex: 1; overflow-y: auto; padding: 1rem; background: var(--gris-1); }
/* En el modal compacto el cuerpo va sobre blanco (formularios cortos sin paneles). */
.overlay.mini .overlay-body { background: var(--blanco); }
.overlay-foot { padding: .65rem .9rem; border-top: var(--borde); display: flex; gap: .5rem;
  justify-content: flex-end; background: var(--gris-0); }

/* ── Toast / avisos ────────────────────────────────────────── */
#toast-wrap { position: fixed; bottom: 1rem; right: 1rem; z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: var(--grad-marino); color: #fff; padding: .65rem .95rem; border-radius: var(--radio);
  font-size: .85rem; box-shadow: var(--sombra-lg); min-width: 220px;
  border-left: 3px solid var(--teal);
  animation: toastIn .28s cubic-bezier(.2,.9,.3,1.2) both;
  transition: opacity .25s, transform .25s;
}
.toast.ok { background: linear-gradient(135deg, #18b67e, var(--ok)); border-left-color: #b9f0d8; }
.toast.error { background: linear-gradient(135deg, #ef5b50, var(--error)); border-left-color: #ffd2cd; }

/* ── Login ─────────────────────────────────────────────────── */
.login-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: var(--marino) url('../img/bg_web.jpg') center center / cover no-repeat fixed; }
/* Velo marino sobre la foto para legibilidad y contraste de la tarjeta (sin gradientes). */
.login-wrap::before { content: ''; position: absolute; inset: 0; background: rgba(0,36,84,.55); }
.login-card { position: relative; z-index: 1; overflow: hidden;
  background: #fff; width: 372px; max-width: 92vw; border-radius: var(--radio-lg);
  padding: 2rem 1.8rem 1.7rem; box-shadow: 0 18px 55px rgba(0,0,0,.45);
  animation: popIn .5s var(--trans) both; }
/* Barra de acento superior con gradiente de marca. */
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-azul); }
.login-card.shake { animation: shake .4s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.login-card .campo label { font-size: .78rem; }
.login-card input { padding: .55rem .65rem; }
.login-card .btn.block { margin-top: .6rem; padding: .62rem; font-size: .92rem; }
@media (max-width: 640px) {
  .login-wrap { background-image: url('../img/bg_mobil.jpg'); background-attachment: scroll; }
}
/* Logo en placa de esquinas redondeadas. */
/* Comparación de versiones de la historia clínica: lo quitado vs lo agregado. */
.box.diff { white-space: pre-wrap; line-height: 1.55; }
.box.diff del { background: #fdecea; color: #a8071a; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.box.diff ins { background: #eaf7ea; color: #237804; text-decoration: none; border-radius: 3px; padding: 0 2px; }

/* Logotipo horizontal de la marca: caja ancha, la imagen manda su proporción. */
.login-card .login-logo { display: block; width: 100%; max-width: 250px; height: auto;
  object-fit: contain; margin: .1rem auto 1.1rem; }
.login-card .logo { font-size: 1.4rem; font-weight: 700; color: var(--marino); margin-bottom: .15rem; text-align: center; letter-spacing: .01em; }
.login-card .logo b { color: var(--teal); }
.login-card .sub { color: var(--texto-tenue); font-size: .82rem; margin-bottom: 1.35rem; text-align: center; }

/* ── Utilidades ────────────────────────────────────────────── */
.muted { color: var(--texto-tenue); }
.tenue { color: var(--gris-4); }
.right { text-align: right; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: .5rem; } .mb2 { margin-bottom: 1rem; }
.flex { display: flex; align-items: center; gap: .5rem; }
.flex .spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.empty { padding: 2rem; text-align: center; color: var(--texto-tenue); }
hr { border: 0; border-top: var(--borde); margin: 1rem 0; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: .35rem .75rem; font-size: .86rem; }
.dl dt { color: var(--texto-tenue); }
.dl dd { margin: 0; }

/* ── Agenda (grilla por recurso) ───────────────────────────── */
.agenda-grid { display: flex; background: var(--blanco); border: var(--borde);
  border-radius: var(--radio); overflow: hidden; }
.ag-gutter { width: 52px; flex: none; border-right: var(--borde); background: var(--gris-0); }
.ag-gutter .ag-head { height: 38px; }
.ag-gutter .ag-time { height: 36px; font-size: .68rem; color: var(--texto-tenue);
  text-align: right; padding-right: 6px; transform: translateY(-7px); font-family: var(--mono); }
.ag-cols { display: flex; flex: 1; overflow-x: auto; }
.ag-col { flex: 1; min-width: 150px; border-right: var(--borde); position: relative; }
.ag-col:last-child { border-right: 0; }
.ag-col .ag-head { height: 38px; display: flex; align-items: center; gap: .4rem;
  padding: 0 .5rem; border-bottom: var(--borde-fuerte); font-size: .8rem; font-weight: 600;
  color: var(--marino); position: sticky; top: 0; background: var(--gris-0); z-index: 2; }
.ag-col .ag-head .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ag-body { position: relative; }
.ag-slot { height: 36px; border-bottom: 1px dashed var(--gris-2); cursor: pointer; }
.ag-slot:hover { background: var(--gris-0); }
.ag-slot.hora-llena { background: transparent; }
.ag-cita { position: absolute; left: 3px; right: 3px; border-radius: 4px; padding: 2px 5px;
  font-size: .72rem; color: #fff; overflow: hidden; cursor: pointer; border-left: 3px solid rgba(0,0,0,.25);
  box-shadow: var(--sombra); line-height: 1.2; }
.ag-cita .h { font-family: var(--mono); font-size: .66rem; opacity: .9; }
.ag-cita .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cita.est-cancelado, .ag-cita.est-no_asistio { opacity: .5; text-decoration: line-through; }
.estado-badge { display:inline-block; padding:.1rem .45rem; border-radius:var(--radio-sm);
  font-size:.7rem; font-weight:600; }

/* ── Barra de progreso ─────────────────────────────────────── */
.progbar { background: var(--gris-2); border-radius: 999px; height: 8px; overflow: hidden; }
.progbar > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }

/* ── Picker (buscador desplegable) ─────────────────────────── */
.pick-wrap { position: relative; }
.pick-results { border: var(--borde); border-radius: var(--radio-sm); margin-top: 2px;
  max-height: 220px; overflow-y: auto; background: var(--blanco); }
.pick-results:empty { display: none; }
.pick-item { padding: .4rem .55rem; cursor: pointer; font-size: .85rem; border-bottom: var(--borde); }
.pick-item:hover { background: var(--gris-1); }
.pick-item:last-child { border-bottom: 0; }

/* Campo con botón "+ agregar a lista" al lado */
.con-add { display: flex; gap: 4px; align-items: stretch; }
.con-add > input, .con-add > select { flex: 1; }

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: var(--borde-fuerte); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs .tab { padding: .5rem .85rem; cursor: pointer; font-size: .85rem; font-weight: 500;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio-sm) var(--radio-sm) 0 0; color: var(--gris-5); }
.tabs .tab:hover { background: var(--gris-1); }
.tabs .tab.activo { background: var(--blanco); border-color: var(--gris-2); color: var(--marino); font-weight: 600;
  margin-bottom: -1px; }
.tab-panel { display: none; }
.tab-panel.activo { display: block; }

/* ── Odontograma ───────────────────────────────────────────── */
.odo-toolbar { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.odo-estado { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem;
  border: 1px solid var(--gris-3); border-radius: var(--radio-sm); cursor: pointer; font-size: .76rem; background: #fff; }
.odo-estado .sw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); }
.odo-estado.activo { border-color: var(--marino); box-shadow: 0 0 0 2px rgba(0,36,84,.15); font-weight: 600; }
.odo-arcadas { display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 1rem; background: var(--gris-0); border: var(--borde); border-radius: var(--radio); overflow-x: auto; }
.odo-arcada { display: flex; gap: 6px; }
.odo-cuad { display: flex; gap: 2px; }
.odo-cuad + .odo-cuad { border-left: 2px solid var(--gris-3); padding-left: 6px; margin-left: 2px; }
.odo-diente { width: 30px; }
.odo-diente .num { text-align: center; font-size: .58rem; font-family: var(--mono); color: var(--gris-5); margin-bottom: 1px; }
.odo-grid { display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px);
  width: 28px; height: 28px; position: relative; margin: 0 auto; }
.odo-sup { border: 1px solid var(--gris-3); background: #fff; cursor: pointer; }
.odo-sup:hover { outline: 1px solid var(--azul); z-index: 2; }
.odo-sup.v { grid-area: 1 / 2 / 2 / 3; }
.odo-sup.m { grid-area: 2 / 1 / 3 / 2; }
.odo-sup.o { grid-area: 2 / 2 / 3 / 3; }
.odo-sup.d { grid-area: 2 / 3 / 3 / 4; }
.odo-sup.l { grid-area: 3 / 2 / 4 / 3; }
.odo-whole { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1rem; }
/* Diente anatómico SVG (corona + raíces) */
/* Los dos cuadritos bajo cada pieza, como en el formulario 033 del MSP:
   RECESIÓN (mm) a la izquierda y MOVILIDAD (grado 0-3) a la derecha. */
.odo-rm { display: flex; gap: 2px; justify-content: center; margin: 1px 0 2px; }
.odo-rm input, .odo-rm span {
  width: 18px; height: 16px; padding: 0; text-align: center;
  font-family: var(--mono); font-size: .6rem; line-height: 15px;
  border: 1px solid var(--gris-3); border-radius: 2px; background: var(--blanco);
  color: var(--texto); display: block;
}
.odo-rm input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 2px rgba(0,120,228,.18); }
.odo-rm input.rec:not(:placeholder-shown), .odo-rm input.rec[value]:not([value=""]) { border-bottom-width: 2px; }
.odo-rm .mov { border-color: var(--gris-4); }
.odo-rm.ro span { color: var(--texto-tenue); background: var(--gris-1); }
.odo-rm input.error { border-color: var(--error); }

/* El diente se agranda respecto al original (30×50). Un molar reparte su ancho
   entre tres raíces, así que con 30 px cada banda de raíz quedaba en 8 px y era
   casi imposible acertarla. La rejilla ya se desplaza en horizontal, así que
   crecer no rompe nada. */
.odo-tooth { display: block; overflow: visible; width: 40px; height: 66px; }
.odo-tooth .odo-surf { cursor: pointer; stroke: var(--gris-4); stroke-width: .6; }
.odo-tooth .odo-surf:hover { stroke: var(--azul); stroke-width: 1.5; }
.odo-tooth .odo-root { stroke: var(--gris-4); stroke-width: .7; }
/* Raíz clicable solo cuando el criterio activo es radicular (clase .root-on en el diente).
   La zona pulsable es un rectángulo invisible que cubre toda la raíz: el triángulo
   del dibujo se estrecha hasta cero en la punta y era imposible de acertar. Al
   pasar por encima se resalta la banda entera, para que se vea dónde va a caer. */
.odo-tooth .odo-rootclick { cursor: default; fill: transparent; }
.odo-tooth.root-on .odo-rootclick { cursor: pointer; }
.odo-tooth.root-on .odo-rootclick:hover {
  fill: rgba(0,120,228,.18);
  stroke: var(--azul); stroke-width: 1.2;
}

/* ── Alertas clínicas / resumen 360 ────────────────────────── */
.alertas-clinicas { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  padding: .55rem .8rem; margin-bottom: 1rem; font-size: .82rem; line-height: 1.9; }
.alertas-clinicas b { color: var(--marino); margin-right: .35rem; }
.resumen-360 { margin-bottom: 1rem; }
.resumen-360 .kpi { padding: .55rem .7rem; }

/* ── Periodontograma ───────────────────────────────────────── */
.perio-tabla { width: 100%; border-collapse: collapse; font-size: .76rem; }
.perio-tabla th, .perio-tabla td { border: 1px solid var(--gris-2); padding: 2px 3px; text-align: center; }
.perio-tabla th { background: var(--gris-0); font-size: .68rem; color: var(--gris-5); }
.perio-tabla td .pd { width: 30px; padding: .15rem; text-align: center; font-family: var(--mono); }
.perio-tabla input.pd.alto { background: var(--error-bg); color: var(--error); font-weight: 600; }
.perio-tabla td.pieza { font-family: var(--mono); font-weight: 600; background: var(--gris-0); }

/* =====================================================================
   MOVIMIENTO — animaciones, entrada de página, carga (skeletons/spinner)
   ===================================================================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes contentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: translateY(10px) scale(.98); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* Entrada suave del contenido principal (una vez por carga de página). */
.main { animation: contentIn .35s ease both; }
.page-head { animation: fadeInUp .3s ease both; }

/* Spinner de marca */
.spinner { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--gris-2);
  border-top-color: var(--azul); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
.spinner.lg { width: 34px; height: 34px; border-width: 3px; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 2rem; color: var(--texto-tenue); font-size: .85rem; }

/* Esqueletos de carga (shimmer) */
.skel { position: relative; background: var(--gris-1);
  background-image: linear-gradient(90deg, var(--gris-1) 0px, var(--gris-2) 40px, var(--gris-1) 80px);
  background-size: 600px 100%; border-radius: var(--radio-sm); animation: shimmer 1.2s linear infinite; }
.skel-line { height: 12px; margin: .4rem 0; }
.skel-line.w-40 { width: 40%; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; }
.skel-row { display: grid; grid-template-columns: 1fr 1fr 1fr 80px; gap: .75rem; padding: .55rem .75rem;
  border-bottom: var(--borde); align-items: center; }
.skel-row .skel { height: 14px; }
.skel-card { height: 78px; border-radius: var(--radio); }

/* Pulso para chips/badges que cambian (uso opcional vía .pulse) */
.pulse { animation: popIn .35s var(--trans) both; }

/* Accesibilidad: respetar a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   MANUAL DE USUARIO — página de ayuda (vistosa, con color, sin mucho blanco)
   ===================================================================== */
.man-hero { background: var(--grad-marino); color: #fff; border-radius: var(--radio-lg);
  padding: 1.6rem 1.8rem; box-shadow: var(--sombra-lg); position: relative; overflow: hidden;
  margin-bottom: 1rem; }
.man-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,168,156,.35), transparent 70%); }
.man-hero h1 { color: #fff; font-size: 1.6rem; margin: 0 0 .35rem; position: relative; }
.man-hero p { color: rgba(255,255,255,.85); margin: 0; max-width: 60ch; position: relative; }
.man-hero .badge { background: rgba(255,255,255,.16); color: #fff; border: 0; }

/* Barra de índice (chips de navegación, pegajosa) */
.man-toc { position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 10;
  display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem; margin-bottom: 1rem;
  background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.man-toc a { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; font-size: .78rem;
  font-weight: 500; color: var(--marino); background: var(--gris-1); border: 1px solid var(--gris-2);
  border-radius: 999px; transition: all var(--trans); }
.man-toc a:hover { background: var(--azul); color: #fff; border-color: var(--azul); text-decoration: none; transform: translateY(-1px); }

/* Tarjeta de módulo */
.man-card { background: var(--blanco); border: var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md); overflow: hidden; margin-bottom: 1.2rem;
  scroll-margin-top: calc(var(--topbar-h) + 64px); animation: fadeInUp .4s ease both; }
.man-card > .mh { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; color: #fff; }
.man-card > .mh .ic { width: 24px; height: 24px; display: inline-flex; opacity: .95; }
.man-card > .mh .t { font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; }
.man-card > .mh .num { margin-left: auto; font-family: var(--mono); font-size: 1.4rem; font-weight: 700; opacity: .35; }
.man-card.c0 > .mh { background: var(--grad-marino); }
.man-card.c1 > .mh { background: var(--grad-azul); }
.man-card.c2 > .mh { background: var(--grad-teal); }
.man-body { padding: 1.1rem 1.2rem; background:
  linear-gradient(180deg, rgba(0,120,228,.03), transparent 120px); }

/* Bloques internos */
.man-lead { font-size: .95rem; line-height: 1.5; color: var(--texto); margin: 0 0 1rem; }
.man-sub { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--azul); margin: 1rem 0 .55rem; }
.man-sub::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: var(--azul); }
.man-card.c2 .man-sub { color: var(--teal); } .man-card.c2 .man-sub::before { background: var(--teal); }

/* "Se vincula con" → fila: chip del módulo + por qué */
.man-vinc { display: flex; gap: .55rem; align-items: baseline; margin: .35rem 0; font-size: .86rem; line-height: 1.4; }
.man-vinc .man-link { flex: none; }
.man-vinc .por { color: var(--texto-tenue); }
/* "Se vincula con" → chips enlazables */
.man-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.man-link { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; font-size: .78rem;
  font-weight: 500; color: var(--marino); background: #E4F1FD; border: 1px solid #BFDDF8;
  border-radius: 999px; transition: all var(--trans); cursor: pointer; }
.man-link:hover { background: var(--azul); color: #fff; border-color: var(--azul); text-decoration: none; }
.man-link b { font-weight: 700; }
.man-link .por { font-weight: 400; opacity: .85; }

/* Pasos numerados */
.man-steps { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.man-steps li { counter-increment: paso; position: relative; padding: .45rem 0 .45rem 2.4rem;
  font-size: .9rem; line-height: 1.45; border-bottom: 1px dashed var(--gris-2); }
.man-steps li:last-child { border-bottom: 0; }
.man-steps li::before { content: counter(paso); position: absolute; left: 0; top: .4rem;
  width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center;
  background: var(--grad-azul); color: #fff; border-radius: 50%; font-size: .8rem; font-weight: 700;
  font-family: var(--mono); box-shadow: 0 2px 5px rgba(0,120,228,.3); }
.man-card.c2 .man-steps li::before { background: var(--grad-teal); box-shadow: 0 2px 5px rgba(0,168,156,.3); }

/* Ejemplo y tips (callouts con color, nada de blanco) */
.man-ejemplo { background: linear-gradient(180deg, #E0F4F2, #EAF8F6); border: 1px solid #B8E4DF;
  border-left: 4px solid var(--teal); border-radius: var(--radio); padding: .7rem .9rem; font-size: .9rem;
  line-height: 1.5; color: #114b46; margin-top: .4rem; }
.man-ejemplo .et { display: block; font-weight: 700; color: var(--teal); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.man-tips { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.man-tips li { background: var(--warn-bg); border: 1px solid #EAD7AE; border-radius: var(--radio-sm);
  padding: .45rem .65rem; font-size: .82rem; color: #6b4e00; }
.man-tips li::before { content: '★ '; color: var(--warn); }

/* =====================================================================
   HISTORIAL DE INTERVENCIONES (línea de tiempo por paciente)
   ===================================================================== */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--gris-2); }
.iv-item { position: relative; margin-bottom: .9rem; animation: fadeInUp .3s ease both; }
.iv-item::before { content: ''; position: absolute; left: -22px; top: 8px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--grad-azul); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gris-2); }
.iv-item.doc-nv::before { background: var(--grad-teal); }
.iv-item.sin-doc::before { background: var(--gris-4); }
.iv-card { background: var(--blanco); border: var(--borde); border-left: 3px solid var(--azul);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; transition: box-shadow var(--trans); }
.iv-card:hover { box-shadow: var(--sombra-md); }
.iv-item.doc-nv .iv-card { border-left-color: var(--teal); }
.iv-item.sin-doc .iv-card { border-left-color: var(--gris-4); }
.iv-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
  background: linear-gradient(90deg, rgba(0,120,228,.06), transparent); border-bottom: var(--borde); flex-wrap: wrap; }
.iv-head .fecha { font-weight: 600; color: var(--marino); font-size: .9rem; }
.iv-head .total { margin-left: auto; font-family: var(--mono); font-weight: 600; color: var(--marino); }
.iv-body { padding: .55rem .8rem .7rem; }
.iv-sub { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-5); margin: .55rem 0 .3rem; }
.iv-sub:first-child { margin-top: 0; }
.iv-proc { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; padding: .12rem 0; }
.iv-proc .od { color: var(--texto-tenue); font-size: .8rem; }
.iv-proc .pr { margin-left: auto; font-family: var(--mono); }
.iv-mats { display: flex; flex-wrap: wrap; gap: .3rem; }
.iv-mat { background: var(--gris-1); border: 1px solid var(--gris-2); border-radius: 999px; padding: .12rem .55rem; font-size: .76rem; }
.iv-mat .q { font-family: var(--mono); color: var(--teal); font-weight: 600; }
.iv-nomat { color: var(--texto-tenue); font-size: .8rem; }

/* =====================================================================
   GRÁFICAS / BI (contenedores de charts.js)
   ===================================================================== */
.chart { width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; font-size: .78rem; color: var(--texto-tenue); }
.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
/* Panel de gráfica con título compacto */
.chart-card .panel-body { padding: .8rem .9rem; }
.chart-title { font-size: .82rem; font-weight: 600; color: var(--marino); margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.chart-title .muted { font-weight: 400; }
/* Alertas accionables del dashboard */
.alert-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.alert-tile { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--radio);
  border: var(--borde); border-left: 4px solid var(--gris-4); background: var(--blanco); box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto); transition: transform var(--trans), box-shadow var(--trans); }
.alert-tile:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); text-decoration: none; }
.alert-tile .n { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.alert-tile .t { font-size: .78rem; color: var(--texto-tenue); }
.alert-tile.ok { border-left-color: var(--ok); } .alert-tile.ok .n { color: var(--ok); }
.alert-tile.warn { border-left-color: var(--warn); } .alert-tile.warn .n { color: var(--warn); }
.alert-tile.error { border-left-color: var(--error); } .alert-tile.error .n { color: var(--error); }
.alert-tile.azul { border-left-color: var(--azul); } .alert-tile.azul .n { color: var(--azul); }
.alert-tile.teal { border-left-color: var(--teal); } .alert-tile.teal .n { color: var(--teal); }

/* Flujo general (intro) */
.man-flujo { background: var(--blanco); border: var(--borde); border-left: 4px solid var(--teal);
  border-radius: var(--radio); box-shadow: var(--sombra-md); padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; }
.man-flujo h2 { color: var(--marino); }
.man-flujo ul { margin: .4rem 0; padding-left: 1.1rem; } .man-flujo li { margin: .3rem 0; line-height: 1.5; }
.man-flujo p { line-height: 1.55; margin: .5rem 0; }

/* =====================================================================
   RESPONSIVE — capa móvil y tableta
   ---------------------------------------------------------------------
   Regla de oro de esta sección: el ESCRITORIO NO CAMBIA. Todo lo de aquí
   vive dentro de media queries, de mayor a menor ancho.

   Cortes:
     ≤ 900px  el menú lateral deja de ser fijo y pasa a ser un cajón.
              Es el punto donde 210px de menú ya cuestan demasiado.
     ≤ 640px  teléfono: se aprieta la densidad y se apilan los formularios.
     ≤ 380px  teléfonos pequeños: último ajuste de tamaños.
   ===================================================================== */

/* El botón de menú solo existe en móvil; en escritorio no se muestra. */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  /* ── El menú pasa a ser un cajón que entra desde la izquierda ──────── */
  /* Va sobre la zona blanca del barrido, así que la tinta es oscura. */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; margin-left: -.35rem;
    background: rgba(0,36,84,.07); border: 0; border-radius: var(--radio-sm);
    color: var(--marino); cursor: pointer; transition: background var(--trans);
  }
  .nav-toggle:hover { background: rgba(0,36,84,.14); }
  .nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,120,228,.35); }
  .nav-toggle .ic { width: 21px; height: 21px; display: inline-flex; }

  .nav {
    transform: translateX(-100%);
    transition: transform var(--trans);
    box-shadow: var(--sombra-lg);
    width: 264px;                 /* algo más ancho: el dedo necesita más sitio que el ratón */
    z-index: 60;                  /* por encima del fondo oscurecido */
  }
  body.nav-abierto .nav { transform: translateX(0); }

  .nav-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(16,24,40,.45); z-index: 55;
    opacity: 0; transition: opacity var(--trans);
  }
  body.nav-abierto .nav-backdrop { opacity: 1; }

  /* Objetivos táctiles cómodos dentro del cajón. */
  .nav a { padding: .7rem 1rem; font-size: .9rem; }
  .nav a:hover { padding-left: 1rem; }   /* sin desplazamiento al tocar */

  /* El contenido recupera TODO el ancho: aquí estaba el problema de fondo. */
  .main { margin-left: 0; padding: 1rem; }

  /* La barra superior no puede con todo: se queda lo imprescindible.
     Sede, usuario y rol se muestran al pie del cajón (.nav-user). */
  .topbar { gap: .6rem; padding: 0 .75rem;
    /* La zona blanca se alarga para cubrir hamburguesa, logo y sección; el
       azul entra al final, justo donde queda «Salir». */
    background: linear-gradient(90deg,
        #ffffff 0%, #ffffff 60%, var(--azul) 84%, var(--marino) 100%); }
  .topbar .user { display: none; }
  /* Las redes tampoco caben aquí; su sitio en móvil es el pie del cajón. */
  .topbar .redes-barra { display: none; }
  .topbar .crumb-top { border-left: 0; margin-left: 0; padding-left: 0; }
  .topbar .brand-logo { height: 34px; }
}

@media (max-width: 640px) {
  /* ── Barra superior mínima: logotipo, sección y salir ──────────────── */
  .topbar .crumb-top { font-size: .9rem; font-weight: 600; }
  .topbar .brand-logo { height: 30px; }

  .main { padding: .8rem .75rem; }

  /* ── Encabezado de página: el título arriba, las acciones debajo ───── */
  .page-head { flex-wrap: wrap; gap: .5rem .7rem; }
  .page-head h1 { font-size: 1.15rem; }
  .page-head .spacer { flex-basis: 100%; height: 0; }   /* fuerza el salto de línea */
  .page-head .sub { flex-basis: 100%; order: 10; }

  /* ── Formularios: una columna. Es la regla que más arregla de golpe ── */
  .form-row.c2, .form-row.c3, .form-row.c4 { grid-template-columns: 1fr; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .dl dt { font-size: .76rem; margin-top: .4rem; }

  /* Un campo con min-width propio no debe empujar la pantalla. */
  .campo, .toolbar .search { min-width: 0 !important; }

  /* ── Nada de zoom automático al enfocar en iOS ─────────────────────── */
  /* Safari amplía la página si el campo tiene menos de 16px. Se fija el
     tamaño real en píxeles para que no ocurra. */
  input, select, textarea { font-size: 16px; }

  /* ── Botones: cómodos para el dedo y que envuelvan ─────────────────── */
  .flex { flex-wrap: wrap; }
  .btn { padding: .5rem .8rem; min-height: 40px; }
  .btn.sm { padding: .42rem .7rem; min-height: 34px; font-size: .8rem; }
  .toolbar { flex-wrap: wrap; }

  /* La columna de acciones deja de ser una torre estrecha y se pone en fila. */
  .acciones { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .acciones .btn { width: auto; }

  /* ── Texto que no rompe la caja ────────────────────────────────────── */
  /* Ojo: NO se aplica a las celdas de tabla. Ahí, partir palabras hace que
     una columna estrecha rompa el nombre letra por letra. Las tablas se
     resuelven con desplazamiento horizontal, más abajo. */
  .box, .panel-body > p, .hint, .alertas-clinicas { overflow-wrap: anywhere; }

  .panel .panel-body { padding: .75rem; }
  .kpi { padding: .7rem .8rem; }
  .kpi .valor { font-size: 1.3rem; }
}

/* ── Tablas en pantalla estrecha ──────────────────────────────────────
   Se descartó convertir cada fila en una tarjeta: exigiría un data-label
   por celda en las 38 vistas, y buena parte de las tablas se construyen
   desde JavaScript. En su lugar la tabla conserva su forma y se desplaza
   en horizontal DENTRO de su panel, así la página nunca se mueve de lado.
   El :has() evita crear un contenedor de scroll en paneles sin tabla. */
@media (max-width: 900px) {
  .panel .panel-body:has(table.tabla),
  .tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* que no arrastre la página al llegar al borde */
  }
  /* Sin ancho mínimo a la fuerza: con nowrap en las celdas la tabla ya pide
     exactamente lo que necesita. Si además se han ocultado columnas puede
     caber entera, y forzarle 34rem la obligaría a desplazarse sin motivo
     dejando los botones de acción fuera de la vista. */

  /* Aviso visual de que hay más tabla a la derecha. */
  .panel .panel-body:has(table.tabla) { background-attachment: local, local, scroll, scroll;
    background-image:
      linear-gradient(to right, var(--blanco), rgba(255,255,255,0)),
      linear-gradient(to left,  var(--blanco), rgba(255,255,255,0)),
      linear-gradient(to right, rgba(16,24,40,.10), rgba(255,255,255,0)),
      linear-gradient(to left,  rgba(16,24,40,.10), rgba(255,255,255,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 22px 100%, 22px 100%, 11px 100%, 11px 100%; }

  /* Las celdas no se estrangulan: mejor desplazar que partir palabras. */
  table.tabla th, table.tabla td { white-space: nowrap; }
  /* Salvo las que sí deben respirar (nombres largos, descripciones). */
  table.tabla td.wrap, table.tabla th.wrap { white-space: normal; min-width: 9rem; }

  /* Los botones de solo icono se vuelven cuadrados: cuatro acciones por fila
     ocupaban 247px con el relleno de móvil y empujaban la tabla fuera. */
  .btn.ico { padding: .5rem; width: 40px; justify-content: center; }
  table.tabla td.right { white-space: nowrap; }

  /* Columnas marcadas como prescindibles: desaparecen en móvil. */
  table.tabla th.col-opcional, table.tabla td.col-opcional { display: none; }
}

@media (max-width: 380px) {
  .main { padding: .7rem .6rem; }
  .page-head h1 { font-size: 1.05rem; }
  table.tabla { font-size: .8rem; }
  table.tabla th, table.tabla td { padding: .45rem .55rem; }
}

/* ── Componentes con geometría propia ─────────────────────────────────
   Odontograma, periodontograma y agenda tienen medidas clínicas fijas: un
   diente mide lo que mide. No se encogen — se desplazan dentro de su caja,
   que es como funcionan en cualquier ficha clínica de tableta. */
@media (max-width: 900px) {
  /* Pestañas de la historia clínica: una sola fila que se desliza, en vez de
     cuatro filas apiladas que empujan el contenido fuera de la pantalla. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: none; white-space: nowrap; }

  /* Odontograma: 16 piezas de 30px por arcada no caben en 375px. */
  .odo-arcadas {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    align-items: flex-start; padding-bottom: .35rem;
  }
  .odo-arcada { flex: none; }

  /* Periodontograma: tabla de medidas por pieza, misma solución. */
  .perio-wrap, .panel .panel-body:has(.perio-tabla) {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .perio-tabla { min-width: 44rem; }

  /* Agenda: la rejilla ya sabe desplazarse (.ag-cols). Solo se estrecha la
     columna para que quepan dos sillones y se afina la regleta horaria. */
  .ag-cols { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .ag-col { min-width: 132px; }
  .ag-gutter { width: 44px; }
}

/* ── Overlays a pantalla completa en el teléfono ──────────────────────
   Un cajón de 720px con 6% de margen deja una franja inútil al lado. En
   móvil ocupa toda la pantalla, que es lo que se espera de una app. */
@media (max-width: 640px) {
  .overlay, .overlay.ancho {
    width: 100%; max-width: 100%;
    border-radius: 0;
  }
  .overlay-head { padding: .7rem .8rem; position: sticky; top: 0; z-index: 2; background: var(--blanco); }
  .overlay-head .titulo { font-size: .92rem; }
  .overlay-head .crumb { display: none; }        /* la miga sobra cuando ocupa todo */
  .overlay-head .cerrar { width: 40px; height: 40px; font-size: 1.4rem; }
  .overlay-body { padding: .8rem .75rem; }
  .overlay-foot { position: sticky; bottom: 0; background: var(--blanco); flex-wrap: wrap; }
  .overlay-foot .btn { flex: 1 1 auto; justify-content: center; }

  /* El modal centrado sí conserva su forma, pero con menos margen. */
  .overlay.mini { width: 94vw; max-width: 94vw; max-height: 80vh; }

  /* Índice pegajoso del manual: que no se coma media pantalla. */
  .man-toc { max-height: 38vh; overflow-y: auto; }
  .man-hero { padding: 1.1rem 1rem; }
  .man-hero h1 { font-size: 1.25rem; }
}

/* ── Filas de acciones que deben poder envolver ───────────────────────
   .flex y .panel-head son display:flex sin envoltura. Con etiquetas largas
   ("Registrar aprobación del paciente" mide ~230px) el botón se sale de la
   caja y deja de poder pulsarse. El truco del .spacer a ancho completo
   fuerza el salto: el bloque de botones baja entero a su propia línea. */
@media (max-width: 760px) {
  .flex { flex-wrap: wrap; }
  .flex > .spacer { flex-basis: 100%; height: 0; }
  .panel .panel-head { flex-wrap: wrap; }
  .panel .panel-head .spacer { flex-basis: 100%; height: 0; }
  .badge { white-space: normal; }

  /* Un <label>&nbsp;</label> puesto solo para alinear deja un hueco absurdo
     cuando la rejilla se apila. */
  .campo label:empty { display: none; }
}

/* ── Gráficas legibles ────────────────────────────────────────────────
   Las gráficas SÍ escalan (tienen viewBox), y ese es justo el problema: se
   dibujan sobre un lienzo de 640 unidades con textos de 9,5 a 11,5. En un
   contenedor de 327px el factor es 0,51 y los ejes quedan a ~5px, ilegibles.
   Se les fija un ancho mínimo y se desplazan dentro del panel: a 560px el
   factor sube a 0,875 y la tipografía vuelve a leerse. */
@media (max-width: 760px) {
  .chart { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .chart > svg { min-width: 560px; }
}

/* ── Tarjetas KPI: el importe no se puede recortar ────────────────────
   .kpi tiene overflow:hidden, así que un importe largo se cortaba en seco,
   sin puntos suspensivos. Un dato financiero a medias es peor que uno feo. */
@media (max-width: 600px) {
  .kpi .valor { font-size: 1.15rem; overflow-wrap: anywhere; }
  .kpi .btn { width: 100%; white-space: normal; }
}

/* ── Columna de acciones dentro de las tablas ─────────────────────────
   Reservaba 124px fijos aun en pantallas donde ese ancho es el 30% del total. */
@media (max-width: 900px) {
  .acciones { min-width: 0; }
  .acciones .btn { min-height: 38px; }
  /* Los secuenciales de 9 dígitos no tienen dónde partir por sí solos. */
  table.tabla td.mono { overflow-wrap: anywhere; }
}

/* ── Pie del cajón: sede, usuario y rol ───────────────────────────────
   La barra superior no puede con ellos en móvil, pero el dato no se pierde:
   se muestra al final del menú, que es donde se busca "quién soy". */
.nav-user { display: none; }
@media (max-width: 900px) {
  .nav-user {
    display: block; margin-top: .75rem; padding: .75rem 1rem;
    border-top: var(--borde); color: var(--texto-tenue); font-size: .8rem;
  }
  .nav-user b { color: var(--marino); }
  .nav-user .sede { display: block; margin-bottom: .15rem; }
}

/* ── Odontograma con el dedo ──────────────────────────────────────────
   Una superficie dental mide ~9px. Con un ratón se acierta; con un dedo se
   marca la pieza equivocada, y en una historia clínica eso es un error de
   registro. En pantallas táctiles se agranda el diente: el mapa ya se
   desplaza en horizontal, así que el espacio extra no cuesta nada.
   Se usa (pointer: coarse), no el ancho: lo que importa es si hay dedo o
   ratón, no cuántos píxeles tiene la pantalla. */
@media (pointer: coarse) {
  .odo-tooth { width: 46px; height: 76px; }
  .odo-diente { width: 46px; }
  .odo-diente .num { font-size: .7rem; }
  .odo-grid { grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(3, 14px);
    width: 42px; height: 42px; }
  .odo-tooth .odo-surf { stroke-width: .4; }
  /* Los selectores de estado también son objetivos táctiles. */
  .odo-estado { padding: .45rem .7rem; font-size: .82rem; }
}

/* ── Errores de formulario ────────────────────────────────────────────
   El aviso va pegado al campo, no en una esquina: quien rellena está
   mirando el campo, no la pantalla entera. Se marca el borde, se escribe
   el motivo debajo y el foco viaja hasta ahí. */
.campo.con-error > input,
.campo.con-error > select,
.campo.con-error > textarea,
.campo.con-error .con-add > input,
.campo.con-error .pick-wrap > input {
  border-color: var(--error);
  background: #fffbfb;
  box-shadow: 0 0 0 3px rgba(217,45,32,.12);
}
.campo.con-error > label { color: var(--error); }

.campo-msg {
  display: flex; align-items: flex-start; gap: .3rem;
  margin-top: .3rem; font-size: .78rem; line-height: 1.35; color: var(--error);
  animation: msgIn .18s ease both;
}
/* Signo de admiración dibujado con CSS: no depende de ninguna fuente de iconos. */
.campo-msg::before {
  content: '!';
  flex: none; width: 14px; height: 14px; margin-top: .5px;
  border-radius: 50%; background: var(--error); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 14px; text-align: center;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* Aviso general: para lo que el servidor rechaza y no corresponde a un campo
   concreto (un horario ocupado, una caja cerrada, un saldo insuficiente). */
.form-error {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--error-bg); border: 1px solid var(--error);
  border-left-width: 4px; border-radius: var(--radio-sm);
  padding: .6rem .75rem; margin-bottom: .9rem;
  font-size: .84rem; line-height: 1.45; color: #8a1a12;
  animation: msgIn .2s ease both;
}
.form-error::before {
  content: '!';
  flex: none; width: 17px; height: 17px;
  border-radius: 50%; background: var(--error); color: #fff;
  font-size: .74rem; font-weight: 700; line-height: 17px; text-align: center;
}

/* =====================================================================
   AGENDA CLÍNICA
   Dos piezas: la BRÚJULA (mini-mes + resumen + pendientes) y el LIENZO
   (día / semana / lista). Lo caro visualmente se reserva para lo que
   informa: la carga de cada día, el estado de cada cita y la hora actual.
   ===================================================================== */

.ag-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 1rem; align-items: start; }

/* ── Selector de vista (Día / Semana / Lista) ───────────────────────── */
.segmented { display: inline-flex; background: var(--gris-1); border: var(--borde);
  border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; cursor: pointer;
  padding: .34rem .85rem; border-radius: 999px; font: inherit; font-size: .82rem;
  color: var(--texto-tenue); transition: all var(--trans); }
.segmented button:hover { color: var(--marino); }
.segmented button.activo { background: var(--blanco); color: var(--marino); font-weight: 600;
  box-shadow: var(--sombra); }

/* ── Brújula ────────────────────────────────────────────────────────── */
.ag-brujula { display: flex; flex-direction: column; gap: .8rem;
  position: sticky; top: calc(var(--topbar-h) + 1rem); }
.ag-brujula-toggle { display: none; }

.minical { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-md); padding: .7rem; }
.minical-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.minical-mes { flex: 1; text-align: center; font-weight: 600; font-size: .84rem; color: var(--marino);
  text-transform: capitalize; }
.minical-nav { border: 0; background: transparent; cursor: pointer; width: 26px; height: 26px;
  border-radius: 50%; color: var(--gris-5); font-size: 1.05rem; line-height: 1;
  transition: background var(--trans), color var(--trans); }
.minical-nav:hover { background: var(--gris-1); color: var(--marino); }

.minical-dow, .minical-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.minical-dow span { text-align: center; font-size: .62rem; font-weight: 600; color: var(--gris-4);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: .2rem; }

.mc-dia { position: relative; border: 0; background: transparent; cursor: pointer;
  aspect-ratio: 1; border-radius: var(--radio-sm); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: .74rem; color: var(--texto);
  transition: background var(--trans), color var(--trans), transform var(--trans); }
.mc-dia.vacio { pointer-events: none; }
.mc-dia:hover { background: var(--gris-1); transform: translateY(-1px); }
.mc-dia .n { line-height: 1; }
/* Barra de carga del día: su ancho es la ocupación REAL relativa al mes. */
.mc-dia .carga { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 62%; height: 3px; border-radius: 2px; background: var(--gris-2); overflow: hidden; }
.mc-dia .carga i { display: block; height: 100%; background: var(--grad-azul); border-radius: 2px; }
.mc-dia .alerta { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--warn); }
.mc-dia.con-citas { font-weight: 600; color: var(--marino); }
.mc-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--teal); }
.mc-dia.hoy .n { color: var(--teal); font-weight: 700; }
.mc-dia.sel { background: var(--grad-azul); color: #fff; }
.mc-dia.sel .n { color: #fff; }
.mc-dia.sel .carga { background: rgba(255,255,255,.35); }
.mc-dia.sel .carga i { background: #fff; }
.mc-dia.sel.hoy { box-shadow: inset 0 0 0 1.5px #fff; }

/* Tarjetas de resumen y pendientes */
.ag-tarjeta { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: .7rem .8rem; }
.ag-tarjeta-tit { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris-4); margin-bottom: .5rem; }
.ag-cifras { display: flex; gap: .8rem; }
.ag-cifras div { display: flex; flex-direction: column; }
.ag-cifras b { font-family: var(--mono); font-size: 1.05rem; color: var(--marino); line-height: 1.15; }
.ag-cifras span { font-size: .68rem; color: var(--texto-tenue); }
.ag-barra-carga { height: 5px; border-radius: 3px; background: var(--gris-2); margin-top: .6rem; overflow: hidden; }
.ag-barra-carga i { display: block; height: 100%; background: var(--grad-teal); border-radius: 3px;
  transition: width .5s cubic-bezier(.4,0,.2,1); }
.ag-ok { font-size: .78rem; color: var(--ok); }

.ag-pend + .ag-pend { margin-top: .6rem; }
.ag-pend-tit { font-size: .74rem; font-weight: 600; color: var(--marino);
  display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.ag-pend-tit b { margin-left: auto; font-family: var(--mono); }
.ag-pend.warn  .ag-pend-tit b { color: var(--warn); }
.ag-pend.teal  .ag-pend-tit b { color: var(--teal); }
.ag-pend.error .ag-pend-tit b { color: var(--error); }
.ag-pend-fila { display: flex; gap: .4rem; width: 100%; border: 0; background: transparent;
  text-align: left; cursor: pointer; padding: .25rem .3rem; border-radius: var(--radio-sm);
  font: inherit; font-size: .76rem; color: var(--texto); transition: background var(--trans); }
.ag-pend-fila:hover { background: var(--gris-1); }
.ag-pend-fila .h { font-family: var(--mono); color: var(--texto-tenue); flex: none; }
.ag-pend-fila .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Lienzo ─────────────────────────────────────────────────────────── */
.ag-lienzo { min-width: 0; }
.ag-barra { display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem; flex-wrap: wrap; }
.ag-titulo { font-weight: 600; color: var(--marino); font-size: .95rem; margin-left: .4rem; }
.ag-select { width: auto; }
.ag-verpor { font-size: .78rem; }

.ag-col .ag-head .n { margin-left: auto; font-family: var(--mono); font-size: .7rem;
  color: var(--texto-tenue); background: var(--gris-1); border-radius: 999px; padding: 0 .38rem; }
.ag-head.sem { justify-content: flex-start; gap: .3rem; font-size: .78rem; }
.ag-col.es-hoy .ag-head { background: rgba(0,168,156,.09); color: var(--marino); }

/* Hueco libre: se insinúa al pasar por encima, no grita todo el rato. */
.ag-slot { position: relative; transition: background var(--trans); }
.ag-slot:hover { background: rgba(0,120,228,.07); box-shadow: inset 0 0 0 1px rgba(0,120,228,.25); cursor: copy; }

/* Bloque de cita: barra de color a la izquierda según su estado. */
.ag-cita { position: absolute; overflow: hidden; cursor: pointer;
  border-radius: var(--radio-sm); padding: 3px 6px 3px 8px; color: var(--marino);
  background: color-mix(in srgb, var(--col) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--col) 34%, #fff);
  border-left: 3px solid var(--col);
  box-shadow: var(--sombra);
  transition: transform var(--trans), box-shadow var(--trans), filter var(--trans);
  animation: popIn .22s ease both;
}
.ag-cita:hover { transform: translateY(-1px) scale(1.012); box-shadow: var(--sombra-md); z-index: 5; }
.ag-cita-h { font-family: var(--mono); font-size: .66rem; color: var(--texto-tenue);
  display: flex; align-items: center; gap: .25rem; line-height: 1.2; }
.ag-cita-n { font-size: .76rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cita-m { font-size: .68rem; color: var(--texto-tenue); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ag-cita .sigs { margin-left: auto; display: inline-flex; gap: 2px; }
.ag-cita .sigs i { font-style: normal; font-size: .56rem; font-weight: 700; line-height: 12px;
  min-width: 12px; height: 12px; padding: 0 2px; border-radius: 3px; text-align: center; color: #fff; }
.ag-cita .s-al { background: var(--error); }
.ag-cita .s-de { background: var(--warn); }
.ag-cita .s-nu { background: var(--azul); }
.ag-cita.est-cancelado, .ag-cita.est-no_asistio { opacity: .6; }
.ag-cita.est-cancelado .ag-cita-n { text-decoration: line-through; }

/* ── Lo que ya había en Google Calendar ─────────────────────────────────
   Se dibuja rayado y sin relleno sólido, a propósito: es un recordatorio de
   que ese hueco está ocupado, no una cita del sistema. No tiene paciente, no
   se cobra y no se puede abrir. Que se distinga de un vistazo evita el error
   caro: tratar un compromiso personal como si fuera una cita clínica. */
.ag-gfranja { position: absolute; top: 0; bottom: 0; right: 0; width: 38%;
  border-left: 1px dashed var(--gris-3); background: rgba(102,112,133,.04); }
.ag-pista { position: absolute; inset: 0; }
.ag-body.con-gcal .ag-pista { right: 38%; }

.ag-gev { position: absolute; left: 3px; right: 3px; overflow: hidden;
  border-radius: var(--radio-sm); padding: 2px 5px; cursor: default;
  color: var(--texto-tenue);
  border: 1px dashed color-mix(in srgb, var(--col, #616161) 45%, #fff);
  border-left: 3px solid color-mix(in srgb, var(--col, #616161) 70%, #fff);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--col, #616161) 7%, #fff) 0 6px,
    color-mix(in srgb, var(--col, #616161) 12%, #fff) 6px 12px);
}
/* Cinta de los eventos de jornada completa: arriba del todo, como en Google. */
.ag-gtodo { position: absolute; top: 2px; left: 2px; right: 2px; z-index: 4;
  display: flex; flex-direction: column; gap: 2px; }
.ag-gchip { display: block; font-size: .66rem; font-weight: 600; line-height: 1.4;
  padding: 1px 5px; border-radius: 999px; color: var(--texto);
  background: color-mix(in srgb, var(--col, #616161) 18%, #fff);
  border: 1px dashed color-mix(in srgb, var(--col, #616161) 50%, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-gev-h { font-family: var(--mono); font-size: .62rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-gev-n { font-size: .72rem; font-weight: 600; line-height: 1.25; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lo que cae fuera de la franja horaria del cuadro (antes de las 07:00 o
   después de las 21:00). Se enuncia al pie para que no desaparezca sin más. */
.ag-gfuera { position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 4;
  display: flex; flex-direction: column; gap: 1px;
  border-top: 1px dashed var(--gris-3); padding-top: 2px; }
.ag-gfuera span { font-size: .64rem; color: var(--texto-tenue); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-gfuera b { font-family: var(--mono); font-weight: 600; }

.ag-col.es-gcal .ag-head { background: var(--gris-1); color: var(--texto-tenue); }
.ag-col.es-gcal .ag-head .dot.g { background: repeating-linear-gradient(135deg,
  var(--gris-3) 0 2px, var(--gris-2) 2px 4px); }
.ag-lista-fila.es-gcal { cursor: default; background: rgba(102,112,133,.035); }
.ag-lista-fila.es-gcal .pac { font-weight: 500; }

/* Interruptor para enseñar u ocultar esa capa. */
.ag-gcal-sw { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: .78rem; color: var(--texto-tenue); border: var(--borde);
  border-radius: 999px; padding: .18rem .6rem .18rem .45rem; background: var(--blanco);
  transition: color var(--trans), border-color var(--trans); }
.ag-gcal-sw:hover { color: var(--marino); border-color: var(--azul); }
.ag-gcal-sw input { width: auto; margin: 0; }

/* Línea de la hora actual: lo único que se mueve solo en la pantalla. */
.ag-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--error);
  z-index: 6; pointer-events: none; }
.ag-ahora span { position: absolute; left: 2px; top: -8px; background: var(--error); color: #fff;
  font-family: var(--mono); font-size: .58rem; font-weight: 600; padding: 1px 4px; border-radius: 3px; }

/* ── Vista de lista ─────────────────────────────────────────────────── */
.ag-lista-dia { background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-md); margin-bottom: .8rem; overflow: hidden; }
.ag-lista-cab { padding: .55rem .8rem; background: var(--grad-marino); color: #fff;
  font-weight: 600; font-size: .82rem;
  display: flex; align-items: center; gap: .5rem; }
.ag-lista-cab .n { margin-left: auto; font-family: var(--mono); background: rgba(255,255,255,.18);
  border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.ag-lista-fila { display: flex; gap: .7rem; align-items: flex-start; width: 100%;
  border: 0; border-bottom: var(--borde); border-left: 3px solid var(--col);
  background: var(--blanco); text-align: left; cursor: pointer; font: inherit;
  padding: .6rem .8rem; transition: background var(--trans); }
.ag-lista-fila:last-child { border-bottom: 0; }
.ag-lista-fila:hover { background: var(--gris-0); }
.ag-lista-fila .hora { font-family: var(--mono); font-weight: 600; color: var(--marino);
  display: flex; flex-direction: column; align-items: flex-start; flex: none; min-width: 3.4rem; }
.ag-lista-fila .hora small { font-weight: 400; color: var(--texto-tenue); font-size: .66rem; }
.ag-lista-fila .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ag-lista-fila .pac { font-weight: 600; color: var(--marino); font-size: .86rem; }
.ag-lista-fila .meta { font-size: .74rem; color: var(--texto-tenue); }
.ag-lista-fila .sigs { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .15rem; }
.ag-lista-fila .est { font-size: .72rem; font-weight: 600; flex: none; white-space: nowrap; }

/* ── Desplegable flotante (al posar el cursor) ──────────────────────── */
.ag-pop { position: fixed; z-index: 250; width: 268px; max-width: calc(100vw - 16px);
  background: var(--blanco); border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: .65rem .75rem; pointer-events: none;
  animation: popIn .14s ease both; }
.ag-pop .pop-fecha { font-weight: 600; color: var(--marino); font-size: .82rem; margin-bottom: .3rem; }
.ag-pop .pop-cifras { display: flex; gap: .55rem; flex-wrap: wrap; font-size: .72rem;
  color: var(--texto-tenue); padding-bottom: .4rem; border-bottom: var(--borde); margin-bottom: .4rem; }
.ag-pop .pop-cifras b { color: var(--marino); font-family: var(--mono); }
.ag-pop .pop-cifras .av { color: var(--warn); font-weight: 600; }
.ag-pop .pop-lista { list-style: none; margin: 0; padding: 0; }
.ag-pop .pop-lista li { display: flex; align-items: center; gap: .35rem; font-size: .74rem;
  padding: .1rem 0; }
.ag-pop .pop-lista li.anulada { opacity: .5; text-decoration: line-through; }
.ag-pop .pop-lista .pt { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ag-pop .pop-lista .h { font-family: var(--mono); color: var(--texto-tenue); flex: none; }
.ag-pop .pop-lista .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pop .pop-mas, .ag-pop .pop-vacio { font-size: .72rem; color: var(--texto-tenue); margin-top: .3rem; }
.ag-pop .pop-motivo { font-size: .76rem; margin-bottom: .25rem; }
.ag-pop .pop-meta { font-size: .72rem; color: var(--texto-tenue); }
.ag-pop .pop-sig { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 .25rem; }
.ag-pop .sig { font-size: .68rem; font-weight: 600; padding: .1rem .4rem; border-radius: 999px; }
.ag-pop .sig.alerta  { background: var(--error-bg); color: var(--error); }
.ag-pop .sig.deuda   { background: var(--warn-bg);  color: var(--warn); }
.ag-pop .sig.nueva   { background: rgba(0,120,228,.1); color: var(--azul); }
.ag-pop .sig.libre   { background: var(--gris-1); color: var(--texto-tenue); }
.ag-pop .sig.invit   { background: rgba(0,168,156,.12); color: var(--teal); }

/* Ficha de un evento de Google: se consulta, no se edita. */
.ag-pop .pop-motivo .et { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-tenue); margin-right: .25rem; }
.ag-pop .pop-desc { font-size: .74rem; line-height: 1.45; color: var(--texto);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10.5rem; overflow-y: auto;
  margin: .3rem 0; padding-left: .5rem; border-left: 2px solid var(--gris-2); }
.ag-pop .pop-gcal { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-top: .45rem; padding-top: .4rem; border-top: var(--borde);
  font-size: .68rem; color: var(--texto-tenue); }
.ag-pop .pop-gcal a { margin-left: auto; color: var(--azul); font-weight: 600;
  white-space: nowrap; }
/* Mientras flota siguiendo al cursor no recibe clics, para no estorbar; al
   fijarlo con un clic sí, que para eso lleva enlaces dentro. */
.ag-pop.fijo { pointer-events: auto; }

/* Se puede consultar: que el cursor lo diga. */
.ag-gev, .ag-gchip, .ag-gfuera span, .ag-lista-fila.es-gcal { cursor: help; }
.ag-gev:hover, .ag-gchip:hover, .ag-gfuera span:hover { filter: brightness(.97); }
.ag-gev:focus-visible, .ag-gchip:focus-visible, .ag-gfuera span:focus-visible,
.ag-lista-fila.es-gcal:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.ag-pop .sig.control { background: rgba(0,168,156,.1); color: var(--teal); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ag-layout { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* La brújula deja de robar ancho: pasa arriba y se despliega a voluntad. */
  .ag-layout { grid-template-columns: 1fr; }
  .ag-brujula { position: static; }
  .ag-brujula-toggle { display: block; }
  .ag-brujula > #ag-brujula-cuerpo { display: none; }
  .ag-layout.brujula-abierta .ag-brujula > #ag-brujula-cuerpo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-top: .8rem;
  }
  .ag-titulo { width: 100%; margin: .3rem 0 0; }
}
@media (max-width: 640px) {
  .segmented button { padding: .32rem .6rem; font-size: .78rem; }
  .ag-lista-fila .est { display: none; }   /* el color del borde ya lo dice */
  .ag-pop { width: calc(100vw - 24px); }
}

/* =====================================================================
   GUÍA ILUSTRADA DE CADA SECCIÓN
   Se abre sola la primera vez que se entra en una pantalla. La lámina
   superior lleva el dibujo (SVG en línea, con los colores de la marca);
   debajo, una idea por paso. Nunca más de cinco pasos.
   ===================================================================== */

.pill-ayuda { display: inline-flex; align-items: center; gap: .32rem; cursor: pointer;
  font: inherit; font-size: .78rem; line-height: 1; }
.pill-ayuda .ic { width: 15px; height: 15px; display: inline-flex; }
.pill-ayuda:hover { background: rgba(255,255,255,.24); }

.guia-fondo {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  /* Algo más denso de lo habitual a propósito: la guía puede abrirse encima
     de una capa ya abierta (la historia clínica), y tiene que quedar claro
     cuál de las dos manda. */
  background: rgba(0,36,84,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--trans);
}
.guia-fondo.abierta { opacity: 1; }

.guia {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--blanco); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg);
  transform: translateY(14px) scale(.985); transition: transform var(--trans);
}
.guia-fondo.abierta .guia { transform: none; }

.guia-x {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.7); color: var(--marino);
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background var(--trans);
}
.guia-x:hover { background: var(--blanco); }

/* Lámina del dibujo: fondo con el tinte de marca para que el SVG respire. */
.guia-lamina {
  background: linear-gradient(160deg, rgba(0,120,228,.09), rgba(0,168,156,.09));
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  padding: 1rem 1rem .4rem;
}
.guia-lamina svg { display: block; width: 100%; height: auto; }
.guia-lamina.entra svg { animation: guiaEntra .34s cubic-bezier(.4,0,.2,1) both; }
@keyframes guiaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.guia-cuerpo { padding: 1rem 1.2rem .2rem; }
.guia-seccion { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .3rem; }
.guia-titulo { font-size: 1.02rem; color: var(--marino); margin: 0 0 .4rem; }
.guia-texto { font-size: .86rem; line-height: 1.55; color: var(--texto); margin: 0; }
.guia-texto b { color: var(--marino); }

.guia-pie {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.2rem 1.1rem; flex-wrap: wrap;
}
.guia-pie .guia-nav { margin-left: auto; display: flex; gap: .4rem; }

.guia-puntos { display: flex; gap: .3rem; }
.guia-punto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--gris-3); cursor: pointer; transition: all var(--trans); }
.guia-punto:hover { background: var(--gris-4); }
.guia-punto.activo { background: var(--azul); width: 20px; border-radius: 4px; }

@media (max-width: 640px) {
  /* En el teléfono ocupa toda la pantalla: es más cómodo y se lee mejor. */
  .guia-fondo { padding: 0; align-items: stretch; }
  .guia { max-width: 100%; max-height: 100%; min-height: 100%; border-radius: 0;
    display: flex; flex-direction: column; }
  .guia-lamina { border-radius: 0; padding-top: 2.2rem; }
  .guia-cuerpo { flex: 1; }
  .guia-pie { position: sticky; bottom: 0; background: var(--blanco);
    border-top: var(--borde); padding: .75rem 1rem; }
  .guia-pie .btn { min-height: 40px; }
  /* «No volver a mostrar» pasa debajo para que los dos botones de avance
     queden juntos y al alcance del pulgar. */
  .guia-pie #guia-nunca { order: 3; flex-basis: 100%; }
  .guia-puntos { order: 1; }
  .guia-pie .guia-nav { order: 2; }
  .pill-ayuda .pill-txt { display: none; }   /* solo el icono, para que quepa */
}

/* ── Paleta de color de la cita ───────────────────────────────────────
   La doctora organiza su agenda por colores, y esta paleta es exactamente
   la que admite Google para sus eventos: así el color elegido aquí se ve
   igual en su teléfono. Se comporta como un grupo de opciones, no como
   botones sueltos. */
.paleta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

.paleta-op {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  border: 1px solid transparent; background: transparent; border-radius: 999px;
  padding: .2rem; font: inherit; font-size: .76rem; color: var(--texto-tenue);
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
.paleta-op:hover { transform: translateY(-1px); background: var(--gris-1); }
.paleta-op:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,120,228,.3); }
.paleta-op.activo { border-color: var(--marino); background: var(--gris-1); color: var(--marino); font-weight: 600; }

/* El punto de color. Objetivo táctil cómodo aun siendo pequeño el dibujo. */
.paleta-op .pt {
  width: 22px; height: 22px; border-radius: 50%; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
/* «Automático» = hereda el color del odontólogo: se dibuja a rayas para que se
   entienda que no es un color concreto, y se distinga sin depender del color. */
.paleta-op .pt.auto {
  background: repeating-linear-gradient(45deg, var(--gris-2) 0 4px, var(--gris-3) 4px 8px);
}
/* La opción marcada lleva un anillo, no solo un borde: en blanco y negro
   también tiene que verse cuál está elegida. */
.paleta-op.activo .pt { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--blanco), 0 0 0 4px var(--marino); }
.paleta-op:not(:first-child) { padding: .2rem; }

@media (max-width: 640px) {
  /* Con el dedo hacen falta objetivos más grandes y algo de aire entre ellos. */
  .paleta { gap: .45rem; }
  .paleta-op .pt { width: 30px; height: 30px; }
}

/* ── Tareas del día (brújula de la agenda) ────────────────────────────
   Lo que hay que hacer y no es una cita: llamar al laboratorio, pedir
   insumos. Se marcan de un solo golpe, que es lo que más se va a pulsar. */
.ag-tareas { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ag-tareas li { display: flex; align-items: flex-start; gap: .4rem; padding: .22rem 0; }
.ag-tareas li.hecha .tk-txt { text-decoration: line-through; color: var(--texto-tenue); }

/* La casilla es el objetivo principal: cómoda de pulsar aun siendo pequeña. */
.tk-check {
  flex: none; width: 16px; height: 16px; margin-top: 1px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--col, var(--gris-4)); border-radius: 5px;
  background: transparent; transition: background var(--trans), border-color var(--trans);
}
.tk-check:hover { border-color: var(--marino); }
.tk-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,120,228,.3); }
/* Hecha: se rellena Y se dibuja el visto, para que no dependa solo del color. */
.ag-tareas li.hecha .tk-check {
  background: var(--col, var(--ok)); border-color: var(--col, var(--ok));
  background-image: linear-gradient(transparent, transparent);
  position: relative;
}
.ag-tareas li.hecha .tk-check::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.tk-txt { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
.tk-x {
  flex: none; border: 0; background: transparent; cursor: pointer; padding: 0 .2rem;
  color: var(--gris-4); font-size: 1rem; line-height: 1; opacity: 0;
  transition: opacity var(--trans), color var(--trans);
}
.ag-tareas li:hover .tk-x, .tk-x:focus-visible { opacity: 1; }
.tk-x:hover { color: var(--error); }

.ag-tarea-nueva { display: flex; gap: .3rem; }
.ag-tarea-nueva input { font-size: .78rem; padding: .3rem .45rem; }
.ag-tarea-nueva .btn { flex: none; padding: .3rem .55rem; font-weight: 700; }

@media (max-width: 640px) {
  /* Con el dedo, la casilla y la papelera necesitan más superficie. */
  .ag-tareas li { padding: .4rem 0; }
  .tk-check { width: 22px; height: 22px; }
  .ag-tareas li.hecha .tk-check::after { left: 6px; top: 3px; width: 5px; height: 10px; }
  .tk-txt { font-size: .84rem; }
  .tk-x { opacity: 1; padding: 0 .45rem; font-size: 1.2rem; }
}

/* ── Redes y WhatsApp de quien mantiene el sistema ────────────────────
   Aparecen en tres sitios, con el mismo componente y tres presentaciones:
   en el pie del ingreso, en la barra superior (solo pantallas grandes) y en
   el cajón de navegación en móvil, que es donde se busca «quién me ayuda». */
.redes { display: inline-flex; align-items: center; gap: .35rem; }
.redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: inherit; text-decoration: none;
  /* Padding y borde a cero a propósito: dentro del menú lateral estos enlaces
     heredaban «.nav a { padding: .5rem 1rem; border-left: 3px }», y con
     box-sizing:border-box los 32 px de relleno se comían los 30 del círculo:
     el icono quedaba con 0 px de ancho y solo se veía la bolita vacía. */
  padding: 0; border-left: 0;
  transition: background var(--trans), color var(--trans), transform var(--trans);
}
/* Y el icono no debe encogerse aunque el contenedor apriete. */
.redes a svg { flex: 0 0 auto; }
.redes a svg { width: 17px; height: 17px; }
.redes a:hover { transform: translateY(-1px); }
.redes a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Pie de la tarjeta de ingreso: separado del botón por una línea, para que no
   compita con «Ingresar» —quien llega viene a entrar, no a escribirnos—. */
.login-pie {
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--gris-2);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.login-pie > span { font-size: .74rem; color: var(--texto-tenue); }
.login-pie .redes a { color: var(--marino); background: var(--gris-1); }
.login-pie .redes a:hover { background: var(--azul); color: #fff; }

/* Barra superior: discretos, del color de la propia barra, hasta que se pasa
   por encima. Solo desde 1100 px: por debajo, la barra ya va llena. */
.redes-barra { margin-right: .15rem; }
.redes-barra a { color: rgba(255,255,255,.72); }
.redes-barra a:hover { color: #fff; background: rgba(255,255,255,.16); }

/* Cajón de móvil: en fila bajo el nombre del usuario. */
.redes-cajon { margin-top: .55rem; gap: .3rem; }
.redes-cajon a { color: var(--marino); background: rgba(0,36,84,.07); }
.redes-cajon a:hover { background: var(--azul); color: #fff; }

/* El relevo entre los dos sitios ocurre en 900 px, el mismo punto en el que la
   barra suelta sede y usuario y el menú pasa a ser cajón. Probé un corte más
   alto «por si acaso» y era peor: a 1100 la barra no desborda, y entre 901 y
   1180 los enlaces desaparecían de los dos sitios —.nav-user solo existe en
   móvil—, así que no había forma de escribirnos en un portátil normal. */
@media (min-width: 901px) {
  .nav-user .redes-cajon { display: none; }
}