/* ============================================================
   CONSULTA DIGITAL — Sistema visual (pastel vivo / fresco)
   Mockup de telemedicina. Look luminoso, amable, moderno.
   ============================================================ */

/* ---------- Tokens — Paleta "Índigo Cálido" (branding 2026) ---------- */
:root {
  /* Fondos */
  --bg: #f7f4ff;
  --bg-2: #fdf9f6;
  --blanco: #ffffff;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-borde: rgba(255, 255, 255, 0.92);

  /* Acentos de marca (contrastes corregidos a WCAG AA) */
  --lavanda: #7a6ee0;        /* primario 2 */
  --violeta: #5b4fcf;        /* primario (9.8:1 sobre blanco) */
  --violeta-claro: #ede9ff;
  --menta: #0fa896;          /* verde-agua: confianza/salud */
  --menta-claro: #e2f5f3;
  --celeste: #3b8fd4;
  --celeste-claro: #e8f3fb;
  --rosa: #e8674a;           /* acento coral cálido */
  --rosa-claro: #fce9e4;
  --durazno: #d4870a;        /* acento ámbar */
  --durazno-claro: #fbf0da;
  --coral: #e8674a;
  --amarillo: #d4870a;
  --amarillo-claro: #fbf0da;
  --lila: #7a6ee0;

  /* Texto */
  --tinta: #1e1a3f;          /* 16.7:1 sobre blanco */
  --tinta-2: #4a4573;
  --tinta-3: #8a86a8;

  /* Sistema */
  --primario: var(--violeta);
  --primario-suave: var(--violeta-claro);
  --ok: #0d8c5e;
  --linea: rgba(91, 79, 207, 0.14);

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --r-xl: 36px;

  --sombra-sm: 0 6px 18px rgba(91, 79, 207, 0.10);
  --sombra: 0 16px 40px rgba(91, 79, 207, 0.16);
  --sombra-color: 0 18px 40px rgba(91, 79, 207, 0.26);

  --grad-hero: radial-gradient(1100px 620px at 78% -8%, #fce9e4 0%, rgba(252,233,228,0) 55%),
               radial-gradient(900px 560px at 6% 4%, #e2f5f3 0%, rgba(226,245,243,0) 52%),
               radial-gradient(900px 700px at 50% 110%, #ede9ff 0%, rgba(237,233,255,0) 60%),
               linear-gradient(180deg, #f7f4ff 0%, #fdf9f6 100%);
  --grad-primario: linear-gradient(135deg, #5b4fcf 0%, #7a6ee0 100%);
  --grad-menta: linear-gradient(135deg, #0fa896 0%, #3b8fd4 100%);
  --grad-rosa: linear-gradient(135deg, #e8674a 0%, #d4870a 100%);

  /* Tipografía: Poppins (titulares, unificada con el sistema MRS) + Inter (cuerpo/UI clínica).
     Quicksand queda de respaldo: si una página no alcanzara a pedir Poppins, cae ahí y no
     al tipo del sistema. 26-jul-2026. */
  --fuente-titulo: "Poppins", "Quicksand", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Colores por especialidad (chips/cards) */
.c-menta   { --c: var(--menta);   --c-bg: var(--menta-claro); }
.c-durazno { --c: var(--durazno); --c-bg: var(--durazno-claro); }
.c-lavanda { --c: var(--lavanda); --c-bg: var(--violeta-claro); }
.c-rosa    { --c: var(--rosa);    --c-bg: var(--rosa-claro); }
.c-celeste { --c: var(--celeste); --c-bg: var(--celeste-claro); }
.c-coral   { --c: var(--coral);   --c-bg: var(--durazno-claro); }
.c-lila    { --c: var(--lila);    --c-bg: var(--violeta-claro); }
.c-amarillo{ --c: var(--amarillo);--c-bg: var(--amarillo-claro); }

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--grad-hero);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 2px; border-radius: 6px; }

/* ---------- Layout ---------- */
html, body { overflow-x: hidden; }
.contenedor { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
/* Evita desbordes por min-width:auto en hijos de grid/flex */
.dash, .dash__main, .dash__side, .split, .panel, .sesion, .cita-row, .cita-row__info,
.notif, .notif__txt, .resumen__line, .perfil__dato, .med-card, .tr-linea, .tr-linea__b { min-width: 0; }
.cita-row__info b, .med-card__nombre, .tr-linea__b { overflow-wrap: anywhere; }
.pantalla { display: block; }
.pantalla[hidden] { display: none; }
.centro-vertical { min-height: calc(100vh - 86px); display: flex; align-items: center; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulo); line-height: 1.12; font-weight: 700; letter-spacing: -0.5px; }
.marca, .marca__logo, .btn, .eyebrow, .stat b, .esp-card h3 { font-family: var(--fuente-titulo); }
.degradado {
  background: var(--grad-primario);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.4px;
  color: var(--violeta); background: var(--blanco);
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--sombra-sm);
}
.eyebrow .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(247, 244, 255, 0.7);
  border-bottom: 1px solid var(--linea);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.marca { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.15rem; }
.marca__logo {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color);
}
.marca__logo svg { width: 22px; height: 22px; }
.marca small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--tinta-3); letter-spacing: 1px; }
.topbar__acc { display: flex; align-items: center; gap: 10px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn--primario { background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color); }
.btn--primario:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(124,92,240,.36); }
.btn--menta { background: var(--grad-menta); color: #073b32; box-shadow: 0 16px 36px rgba(79,209,181,.34); }
.btn--menta:hover { transform: translateY(-2px); }
.btn--ghost { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-sm); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn--claro { background: var(--violeta-claro); color: var(--violeta); }
.btn--claro:hover { background: #e6deff; }
.btn--bloque { width: 100%; }
.btn--lg { padding: 17px 30px; font-size: 1.06rem; }
.btn--sm { padding: 10px 16px; font-size: 0.9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn--peligro { background: #ff6b6b; color: #fff; }

.link-volver {
  display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2);
  font-weight: 600; font-size: 0.95rem; padding: 8px 4px;
}
.link-volver svg { width: 18px; height: 18px; }
.link-volver:hover { color: var(--violeta); }

/* ---------- Hero / landing ---------- */
.hero { padding: 46px 0 60px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.hero__titulo { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 18px 0 16px; }
.hero__bajada { font-size: 1.14rem; color: var(--tinta-2); max-width: 30em; margin-bottom: 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 600;
  color: var(--tinta-2); background: var(--blanco); padding: 8px 13px; border-radius: 999px; box-shadow: var(--sombra-sm);
}
.mini-chip svg { width: 16px; height: 16px; color: var(--menta); }

/* Tarjeta visual del hero (mock de videollamada) */
.hero__art { position: relative; }
.fono {
  position: relative; background: var(--blanco); border-radius: var(--r-xl);
  box-shadow: var(--sombra); padding: 16px; border: 1px solid var(--glass-borde);
}
.fono__video {
  position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3;
  background: var(--grad-primario); display: grid; place-items: center;
}
.fono__video img { width: 100%; height: 100%; object-fit: cover; }
.fono__pip {
  position: absolute; right: 14px; bottom: 14px; width: 34%; aspect-ratio: 3/4; border-radius: 16px;
  overflow: hidden; border: 3px solid #fff; box-shadow: var(--sombra-sm); background: var(--menta-claro);
}
.fono__pip img { width: 100%; height: 100%; object-fit: cover; }
.fono__barra { display: flex; justify-content: center; gap: 12px; padding: 14px 0 6px; }
.fono__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta-claro); color: var(--violeta); }
.fono__btn svg { width: 20px; height: 20px; }
.fono__btn--rojo { background: #ff6b6b; color: #fff; }
.flota { position: absolute; background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 12px 15px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.9rem; }
.flota svg { width: 20px; height: 20px; }
.flota--ia { top: -18px; left: -22px; color: var(--violeta); }
.flota--ok { bottom: 30px; left: -28px; color: var(--ok); }
.flota__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.stat { background: var(--glass); border: 1px solid var(--glass-borde); border-radius: var(--r); padding: 20px; text-align: center; box-shadow: var(--sombra-sm); }
.stat b { display: block; font-size: 2rem; line-height: 1; }
.stat span { font-size: 0.86rem; color: var(--tinta-2); font-weight: 600; }

/* ---------- Sección genérica ---------- */
.seccion { padding: 30px 0 50px; }
.seccion__cab { text-align: center; max-width: 40em; margin: 0 auto 30px; }
.seccion__cab h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.seccion__cab p { color: var(--tinta-2); margin-top: 8px; }

/* Stepper */
.stepper { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 26px; }
.step { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-3); font-weight: 600; font-size: 0.86rem; }
.step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); box-shadow: var(--sombra-sm); font-size: 0.82rem; }
.step.is-on { color: var(--violeta); }
.step.is-on .step__n { background: var(--grad-primario); color: #fff; }
.step.is-done .step__n { background: var(--menta); color: #073b32; }
.step__bar { width: 28px; height: 3px; border-radius: 3px; background: var(--linea); }

/* ---------- Grid de especialidades ---------- */
.grid-esp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.esp-card {
  background: var(--blanco); border-radius: var(--r-lg); padding: 22px; text-align: left;
  box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde);
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; gap: 10px; min-height: 150px;
}
.esp-card:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.esp-card__ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--c-bg); color: var(--tinta); }
.esp-card__ic svg { width: 27px; height: 27px; }
.seccion__banner { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 6; margin-bottom: 22px; box-shadow: var(--sombra-sm); }
.seccion__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-card__foto { margin: -22px -22px 2px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--violeta-claro); }
.esp-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-card--foto .esp-card__ic { width: 46px; height: 46px; margin-top: -40px; position: relative; border: 3px solid #fff; box-shadow: var(--sombra-sm); background: #fff; color: var(--violeta); }
.esp-card--foto .esp-card__ic svg { width: 22px; height: 22px; }
.esp-card h3 { font-size: 1.08rem; }
.esp-card p { font-size: 0.86rem; color: var(--tinta-2); }
.esp-card__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--violeta); font-weight: 700; font-size: 0.9rem; }
.esp-card__go svg { width: 16px; height: 16px; }

/* ---------- Tarjetas de médico ---------- */
.grid-med { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.med-card {
  background: var(--blanco); border-radius: var(--r-lg); padding: 20px; text-align: left;
  box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde);
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; gap: 14px;
}
.med-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.med-card__top { display: flex; gap: 14px; align-items: center; }
.med-card__foto, .ficha__foto, .av {
  width: 64px; height: 64px; border-radius: 18px; object-fit: cover; background: var(--violeta-claro);
  display: grid; place-items: center; font-weight: 800; color: var(--violeta); font-size: 1.2rem; flex: 0 0 auto;
}
.med-card__nombre { font-size: 1.08rem; font-weight: 700; }
.med-card__esp { font-size: 0.9rem; color: var(--violeta); font-weight: 600; }
.med-card__uni { font-size: 0.8rem; color: var(--tinta-3); }
.med-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--menta-claro); color: #0c6b58; }
.pill svg { width: 14px; height: 14px; }
.pill--amarillo { background: var(--amarillo-claro); color: #8a6a00; }
.pill--celeste { background: var(--celeste-claro); color: #0b5e96; }
.med-card__valor { font-weight: 800; font-size: 1.15rem; }
.med-card__valor small { font-weight: 600; font-size: 0.78rem; color: var(--tinta-3); display: block; }

/* ---------- Perfil + agenda ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; }
.panel { background: var(--blanco); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); }
.perfil__top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.perfil__foto { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; }
.perfil h2 { font-size: 1.4rem; }
.perfil__bio { color: var(--tinta-2); font-size: 0.95rem; margin: 12px 0; }
.perfil__datos { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.perfil__dato { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--tinta-2); }
.perfil__dato svg { width: 18px; height: 18px; color: var(--violeta); flex: 0 0 auto; }

.agenda__tit { font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.agenda__tit svg { width: 20px; height: 20px; color: var(--violeta); }
.dias { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; }
.dia { flex: 0 0 auto; width: 74px; text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--bg); border: 2px solid transparent; transition: .15s; }
.dia:hover { border-color: var(--lavanda); }
.dia.is-on { background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color); }
.dia small { display: block; font-size: 0.72rem; font-weight: 700; opacity: .8; text-transform: uppercase; }
.dia b { display: block; font-size: 1.35rem; line-height: 1.1; }
.dia .et { font-size: 0.66rem; font-weight: 700; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.slot { padding: 11px 6px; border-radius: 12px; background: var(--violeta-claro); color: var(--violeta); font-weight: 700; font-size: 0.95rem; text-align: center; transition: .15s; }
.slot:hover:not(.is-off) { background: var(--violeta); color: #fff; transform: translateY(-2px); }
.slot.is-on { background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color); }
.slot.is-off { background: #f0eef6; color: var(--tinta-3); text-decoration: line-through; cursor: not-allowed; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; border-radius: 14px; border: 2px solid var(--linea);
  /* 1rem = 16px exactos. Con 0.98rem (15.68px) Safari/iOS hace zoom automático al
     enfocar el campo, porque su umbral es 16px. Afecta a los 4 inputs del SPA
     (acceso + recuperar clave + crear clave). No cambiar a un valor menor. */
  background: var(--bg); transition: .15s; font-size: 1rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--lavanda); background: #fff; }
.campo--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Resumen de cita (sticky) */
.resumen { position: sticky; top: 92px; }
.resumen__med { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.resumen__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 0.95rem; }
.resumen__line span:first-child { color: var(--tinta-2); display: inline-flex; align-items: center; gap: 8px; }
.resumen__line svg { width: 17px; height: 17px; color: var(--violeta); }
.resumen__total { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 2px dashed var(--linea); font-weight: 800; font-size: 1.3rem; }

/* ---------- Pago ---------- */
.pago-wrap { max-width: 460px; margin: 0 auto; }
.pago__head { text-align: center; margin-bottom: 18px; }
.pago__monto { font-size: 2.6rem; font-weight: 800; }
.pago-metodos { display: flex; gap: 10px; margin-bottom: 18px; }
.pago-metodo { flex: 1; padding: 14px; border-radius: 14px; background: var(--bg); border: 2px solid transparent; text-align: center; font-weight: 700; font-size: 0.88rem; }
.pago-metodo.is-on { border-color: var(--violeta); background: #fff; box-shadow: var(--sombra-sm); }
.tarjeta-mock {
  background: var(--grad-primario); color: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sombra-color);
  margin-bottom: 18px; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between;
}
.tarjeta-mock__num { font-size: 1.3rem; letter-spacing: 2px; font-weight: 700; }
.tarjeta-mock__row { display: flex; justify-content: space-between; font-size: 0.85rem; opacity: .92; }
.candado { display: inline-flex; align-items: center; gap: 7px; justify-content: center; color: var(--tinta-3); font-size: 0.82rem; font-weight: 600; margin-top: 12px; }
.candado svg { width: 15px; height: 15px; }

/* Spinner pago */
.pago-procesando { text-align: center; padding: 30px 0; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--violeta-claro); border-top-color: var(--violeta); margin: 0 auto 18px; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Confirmación + recordatorios ---------- */
.exito-ic { width: 92px; height: 92px; border-radius: 50%; background: var(--grad-menta); display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 16px 40px rgba(79,209,181,.4); animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.exito-ic svg { width: 46px; height: 46px; color: #fff; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.tarjeta-cita { max-width: 540px; margin: 22px auto; text-align: left; }
.recordatorios { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.recordatorio__tit { display: flex; align-items: center; gap: 9px; font-weight: 700; margin-bottom: 12px; font-size: 0.95rem; }
.recordatorio__tit svg { width: 20px; height: 20px; }

/* Estado de envío de correo real (best-effort) */
.correo-real { max-width: 720px; margin: 14px auto 0; padding: 12px 16px; border-radius: 14px; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; background: var(--celeste-claro); color: #0b5e96; }
.correo-real svg { width: 16px; height: 16px; flex: 0 0 auto; }
.correo-real--ok { background: var(--menta-claro); color: #0c6b58; }
.correo-real--demo { background: #f0eef6; color: var(--tinta-2); }

/* Burbuja WhatsApp */
.wa { background: #e9f7ef; border-radius: 18px; padding: 16px; }
.wa__top { display: flex; align-items: center; gap: 9px; color: #128c4b; font-weight: 700; margin-bottom: 10px; }
.wa__top svg { width: 22px; height: 22px; }
.wa__msg { background: #fff; border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 0.9rem; box-shadow: var(--sombra-sm); }
.wa__msg b { color: #075e54; }
.wa__hora { font-size: 0.7rem; color: var(--tinta-3); text-align: right; margin-top: 6px; }

/* Mail */
.mail { background: var(--celeste-claro); border-radius: 18px; padding: 16px; }
.mail__top { display: flex; align-items: center; gap: 9px; color: #0b5e96; font-weight: 700; margin-bottom: 10px; }
.mail__top svg { width: 22px; height: 22px; }
.mail__card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: var(--sombra-sm); }
.mail__de { font-size: 0.78rem; color: var(--tinta-3); }
.mail__asunto { font-weight: 700; margin: 4px 0 8px; font-size: 0.95rem; }
.mail__cuerpo { font-size: 0.86rem; color: var(--tinta-2); }

/* ---------- Sala de espera + Video ---------- */
.sala { max-width: 620px; margin: 0 auto; text-align: center; }
.sala__foto { margin: -6px 0 -34px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 7; box-shadow: var(--sombra-sm); }
.sala__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-room { display: grid; grid-template-columns: 1fr; gap: 16px; }
.video-escenario {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #2c2748, #4a3f7a); box-shadow: var(--sombra); display: grid; place-items: center;
}
.video-escenario video, .video-escenario img { width: 100%; height: 100%; object-fit: cover; }
.video-remoto { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.video-remoto .av { width: 110px; height: 110px; border-radius: 50%; font-size: 2.4rem; background: rgba(255,255,255,.15); color: #fff; }
.video-pip {
  position: absolute; right: 16px; bottom: 16px; width: 26%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden;
  border: 3px solid rgba(255,255,255,.8); box-shadow: var(--sombra); background: #000; display: grid; place-items: center; color: #fff;
}
.video-pip video { transform: scaleX(-1); }
.video-etq { position: absolute; left: 16px; top: 16px; background: rgba(0,0,0,.45); color: #fff; padding: 7px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(6px); }
.video-etq .rec { width: 9px; height: 9px; border-radius: 50%; background: #ff5b5b; animation: lat 1.4s infinite; }
@keyframes lat { 50% { opacity: .3; } }
.video-controles { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vc { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-sm); transition: .15s; }
.vc:hover { transform: translateY(-2px); }
.vc svg { width: 22px; height: 22px; }
.vc.is-off { background: #ffe0e0; color: #d33; }
.vc--colgar { background: #ff5b5b; color: #fff; width: 64px; }

/* ---------- Portal médico ---------- */
.login-wrap { max-width: 410px; margin: 0 auto; }
.dash { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.dash__side { background: var(--blanco); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sombra-sm); position: sticky; top: 92px; }
.dash__perfil { text-align: center; padding: 12px 0 16px; border-bottom: 1px solid var(--linea); margin-bottom: 12px; }
.dash__perfil img { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 10px; object-fit: cover; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; font-weight: 600; color: var(--tinta-2); width: 100%; text-align: left; transition: .15s; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: var(--bg); }
.nav-item.is-on { background: var(--violeta-claro); color: var(--violeta); }
/* Variante con menú horizontal arriba + contenido a todo el ancho (super-admin) */
.dash--top { display: block; }
.dash--top .dash__side { position: static; top: auto; margin-bottom: 18px; padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash--top .dash__perfil { text-align: left; border-bottom: none; padding: 0; margin: 0; border-right: 1px solid var(--linea); padding-right: 16px; }
.dash--top .dash__side nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.dash--top .nav-item { width: auto; padding: 9px 13px; }
.dash--top .dash__main { width: 100%; }
@media (max-width: 760px) { .dash--top .dash__side { flex-direction: column; align-items: stretch; } .dash--top .dash__perfil { border-right: none; border-bottom: 1px solid var(--linea); padding: 0 0 10px; } }

/* ============================================================
   TABLA — componente de datos (Pacientes, Médicos, Adjuntos,
   Usuarios, Auditoría, Finanzas, Soporte). Contenedor: <div style="overflow:auto">
   ============================================================ */
.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-family: var(--fuente); color: var(--tinta); table-layout: auto; }
.tabla thead th { text-align: left; padding: 10px 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tinta-2); background: var(--violeta-claro); border-bottom: 2px solid var(--linea); white-space: nowrap; vertical-align: middle; }
.tabla tbody td { padding: 10px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; line-height: 1.4; }
.tabla tbody tr:hover td { background: var(--violeta-claro); transition: background 0.15s ease; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:nth-child(even) td { background: rgba(239, 233, 255, 0.35); }
.tabla tbody tr:nth-child(even):hover td { background: var(--violeta-claro); }
.tabla thead th.num, .tabla tbody td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tbody td[colspan] { text-align: center; color: var(--tinta-3); padding: 28px 14px; font-size: 0.85rem; }
.tabla td small { font-size: 0.78rem; color: var(--tinta-3); display: block; line-height: 1.3; }
.tabla td .btn--ghost, .tabla td .btn--sm { vertical-align: middle; }
.tabla td:last-child { white-space: nowrap; }
@media (max-width: 640px) { .tabla thead th, .tabla tbody td { padding: 8px 10px; font-size: 0.8rem; } }

/* ============================================================
   FAQ — acordeón accesible nativo (<details>/<summary>)
   ============================================================ */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq__item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-sm); box-shadow: var(--sombra-sm); overflow: hidden; }
.faq__item summary { cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--tinta); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--violeta); transition: transform .2s; line-height: 1; }
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--violeta); }
.faq__item summary:focus-visible { outline: 3px solid var(--lavanda); outline-offset: -3px; }
.faq__r { padding: 0 18px 16px; color: var(--tinta-2); line-height: 1.55; font-size: .95rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--blanco); border-radius: var(--r); padding: 18px; box-shadow: var(--sombra-sm); }
.kpi__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
.kpi__ic svg { width: 22px; height: 22px; }
.kpi b { font-size: 1.7rem; display: block; line-height: 1; }
.kpi span { font-size: 0.84rem; color: var(--tinta-2); font-weight: 600; }

.cita-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--bg); margin-bottom: 11px; transition: .15s; }
.cita-row:hover { background: var(--violeta-claro); }
.cita-row__hora { text-align: center; flex: 0 0 auto; width: 64px; }
.cita-row__hora b { display: block; font-size: 1.1rem; }
.cita-row__hora small { font-size: 0.72rem; color: var(--tinta-3); }
.cita-row__info { flex: 1; min-width: 0; }
.cita-row__info b { font-size: 1rem; }
.cita-row__info span { font-size: 0.85rem; color: var(--tinta-2); display: block; }
.cita-row__estado { font-size: 0.74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.estado-prox { background: var(--celeste-claro); color: #0b5e96; }
.estado-ahora { background: var(--menta-claro); color: #0c6b58; }

/* Notificaciones */
.notif { display: flex; gap: 12px; padding: 13px; border-radius: 14px; background: var(--bg); margin-bottom: 10px; }
.notif__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.notif__ic svg { width: 19px; height: 19px; }
.notif__txt { font-size: 0.88rem; }
.notif__txt b { display: block; }
.notif__txt span { color: var(--tinta-2); }
.notif__t { font-size: 0.72rem; color: var(--tinta-3); margin-left: auto; flex: 0 0 auto; }

/* Cronómetro de la consulta (médico) */
.ses-timer {
  position: sticky; top: 80px; z-index: 30;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--violeta-claro); color: var(--violeta);
  border: 1px solid var(--glass-borde); border-radius: 999px;
  padding: 9px 18px; margin-bottom: 16px; font-size: 0.95rem; box-shadow: var(--sombra-sm);
}
.ses-timer svg { width: 18px; height: 18px; }
.ses-timer b { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.ses-timer span { color: var(--tinta-2); font-size: 0.84rem; font-weight: 600; }
.ses-timer--aviso { background: var(--amarillo-claro); color: #8a6a00; }
.ses-timer--aviso span { color: #8a6a00; }
.ses-timer--fin { background: #fff0e7; color: #b4530a; }
.ses-timer--fin span { color: #b4530a; }
.ses-timer--over { background: #ffe6e6; color: #c0392b; animation: latido 1.4s infinite; }
.ses-timer--over span { color: #c0392b; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(255,107,107,.18); } }

/* Sobrecupos (dashboard médico) */
#dash-sobrecupos h3 { display: flex; align-items: center; gap: 8px; }
#dash-sobrecupos h3 svg { width: 20px; height: 20px; color: var(--violeta); }
.sc-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-form select { flex: 1; min-width: 110px; padding: 11px 13px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bg); font-size: 0.92rem; font-weight: 600; transition: .15s; }
.sc-form select:focus { outline: none; border-color: var(--lavanda); background: #fff; }
.sc-form .btn { flex: 0 0 auto; }
.sc-lista { display: flex; flex-direction: column; gap: 9px; }
.sc-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.sc-item.is-tomado { background: var(--menta-claro); }
.sc-item__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--violeta-claro); color: var(--violeta); flex: 0 0 auto; }
.sc-item__ic svg { width: 16px; height: 16px; }
.sc-item.is-tomado .sc-item__ic { background: #d2f4ea; color: #0c6b58; }
.sc-item__txt { flex: 1; min-width: 0; }
.sc-item__txt b { font-size: 0.94rem; display: block; }
.sc-item__txt span { font-size: 0.82rem; color: var(--tinta-2); }
.sc-item__estado { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; flex: 0 0 auto; }
.sc-item__estado--tomado { background: #d2f4ea; color: #0c6b58; }
.sc-item__estado--tomado svg { width: 13px; height: 13px; }
.sc-item__quitar { width: 34px; height: 34px; border-radius: 10px; background: #ffe6e6; color: #c0392b; display: grid; place-items: center; flex: 0 0 auto; transition: .15s; }
.sc-item__quitar:hover { background: #ffd4d4; }
.sc-item__quitar svg { width: 15px; height: 15px; }

/* Sesión telemedicina (médico) */
.sesion { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.sesion__ficha { background: var(--blanco); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sombra-sm); max-height: 70vh; overflow-y: auto; }
.bloque-ficha { margin-bottom: 18px; }
.bloque-ficha h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tinta-3); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.bloque-ficha h4 svg { width: 16px; height: 16px; color: var(--violeta); }
.tag { display: inline-block; font-size: 0.82rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--violeta-claro); color: var(--violeta); margin: 0 5px 5px 0; }
.tag--alerta { background: #ffe6e6; color: #c0392b; }
.tag--menta { background: var(--menta-claro); color: #0c6b58; }
.linea-tiempo { border-left: 2px solid var(--linea); padding-left: 16px; }
.evento { position: relative; padding-bottom: 16px; }
.evento::before { content: ""; position: absolute; left: -22px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--violeta); border: 2px solid #fff; }
.evento small { color: var(--tinta-3); font-size: 0.78rem; }
.evento b { display: block; font-size: 0.94rem; }
.evento p { font-size: 0.86rem; color: var(--tinta-2); }

/* Grabación IA */
.ia-box { background: linear-gradient(135deg, var(--violeta-claro), var(--menta-claro)); border-radius: var(--r-lg); padding: 20px; }
.ia-estado { display: flex; align-items: center; gap: 12px; font-weight: 700; margin-bottom: 8px; }
.ia-onda { display: flex; align-items: center; gap: 3px; height: 26px; }
.ia-onda i { width: 3px; background: var(--violeta); border-radius: 3px; animation: onda 1s ease-in-out infinite; }
.ia-onda i:nth-child(2){animation-delay:.1s} .ia-onda i:nth-child(3){animation-delay:.2s}
.ia-onda i:nth-child(4){animation-delay:.3s} .ia-onda i:nth-child(5){animation-delay:.15s}
.ia-onda i:nth-child(6){animation-delay:.25s} .ia-onda i:nth-child(7){animation-delay:.05s}
@keyframes onda { 0%,100%{height:6px} 50%{height:24px} }

.transcripcion { max-height: 280px; overflow-y: auto; padding-right: 6px; margin-top: 12px; }
.tr-linea { display: flex; gap: 10px; margin-bottom: 12px; }
.tr-linea__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; flex: 0 0 auto; }
.tr-linea--medico .tr-linea__av { background: var(--grad-primario); color: #fff; }
.tr-linea--paciente .tr-linea__av { background: var(--menta); color: #073b32; }
.tr-linea__b { background: var(--bg); border-radius: 14px; padding: 9px 13px; font-size: 0.88rem; }
.tr-linea__b small { display: block; color: var(--tinta-3); font-size: 0.7rem; font-weight: 700; margin-bottom: 2px; }

.resumen-ia { background: var(--blanco); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sombra-sm); border: 2px solid var(--violeta-claro); }
.resumen-ia__tit { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.resumen-ia__tit .badge-ia { font-size: 0.68rem; background: var(--grad-primario); color: #fff; padding: 4px 9px; border-radius: 999px; }
.ri-item { margin-bottom: 14px; }
.ri-item h5 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--violeta); margin-bottom: 4px; }
.ri-item p, .ri-item li { font-size: 0.92rem; color: var(--tinta); }
.ri-item ul { padding-left: 18px; }
.ri-item li { margin-bottom: 3px; }

/* ---------- Emisión de receta y órdenes (médico) ---------- */
.receta-emision { background: var(--blanco); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sombra-sm); border: 2px solid var(--menta-claro); margin-top: 18px; }
.receta-cab h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; flex-wrap: wrap; }
.receta-cab h3 svg { width: 22px; height: 22px; color: var(--violeta); }
.receta-cab p { color: var(--tinta-2); font-size: 0.86rem; margin: 6px 0 4px; }
.receta-grupo { margin-top: 18px; }
.receta-grupo > h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--violeta); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.receta-grupo > h4 svg { width: 16px; height: 16px; }
.rx-fila { display: grid; gap: 8px; align-items: center; margin-bottom: 8px; }
.rx-fila--med { grid-template-columns: 1.2fr 1.4fr 0.9fr 40px; }
.rx-fila--ord { grid-template-columns: 1.3fr 1.5fr 40px; }
.rx-fila input { width: 100%; padding: 10px 12px; border-radius: 11px; border: 2px solid var(--linea); background: var(--bg); font-size: 0.88rem; transition: .15s; }
.rx-fila input:focus { outline: none; border-color: var(--lavanda); background: #fff; }
.rx-del { width: 40px; height: 40px; border-radius: 11px; background: #ffe6e6; color: #c0392b; display: grid; place-items: center; flex: 0 0 auto; }
.rx-del:hover { background: #ffd4d4; }
.rx-del svg { width: 16px; height: 16px; }
.rx-add { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--violeta); background: var(--violeta-claro); padding: 8px 14px; border-radius: 999px; margin-top: 4px; }
.rx-add:hover { background: #e6deff; }
.rx-add svg { width: 15px; height: 15px; }
.receta-acc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.receta-acc .btn { flex: 1; min-width: 200px; }

/* ---------- Panel del paciente (Mi cuenta) ---------- */
.cita-cuenta { margin-bottom: 16px; }
.cita-cuenta__top { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.cita-cuenta__info { flex: 1; min-width: 0; }
.cita-cuenta__info b { font-size: 1.05rem; }
.cita-cuenta__estado { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: #0c6b58; background: var(--menta-claro); padding: 6px 11px; border-radius: 999px; flex: 0 0 auto; }
.cita-cuenta__estado svg { width: 14px; height: 14px; }
.cita-cuenta__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 16px; }
.cita-cuenta__datos > div { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--tinta-2); }
.cita-cuenta__datos svg { width: 16px; height: 16px; color: var(--violeta); flex: 0 0 auto; }
.cita-cuenta__acc { display: flex; gap: 10px; flex-wrap: wrap; }
.cita-cuenta__acc .btn { flex: 1; min-width: 150px; }
.cita-cancelar { background: #ffe6e6; color: #c0392b; }
.cita-cancelar:hover { background: #ffd4d4; transform: translateY(-2px); }

.tag--btn { cursor: pointer; border: none; transition: .15s; }
.tag--btn:hover { filter: brightness(0.96); transform: translateY(-1px); }
.tag--btn svg { vertical-align: -2px; }

.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doc-card { background: var(--blanco); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); display: flex; align-items: center; gap: 13px; }
.doc-card__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--violeta-claro); color: var(--violeta); flex: 0 0 auto; }
.doc-card__ic svg { width: 22px; height: 22px; }
.doc-card__txt { flex: 1; min-width: 0; }
.doc-card__txt b { font-size: 0.95rem; display: block; }
.doc-card__txt span { font-size: 0.8rem; color: var(--tinta-2); display: block; }
.doc-card__txt small { font-size: 0.72rem; color: var(--tinta-3); }
.doc-card .btn { flex: 0 0 auto; }

.vacio { text-align: center; padding: 40px 24px; }
.vacio svg { width: 40px; height: 40px; color: var(--lavanda); margin: 0 auto 12px; }
.vacio h3 { font-size: 1.2rem; margin-bottom: 6px; }
.vacio p { color: var(--tinta-2); margin-bottom: 18px; }

.reprog-ops { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.reprog-op { display: flex; align-items: center; }
.reprog-op input { position: absolute; opacity: 0; }
.reprog-op span { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 15px; border-radius: 14px; background: var(--bg); border: 2px solid transparent; font-weight: 600; font-size: 0.92rem; transition: .15s; }
.reprog-op span svg { width: 16px; height: 16px; color: var(--violeta); }
.reprog-op input:checked + span { border-color: var(--violeta); background: var(--violeta-claro); color: var(--violeta); }
.reprog-op input:focus-visible + span { outline: 3px solid var(--lavanda); }

/* ---------- Estados vacíos / chips de filtro ---------- */
.filtros { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.chip { padding: 9px 16px; border-radius: 999px; background: var(--blanco); font-weight: 700; font-size: 0.9rem; color: var(--tinta-2); box-shadow: var(--sombra-sm); transition: .15s; }
.chip:hover { color: var(--violeta); }
.chip.is-on { background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color); }

/* ---------- Panel de administración ---------- */
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.adm-kpis .kpi b { font-size: 1.4rem; }
.grafico-barras { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barra__col { width: 100%; max-width: 48px; background: var(--grad-primario); border-radius: 10px 10px 4px 4px; display: flex; align-items: flex-start; justify-content: center; min-height: 24px; position: relative; transition: height .5s cubic-bezier(.2,1,.4,1); }
.barra__col b { color: #fff; font-size: 0.8rem; margin-top: 6px; }
.barra small { font-size: 0.78rem; color: var(--tinta-2); font-weight: 700; }
.adm-med { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.adm-med:last-child { border-bottom: none; }
.adm-med .med-card__foto { width: 44px; height: 44px; border-radius: 12px; font-size: 0.95rem; }
.adm-med__txt { flex: 1; min-width: 0; }
.adm-med__txt b { font-size: 0.94rem; display: block; }
.adm-med__txt span { font-size: 0.82rem; color: var(--tinta-2); }
.adm-med__meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: 0 0 auto; }
.cita-row.is-cancelada { opacity: 0.6; }
.cita-row.is-cancelada .cita-row__info b { text-decoration: line-through; }

.dispo-scroll { overflow-x: auto; }
.dispo-tabla { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 560px; }
.dispo-tabla th { font-size: 0.78rem; font-weight: 700; color: var(--tinta-2); padding: 4px; }
.dispo-tabla thead th { color: var(--tinta-3); }
.dispo-dia { text-align: left !important; white-space: nowrap; color: var(--tinta) !important; }
.slot-cell { width: 100%; min-width: 48px; height: 38px; border-radius: 10px; background: var(--bg); color: var(--tinta-3); display: grid; place-items: center; transition: .15s; border: 2px solid transparent; }
.slot-cell:hover { border-color: var(--lavanda); }
.slot-cell.is-on { background: var(--menta-claro); color: #0c6b58; }
.slot-cell.is-on svg { width: 14px; height: 14px; }

/* ----- Liquidación del profesional ----- */
.liq-hero { background: var(--grad-primario); color: #fff; border: none; box-shadow: var(--sombra-color); }
.liq-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.liq-hero__top span:last-child { color: rgba(255,255,255,.85) !important; }
.liq-hero > span { color: rgba(255,255,255,.9); }
.liq-hero__monto { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -1px; line-height: 1.05; margin: 6px 0; }
.liq-hero__monto.liq-pulse { animation: liqpulse .6s ease; }
@keyframes liqpulse { 50% { transform: scale(1.04); } }
.liq-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; background: rgba(255,255,255,.2); padding: 5px 11px; border-radius: 999px; }
.liq-vivo__dot { width: 8px; height: 8px; border-radius: 50%; background: #5effc7; box-shadow: 0 0 0 0 rgba(94,255,199,.7); animation: pulso 1.6s infinite; }

.liq-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.liq-card { background: var(--blanco); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); }
.liq-card__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--violeta-claro); color: var(--violeta); margin-bottom: 10px; }
.liq-card__ic svg { width: 20px; height: 20px; }
.liq-card__t { font-size: 0.78rem; color: var(--tinta-2); font-weight: 600; display: block; }
.liq-card b { font-size: 1.35rem; display: block; line-height: 1.15; margin-top: 2px; }
.liq-card small { font-size: 0.74rem; color: var(--tinta-3); }

.liq-estado-card h4 { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; margin-bottom: 8px; }
.liq-estado-card h4 svg { width: 18px; height: 18px; }
.liq-estado-card b { font-size: 1.7rem; display: block; line-height: 1; }
.liq-estado-card span { font-size: 0.84rem; color: var(--tinta-2); }
.liq-estado-card--ok { border-left: 4px solid var(--ok); }
.liq-estado-card--ok h4 { color: #0c6b58; }
.liq-estado-card--pend { border-left: 4px solid var(--amarillo); }
.liq-estado-card--pend h4 { color: #8a6a00; }

.liq-costo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--linea); font-size: 0.9rem; }
.liq-costo:last-child { border-bottom: none; }
.liq-costo span { color: var(--tinta-2); }

.liq-scroll { overflow-x: auto; }
.liq-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.liq-tabla th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tinta-3); padding: 8px 10px; border-bottom: 2px solid var(--linea); }
.liq-tabla td { padding: 11px 10px; border-bottom: 1px solid var(--linea); font-size: 0.9rem; vertical-align: middle; }
.liq-tabla td small { display: block; color: var(--tinta-3); font-size: 0.76rem; }
.liq-tabla tr.is-pend { background: var(--amarillo-claro); }
.liq-num { text-align: right; white-space: nowrap; }
.liq-num--costo { color: #c0392b; }
.liq-num--med { color: #0c6b58; }
.liq-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.liq-estado svg { width: 13px; height: 13px; }
.liq-estado--ok { background: var(--menta-claro); color: #0c6b58; }
.liq-estado--pend { background: var(--amarillo-claro); color: #8a6a00; }

/* ---------- Footer ---------- */
.pie { text-align: center; padding: 30px 0; color: var(--tinta-3); font-size: 0.84rem; }
/* Los enlaces del pie son los LEGALES (Términos, Privacidad, Consentimiento
   Informado, Seguridad). En línea medían 16px de alto con 5px entre filas:
   reprueba WCAG 2.5.8 (destino táctil). inline-block + padding los separa sin
   cambiar el flujo del párrafo ni el aspecto en escritorio. */
.pie a { color: var(--violeta); font-weight: 600; display: inline-block; padding: 6px 2px; }
.demo-badge { position: fixed; left: 16px; bottom: 16px; z-index: 60; background: var(--tinta); color: #fff; font-size: 0.74rem; font-weight: 700; padding: 8px 13px; border-radius: 999px; box-shadow: var(--sombra); opacity: .9; }

/* ---------- Reveals ---------- */
.js .js-rev { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .js-rev.is-visible { opacity: 1; transform: none; }
.js-rev:nth-child(2){transition-delay:.05s} .js-rev:nth-child(3){transition-delay:.1s}
.js-rev:nth-child(4){transition-delay:.15s} .js-rev:nth-child(5){transition-delay:.2s}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__art { max-width: 440px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-esp { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .recordatorios { grid-template-columns: 1fr; }
  .sesion { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash__side { position: static; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .liq-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .contenedor { padding-inline: 16px; }
  .grid-esp { grid-template-columns: 1fr 1fr; gap: 12px; }
  .esp-card { padding: 16px; min-height: 130px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .campo--row { grid-template-columns: 1fr; }
  .pago-metodos { flex-direction: column; }
  .marca small { display: none; }
  /* Los botones del encabezado pierden su texto en teléfono para caber. Los de
     "Portal profesional" y "Acceso Paciente" sobrevivían de casualidad porque su
     emoji va FUERA del <span> que se oculta; el de "Agendar" no lleva emoji y
     quedaba como una píldora vacía de 32x44px: sin texto, sin icono y sin nombre
     accesible. Es el botón de conversión del sitio. */
  .topbar__acc .btn span { display: none; }
  /* El principal CONSERVA su texto: es la acción que la paciente vino a hacer. */
  .topbar__acc .btn--primario span { display: inline; }
  /* "Portal profesional" es para las médicas, no para la paciente: se retira del
     encabezado en teléfono y le devuelve el ancho al botón principal.
     ⚠️ Es una pérdida funcional acotada, NO un descuido: el acceso al portal
     médico sigue disponible en el pie de index.html (<a href="medico.html">
     Portal médico</a>), que en teléfono queda a un scroll de distancia.
     Si se prefiere conservarlo arriba, cambiar este display:none por
     .topbar__acc .btn--secundario-movil{opacity:.75;font-weight:600} y
     dejarlo solo con el emoji. */
  .topbar__acc .btn--secundario-movil { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .cita-row { flex-wrap: wrap; }
  .cita-row__info { flex: 1 1 60%; }
  .cita-row__estado { margin-top: 4px; }
  .cita-row [data-entrar] { flex: 1 1 100%; justify-content: center; margin-top: 8px; }
  .rx-fila--med, .rx-fila--ord { grid-template-columns: 1fr 40px; }
  .rx-fila--med .rx-nombre, .rx-fila--ord .rx-ex { grid-column: 1; }
  .rx-fila--med .rx-del, .rx-fila--ord .rx-del { grid-row: 1; grid-column: 2; }
  .receta-acc .btn { min-width: 100%; }
  .cita-cuenta__datos { grid-template-columns: 1fr; }
  .cita-cuenta__acc .btn { min-width: 100%; }
  .doc-card { flex-wrap: wrap; }
  .doc-card .btn { flex: 1 1 100%; justify-content: center; margin-top: 6px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .js-rev { opacity: 1; transform: none; }
}

/* ============================================================
   BLOQUE NORMA MINSAL (Ley 21.541) — componentes de cumplimiento
   ============================================================ */

/* ----- Modal genérico (legal / consentimiento) ----- */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(44, 39, 72, 0.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px; animation: fadein .2s ease both;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  background: var(--blanco); border-radius: var(--r-lg); box-shadow: var(--sombra);
  width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; padding: 26px;
  animation: subir .26s cubic-bezier(.2,1,.4,1) both;
}
@keyframes subir { from { transform: translateY(18px); opacity: 0; } }
.modal__cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; background: var(--violeta-claro); color: var(--violeta); }
.modal__ic svg { width: 24px; height: 24px; }
.modal h3 { font-size: 1.25rem; }
.modal__cerrar { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--tinta-2); display: grid; place-items: center; flex: 0 0 auto; }
.modal__cuerpo { font-size: 0.93rem; color: var(--tinta-2); line-height: 1.6; }
.modal__cuerpo h4 { color: var(--tinta); margin: 14px 0 4px; font-size: 0.95rem; }
.modal__cuerpo ul { padding-left: 18px; margin: 6px 0; }
.modal__cuerpo li { margin-bottom: 4px; }
.modal__acc { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.modal__acc .btn { flex: 1; min-width: 140px; }
.consent-check { display: flex; gap: 11px; align-items: flex-start; background: var(--violeta-claro); border-radius: 14px; padding: 14px; margin-top: 16px; }
.consent-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--violeta); }
.consent-check label { font-size: 0.88rem; color: var(--tinta); }

/* ----- Checkbox de consentimiento en formularios ----- */
.campo-consent { display: flex; gap: 11px; align-items: flex-start; background: var(--menta-claro); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.campo-consent input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--ok); }
.campo-consent label { font-size: 0.86rem; color: var(--tinta); }
.campo-consent a { color: var(--violeta); font-weight: 700; }

/* ----- Validación visible de formularios (verif. 16, 21) ----- */
.campo input.invalido, .campo textarea.invalido, .campo select.invalido { border-color: #ff7a7a; background: #fff2f2; }
.campo .error-msg { color: #d33; font-size: 0.8rem; font-weight: 600; margin-top: 5px; display: none; }
.campo.tiene-error .error-msg { display: block; }

/* ----- Sellos de cumplimiento ----- */
.sellos { display: flex; flex-wrap: wrap; gap: 8px; }
.sello { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--menta-claro); color: #0c6b58; }
.sello svg { width: 15px; height: 15px; }
.sello--violeta { background: var(--violeta-claro); color: var(--violeta); }
.sello--celeste { background: var(--celeste-claro); color: #0b5e96; }
.sello--gris { background: #eef0f6; color: var(--tinta-2); }

/* ----- Banner de identidad del prestador (verif. 29) ----- */
.id-bar { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: 16px; padding: 12px 16px; box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); }
.id-bar__foto { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--violeta-claro); display: grid; place-items: center; font-weight: 800; color: var(--violeta); flex: 0 0 auto; }
.id-bar__info { min-width: 0; flex: 1; }
.id-bar__info b { display: block; font-size: 0.98rem; }
.id-bar__info span { font-size: 0.82rem; color: var(--tinta-2); display: block; overflow-wrap: anywhere; }
.id-bar__verif { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: #0c6b58; background: var(--menta-claro); padding: 4px 9px; border-radius: 999px; flex: 0 0 auto; }
.id-bar__verif svg { width: 13px; height: 13px; }

/* ----- Prueba técnica previa (verif. 32) ----- */
.test-tecnico { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; text-align: left; }
.test-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.test-fila__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--violeta-claro); color: var(--violeta); }
.test-fila__ic svg { width: 18px; height: 18px; }
.test-fila__txt { flex: 1; text-align: left; }
.test-fila__txt b { display: block; font-size: 0.92rem; }
.test-fila__txt span { font-size: 0.8rem; color: var(--tinta-2); }
.test-fila__estado { font-size: 0.8rem; font-weight: 700; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 6px; }
.test-fila.is-ok .test-fila__estado { color: #0c6b58; }
.test-fila.is-ok .test-fila__ic { background: var(--menta-claro); color: #0c6b58; }
.test-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); }
.test-fila.is-prog .test-punto { background: var(--amarillo); animation: lat 1s infinite; }
.test-fila.is-ok .test-punto { background: var(--ok); }

/* ----- Modo prueba real (Jitsi + transcripción en vivo) ----- */
.real-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.real-barra .btn { flex: 0 0 auto; }
.real-hint { font-size: 0.8rem; color: var(--tinta-3); }
.real-hint a { color: var(--violeta); font-weight: 700; overflow-wrap: anywhere; }
.video-escenario iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Modo videollamada real: el escenario se agranda y la ficha pasa abajo */
.video-escenario.is-jitsi { aspect-ratio: auto; height: 74vh; min-height: 440px; }
.sesion.modo-jitsi { grid-template-columns: 1fr; }
.video-room.modo-jitsi { max-width: 1060px; }
@media (max-width: 900px) { .video-escenario.is-jitsi { height: 62vh; min-height: 360px; } }
.real-cargando, .real-error { color: #fff; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.real-cargando svg { width: 28px; height: 28px; }
.real-cargando b { font-size: 1rem; } .real-cargando span { font-size: 0.85rem; opacity: .85; }
.real-error { color: #ffd4d4; font-size: 0.9rem; }
.real-error a { color: #fff; font-weight: 700; text-decoration: underline; }
.tr-parcial { color: var(--tinta-3); font-style: italic; font-size: 0.86rem; padding: 4px 0 4px 40px; min-height: 8px; }

/* ----- Controles extra de video (subt., compartir, grabación) ----- */
.vc.is-activo { background: var(--grad-primario); color: #fff; }
.video-subtitulo { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); max-width: 80%; background: rgba(0,0,0,.6); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 0.92rem; text-align: center; backdrop-filter: blur(4px); }
.video-cifrado { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; background: rgba(16,140,75,.85); color: #fff; padding: 6px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; backdrop-filter: blur(6px); }
.video-cifrado svg { width: 13px; height: 13px; }

/* ----- Sala de espera (médico admite) ----- */
.espera-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--amarillo-claro); margin-bottom: 16px; }
.espera-card__pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 0 rgba(255,212,94,.7); animation: pulso 1.6s infinite; flex: 0 0 auto; }
@keyframes pulso { 70% { box-shadow: 0 0 0 12px rgba(255,212,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,212,94,0); } }

/* Estado REAL de presencia (FASE 2): gris = la paciente todavía no se conecta
   (botón "Admitir" deshabilitado); verde = está conectada de verdad (latido vivo
   en cd_sesiones). El color NUNCA se pinta a mano: lo decide api/sesion-clinica.php. */
.espera-card--gris { background: #f1eff5; }
.espera-card--gris .espera-card__pulso { background: #b9b4c7; box-shadow: none; animation: none; }
.espera-card--verde { background: var(--menta-claro); }
.espera-card--verde .espera-card__pulso { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: pulso-ok 1.6s infinite; }
@keyframes pulso-ok { 70% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

/* Aviso de degradación de la transcripción (FASE 3). Se muestra, por ejemplo, si la
   médica no compartió el audio de la pestaña: entonces solo se transcribe SU voz.
   Nunca se degrada en silencio. */
.ia-aviso {
  background: #fff8e6; border: 1px solid #ffe3a3; color: #8a6a00;
  border-radius: 10px; padding: 9px 12px; margin-bottom: 10px;
  font-size: .85rem; font-weight: 600; line-height: 1.45;
}
.ia-aviso[hidden] { display: none; }

/* ----- Registro de auditoría (verif. 7, 26) ----- */
.audit-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; }
.audit-row__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--violeta-claro); color: var(--violeta); }
.audit-row__ic svg { width: 18px; height: 18px; }
.audit-row__txt b { font-size: 0.92rem; display: block; }
.audit-row__txt span { font-size: 0.8rem; color: var(--tinta-2); }
.audit-row__meta { text-align: right; font-size: 0.76rem; color: var(--tinta-3); white-space: nowrap; }
.audit-row__meta b { display: block; color: var(--tinta-2); }

/* ----- Widget de accesibilidad (WCAG) ----- */
.a11y-fab { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 52px; height: 52px; border-radius: 50%; background: var(--grad-primario); color: #fff; box-shadow: var(--sombra-color); display: grid; place-items: center; }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-panel { position: fixed; right: 16px; bottom: 78px; z-index: 71; background: var(--blanco); border-radius: var(--r); box-shadow: var(--sombra); padding: 16px; width: 250px; display: none; }
.a11y-panel.is-open { display: block; animation: subir .2s ease both; }
.a11y-panel h4 { font-size: 0.9rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.a11y-panel h4 svg { width: 18px; height: 18px; color: var(--violeta); }
.a11y-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 0.86rem; font-weight: 600; }
.a11y-btns { display: flex; gap: 6px; }
.a11y-btns button { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); font-weight: 800; }
.a11y-btns button:hover { background: var(--violeta-claro); color: var(--violeta); }
.a11y-toggle { width: 46px; height: 26px; border-radius: 999px; background: #d8d4ea; position: relative; transition: .2s; flex: 0 0 auto; }
.a11y-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.a11y-toggle.is-on { background: var(--violeta); }
.a11y-toggle.is-on::after { left: 23px; }

/* Alto contraste (WCAG) */
body.alto-contraste {
  --bg: #ffffff; --bg-2: #ffffff; --tinta: #0a0a14; --tinta-2: #1f1d33; --tinta-3: #44415c;
  --linea: rgba(44,39,72,0.4); --violeta: #4b27c9; --ok: #0a7a52;
  background: #ffffff;
}
body.alto-contraste .panel, body.alto-contraste .esp-card, body.alto-contraste .med-card,
body.alto-contraste .stat, body.alto-contraste .kpi, body.alto-contraste .modal { border: 2px solid #0a0a14; }
body.alto-contraste .hero__bajada, body.alto-contraste .med-card__esp { color: #1f1d33; }

@media (max-width: 560px) {
  .audit-row { grid-template-columns: 32px 1fr; }
  .audit-row__meta { grid-column: 2; text-align: left; }
}

/* Isotipo NexoFem en la barra de marca */
.marca__iso{width:38px;height:38px;object-fit:contain;flex:none}

/* ---------- Panel MRS dentro de la ficha (ginecología) ---------- */
.mrs-panel { background: var(--celeste-claro); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.mrs-cab { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #0b5e96; font-size: .85rem; margin-bottom: 8px; }
.mrs-aviso { background: #fff8e6; border: 1px solid #ffe3a3; color: #8a6a00; border-radius: 8px; padding: 7px 10px; font-size: .8rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.mrs-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mrs-sub { font-weight: 700; color: var(--tinta-2); font-size: .78rem; margin: 8px 0 4px; }
.mrs-dominio { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 8px; margin: 3px 0; font-size: .8rem; }
.mrs-dom-nom { color: var(--tinta-2); }
.mrs-dom-val { text-align: right; color: var(--tinta-2); font-weight: 700; }
.mrs-bar { display: block; height: 8px; border-radius: 6px; background: #d6e8f6; overflow: hidden; }
.mrs-bar i { display: block; height: 100%; background: var(--celeste); border-radius: 6px; }
.mrs-serie-it { font-size: .8rem; color: var(--tinta-2); margin: 2px 0; }
.mrs-cmp { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--tinta-2); margin: 2px 0; }
.mrs-vacio { font-size: .8rem; color: var(--tinta-3); }

/* ---------- Mi agenda: calendario mensual (Feature 4) ---------- */
.slot.is-res { background: var(--amarillo-claro); color: #8a6a00; cursor: not-allowed; }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-mes-tit { margin: 0; text-transform: capitalize; text-align: center; flex: 1 1 auto; }
.ag-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--tinta-2); margin-bottom: 14px; }
.ag-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ag-lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ag-lg--libre { background: var(--menta-claro); border: 2px solid var(--menta); }
.ag-lg--lleno { background: #fdeaea; border: 2px solid #d65a5a; }
.ag-lg--vacio { background: #f0eef6; border: 2px solid var(--linea); }
.ag-cal { margin-bottom: 6px; }
.ag-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.ag-dow span { text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tinta-3); }
.ag-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ag-dia { min-height: 62px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--blanco); padding: 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; cursor: pointer; transition: .15s; text-align: left; font-family: var(--fuente); }
.ag-dia:hover:not(.ag-dia--off) { transform: translateY(-2px); box-shadow: var(--sombra-sm); }
.ag-dia--off { background: transparent; border-color: transparent; cursor: default; }
.ag-dia-n { font-weight: 800; font-size: .95rem; color: var(--tinta); }
.ag-dia-i { font-size: .72rem; font-weight: 700; }
.ag-dia--libre { background: var(--menta-claro); border-color: var(--menta); }
.ag-dia--libre .ag-dia-i { color: #0c6b58; }
.ag-dia--lleno { background: #fdeaea; border-color: #e0a0a0; }
.ag-dia--lleno .ag-dia-i { color: #a13a3a; }
.ag-dia--vacio { background: #f6f5fb; border-color: var(--linea); }
.ag-dia--vacio .ag-dia-n { color: var(--tinta-3); }
.ag-dia--hoy { box-shadow: 0 0 0 2px var(--violeta) inset; }
.ag-dia--sel { outline: 3px solid var(--violeta); outline-offset: 1px; }
.ag-detalle:empty { display: none; }
.ag-detalle-panel { margin-top: 16px; }
.ag-det-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ag-det-cab h4 { margin: 0; text-transform: capitalize; }
.ag-det-sub { font-weight: 700; font-size: .82rem; color: var(--tinta-2); margin-bottom: 8px; }
.ag-pac { padding: 9px 12px; border-radius: 10px; background: var(--violeta-claro); margin-bottom: 6px; font-size: .9rem; }
.ag-pac-mot { font-size: .8rem; color: var(--tinta-2); margin-top: 2px; }
.ag-est { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: capitalize; background: var(--celeste-claro); color: #0b5e96; vertical-align: middle; }
.ag-est--confirmada { background: var(--menta-claro); color: #0c6b58; }
.ag-est--concretada { background: var(--violeta-claro); color: var(--violeta); }
.ag-est--cancelada { background: #fdeaea; color: #a13a3a; }
.ag-est--no_show { background: var(--amarillo-claro); color: #8a6a00; }
.ag-prox { margin-top: 20px; }
.ag-prox h4 { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ag-prox h4 svg { width: 18px; height: 18px; color: var(--violeta); }
@media (max-width: 560px) {
  .ag-dia { min-height: 52px; padding: 4px; border-radius: 9px; }
  .ag-dia-n { font-size: .82rem; }
  .ag-dia-i { font-size: .62rem; }
  .ag-dow span { font-size: .62rem; }
  .ag-grid, .ag-dow { gap: 4px; }
  .ag-mes-tit { font-size: 1rem; order: -1; flex-basis: 100%; }
}
/* ---------- Calendario mensual embebido en el panel del paciente (reserva) ---------- */
#agenda-dias .ag-top { margin-bottom: 10px; }
#agenda-dias .ag-dia { min-height: 54px; }
#agenda-dias .ag-dia-i { font-size: .66rem; }
#agenda-slots .agc-det { margin-top: 14px; }
#agenda-slots .ag-det-sub { display: inline-flex; align-items: center; gap: 6px; }
#agenda-slots .ag-det-sub svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------
   A.1 (12-jul-2026) — Colores FUERTES del calendario de RESERVA del paciente.
   Acotado a #agenda-dias a propósito: las clases .ag-* las COMPARTE la agenda
   del MÉDICO (medico.js). Al poner los overrides SOLO bajo #agenda-dias, la
   vista del médico conserva su aspecto pastel original y aquí gritamos el estado:
     verde teal sólido = "hay horas"  ·  rojo sólido = "sin horas".
   ------------------------------------------------------------------ */
#agenda-dias .ag-dia--libre {
  background: #0b7266;                  /* teal oscuro — "hay horas". Más oscuro que --menta
                                          para que el texto BLANCO cumpla contraste AA 4.5:1
                                          (el #0fa896 quedaba en 2.97:1, insuficiente). */
  border-color: #084f46;
  box-shadow: 0 4px 12px rgba(11, 114, 102, 0.30);
}
#agenda-dias .ag-dia--libre .ag-dia-n,
#agenda-dias .ag-dia--libre .ag-dia-i { color: #ffffff; }  /* blanco sobre teal oscuro = AA ✓ */
#agenda-dias .ag-dia--libre:hover:not(.ag-dia--off) { background: #0c8377; }

#agenda-dias .ag-dia--lleno {
  background: #c0392b;                  /* rojo fuerte — "sin horas", inconfundible */
  border-color: #96271b;
}
#agenda-dias .ag-dia--lleno .ag-dia-n,
#agenda-dias .ag-dia--lleno .ag-dia-i { color: #ffe8e4; }  /* claro sobre rojo (AA) */

/* Días sin atención/pasados: gris tenue (igual que antes). */
#agenda-dias .ag-dia--vacio { background: #f4f2fa; border-color: var(--linea); }

/* Selección y "hoy" siguen visibles sobre los fondos fuertes teal/rojo. */
#agenda-dias .ag-dia--sel { outline: 3px solid var(--violeta); outline-offset: 2px; }
#agenda-dias .ag-dia--hoy { box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--violeta) inset; }

/* Leyenda: muestras SÓLIDAS que calzan con los nuevos colores del calendario. */
#agenda-dias .ag-lg--libre { background: #0b7266; border-color: #084f46; }
#agenda-dias .ag-lg--lleno { background: #c0392b; border-color: #96271b; }

/* ------------------------------------------------------------------
   A.2 — Intercambio calendario↔horas EN EL MISMO recuadro: min-height para
   que la caja no "salte" de alto al reemplazar la grilla por las horas.
   ------------------------------------------------------------------ */
#agenda-slots .agc-det { min-height: 300px; }
#agenda-slots .agc-volver { margin-bottom: 12px; }

/* ============================================================
   Sala de teleconsulta — video fijo (sticky) + panel con pestañas
   Regla clínica: la paciente permanece visible mientras el médico
   escribe la receta o gestiona exámenes (columna derecha scrollea).
   ============================================================ */
.sesion-sala {
  display: grid;
  grid-template-columns: minmax(300px, 1.02fr) 1.25fr;
  gap: 22px;
  align-items: start;
}
.sesion-video {
  position: sticky;
  top: 16px;
  align-self: start;
}
.sesion-panel { min-width: 0; } /* permite que el contenido interno haga wrap */

.sala-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--violeta-claro);
  margin-bottom: 16px;
}
.sala-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, background .15s, border-color .15s;
}
.sala-tab:hover { color: var(--violeta); }
.sala-tab.is-on {
  color: var(--violeta);
  background: var(--violeta-claro);
  border-bottom-color: var(--violeta);
}
.sala-tab-cont[hidden] { display: none; }

/* Responsive: en angosto el video queda arriba (sticky) y las pestañas debajo. */
@media (max-width: 900px) {
  .sesion-sala { grid-template-columns: 1fr; gap: 16px; }
  .sesion-video {
    top: 0;
    z-index: 6;
    background: var(--bg);
    padding: 6px 0 10px;
  }
}

/* Videollamada REAL (Jitsi) activa: se MANTIENE el layout de dos columnas —
   video a la izquierda (con algo más de ancho para que el iframe respire) +
   panel de pestañas a la derecha SIEMPRE visible y usable durante la llamada.
   Se suelta el sticky para que el iframe alto (74vh) no quede recortado.
   El colapso a una columna solo ocurre en móvil (media query <900px de arriba). */
@media (min-width: 901px) {
  /* Clave del 50/50: minmax(0,1fr) en AMBAS columnas. Un track "1fr" es en
     realidad minmax(auto,1fr), y ese "auto" = min-content del contenido; el
     escenario de video (height 74vh) infla la columna izquierda más allá de su
     mitad y se come el panel. Con minmax(0,...) el mínimo es 0, así que el video
     se encoge a su fracción real y ambas columnas quedan iguales (~50/50). */
  .sesion-sala.modo-jitsi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sesion-sala.modo-jitsi .sesion-video { position: static; min-width: 0; }
/* El escenario/iframe llena el 100% de su columna y puede encogerse (min-width:0),
   de modo que su altura fija (74vh) NO fuerza el ancho de la columna. */
.sesion-sala.modo-jitsi #ses-escenario { width: 100%; min-width: 0; }

/* Petición Mauricio: el panel de pestañas (incl. chat / IA-Resumen) iguala su ALTO
   al del escenario de video durante la llamada. En desktop el panel toma 74vh (mismo
   valor que .video-escenario.is-jitsi, línea ~840 — MANTENER EN SYNC), con las
   pestañas fijas arriba y SOLO el contenido de la pestaña activa scrolleando.
   En móvil (<901px) NO aplica: el layout es de una columna y todo fluye. */
@media (min-width: 901px) {
  .sesion-sala.modo-jitsi .sesion-panel {
    height: 74vh;
    min-height: 440px;
    display: flex;
    flex-direction: column;
  }
  .sesion-sala.modo-jitsi .sala-tabs { flex: 0 0 auto; }
  .sesion-sala.modo-jitsi .sala-tab-cont:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Evita doble scroll: en llamada, la ficha hereda el scroll del contenedor flex. */
  .sesion-sala.modo-jitsi .sesion__ficha { max-height: none; overflow: visible; }
}

/* ============================================================
   ESPECIALISTAS PÚBLICOS (Josefa · 2026-07-11)
   Aditivo. Todo sobre los tokens vivos "Índigo Cálido".
   3 piezas: (1) tarjeta de médico pública en el home,
   (2) perfil individual tipo directorio, (3) contabilidad
   superadmin + documento imprimible de honorarios.
   ============================================================ */

/* ----- (1) Tarjeta de médico pública (home) -------------------
   Reusa .grid-med + .med-card. Agrega registro, rating, bio de
   una línea y pie con DOS acciones (Ver perfil / Agendar). ----- */
.med-card__reg {
  font-size: 0.78rem; font-weight: 700; color: var(--tinta-3);
  letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
}
.med-card__reg svg { width: 13px; height: 13px; color: var(--menta); flex: 0 0 auto; }

.med-rating {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; font-weight: 700; color: #8a6a00;
  background: var(--amarillo-claro); padding: 5px 10px; border-radius: 999px;
}
.med-rating svg { width: 14px; height: 14px; }
.med-rating small { font-weight: 600; color: var(--tinta-3); }

.med-card__bio {
  font-size: 0.9rem; color: var(--tinta-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.med-card__acc {
  display: flex; gap: 10px; margin-top: auto; padding-top: 4px;
}
.med-card__acc .btn { flex: 1; min-width: 0; padding: 12px 14px; font-size: 0.92rem; }

/* ----- (2) Perfil individual — directorio médico -------------
   Layout serio y confiable. Móvil primero (una columna:
   ficha arriba, currículum abajo). Desktop: aside sticky con
   foto+datos+CTA a la izquierda, currículum a la derecha. ----- */
.perfil-dir { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 860px) {
  .perfil-dir { grid-template-columns: 340px 1fr; gap: 30px; }
  .perfil-dir__aside { position: sticky; top: 92px; }
}

.perfil-dir__aside {
  background: var(--blanco); border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); text-align: center;
}
.perfil-dir__foto {
  width: 100%; max-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto 16px;
  border-radius: var(--r-lg); object-fit: cover; background: var(--violeta-claro);
  display: grid; place-items: center; font-family: var(--fuente-titulo);
  font-weight: 800; color: var(--violeta); font-size: 3.2rem; line-height: 1;
}
.perfil-dir__nombre { font-size: 1.5rem; line-height: 1.15; }
.perfil-dir__esp { color: var(--violeta); font-weight: 700; font-size: 1rem; margin-top: 4px; }
.perfil-dir__reg {
  font-size: 0.82rem; color: var(--tinta-3); font-weight: 700; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.perfil-dir__sellos { justify-content: center; margin: 16px 0; }
.perfil-dir__precio {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 14px 0; margin: 4px 0 14px; border-top: 1px dashed var(--linea); border-bottom: 1px dashed var(--linea);
}
.perfil-dir__precio b { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.5px; }
.perfil-dir__precio span { font-size: 0.88rem; color: var(--tinta-2); font-weight: 600; }
/* Reusa .perfil__datos / .perfil__dato para idiomas, duración, rating */
.perfil-dir__aside .perfil__datos { text-align: left; }
.perfil-dir__cta { margin-top: 18px; }

.perfil-dir__main { min-width: 0; }
.perfil-dir__intro { margin-bottom: 8px; }
.cv-sec { padding: 20px 0; border-top: 1px solid var(--linea); }
.cv-sec:first-child { border-top: none; padding-top: 0; }
.cv-sec__tit {
  display: flex; align-items: center; gap: 9px; font-family: var(--fuente-titulo);
  font-size: 1.05rem; font-weight: 700; color: var(--tinta); margin-bottom: 10px;
}
.cv-sec__tit svg { width: 19px; height: 19px; color: var(--violeta); flex: 0 0 auto; }
.cv-sec__cuerpo { color: var(--tinta-2); font-size: 0.96rem; line-height: 1.65; }
.cv-sec__cuerpo p + p { margin-top: 8px; }
.cv-sec__cuerpo ul { padding-left: 20px; margin: 4px 0; }
.cv-sec__cuerpo li { margin-bottom: 5px; }
/* Chips para áreas de interés / idiomas (reusa .tag) */
.cv-chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ----- (3) CONTABILIDAD superadmin ---------------------------
   Resumen en cards + tabla por médico con detalle expandible
   (<details> accesible) + documento imprimible de honorarios. */
.cont-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.cont-card { background: var(--blanco); border-radius: var(--r); padding: 18px; box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); }
.cont-card__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: var(--c-bg, var(--violeta-claro)); color: var(--c, var(--violeta)); }
.cont-card__ic svg { width: 21px; height: 21px; }
.cont-card__t { font-size: 0.8rem; color: var(--tinta-2); font-weight: 600; display: block; }
.cont-card b { font-size: 1.5rem; display: block; line-height: 1.1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cont-card small { font-size: 0.75rem; color: var(--tinta-3); }
@media (max-width: 860px) { .cont-cards { grid-template-columns: repeat(2, 1fr); } }

/* Fila por médico = <details> con resumen clicable */
.cont-med { background: var(--blanco); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); border: 1px solid var(--glass-borde); overflow: hidden; margin-bottom: 12px; }
.cont-med > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; transition: background .15s;
}
.cont-med > summary::-webkit-details-marker { display: none; }
.cont-med > summary:hover { background: var(--violeta-claro); }
.cont-med > summary:focus-visible { outline: 3px solid var(--lavanda); outline-offset: -3px; }
.cont-med__av { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--violeta-claro); display: grid; place-items: center; font-weight: 800; color: var(--violeta); font-size: 0.95rem; flex: 0 0 auto; }
.cont-med__id { flex: 1 1 200px; min-width: 0; }
.cont-med__id b { font-size: 1rem; display: block; overflow-wrap: anywhere; }
.cont-med__id small { font-size: 0.8rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cont-med__stats { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.cont-stat { text-align: right; }
.cont-stat span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tinta-3); font-weight: 700; }
.cont-stat b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cont-stat--pago b { color: #0c6b58; }
.cont-pct { display: inline-flex; font-size: 0.74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--violeta-claro); color: var(--violeta); }
.cont-med__chev { flex: 0 0 auto; color: var(--tinta-3); transition: transform .2s; }
.cont-med__chev svg { width: 20px; height: 20px; display: block; }
.cont-med[open] > summary .cont-med__chev { transform: rotate(180deg); }
.cont-med[open] > summary { border-bottom: 1px solid var(--linea); background: var(--violeta-claro); }
.cont-med__body { padding: 16px 18px 18px; }

/* Bloque de cortesía: separado y sin ambigüedad (no es error) */
.cont-cortesia { margin-top: 14px; background: #f6f5fb; border: 1px dashed var(--linea); border-radius: 14px; padding: 12px 14px; }
.cont-cortesia__cab { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.86rem; color: var(--tinta-2); }
.cont-cortesia__cab svg { width: 16px; height: 16px; color: var(--celeste); flex: 0 0 auto; }
.cont-cortesia__cab .cont-badge-cortesia { margin-left: auto; }
.cont-badge-cortesia { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--celeste-claro); color: #0b5e96; }
.cont-mov--cortesia td { color: var(--tinta-3); }
.cont-mov--cortesia .cont-mov__hon { font-weight: 700; }

/* Total a pagar (cierre del detalle del médico) */
.cont-med__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--linea); }
.cont-med__total span { font-weight: 700; color: var(--tinta-2); }
.cont-med__total b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #0c6b58; }
.cont-med__acc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ----- Documento imprimible de honorarios (respaldo boleta) ---
   Sobrio, tipo documento contable. Se ve limpio en pantalla
   (preview) y sale solo el doc al imprimir (body.print-doc). ---- */
.cont-doc {
  max-width: 780px; margin: 0 auto; background: #fff; color: #1e1a3f;
  border-radius: var(--r); box-shadow: var(--sombra-sm); border: 1px solid var(--linea);
  padding: 34px 38px; font-size: 0.92rem;
}
.cont-doc__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--tinta); }
.cont-doc__marca { display: flex; align-items: center; gap: 11px; }
.cont-doc__marca img { width: 42px; height: 42px; object-fit: contain; }
.cont-doc__marca b { font-family: var(--fuente-titulo); font-size: 1.2rem; letter-spacing: -0.3px; }
.cont-doc__marca small { display: block; font-size: 0.7rem; color: var(--tinta-3); font-weight: 600; letter-spacing: 0.6px; }
.cont-doc__meta { text-align: right; font-size: 0.82rem; color: var(--tinta-2); }
.cont-doc__meta b { display: block; font-size: 0.95rem; color: var(--tinta); font-family: var(--fuente-titulo); }
.cont-doc__tit { font-family: var(--fuente-titulo); font-size: 1.15rem; margin: 18px 0 4px; }
.cont-doc__med { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 20px; margin: 14px 0 18px; font-size: 0.88rem; }
.cont-doc__med div { display: flex; gap: 6px; }
.cont-doc__med span { color: var(--tinta-3); font-weight: 600; }
.cont-doc__med b { font-variant-numeric: tabular-nums; }
.cont-doc__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; background: #f6f5fb; border-radius: 12px; }
.cont-doc__total span { font-family: var(--fuente-titulo); font-weight: 700; }
.cont-doc__total b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cont-doc__pie { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 0.76rem; color: var(--tinta-3); line-height: 1.5; }

/* Utilidades de impresión */
.no-print {}
.solo-print { display: none; }
@media print {
  @page { margin: 15mm; }
  body.print-doc { background: #fff !important; }
  body.print-doc * { visibility: hidden; }
  body.print-doc .cont-doc, body.print-doc .cont-doc * { visibility: visible; }
  body.print-doc .cont-doc { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: none; margin: 0; padding: 0; border: none; box-shadow: none; }
  .no-print { display: none !important; }
  .solo-print { display: block; }
}

@media (max-width: 560px) {
  .med-card__acc { flex-direction: column; }
  .cont-med > summary { flex-wrap: wrap; }
  .cont-med__stats { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
  .cont-doc { padding: 22px 20px; }
  .cont-doc__med { grid-template-columns: 1fr; }
}

/* ============================================================
   ARREGLO 1 — DESBLOQUEAR EL TOQUE EN MÓVIL (20-jul-2026)
   ------------------------------------------------------------
   Dos botones flotantes viven pegados al borde inferior de la ventana:
     · #a11y-fab      (comun.js)     -> position:fixed; right:16px; bottom:16px
     · #cd-soporte-fab (paciente.js) -> position:fixed; left:16px;  bottom:16px
   Al terminar de scrollear, el último elemento de la página queda JUSTO debajo
   de ellos. Medido con elementFromPoint sobre el CTA "Selecciona un día y hora"
   (x=39 y=727, 282x53): el tercio izquierdo devolvía el botón "Ayuda" y el
   tercio derecho el de accesibilidad. Solo el tercio central reservaba.
   Los mismos flotantes tapaban dos horas reservables y los enlaces legales
   del pie (Consentimiento Informado incluido).

   El arreglo NO mueve los flotantes (siguen donde el usuario ya los conoce):
   reserva 88px de colchón al final del documento para que ningún contenido
   real termine debajo de ellos. 88 = 52px del FAB + 16px de separación al
   borde + 20px de aire.
   ============================================================ */
@media (max-width: 820px) {
  body { padding-bottom: 88px; }
}