:root {
  --primario: #0e7c86;
  --primario-osc: #0a5d65;
  --primario-claro: #e3f4f5;
  --acento: #ff6b5b;
  --verde: #1fa463;
  --amarillo: #f5a623;
  --rojo: #d64545;
  --texto: #1d2b36;
  --muted: #6b7a88;
  --borde: #e2e8ee;
  --fondo: #f6f9fb;
  --blanco: #fff;
  --radio: 14px;
  --sombra: 0 4px 18px rgba(16, 42, 67, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--texto); background: var(--fondo); line-height: 1.45;
}
a { color: var(--primario); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

.banda-demo {
  background: #fff6e5; color: #8a5a0c; text-align: center; font-size: 14px;
  padding: 7px 16px; border-bottom: 1px solid #f3dfb8;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1000; background: var(--blanco);
  display: flex; align-items: center; gap: 24px; padding: 12px 28px;
  border-bottom: 1px solid var(--borde);
}
.logo { display: flex; align-items: center; gap: 8px; font-size: 22px; color: var(--texto); }
.logo b { color: var(--primario); }
.logo-icon {
  width: 34px; height: 34px; border-radius: 10px; background: var(--acento); color: #fff;
  display: grid; place-items: center; font-weight: 900;
}
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a { white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: var(--texto); font-weight: 500; font-size: 15px; }
.nav a:hover, .nav a.activo { background: var(--primario-claro); color: var(--primario-osc); }
.ciudad-sel { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ciudad-sel select { border: 1px solid var(--borde); border-radius: 10px; padding: 7px 10px; font: inherit; }

main { max-width: 1240px; margin: 0 auto; padding: 24px 28px 60px; min-height: 70vh; }
.footer { text-align: center; padding: 28px; border-top: 1px solid var(--borde); background: #fff; font-size: 14px; }

/* ---------- Botones / formularios ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 12px; padding: 11px 18px; font: inherit; font-weight: 600;
  cursor: pointer; background: var(--primario); color: #fff; transition: .15s;
}
.btn:hover { background: var(--primario-osc); }
.btn.sec { background: var(--primario-claro); color: var(--primario-osc); }
.btn.sec:hover { background: #cfeef0; }
.btn.acento { background: var(--acento); }
.btn.acento:hover { background: #e85546; }
.btn.verde { background: var(--verde); }
.btn.rojo { background: var(--rojo); }
.btn.link { background: none; color: var(--primario); padding: 6px 8px; }
.btn.grande { padding: 15px 26px; font-size: 17px; }
.btn.chico { padding: 7px 12px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  width: 100%; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
  font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; }
label.campo { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
label.campo > input, label.campo > select, label.campo > textarea { margin-top: 5px; font-weight: 400; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.error { color: var(--rojo); font-size: 14px; margin: 6px 0; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #0e7c86 0%, #12a1a8 60%, #4cc3bd 100%);
  color: #fff; border-radius: 24px; padding: 48px; display: grid;
  grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
}
.hero h1 { font-size: 42px; }
.hero p { font-size: 18px; opacity: .95; margin: 0 0 22px; }
.buscador {
  background: #fff; border-radius: 16px; padding: 10px; display: flex; gap: 8px;
  box-shadow: var(--sombra);
}
.buscador select { border: none; background: var(--fondo); }
.hero-acciones { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.hero-card {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; padding: 22px; backdrop-filter: blur(4px);
}
.hero-card .stat { font-size: 34px; font-weight: 800; }
.hero-card .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Secciones ---------- */
.seccion { margin-top: 40px; }
.seccion-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.carrusel { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.carrusel > * { scroll-snap-align: start; }
.grid-esp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.esp-card {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
  display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--texto); transition: .15s;
}
.esp-card:hover { border-color: var(--primario); box-shadow: var(--sombra); }
.esp-card .ic { font-size: 26px; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paso { background: #fff; border-radius: var(--radio); padding: 22px; border: 1px solid var(--borde); }
.paso .num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primario-claro); color: var(--primario-osc);
  display: grid; place-items: center; font-weight: 800; margin-bottom: 10px;
}
.cta-medico {
  background: #1d2b36; color: #fff; border-radius: 20px; padding: 32px 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.cta-medico p { opacity: .85; margin: 0; }

/* ---------- Tarjetas de médico ---------- */
.card-medico {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
  display: flex; gap: 14px; cursor: pointer; transition: .15s; position: relative;
}
.card-medico:hover { border-color: var(--primario); box-shadow: var(--sombra); }
.card-medico h3 { font-size: 17px; margin: 0; }
.card-medico .esp { margin: 2px 0; color: var(--primario-osc); font-weight: 600; font-size: 14px; }
.card-medico .meta { margin: 4px 0; color: var(--muted); font-size: 13px; }
.cm-info { flex: 1; min-width: 0; }
.cm-precio { text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cm-precio b { display: block; font-size: 20px; color: var(--texto); }
.card-mini { min-width: 250px; max-width: 250px; flex-direction: column; }
.card-mini .cm-top { display: flex; gap: 10px; align-items: center; }

.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 19px; position: relative;
}
.avatar.grande { width: 96px; height: 96px; font-size: 32px; }
.avatar .punto {
  position: absolute; bottom: 1px; right: 1px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--verde); border: 3px solid #fff;
}
.avatar.grande .punto { width: 22px; height: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--fondo);
  border: 1px solid var(--borde); white-space: nowrap;
}
.chip.dom { background: #fff1ef; border-color: #ffd4ce; color: #b8392b; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.badge.verif { background: #e6f6ee; color: #137a45; }
.badge.online { background: #e6f6ee; color: #137a45; }
.badge.pend { background: #fff6e5; color: #a8670c; }
.badge.malo { background: #fdeaea; color: #a02f2f; }
.badge.gris { background: #eef1f4; color: var(--muted); }

/* ---------- Búsqueda ---------- */
.buscar-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.filtros {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.filtros label { font-size: 13px; font-weight: 600; }
.filtros .check { display: flex; align-items: center; gap: 6px; padding-top: 22px; }
.lista { display: flex; flex-direction: column; gap: 12px; }
.mapa-sticky { position: sticky; top: 80px; }
.mapa { height: 560px; border-radius: var(--radio); border: 1px solid var(--borde); z-index: 1; }
.mapa.chico { height: 320px; }
.vacio { text-align: center; padding: 40px; background: #fff; border-radius: var(--radio); border: 1px dashed var(--borde); }

/* Pines del mapa */
.pin {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--primario); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: grid; place-items: center;
}
.pin span { transform: rotate(45deg); font-size: 15px; }
.pin.on { background: var(--verde); }
.pin.yo { background: #2f6fed; border-radius: 50%; transform: none; width: 22px; height: 22px; }
.pin.medico-vivo { background: var(--acento); border-radius: 50%; transform: none; width: 40px; height: 40px; animation: pulso 1.4s infinite; }
.pin.medico-vivo span { transform: none; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255,107,91,.6); } 100% { box-shadow: 0 0 0 16px rgba(255,107,91,0); } }

/* ---------- Perfil ---------- */
.perfil-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; margin-bottom: 18px; }
.panel h2 { font-size: 19px; }
.perfil-head { display: flex; gap: 20px; align-items: center; }
.perfil-head h1 { font-size: 28px; margin-bottom: 4px; }
.cedula { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); gap: 10px; }
.cedula:last-child { border-bottom: none; }
.modalidad-op {
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.modalidad-op .precio { font-size: 20px; font-weight: 800; }
.resena { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.resena:last-child { border-bottom: none; }
.estrellas { color: var(--amarillo); letter-spacing: 1px; }
.aviso {
  background: var(--primario-claro); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--primario-osc);
  margin: 10px 0;
}
.aviso.amarillo { background: #fff6e5; color: #8a5a0c; }

/* ---------- Cita / seguimiento ---------- */
.timeline { display: flex; gap: 0; margin: 18px 0; }
.timeline .et { flex: 1; text-align: center; font-size: 13px; color: var(--muted); position: relative; }
.timeline .et::before {
  content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 6px;
  background: var(--borde); position: relative; z-index: 1;
}
.timeline .et::after {
  content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--borde);
}
.timeline .et:first-child::after { display: none; }
.timeline .et.ok { color: var(--texto); font-weight: 600; }
.timeline .et.ok::before, .timeline .et.ok::after { background: var(--verde); }
.eta { font-size: 40px; font-weight: 800; color: var(--primario-osc); }

/* ---------- Registro ---------- */
.wizard { max-width: 820px; margin: 0 auto; }
.pasos-wiz { display: flex; gap: 6px; margin-bottom: 20px; }
.pasos-wiz div {
  flex: 1; text-align: center; font-size: 13px; padding: 8px 4px; border-radius: 10px;
  background: #fff; border: 1px solid var(--borde); color: var(--muted);
}
.pasos-wiz div.act { background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 600; }
.pasos-wiz div.hecho { background: var(--primario-claro); color: var(--primario-osc); }
.wiz-nav { display: flex; justify-content: space-between; margin-top: 18px; }
.cedula-form { border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.cedula-form .fila3 { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 10px; align-items: end; }
.sep-datos { font-size: 13px; background: var(--fondo); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-grid label { display: flex; gap: 8px; align-items: center; font-weight: 400; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.mod-conf { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mod-conf .cab { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.mod-conf .det { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.spinner {
  width: 16px; height: 16px; border: 3px solid var(--borde); border-top-color: var(--primario);
  border-radius: 50%; display: inline-block; animation: girar .8s linear infinite; vertical-align: middle;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Panel médico ---------- */
.panel-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: start; }
.switch-grande {
  width: 100%; padding: 26px; border-radius: 20px; border: none; cursor: pointer; font: inherit;
  font-size: 22px; font-weight: 800; color: #fff; background: #8795a1; transition: .2s;
}
.switch-grande.on { background: var(--verde); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { background: var(--fondo); border-radius: 12px; padding: 12px; text-align: center; }
.stats b { display: block; font-size: 24px; }
.solicitud {
  border: 2px solid var(--acento); border-radius: 16px; padding: 18px; background: #fff8f7;
  animation: aparecer .3s ease;
}
@keyframes aparecer { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.barra-tiempo { height: 6px; background: var(--borde); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.barra-tiempo div { height: 100%; background: var(--acento); transition: width 1s linear; }

/* ---------- Modal / toast ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(16, 32, 48, .5); z-index: 2000;
  display: grid; place-items: center; padding: 20px;
}
.modal-caja { background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
.modal-caja h2 { display: flex; justify-content: space-between; }
.cerrar { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted); }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px);
  background: #1d2b36; color: #fff; padding: 14px 22px; border-radius: 14px; z-index: 3000;
  transition: transform .3s; box-shadow: var(--sombra); font-weight: 500;
}
.toast.ver { transform: translateX(-50%) translateY(0); }

/* ---------- Foto de perfil ---------- */
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.foto-edit { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foto-edit span { font-size: 12px; color: var(--primario); font-weight: 600; }
.foto-edit:hover .avatar { filter: brightness(.9); }

/* ---------- Privacidad / cita ---------- */
.esperando { display: flex; gap: 12px; align-items: center; background: #fff6e5; border-radius: 12px; padding: 14px; margin: 10px 0; }
.datos-pac { background: var(--fondo); border-radius: 12px; padding: 10px 14px; margin: 10px 0; line-height: 1.7; }

/* ---------- Pestañas del panel médico ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.tabs a { padding: 10px 16px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.act { color: var(--primario-osc); border-bottom-color: var(--primario); }

/* ---------- Admin ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.kpi span { display: block; font-size: 13px; color: var(--muted); }
.kpi b { font-size: 22px; }
.kpi.alerta b { color: #b8392b; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tabla-wrap { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 8px; border-bottom: 2px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla td.num, .tabla th:not(:first-child) { text-align: right; }
.tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: none; }
.tabla .acc { white-space: nowrap; text-align: right; }
.pend-txt { color: #b8392b; font-weight: 700; }

/* ---------- Expediente ---------- */
.pac-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px; color: var(--texto); }
.pac-item:hover { border-color: var(--primario); }
.seg-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); color: var(--texto); font-size: 14px; }
.seg-item:last-child { border-bottom: none; }
.seg-item.vencido b { color: var(--rojo); }
.datos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.dato { background: var(--fondo); border-radius: 10px; padding: 10px 12px; }
.dato span { display: block; font-size: 12px; color: var(--muted); }
.dato b { font-weight: 600; font-size: 14px; }
.alerta-roja { background: #fdeaea; color: #8c2424; }
.visita { border-left: 4px solid var(--primario); }
.visita.programada { border-left-color: var(--amarillo); }
.v-bloque { margin: 8px 0; }
.v-bloque > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.v-bloque p { margin: 2px 0; }
.v-seg { background: #fff6e5; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.v-seg.ok { background: #e6f6ee; }
.v-seg.vencido { background: #fdeaea; }
.v-receta { background: var(--primario-claro); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nota-add { display: flex; gap: 8px; margin-top: 10px; }
.signos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.med-fila { display: flex; gap: 10px; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; margin-bottom: 10px; align-items: flex-start; }
.med-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primario); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.med-campos { flex: 1; min-width: 0; display: grid; gap: 8px; }
.med-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 8px; }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-msgs { max-height: 320px; min-height: 120px; overflow-y: auto; background: var(--fondo); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; background: #fff; border: 1px solid var(--borde); align-self: flex-start; white-space: pre-line; }
.msg.mio { align-self: flex-end; background: var(--primario); color: #fff; border-color: var(--primario); }
.msg span { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.chat-form { display: flex; gap: 8px; }

/* ---------- Agenda ---------- */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 20px; align-items: start; }
.agenda-wrap { overflow-x: auto; }
.agenda { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; min-width: 620px; }
.agenda th { font-weight: 500; color: var(--muted); padding: 6px 2px; font-size: 12px; }
.agenda th b { font-size: 18px; color: var(--texto); }
.agenda th.hoy b { background: var(--primario); color: #fff; border-radius: 50%; padding: 2px 7px; }
.agenda td { border-top: 1px solid var(--borde); height: 30px; padding: 1px 2px; vertical-align: top; }
.agenda td.hora { width: 52px; color: var(--muted); font-size: 12px; text-align: right; padding-right: 8px; }
.agenda td.ocupado { background: var(--primario-claro); }
.agenda td.ocupado.m-domicilio { background: #ffe9e6; }
.agenda td.ocupado.m-en_linea { background: #ece9ff; }
.slot-cita { width: 100%; border: none; border-radius: 6px; padding: 3px 5px; text-align: left; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  background: var(--primario-claro); color: var(--primario-osc); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot-cita small { display: block; font-weight: 400; }
.slot-cita.m-domicilio { background: #ffe9e6; color: #b8392b; }
.slot-cita.m-en_linea { background: #ece9ff; color: #5541c9; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.slot { border: 1px solid var(--borde); background: #fff; border-radius: 8px; padding: 7px 11px; cursor: pointer; font: inherit; font-size: 14px; }
.slot.sel { background: var(--primario); color: #fff; border-color: var(--primario); }

/* ---------- Receta: vista previa ---------- */
.rx-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rx-toolbar label.btn { cursor: pointer; }
.rx-hoja { background: #e9eef2; padding: 18px; border-radius: 12px; max-height: 60vh; overflow: auto; }
.rx-hoja .rx { background: #fff; padding: 28px 32px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.rx-logo-libre { max-width: 180px; max-height: 90px; flex-shrink: 0; display: flex; align-items: center; }
.rx-logo-libre img { max-width: 180px; max-height: 90px; object-fit: contain; }

/* ---------- Receta (solo al imprimir) ---------- */
#receta-print { display: none; }
.rx { font-family: Georgia, "Times New Roman", serif; color: #111; max-width: 720px; margin: 0 auto; }
.rx-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #0e7c86; padding-bottom: 10px; }
.rx-nombre { font-size: 24px; font-weight: 700; color: #0a5d65; }
.rx-esp { font-size: 15px; font-style: italic; margin-bottom: 6px; }
.rx-ced { font-size: 12px; margin-top: 3px; }
.rx-logo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #ff6b5b; display: grid; place-items: center; color: #fff; font-size: 40px; }
.rx-logo img { width: 100%; height: 100%; object-fit: cover; }
.rx-dom { font-size: 12px; padding: 6px 0; border-bottom: 1px solid #ccc; }
.rx-meta { display: flex; justify-content: space-between; font-size: 13px; margin: 10px 0; }
.rx-pac { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.rx-pac td { border: 1px solid #bbb; padding: 5px 8px; font-size: 13px; }
.rx-pac span, .rx-linea span, .rx-ind span { font-size: 11px; color: #555; display: block; text-transform: uppercase; letter-spacing: .04em; }
.rx-linea { font-size: 13px; margin: 6px 0; }
.rx-linea span { display: inline; }
.rx-titulo { font-size: 36px; font-weight: 700; color: #0a5d65; margin: 10px 0 0; }
.rx-meds { font-size: 15px; line-height: 1.5; padding-left: 22px; min-height: 180px; }
.rx-meds li { margin-bottom: 10px; }
.rx-ind p { margin: 2px 0; font-size: 14px; white-space: pre-line; }
.rx-firma { margin: 60px 0 0 auto; width: 280px; text-align: center; font-size: 12px; }
.rx-firma-linea { border-top: 1px solid #111; margin-bottom: 4px; }
.rx-pie { margin-top: 24px; border-top: 1px solid #ccc; padding-top: 6px; font-size: 10px; color: #666; text-align: center; }

@media print {
  @page { size: letter; margin: 14mm; }
  .topbar, .banda-demo, .footer, .tabs, .no-print, .modal, .toast, .aviso.amarillo { display: none !important; }
  main { padding: 0; max-width: none; }
  .panel { border: none; box-shadow: none; break-inside: avoid; }
  body.imprimiendo-receta > *:not(#receta-print) { display: none !important; }
  body.imprimiendo-receta #receta-print { display: block; }
  body.imprimiendo-receta { background: #fff; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  main { padding: 16px; }
  .hero { grid-template-columns: 1fr; padding: 28px; }
  .hero h1 { font-size: 30px; }
  .buscador { flex-direction: column; }
  .grid-esp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esp-card { padding: 12px; font-size: 14px; }
  .pasos, .buscar-layout, .perfil-layout, .panel-layout { grid-template-columns: 1fr; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .mapa-sticky { position: static; order: -1; }
  .mapa { height: 320px; }
  .cta-medico { flex-direction: column; align-items: flex-start; }
  .fila, .check-grid, .mod-conf .det { grid-template-columns: 1fr; }
  .cedula-form .fila3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout, .datos-grid, .agenda-layout { grid-template-columns: 1fr; }
  .rx-hoja { padding: 8px; }
  .rx-hoja .rx { padding: 16px; }
  .signos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .med-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}