:root {
  --fondo: #f5f7fa; --superficie: #fff; --texto: #1b2430; --suave: #5b6675; --borde: #d8dee6;
  --primario: #0b6bcb; --primario-t: #fff; --ok: #1a7f4b; --alerta: #b45309; --peligro: #c0292b;
  --franja: #fde68a; --franja-t: #5b3a00; --fondo-suave: #eef2f7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #12161c; --superficie: #1a2029; --texto: #e6ebf2; --suave: #9aa6b6; --borde: #2c3542;
    --primario: #4b9bf0; --primario-t: #07121f; --ok: #4cc38a; --alerta: #f0a85a; --peligro: #ff7b7d;
    --franja: #5b4510; --franja-t: #ffe9a8; --fondo-suave: #222b37;
  }
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
#franja { background: var(--franja); color: var(--franja-t); text-align: center; font-weight: 700; letter-spacing: .03em; padding: 6px 12px; font-size: .85rem; position: sticky; top: 0; z-index: 20; }
#app { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }
h1 { font-size: 1.5rem; margin: 20px 0 12px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 14px 0 6px; }
a { color: var(--primario); }
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.barra .marca { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--texto); }
.barra .espacio { flex: 1; }
.barra .quien { color: var(--suave); font-size: .9rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin: 14px 0; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.fila > * { flex: 1 1 160px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .dos { grid-template-columns: 1fr; } }
label { display: block; font-size: .85rem; color: var(--suave); margin: 8px 0 4px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
textarea { min-height: 84px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 1px; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); padding: 10px 16px; font-weight: 600; }
button.primario { background: var(--primario); color: var(--primario-t); border-color: var(--primario); }
button.peligro { background: var(--peligro); color: #fff; border-color: var(--peligro); }
button.suave { background: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.grande { font-size: 1.1rem; padding: 14px 24px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
tr.clic { cursor: pointer; }
tr.clic:hover { background: var(--fondo-suave); }
.insignia { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--fondo-suave); color: var(--suave); }
.insignia.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.insignia.alerta { background: color-mix(in srgb, var(--alerta) 20%, transparent); color: var(--alerta); }
.insignia.peligro { background: color-mix(in srgb, var(--peligro) 18%, transparent); color: var(--peligro); }
.aviso { padding: 10px 14px; border-radius: 8px; background: var(--fondo-suave); margin: 10px 0; }
.aviso.error { background: color-mix(in srgb, var(--peligro) 14%, transparent); color: var(--peligro); }
.aviso.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.suave { color: var(--suave); }
.pasos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.paso { padding: 4px 12px; border-radius: 999px; background: var(--fondo-suave); color: var(--suave); font-size: .82rem; font-weight: 600; }
.paso.activo { background: var(--primario); color: var(--primario-t); }
.paso.hecho { color: var(--ok); }
.campana { position: relative; padding: 8px 12px; }
.campana .n { position: absolute; top: -6px; right: -6px; background: var(--peligro); color: #fff; border-radius: 999px; font-size: .72rem; min-width: 20px; padding: 1px 5px; text-align: center; }
.grabando { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 700; }
.punto { width: 16px; height: 16px; border-radius: 50%; background: var(--peligro); animation: pulso 1.2s infinite; }
@keyframes pulso { 50% { opacity: .25; } }
.nivel { height: 12px; border-radius: 6px; background: var(--fondo-suave); overflow: hidden; margin: 8px 0; }
.nivel > div { height: 100%; width: 0; background: var(--ok); transition: width .08s linear; }
.transcripcion { max-height: 420px; overflow: auto; white-space: pre-wrap; background: var(--fondo-suave); padding: 12px; border-radius: 8px; font-size: .92rem; }
.nota { border-left: 4px solid var(--borde); padding: 8px 12px; margin: 8px 0; background: var(--fondo-suave); border-radius: 0 8px 8px 0; }
.nota.publica { border-color: var(--primario); }
.nota.privada { border-color: var(--suave); }
.nota.paciente, .nota.pregunta { border-color: var(--alerta); }
.nota.respuesta { border-color: var(--ok); }
.nota.urgencia { border-color: var(--peligro); background: color-mix(in srgb, var(--peligro) 10%, transparent); }
.nota .meta { font-size: .78rem; color: var(--suave); margin-bottom: 2px; }
.idc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; letter-spacing: .1em; font-weight: 700; }
.burbujas { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; padding: 8px; background: var(--fondo-suave); border-radius: 8px; }
.burbuja { max-width: 85%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; font-size: .92rem; }
.burbuja.samanta { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); }
.burbuja.paciente { align-self: flex-end; background: color-mix(in srgb, var(--ok) 22%, transparent); }
.burbuja .botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.burbuja .botones button { padding: 4px 10px; font-size: .82rem; }
.vacio { text-align: center; color: var(--suave); padding: 24px; }
.medicamentos td { padding: 4px; }
.medicamentos input { padding: 6px 8px; }
dialog { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); max-width: 480px; }
dialog::backdrop { background: rgba(0, 0, 0, .5); }