/* ==========================================================================
   HEMMI · Paneles de gestión
   Se apoya en los mismos tokens de hemmi.css. Densidad de trabajo, no de folleto.
   ========================================================================== */

:root {
  --p-sidebar: 268px;
  --p-topbar: 66px;
}

/* --------------------------------------------------------------------------
   1. Estructura
   -------------------------------------------------------------------------- */
.pn {
  min-height: 100vh;
  background: var(--hm-canvas);
}

.pn-shell {
  display: grid;
  grid-template-columns: var(--p-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 1100px) {
  .pn-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ── Barra lateral ──────────────────────────────────────────────────────── */
.pn-side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(700px 380px at 0% 0%, rgba(26, 95, 180, .35), transparent 62%),
    linear-gradient(180deg, #06213F 0%, #0A2E5C 55%, #061F42 100%);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .07);
  z-index: 40;
}
@media (max-width: 1100px) {
  .pn-side {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .42s var(--ease);
    box-shadow: var(--sh-xl);
  }
  .pn-side.is-open { transform: none; }
}

.pn-side__marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pn-side__nav {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem .85rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.pn-side__nav::-webkit-scrollbar { width: 6px; }
.pn-side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }

.pn-grupo {
  margin: 1.5rem 0 .55rem;
  padding: 0 .7rem;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(180, 208, 244, .5);
}
.pn-grupo:first-child { margin-top: 0; }

.pn-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .62rem .7rem;
  border-radius: 11px;
  font-size: .905rem;
  font-weight: 550;
  color: rgba(220, 233, 251, .74);
  transition: background-color .2s, color .2s;
}
.pn-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pn-link.is-active {
  background: rgba(255, 255, 255, .11);
  color: #fff;
  font-weight: 650;
}
.pn-link.is-active::before {
  content: '';
  position: absolute;
  left: -.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--hm-teal-500);
}
.pn-link__ico { flex: none; opacity: .82; }
.pn-link.is-active .pn-link__ico { opacity: 1; color: var(--hm-teal-300, #6FD5D2); }
.pn-link__n {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 .35rem;
  border-radius: 99px;
  background: var(--hm-red-500);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.pn-link__n--suave { background: rgba(255,255,255,.16); color: #fff; }

.pn-side__pie {
  padding: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.pn-yo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem;
  border-radius: 12px;
  transition: background-color .2s;
}
.pn-yo:hover { background: rgba(255, 255, 255, .07); }
.pn-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--hm-teal-500), var(--hm-500));
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .01em;
}
.pn-avatar--img { background: none; overflow: hidden; }
.pn-avatar--img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

/* ── Barra superior ─────────────────────────────────────────────────────── */
.pn-main { display: flex; flex-direction: column; min-width: 0; }

.pn-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--p-topbar);
  padding: 0 1rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--hm-line);
}
@media (min-width: 640px) { .pn-top { padding: 0 1.5rem; } }

.pn-cuerpo { flex: 1; padding: 1.5rem 1rem 3rem; }
@media (min-width: 640px)  { .pn-cuerpo { padding: 1.75rem 1.5rem 3.5rem; } }
@media (min-width: 1280px) { .pn-cuerpo { padding: 2rem 2.25rem 4rem; } }

.pn-veil {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(6, 31, 66, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
.pn-veil.is-on { opacity: 1; visibility: visible; }
@media (min-width: 1101px) { .pn-veil { display: none; } }

/* --------------------------------------------------------------------------
   2. Encabezado de página
   -------------------------------------------------------------------------- */
.pn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.pn-head__t {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--hm-ink);
  line-height: 1.15;
}
.pn-head__s { margin-top: .35rem; font-size: .92rem; color: var(--hm-muted); }

/* --------------------------------------------------------------------------
   3. Tarjetas y métricas
   -------------------------------------------------------------------------- */
.pn-card {
  background: #fff;
  border: 1px solid var(--hm-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 46, 92, .04);
}
.pn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hm-line-2);
}
.pn-card__t {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--hm-ink);
}
.pn-card__b { padding: 1.25rem; }
.pn-card__b--flush { padding: 0; }

.pn-kpi {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--hm-line);
  border-radius: 16px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.pn-kpi:hover { border-color: var(--hm-200); box-shadow: var(--sh-md); transform: translateY(-2px); }
.pn-kpi__l {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .765rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hm-muted);
}
.pn-kpi__v {
  margin-top: .6rem;
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--hm-ink);
  font-variant-numeric: tabular-nums;
}
.pn-kpi__d { margin-top: .5rem; font-size: .8rem; color: var(--hm-muted); }
.pn-kpi__barra {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hm-500), var(--hm-teal-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.pn-kpi:hover .pn-kpi__barra { transform: scaleX(1); }
.pn-kpi--urgente .pn-kpi__barra { background: linear-gradient(90deg, var(--hm-red-500), #F59E0B); }
.pn-kpi--ok .pn-kpi__barra      { background: linear-gradient(90deg, var(--hm-teal-500), #34D399); }

/* --------------------------------------------------------------------------
   4. Tablas
   -------------------------------------------------------------------------- */
.pn-tabla-wrap { overflow-x: auto; }
.pn-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .885rem;
}
.pn-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .7rem 1rem;
  background: var(--hm-canvas);
  border-bottom: 1px solid var(--hm-line);
  text-align: left;
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hm-muted);
  white-space: nowrap;
}
.pn-tabla tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--hm-line-2);
  color: var(--hm-body);
  vertical-align: middle;
}
.pn-tabla tbody tr { transition: background-color .15s; }
.pn-tabla tbody tr:hover { background: var(--hm-50); }
.pn-tabla tbody tr:last-child td { border-bottom: 0; }
.pn-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.pn-tabla .fuerte { font-weight: 650; color: var(--hm-ink); }
.pn-tabla__vacia { padding: 3rem 1rem; text-align: center; color: var(--hm-muted); }

/* --------------------------------------------------------------------------
   5. Etiquetas de estado
   -------------------------------------------------------------------------- */
.pn-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .58rem;
  border-radius: 7px;
  font-size: .735rem;
  font-weight: 650;
  letter-spacing: .005em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pn-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  flex: none;
}
.pn-tag--ambar { background: #FEF6E7; color: #92600B; border-color: #FBE3B8; }
.pn-tag--azul  { background: var(--hm-50);      color: var(--hm-700);      border-color: var(--hm-100); }
.pn-tag--verde { background: #E8F8F1; color: #08694A; border-color: #BFE9D6; }
.pn-tag--rojo  { background: var(--hm-red-50);  color: var(--hm-red-700);  border-color: var(--hm-red-100); }
.pn-tag--gris  { background: #F1F4F9; color: #56657F; border-color: #E1E7F0; }
.pn-tag--teal  { background: var(--hm-teal-50); color: var(--hm-teal-700); border-color: var(--hm-teal-100); }

/* --------------------------------------------------------------------------
   6. Botones del panel
   -------------------------------------------------------------------------- */
.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--hm-line);
  background: #fff;
  color: var(--hm-body);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.pn-btn:hover { border-color: var(--hm-300); background: var(--hm-50); color: var(--hm-700); }
.pn-btn:disabled { opacity: .5; cursor: not-allowed; }
.pn-btn--pri { background: var(--hm-600); border-color: var(--hm-600); color: #fff; }
.pn-btn--pri:hover { background: var(--hm-700); border-color: var(--hm-700); color: #fff; }
.pn-btn--ok  { background: var(--hm-teal-600); border-color: var(--hm-teal-600); color: #fff; }
.pn-btn--ok:hover { background: var(--hm-teal-700); border-color: var(--hm-teal-700); color: #fff; }
.pn-btn--peligro { background: var(--hm-red-600); border-color: var(--hm-red-600); color: #fff; }
.pn-btn--peligro:hover { background: var(--hm-red-700); border-color: var(--hm-red-700); color: #fff; }
.pn-btn--fantasma { border-color: transparent; background: transparent; }
.pn-btn--fantasma:hover { background: var(--hm-canvas); border-color: var(--hm-line); }
.pn-btn--sm { padding: .35rem .7rem; font-size: .8rem; border-radius: 8px; }
.pn-btn--ico { padding: .45rem; width: 34px; height: 34px; }
.pn-btn--bloque { width: 100%; }

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */
.pn-campo { margin-bottom: 1.05rem; }
.pn-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .805rem;
  font-weight: 650;
  color: var(--hm-ink);
}
.pn-label .op { font-weight: 400; color: var(--hm-muted); }
.pn-input,
.pn-select,
.pn-textarea {
  width: 100%;
  padding: .58rem .8rem;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  background: #fff;
  color: var(--hm-ink);
  font: inherit;
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.pn-textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.pn-input:focus,
.pn-select:focus,
.pn-textarea:focus {
  outline: none;
  border-color: var(--hm-400);
  box-shadow: 0 0 0 3.5px var(--hm-100);
}
.pn-input[aria-invalid="true"],
.pn-select[aria-invalid="true"],
.pn-textarea[aria-invalid="true"] {
  border-color: var(--hm-red-500);
  box-shadow: 0 0 0 3.5px var(--hm-red-100);
}
.pn-ayuda { margin-top: .3rem; font-size: .78rem; color: var(--hm-muted); }
.pn-mal   { margin-top: .3rem; font-size: .78rem; font-weight: 600; color: var(--hm-red-600); }

.pn-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pn-check:hover { border-color: var(--hm-300); background: var(--hm-50); }
.pn-check input { margin-top: .18rem; accent-color: var(--hm-600); width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   8. Agenda
   -------------------------------------------------------------------------- */
.ag-dia {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0;
}
.ag-hora {
  padding: .55rem .6rem 0 0;
  text-align: right;
  font-size: .74rem;
  font-weight: 600;
  color: var(--hm-muted);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--hm-line);
}
.ag-slot {
  min-height: 46px;
  padding: .3rem .3rem .3rem .75rem;
  border-bottom: 1px dashed var(--hm-line-2);
}
.ag-cita {
  display: block;
  padding: .5rem .7rem;
  border-radius: 9px;
  border-left: 3px solid var(--hm-500);
  background: var(--hm-50);
  transition: transform .2s, box-shadow .2s;
}
.ag-cita:hover { transform: translateX(2px); box-shadow: var(--sh-sm); }
.ag-cita--pendiente  { border-left-color: #E9A020; background: #FEF9EF; }
.ag-cita--confirmada { border-left-color: var(--hm-500);      background: var(--hm-50); }
.ag-cita--completada { border-left-color: var(--hm-teal-500); background: var(--hm-teal-50); }
.ag-cita--cancelada  { border-left-color: #B6C2D4; background: #F4F6FA; opacity: .68; }
.ag-cita--cancelada .ag-cita__n { text-decoration: line-through; }
.ag-cita--no_asistio { border-left-color: var(--hm-red-400, #E86D80); background: var(--hm-red-50); }
.ag-cita__n { font-size: .855rem; font-weight: 650; color: var(--hm-ink); line-height: 1.3; }
.ag-cita__m { margin-top: .12rem; font-size: .755rem; color: var(--hm-muted); }

.ag-libre {
  display: block;
  width: 100%;
  padding: .45rem;
  border: 1px dashed var(--hm-line);
  border-radius: 9px;
  background: transparent;
  color: var(--hm-muted);
  font-size: .78rem;
  cursor: pointer;
  transition: all .2s;
}
.ag-libre:hover { border-color: var(--hm-400); background: var(--hm-50); color: var(--hm-700); }

/* Selector de días horizontal */
.ag-dias { display: flex; width: 100%; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; }
.ag-dias > .ag-diabtn { scroll-snap-align: start; }
.ag-diabtn {
  flex: none;
  width: 74px;
  padding: .6rem .3rem .55rem;
  border: 1px solid var(--hm-line);
  border-radius: 13px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.ag-diabtn:hover:not(:disabled) { border-color: var(--hm-300); transform: translateY(-2px); }
.ag-diabtn:disabled { opacity: .42; cursor: not-allowed; }
.ag-diabtn.is-on {
  background: var(--hm-600);
  border-color: var(--hm-600);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(18, 76, 148, .65);
}
.ag-diabtn__d { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; opacity: .72; }
.ag-diabtn__n { margin-top: .12rem; font-size: 1.25rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.ag-diabtn__l { margin-top: .25rem; font-size: .66rem; font-weight: 600; }
.ag-diabtn.is-on .ag-diabtn__l { color: rgba(255, 255, 255, .8); }
/* A 11 px, el teal 600 se queda en 4,10:1 sobre blanco: se usa el 700. */
.ag-diabtn:not(.is-on) .ag-diabtn__l { color: var(--hm-teal-700); }
.ag-diabtn:disabled .ag-diabtn__l { color: var(--hm-muted); }

/* Turnos disponibles */
.ag-turnos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
}
.ag-turno {
  padding: .58rem .3rem;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  background: #fff;
  font-size: .875rem;
  font-weight: 650;
  color: var(--hm-body);
  cursor: pointer;
  transition: all .2s;
  font-variant-numeric: tabular-nums;
}
.ag-turno:hover { border-color: var(--hm-400); background: var(--hm-50); color: var(--hm-700); }
.ag-turno.is-on {
  background: var(--hm-600);
  border-color: var(--hm-600);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(18, 76, 148, .6);
}
.ag-turno:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   9. Avisos
   -------------------------------------------------------------------------- */
.pn-aviso {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: 11px;
  border: 1px solid;
  font-size: .885rem;
  line-height: 1.55;
}
.pn-aviso--exito { background: #E8F8F1; border-color: #BFE9D6; color: #08694A; }
.pn-aviso--error { background: var(--hm-red-50); border-color: var(--hm-red-100); color: var(--hm-red-700); }
.pn-aviso--aviso { background: #FEF6E7; border-color: #FBE3B8; color: #92600B; }
.pn-aviso--info  { background: var(--hm-50); border-color: var(--hm-100); color: var(--hm-700); }
.pn-aviso b, .pn-aviso strong { font-weight: 700; }

/* Pila de mensajes flotantes */
/*
 * Los avisos van abajo a la derecha, no arriba: arriba está la barra de
 * acciones de cada pantalla —«Nueva cita», «Imprimir», las pestañas— y el
 * aviso la tapaba justo en los segundos en que uno va a pulsarla.
 */
.pn-flash {
  position: fixed;
  bottom: 18px;
  right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;   /* el más reciente, abajo del todo */
  gap: .6rem;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;             /* la caja vacía no intercepta clics */
}
.pn-flash .pn-aviso {
  background-color: #fff;
  box-shadow: var(--sh-lg);
  animation: pn-entra .45s var(--ease) both;
  pointer-events: auto;
}
@keyframes pn-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Misceláneos
   -------------------------------------------------------------------------- */
.pn-sep { height: 1px; background: var(--hm-line-2); margin: 1.25rem 0; }

.pn-dato { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--hm-line-2); }
.pn-dato:last-child { border-bottom: 0; }
.pn-dato__k { font-size: .82rem; color: var(--hm-muted); }
.pn-dato__v { font-size: .875rem; font-weight: 600; color: var(--hm-ink); text-align: right; }

.pn-vacio {
  display: grid;
  place-items: center;
  gap: .75rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--hm-muted);
}
.pn-vacio__i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--hm-canvas);
  border: 1px solid var(--hm-line);
  color: var(--hm-300);
}

/* Barras del gráfico */
.pn-barras { display: flex; align-items: flex-end; gap: 3px; height: 118px; }
.pn-barra {
  position: relative;
  flex: 1;
  min-width: 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--hm-400), var(--hm-600));
  transition: opacity .2s;
  min-height: 3px;
}
.pn-barra:hover { opacity: .78; }
.pn-barra--cero { background: var(--hm-line); }

/* Los días que aún no han pasado se distinguen del histórico */
.pn-barra--futuro { background: linear-gradient(180deg, var(--hm-teal-500), var(--hm-teal-700)); }
.pn-barra--futuro.pn-barra--cero { background: var(--hm-line); }

/* Hoy siempre visible, aunque no tenga citas */
.pn-barra--hoy {
  background: var(--hm-red-500);
  min-height: 8px;
  box-shadow: 0 0 0 1px rgba(225, 29, 58, .25);
}

.pn-lista-limpia { list-style: none; margin: 0; padding: 0; }

/* ── Impresión ────────────────────────────────────────────────────────────
   Lo que se imprime a diario es la agenda del día y la ficha de una cita.
   En papel no sirven de nada los botones, los filtros ni el enlace de salto,
   y una tarjeta partida entre dos hojas obliga a cruzar la vista. */
@media print {
  .pn-side, .pn-top, .pn-flash, .no-print { display: none !important; }
  .pn-shell { grid-template-columns: 1fr; }
  .pn-cuerpo { padding: 0; }

  /* Controles: no imprimen. Se listan por clase y no uno a uno en cada
     vista, para que valga también en las pantallas que se añadan luego. */
  .pn-btn, .pn-input, .pn-select, .pn-textarea, .hm-skip,
  .pn-head form, .pn-card__head form, .md, dialog { display: none !important; }

  .pn-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .pn-tabla tr, .pn-lista-limpia > li { break-inside: avoid; }
  .pn-tabla thead { display: table-header-group; }   /* cabecera en cada hoja */

  /* La hoja tiene que identificarse sola: de qué hospital sale y cuándo se
     imprimió. Va en el <main>, que está en la plantilla, y no en cada vista. */
  #panel-contenido::before {
    content: attr(data-pie);
    display: block;
    margin-bottom: 1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid #ccc;
    font-size: .74rem;
    color: #444;
  }
  a[href]::after { content: none; }   /* sin volcar las URL al papel */
}

/* ══════════════════════════════════════════════════ CAMPO DE IMAGEN ══ */
.sb { display: flex; gap: 1rem; align-items: flex-start; }

.sb__zona {
  position: relative;
  flex: none;
  width: 132px; height: 165px;          /* 4:5, la proporción del directorio */
  border: 1.5px dashed var(--hm-line);
  border-radius: 14px;
  background: var(--hm-canvas) center / cover no-repeat;
  cursor: pointer;
  display: grid; place-items: center;
  text-align: center;
  color: var(--hm-muted);
  transition: border-color .16s ease, background-color .16s ease;
  overflow: hidden;
}
.sb__zona:hover,
.sb.is-encima .sb__zona { border-color: var(--hm-500); background-color: var(--hm-50); }
.sb.is-con-imagen .sb__zona { border-style: solid; border-color: var(--hm-line); }
.sb.is-con-imagen .sb__vacio { opacity: 0; }

.sb__vacio { padding: .5rem; font-size: .72rem; line-height: 1.35; transition: opacity .16s ease; }
.sb__vacio svg { margin: 0 auto .4rem; }

/* El input real se oculta sin sacarlo del flujo: así el foco del teclado
   sigue llegando y el <label> lo activa. */
.sb__input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.sb__input:focus-visible + .sb__zona { outline: 2px solid var(--hm-500); outline-offset: 2px; }

.sb__lado { min-width: 0; flex: 1; padding-top: .15rem; }
.sb__t    { font-size: .82rem; font-weight: 600; color: var(--hm-ink); }
.sb__ayuda{ margin-top: .3rem; font-size: .76rem; line-height: 1.5; color: var(--hm-muted); }
.sb__nota { margin-top: .55rem; font-size: .76rem; color: var(--hm-700); word-break: break-word; }
.sb__nota--error { color: var(--hm-red-600); font-weight: 600; }
.sb__acciones { margin-top: .65rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* Retrato ancho para portadas de noticias */
.sb--ancha .sb__zona { width: 200px; height: 125px; }

/* ═══════════════════════════════════════ CONTENCIÓN DE ANCHO ══
   Los hijos de una cuadrícula CSS no bajan de su ancho intrínseco: `min-width`
   vale `auto`, no cero. Basta con que una tarjeta lleve dentro una tabla ancha
   o un título que no parte para que su columna crezca, arrastre a la cuadrícula
   entera y desborde la página. Era la causa de que el panel se saliera en
   pantallas estrechas —y en la ficha del paciente, incluso a 1280 px—.

   Dentro del panel ningún bloque impone su ancho: cuando el contenido no cabe,
   se desplaza él solo (.pn-tabla-wrap) o se recorta. Se excluyen las tablas y
   sus celdas, que tienen su propio algoritmo de reparto y deben conservar su
   ancho mínimo para poder desplazarse en vez de apretujarse. */
#panel-contenido :is(section, aside, form, div, ul, ol, li, p, span, label) { min-width: 0; }

/* ══════════════════════════════════════════ PANTALLA TÁCTIL ══
   El panel es una herramienta densa y en un ratón esa densidad se agradece.
   Con el dedo no: los botones de icono de las tablas quedan en 24×27 px, justo
   en el mínimo que exige la norma y muy justos en la práctica.

   `pointer: coarse` distingue el dedo del ratón, así que se puede dar aire
   donde hace falta sin inflar la interfaz de escritorio. */
@media (pointer: coarse) {
  .pn-btn--sm  { min-height: 38px; padding: .5rem .9rem; }
  .pn-btn--ico { width: 40px; height: 40px; }
  .pn-tabla td .pn-btn--sm { min-width: 38px; justify-content: center; }
  .pn-check    { padding: .8rem .85rem; }
  .pn-check input { width: 20px; height: 20px; }
}

/* El selector de día de la reserva se usa sobre todo desde el móvil: sus dos
   rótulos estaban por debajo de 11 px. */
.ag-diabtn { width: 78px; }
.ag-diabtn__d { font-size: .72rem; }
.ag-diabtn__l { font-size: .715rem; }

/* --------------------------------------------------------------------------
   14. Historia clínica
   -------------------------------------------------------------------------- */

/* Aviso de alergias: lo primero que hay que ver al abrir un expediente. */
.ex-alergia {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.5rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--hm-red-100);
  border-left: 4px solid var(--hm-red-600);
  border-radius: 12px;
  background: var(--hm-red-50);
}
.ex-alergia__i { flex: none; color: var(--hm-red-600); }
.ex-alergia__t {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hm-red-700);
}
.ex-alergia__d { margin-top: .15rem; font-size: .92rem; font-weight: 600; color: var(--hm-ink); }

/* Selector de secciones */
.ex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.ex-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: #fff;
  font-size: .83rem; font-weight: 600;
  color: var(--hm-body);
  transition: all .18s var(--ease);
}
.ex-tab:hover { border-color: var(--hm-300); background: var(--hm-50); color: var(--hm-700); }
.ex-tab.is-on {
  border-color: transparent;
  background: var(--hm-600);
  color: #fff;
}
.ex-tab__n {
  min-width: 20px; padding: 0 .3rem;
  border-radius: 999px;
  background: var(--hm-canvas);
  font-size: .72rem; font-weight: 700; line-height: 20px;
  text-align: center; color: var(--hm-body);
}
.ex-tab.is-on .ex-tab__n { background: rgba(255, 255, 255, .22); color: #fff; }

/* Sin JavaScript no hay nada que ocultar: todas las secciones se ven
   apiladas y los enlaces «?ver=» siguen llevando a la que toca. */
.js .ex-panel.is-oculto { display: none; }
.ex-panel + .ex-panel { margin-top: 1.5rem; }
.js .ex-panel + .ex-panel { margin-top: 0; }

/* Rejilla de constantes de la columna izquierda */
.ex-vitales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .9rem;
}
.ex-vital {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--hm-line-2);
}
.ex-vital:nth-last-child(-n+2) { border-bottom: 0; }
.ex-vital__k { font-size: .74rem; font-weight: 600; color: var(--hm-muted); }
.ex-vital__v { font-size: .92rem; white-space: nowrap; }

/* Campo de medida con su unidad pegada */
.ex-medida { position: relative; }
.ex-medida input { padding-right: 3.6rem; }
.ex-medida > span {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; font-weight: 600; color: var(--hm-muted);
  pointer-events: none;
}

/* Línea de tiempo de las notas de evolución */
.ex-linea { position: relative; margin: 0; padding: 0 0 0 1.6rem; list-style: none; }
.ex-linea::before {
  content: ''; position: absolute; left: 5px; top: .45rem; bottom: .45rem;
  width: 2px; border-radius: 2px; background: var(--hm-line);
}
.ex-linea__i { position: relative; padding-bottom: 1.5rem; }
.ex-linea__i:last-child { padding-bottom: 0; }
.ex-linea__i::before {
  content: ''; position: absolute; left: -1.6rem; top: .4rem;
  width: 12px; height: 12px; border-radius: 999px;
  background: #fff; border: 2.5px solid var(--hm-500);
}
.ex-linea__cab {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: .7rem;
}

/* Los cuatro apartados de la nota */
.ex-soap { display: grid; gap: .7rem; margin: 0; }
.ex-soap__b {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .9rem;
  align-items: start;
}
.ex-soap__k {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hm-muted);
  padding-top: .12rem;
}
.ex-soap__v { margin: 0; font-size: .885rem; line-height: 1.6; color: var(--hm-body); }

@media (max-width: 640px) {
  .ex-soap__b { grid-template-columns: 1fr; gap: .2rem; }
  .ex-vitales { grid-template-columns: 1fr; }
  .ex-vital:nth-last-child(-n+2) { border-bottom: 1px dashed var(--hm-line-2); }
  .ex-vital:last-child { border-bottom: 0; }
}

/* Qué saber antes de la cita, en el portal del paciente. */
.pt-antes { margin: .7rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.pt-antes li {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .8rem; line-height: 1.45; color: var(--hm-body);
}
.pt-antes svg { flex: none; margin-top: .12rem; color: var(--hm-muted); }
/* Aviso de alergias dentro de una fila de agenda: pequeño pero inconfundible. */
.ag-alergia {
  display: inline-flex; align-items: center; gap: .2rem;
  margin-left: .45rem;
  padding: .05rem .35rem;
  border: 1px solid var(--hm-red-100);
  border-radius: 5px;
  background: var(--hm-red-50);
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--hm-red-700);
  vertical-align: middle;
}
.ag-cita--completada .ag-alergia,
.ag-cita--cancelada .ag-alergia { opacity: .6; }
/* Contexto clínico junto al editor de documentos: lo que el especialista debe
   tener delante antes de firmar. */
.ed-ctx {
  margin-top: .8rem;
  padding: .7rem .8rem;
  border: 1px solid var(--hm-line);
  border-radius: 10px;
  background: var(--hm-canvas);
}
.ed-ctx__t {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--hm-muted);
}
.ed-ctx__l { margin: .45rem 0 0; padding: 0; list-style: none; }
.ed-ctx__l li {
  font-size: .8rem; line-height: 1.45; color: var(--hm-body);
  padding: .18rem 0;
}
.ed-ctx__l li + li { border-top: 1px dashed var(--hm-line-2); }
/* Contenido que solo tiene sentido en papel: la versión de lectura de lo que
   en pantalla se edita en un formulario. */
.solo-impresion { display: none; }

/* En papel, el expediente sale entero: sin pestañas y sin secciones ocultas. */
@media print {
  .solo-impresion { display: block !important; }
  .ex-tabs { display: none !important; }
  .js .ex-panel.is-oculto { display: block !important; }
  .ex-panel { break-inside: avoid; }
  .ex-alergia { border: 2px solid #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   15. Orden de estudios
   -------------------------------------------------------------------------- */
.or-buscar { position: relative; margin-bottom: 1.1rem; }
.or-buscar svg {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--hm-muted); pointer-events: none;
}
.or-buscar .pn-input { padding-left: 2.35rem; }

.or-areas { display: grid; gap: 1.25rem; }
.or-area { border: 0; margin: 0; padding: 0; min-width: 0; }
.or-area[hidden] { display: none; }
.or-area__t {
  padding: 0; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hm-muted);
}
.or-rejilla {
  display: grid; gap: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

/* Una casilla por estudio: densa, porque son muchas, pero con un blanco de
   toque cómodo y un estado marcado que se ve de reojo. */
.or-est {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .42rem .6rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: .8125rem; line-height: 1.35; color: var(--hm-body);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.or-est[hidden] { display: none; }
.or-est:hover { background: var(--hm-50); border-color: var(--hm-line); }
.or-est input { flex: none; margin-top: .13rem; width: 15px; height: 15px; accent-color: var(--hm-600); }
.or-est:has(input:checked) {
  background: var(--hm-50); border-color: var(--hm-200);
  color: var(--hm-ink); font-weight: 600;
}
.or-est:focus-within { outline: 2px solid var(--hm-400); outline-offset: 1px; }

.or-sinnada {
  margin: 1rem 0 0; padding: .8rem .9rem;
  border: 1px dashed var(--hm-line); border-radius: 10px;
  font-size: .82rem; color: var(--hm-muted); text-align: center;
}

/* Lo que ya se marcó, siempre a la vista. */
.or-elegidos {
  margin: 0 0 1.1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--hm-200);
  border-radius: 12px;
  background: var(--hm-50);
}
.or-elegidos[hidden] { display: none; }
.or-elegidos__t {
  margin: 0 0 .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hm-700);
}
.or-elegidos__l {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0; padding: 0; list-style: none;
  counter-reset: eleg;
}
.or-elegidos__l li {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .3rem .22rem .55rem;
  border: 1px solid var(--hm-200); border-radius: 999px;
  background: #fff;
  font-size: .78rem; font-weight: 600; color: var(--hm-ink);
  counter-increment: eleg;
}
.or-elegidos__l li::before {
  content: counter(eleg);
  font-size: .68rem; font-weight: 700; color: var(--hm-muted);
}
.or-quitar {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 15px; line-height: 1; color: var(--hm-muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.or-quitar:hover { background: var(--hm-red-50, #FDF2F2); color: var(--hm-red-600); }
.or-elegidos__l li.es-mano { border-style: dashed; color: var(--hm-body); }

/* Campo alto: el acceso al panel es la primera pantalla que alguien toca, a
   veces desde el móvil de la consulta y con prisa. */
.pn-input--alto { padding: .8rem .9rem; font-size: .95rem; border-radius: 11px; }

/* --------------------------------------------------------------------------
   16. Selector de icono
   Botones de radio de verdad con aspecto de rejilla: elegir uno funciona sin
   JavaScript y las flechas del teclado ya lo recorren solas.
   -------------------------------------------------------------------------- */
.ip { border: 0; padding: 0; margin: 0 0 1.05rem; min-width: 0; }
.ip > legend { padding: 0; }

.ip__lista {
  max-height: 300px;
  overflow-y: auto;
  margin-top: .35rem;
  padding: .75rem;
  border: 1px solid var(--hm-line);
  border-radius: 12px;
  background: var(--hm-canvas);
}
.ip__f {
  margin: .95rem 0 .45rem;
  font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hm-muted);
}
.ip__f:first-child { margin-top: 0; }
.ip__g {
  display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.ip__b {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .6rem .35rem .5rem;
  border: 1px solid transparent; border-radius: 10px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
/* El radio se oculta a la vista pero sigue recibiendo el foco: sin él, ni el
   teclado ni los lectores de pantalla llegarían a la elección. */
.ip__b input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ip__i { color: var(--hm-500); transition: color .15s; }
.ip__n { font-size: .69rem; line-height: 1.25; color: var(--hm-body); }

.ip__b:hover { border-color: var(--hm-200); background: var(--hm-50); }
.ip__b:hover .ip__i { color: var(--hm-600); }
.ip__b:has(input:focus-visible) { outline: 2px solid var(--hm-400); outline-offset: 2px; }
.ip__b:has(input:checked) {
  border-color: var(--hm-500);
  background: var(--hm-50);
  box-shadow: inset 0 0 0 1px var(--hm-500);
}
.ip__b:has(input:checked) .ip__i { color: var(--hm-700); }
.ip__b:has(input:checked) .ip__n { color: var(--hm-ink); font-weight: 650; }

/* En un móvil, una zona con desplazamiento propio dentro de un modal que ya se
   desplaza atrapa el dedo: se cree que la página no avanza. Ahí la rejilla
   fluye entera y quien manda es el modal. */
@media (max-width: 640px) {
  .ip__lista { max-height: none; overflow-y: visible; }
}

/* --------------------------------------------------------------------------
   17. Paginación
   -------------------------------------------------------------------------- */
.pg {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--hm-line);
}
.pg__c { margin: 0; font-size: .8125rem; color: var(--hm-muted); }
.pg__c strong { color: var(--hm-ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.pg__n { display: flex; align-items: center; gap: .2rem; }

/* Números y flechas comparten caja para que la fila no baile al cambiar de
   página, y son cuadrados de 34 px: el mínimo cómodo para el pulgar. */
.pg__p,
.pg__f {
  display: grid; place-items: center;
  min-width: 34px; height: 34px;
  padding: 0 .45rem;
  border: 1px solid transparent; border-radius: 9px;
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--hm-body);
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pg__p:hover,
.pg__f:hover { background: var(--hm-50); border-color: var(--hm-line); color: var(--hm-700); }
.pg__p:focus-visible,
.pg__f:focus-visible { outline: 2px solid var(--hm-400); outline-offset: 1px; }

.pg__p.is-actual {
  background: var(--hm-600); border-color: var(--hm-600); color: #fff;
  cursor: default;
}
.pg__f.is-mudo { color: var(--hm-200); cursor: default; }
.pg__f.is-mudo:hover { background: transparent; border-color: transparent; color: var(--hm-200); }

.pg__s { padding: 0 .15rem; color: var(--hm-muted); font-size: .8125rem; user-select: none; }

/* En estrecho el recuento va arriba y los mandos ocupan el ancho, centrados. */
@media (max-width: 520px) {
  .pg { justify-content: center; }
  .pg__c { width: 100%; text-align: center; }
  .pg__n { justify-content: center; }
}