/* MUELITA — estilos */
/* Tipografía de la marca (misma que el sitio web), servida desde la app: funciona sin internet en la red del consultorio */
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
:root {
  --bg: #f1f5f7;
  --panel: #ffffff;
  --panel-2: #f7fafb;
  --line: #d9e2e7;
  --line-campo: #7d909e;   /* bordes de campos, listas y casillas: contraste 3:1 */
  --sobre-color: #ffffff;  /* texto sobre fondos de estado (rojo, verde, ámbar) */
  --fg: #16262e;
  --muted: #5b6e7f;
  --accent-ink: #0b6f71;
  --accent: #0a7476;
  --accent-fg: #ffffff;
  --accent-soft: #dff2f2;
  --warn: #b83a35;
  --warn-soft: #fbe7e6;
  --ok: #2a7343;
  --ok-soft: #e3f4e8;
  --amber: #8c5c10;
  --amber-soft: #fbf0d9;
  --violet: #5a4bc4;
  --violet-soft: #ebe8fa;
  --shadow: 0 1px 2px rgba(10, 30, 40, .06), 0 6px 20px rgba(10, 30, 40, .06);
  --radius: 10px;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titulo: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --sol: #f0a92e;   /* ámbar de la marca: foco del teclado y detalles */
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1518; --panel: #161e23; --panel-2: #1b252b; --line: #2a3740; --line-campo: #5d7183; --sobre-color: #0f1518; --fg: #e3ebf0; --muted: #98aab7; --accent-ink: #7fe3e5;
    --accent: #3cc0c2; --accent-fg: #06222c; --accent-soft: #163b3d;
    --warn: #ff7a6b; --warn-soft: #3d2320; --ok: #7bd48f; --ok-soft: #1f3a27; --amber: #f0b64a; --amber-soft: #3d3119;
    --violet: #9f93ff; --violet-soft: #2a2748; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0f1518; --panel: #161e23; --panel-2: #1b252b; --line: #2a3740; --line-campo: #5d7183; --sobre-color: #0f1518; --fg: #e3ebf0; --muted: #98aab7; --accent-ink: #7fe3e5;
    --accent: #3cc0c2; --accent-fg: #06222c; --accent-soft: #163b3d;
    --warn: #ff7a6b; --warn-soft: #3d2320; --ok: #7bd48f; --ok-soft: #1f3a27; --amber: #f0b64a; --amber-soft: #3d3119;
    --violet: #9f93ff; --violet-soft: #2a2748; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.45 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h1, h2, .marca strong, .aten-titulo, .mini-tit { font-family: var(--titulo); letter-spacing: -.015em; }
h1 { font-weight: 700 !important; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.125rem; font-weight: 600; }
h3 { font-weight: 600; color: var(--muted); font-size: .8125rem; }
small, .muted { color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: .9em; }

/* layout */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
/* con muchas opciones el menú se desplaza: ningún elemento se aplasta y el espacio libre puede quedar en cero */
.sidebar > * { flex-shrink: 0; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 3px; }
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--fg); font-weight: 500; }
.sidebar a:hover { background: var(--panel-2); text-decoration: none; }
.sidebar a.activo { background: var(--accent-soft); color: var(--accent-ink); }
.sidebar .ic { width: 20px; text-align: center; opacity: .8; }
.sidebar .espacio { flex: 1 1 8px; min-height: 8px; }
.marca { margin-bottom: 14px; padding: 6px 8px !important; }
.marca span { display: flex; flex-direction: column; line-height: 1.1; }
.marca strong { font-size: 1.125rem; letter-spacing: -.01em; }
.marca small { font-size: .75rem; }
.marca:hover { background: transparent !important; }
.menu-btn { display: none; position: fixed; top: 10px; left: 10px; z-index: 50; }
.main { padding: 22px 26px 40px; min-width: 0; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 40; width: 230px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.abierto { transform: none; }
  .menu-btn { display: block; }
  .main { padding: 56px 16px 40px; }
}

/* componentes */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.encabezado h1 { margin: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat b { display: block; font-size: 1.5rem; font-weight: 600; color: var(--accent); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .875rem; }

button, .btn { font: 500 .875rem var(--font); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
button:hover, .btn:hover { background: var(--panel-2); text-decoration: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primario:hover { filter: brightness(1.08); background: var(--accent); }
.btn-peligro { color: var(--warn); border-color: var(--warn); }
.btn-peligro:hover { background: var(--warn-soft); }
.btn-chico { padding: 4px 9px; font-size: .8125rem; }
.btn-icono { padding: 5px 8px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

input, select, textarea { font: .9375rem var(--font); color: var(--fg); background: var(--panel); border: 1px solid var(--line-campo); border-radius: 8px; padding: 7px 10px; width: 100%; }
textarea { min-height: 76px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="range"] { padding: 0; accent-color: var(--accent); }
label { display: block; font-size: .8125rem; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.campo { margin-bottom: 12px; }
.campo.inline { display: flex; align-items: center; gap: 8px; }
.campo.inline label { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.form-grid .ancho { grid-column: 1 / -1; }
.buscador { position: relative; max-width: 420px; flex: 1; }
.buscador input { padding-left: 32px; }
.buscador::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-55%); color: var(--muted); font-size: 1.125rem; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .8125rem; color: var(--muted); font-weight: 600; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-wrap { overflow-x: auto; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.badge.programado { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.badge.confirmado { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.badge.atendido { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.cancelado { background: var(--panel-2); color: var(--muted); text-decoration: line-through; }
.badge.ausente { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.en_espera { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge.alto, .badge.bajo { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge.normal { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.faltan, .badge.sin_escala { color: var(--muted); }

.vacio { text-align: center; color: var(--muted); padding: 30px 10px; }
.vacio p { margin: 6px 0 12px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; border-radius: 8px 8px 0 0; background: transparent; padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.lista li:last-child { border-bottom: 0; }
.lista .hora { font-family: var(--mono); font-weight: 600; min-width: 48px; color: var(--accent); }
.lista .cuerpo { flex: 1; min-width: 0; }
.lista .cuerpo p { margin: 2px 0 0; white-space: pre-wrap; }
.evol { border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 14px; }
.evol .fecha { font-weight: 600; font-size: .875rem; }
.evol p { margin: 4px 0; white-space: pre-wrap; }

/* modal */
.modal-fondo { position: fixed; inset: 0; background: rgba(8, 20, 26, .5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 100; overflow: auto; }
.modal { background: var(--panel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); width: 100%; max-width: 620px; padding: 20px 22px; animation: modal-in .15s ease-out; }
.modal.ancho { max-width: 900px; }
.modal header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal header h2 { margin: 0; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.modal footer .izq { margin-right: auto; }
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); font-size: .875rem; animation: modal-in .15s; }
.toast.error { background: var(--warn); color: var(--sobre-color); }
.toast.ok { background: var(--ok); color: var(--sobre-color); }

/* autocompletar paciente */
.ac { position: relative; }
.ac-lista { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 20; max-height: 220px; overflow: auto; margin-top: 2px; }
.ac-lista div { padding: 8px 10px; cursor: pointer; }
.ac-lista div:hover, .ac-lista div.sel { background: var(--accent-soft); }
.ac-lista small { display: block; }
.ac-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--accent-soft); padding: 7px 10px; border-radius: 8px; }

/* agenda */
.agenda-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.agenda-barra .titulo { font-weight: 600; font-size: 1rem; min-width: 200px; }
.agenda-barra .titulo::first-letter { text-transform: uppercase; }
.agenda { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); max-height: calc(100vh - 170px); }
.agenda-grid { display: grid; min-width: 700px; position: relative; }
.agenda-grid .esq { position: sticky; top: 0; left: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.agenda-grid .dia-h { position: sticky; top: 0; z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); text-align: center; padding: 8px 4px; font-size: .875rem; text-transform: capitalize; }
.agenda-grid .dia-h b { display: block; font-size: 1.125rem; }
.agenda-grid .dia-h.hoy b { color: var(--accent); }
.agenda-grid .horas { position: sticky; left: 0; z-index: 2; background: var(--panel); border-right: 1px solid var(--line); }
.agenda-grid .hora-l { font-family: var(--mono); font-size: .75rem; color: var(--muted); text-align: right; padding-right: 6px; border-bottom: 1px dashed var(--line); display: flex; align-items: flex-start; justify-content: flex-end; }
.agenda-grid .col { position: relative; border-right: 1px solid var(--line); }
.agenda-grid .col.hoy { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.agenda-grid .slot { border-bottom: 1px dashed var(--line); cursor: pointer; }
.agenda-grid .slot:hover { background: var(--accent-soft); }
.turno { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 6px; font-size: .8125rem; line-height: 1.25; overflow: hidden; cursor: pointer; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.turno b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turno.confirmado { border-left-color: var(--violet); background: var(--violet-soft); }
.turno.atendido { border-left-color: var(--ok); background: var(--ok-soft); }
.turno.cancelado { border-left-color: var(--muted); background: var(--panel-2); opacity: .6; text-decoration: line-through; }
.turno.ausente { border-left-color: var(--warn); background: var(--warn-soft); }
.turno.en_espera { border-left-color: var(--sol); background: var(--amber-soft); }
.turno:hover { filter: brightness(.97); z-index: 5; }
.ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--warn); z-index: 1; pointer-events: none; }
.ahora::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }

/* ficha paciente */
.ficha-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; }
.ficha-head .datos { flex: 1; min-width: 200px; }
.ficha-head .datos h1 { margin-bottom: 2px; }
.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.datos-grid div small { display: block; font-size: .75rem; }
.datos-grid div span { white-space: pre-wrap; }
.cef-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cef-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; }
.cef-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000; }
.cef-card .info { padding: 8px 10px; font-size: .875rem; }

/* editor cefalométrico */
.cef-editor { display: grid; grid-template-columns: 1fr 360px; gap: 12px; height: calc(100vh - 120px); min-height: 520px; }
.cef-stage { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); touch-action: none; user-select: none; }
.cef-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.cef-stage.pan canvas { cursor: grab; }
.cef-stage .hud { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: .875rem; pointer-events: none; max-width: 70%; }
.cef-stage .hud b { color: #7fe3e5; }
.cef-stage .ayuda { position: absolute; left: 10px; bottom: 8px; color: #cfd8dc; font-size: .75rem; font-family: var(--mono); background: rgba(0,0,0,.5); padding: 3px 7px; border-radius: 4px; pointer-events: none; }
.cef-stage .zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cef-stage .zoom button { background: rgba(255,255,255,.9); color: #000; border: 0; width: 30px; height: 30px; justify-content: center; padding: 0; }
.cef-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cef-panel .tabs { margin: 0; padding: 0 8px; flex-shrink: 0; }
.cef-panel .contenido { overflow: auto; padding: 10px 12px; flex: 1; }
.puntos-lista { list-style: none; margin: 0; padding: 0; }
.puntos-lista .grupo { font-size: .75rem; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }
.puntos-lista li.p { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.puntos-lista li.p:hover { background: var(--panel-2); }
.puntos-lista li.p.activo { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.puntos-lista li.p .ok { width: 18px; text-align: center; color: var(--ok); }
.puntos-lista li.p .ok.no { color: var(--line); }
.puntos-lista li.p .id { font-family: var(--mono); font-size: .78rem; min-width: 36px; color: var(--muted); }
.puntos-lista li.p .quitar { margin-left: auto; opacity: 0; border: 0; background: none; padding: 0 4px; color: var(--muted); }
.puntos-lista li.p:hover .quitar { opacity: 1; }
.herr { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.controles { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: .8125rem; margin-bottom: 10px; }
.controles label { margin: 0; }
.controles output { font-family: var(--mono); font-size: .75rem; min-width: 34px; text-align: right; }
.capas { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .875rem; margin-bottom: 10px; }
.capas label { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--fg); }
.res-tabla td, .res-tabla th { padding: 5px 6px; font-size: .8125rem; }
.res-tabla tr.analisis td { background: var(--panel-2); font-weight: 600; font-size: .8125rem; color: var(--muted); padding-top: 9px; }
.res-tabla .alto .val, .res-tabla .bajo .val { color: var(--amber); font-weight: 600; }
.res-tabla .normal .val { color: var(--ok); }
.res-tabla .interp { color: var(--muted); font-size: .8125rem; }
.res-tabla .faltan .val, .res-tabla .sin_escala .val { color: var(--muted); }
.resumen { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; font-size: .875rem; margin-bottom: 12px; }
.resumen ul { margin: 4px 0 0; padding-left: 18px; }
.calib-aviso { background: var(--amber-soft); color: var(--amber); padding: 8px 10px; border-radius: 8px; font-size: .8125rem; margin-bottom: 10px; }
@media (max-width: 1000px) {
  .cef-editor { grid-template-columns: 1fr; height: auto; }
  .cef-stage { height: 60vh; }
  .cef-panel { max-height: 70vh; }
}

/* informe */
.informe { max-width: 900px; margin: 0 auto; background: var(--panel); padding: 28px 34px; border-radius: var(--radius); border: 1px solid var(--line); }
.informe .cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 14px; }
.informe .cab h1 { font-size: 1.25rem; }
.informe .pac { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; font-size: .875rem; margin-bottom: 14px; }
.informe img { width: 100%; max-height: 560px; object-fit: contain; background: #000; border-radius: 8px; margin: 8px 0 14px; }
.informe table { font-size: .875rem; }
.informe .firma { margin-top: 36px; display: flex; justify-content: flex-end; }
.informe .firma div { border-top: 1px solid var(--fg); padding-top: 6px; min-width: 240px; text-align: center; font-size: .875rem; }
.no-print { }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 12px; }
  .sidebar, .menu-btn, .no-print, .toasts { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .informe { border: 0; padding: 0; max-width: none; box-shadow: none; }
  .informe img { max-height: 420px; }
  .res-tabla tr.analisis td { background: #eee; }
  .resumen { background: #eef6f6; }
  tr { break-inside: avoid; }
}

/* ---- estudios: historial, odontograma, fotos, modelos ---- */
.historial-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.historial-barra h2 { margin: 0; }
.form-sec .card { margin-top: 0; margin-bottom: 14px; }
.form-sec .campo .capas { padding-top: 4px; }
.paleta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 12px; }
.paleta-grupo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.paleta-grupo > small { width: 100%; font-size: .75rem; color: var(--muted); font-weight: 600; }
.paleta button.sel { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.paleta .sw { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid; font-size: .6rem; font-weight: 700; line-height: 1; }
.odo-wrap { overflow-x: auto; padding: 4px 0; }
.odo-svg { width: 100%; min-width: 640px; max-width: 980px; height: auto; display: block; margin: 0 auto; }
.odo-svg .diente polygon { cursor: pointer; transition: opacity .1s; }
.odo-svg .diente:hover polygon { stroke-width: 1.6; }
.odo-resumen { margin-top: 10px; font-size: .875rem; }
.odo-resumen p { margin: 8px 0 0; }
.indices { display: flex; gap: 8px; flex-wrap: wrap; }
.indices .badge b { font-size: .9375rem; margin: 0 2px; }
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto-card { margin: 0; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.foto-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000; }
.foto-card figcaption { padding: 5px 8px; font-size: .8125rem; }
.archivo-fila { display: grid; grid-template-columns: 56px 1fr 220px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.archivo-fila img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; background: #000; }
.archivo-fila .nombre { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.visor img { width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 8px; }
.visor .nav { height: 60px; justify-content: center; font-size: 1.5rem; }
.visor-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.visor-info select { width: auto; }
.visor-info input { flex: 1; min-width: 160px; }
table.anchos td { padding: 3px 2px; text-align: center; }
table.anchos td small { display: block; font-family: var(--mono); color: var(--muted); font-size: .75rem; }
table.anchos input { width: 52px; padding: 4px; text-align: center; font-size: .875rem; }
table.anchos th { font-size: .75rem; }
.fila-sup td:nth-child(7), .fila-inf td:nth-child(7) { border-right: 2px dashed var(--line); }
.modelos-grid > div > .card { margin-top: 0; margin-bottom: 14px; }
.presupuesto-resumen { margin-top: 6px; }
.pagos-form .campo { margin-bottom: 8px; }
tfoot th { border-top: 2px solid var(--line); }
@media print {
  .historial-barra .acciones, .paleta, .pagos-form, #b-prom { display: none !important; }
  .form-sec .card, .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  .odo-svg { min-width: 0; }
  input, select, textarea { border: 0; border-bottom: 1px solid #999; border-radius: 0; background: transparent; }
}

/* ---- versiones (historial), periodontograma, línea de tiempo ---- */
.versiones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; line-height: 1.15; }
.chip small { font-size: .75rem; color: var(--muted); }
.chip.activo { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip.activo small { color: var(--accent-fg); opacity: .85; }
.perio-grafico svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.perio-wrap { max-height: none; }
.perio-tabla { border-collapse: separate; border-spacing: 0; min-width: 1000px; font-size: .8125rem; }
.perio-tabla th { position: sticky; left: 0; background: var(--panel); z-index: 2; text-align: left; font-size: .75rem; padding: 2px 8px 2px 4px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.perio-tabla td { padding: 1px 2px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.perio-tabla td.aus { background: var(--panel-2); }
.perio-tabla input.ps { width: 19px; padding: 2px 0; text-align: center; font-size: .8125rem; border-radius: 3px; font-family: var(--mono); }
.perio-tabla input[type="checkbox"] { margin: 0 1px; width: 14px; height: 14px; }
.perio-tabla select { width: auto; padding: 1px 2px; font-size: .75rem; }
.perio-tabla tr.sec th { background: var(--accent-soft); color: var(--accent); }
.perio-tabla tr.sec td { background: var(--accent-soft); }
.perio-tabla tr.num-fila th.pieza { position: static; cursor: pointer; text-align: center; font-family: var(--mono); font-size: .8125rem; background: var(--panel-2); user-select: none; }
.perio-tabla th.pieza.ausente { text-decoration: line-through; color: var(--muted); }
.perio-tabla th.pieza.implante { color: var(--violet); }
.perio-tabla th.pieza small { display: block; font-size: .75rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--line); }
.timeline .tl-fecha { font-weight: 600; font-size: .8125rem; color: var(--accent); margin: 14px 0 4px 10px; }
.timeline .tl-item { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0 5px 10px; position: relative; }
.timeline .tl-item::before { content: ""; position: absolute; left: -11px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline .tl-ic { width: 22px; text-align: center; }
.timeline .tl-item p { margin: 2px 0 0; font-size: .875rem; color: var(--muted); white-space: pre-wrap; }

/* ---- visor de imágenes ---- */
.main.sin-padding { padding: 0 !important; }
.visor-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #0d1114; color: #e3ebf0; }
.visor-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #26313a; flex-wrap: wrap; }
.visor-top .btn, .visor-top button { background: #1b252b; color: #e3ebf0; border-color: #2a3740; }
.visor-titulo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.visor-titulo small { color: #8ea0ad; font-size: .75rem; }
.visor-herr { display: flex; gap: 4px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #26313a; overflow-x: auto; scrollbar-width: thin; }
.visor-herr button { background: #1b252b; color: #e3ebf0; border: 1px solid #2a3740; min-width: 38px; height: 36px; justify-content: center; padding: 0 8px; font-size: 1rem; flex-shrink: 0; }
.visor-herr button[aria-pressed="true"] { background: #3cc0c2; color: #06222c; border-color: #3cc0c2; }
.visor-herr .sep { width: 1px; height: 26px; background: #2a3740; margin: 0 4px; flex-shrink: 0; }
.visor-herr .colores { display: flex; gap: 4px; }
.visor-herr .colores button { min-width: 24px; width: 24px; height: 24px; border-radius: 50%; padding: 0; border: 2px solid #2a3740; }
.visor-herr .colores button[aria-pressed="true"] { border-color: #fff; transform: scale(1.15); }
.visor-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.visor-stage { position: relative; background: #000; touch-action: none; user-select: none; overflow: hidden; }
.visor-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.visor-stage .hud { position: absolute; left: 10px; bottom: 8px; font-size: .75rem; color: #cfd8dc; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 4px; pointer-events: none; max-width: 80%; }
.visor-panel { background: #161e23; border-left: 1px solid #26313a; padding: 12px; overflow: auto; }
.visor-panel h3 { color: #8ea0ad; }
.visor-panel input, .visor-panel textarea { background: #1b252b; color: #e3ebf0; border-color: #2a3740; }
.visor-panel .controles label { color: #8ea0ad; }
.visor-panel .controles output { color: #e3ebf0; }
.anot-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; }
.anot-item:hover { background: #1b252b; }
.anot-item.sel { background: #163b3d; }
.anot-item .sw { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.anot-item > div { flex: 1; min-width: 0; }
.anot-item b { font-size: .8125rem; display: block; }
.anot-item input { font-size: .8125rem; padding: 3px 6px; margin-top: 2px; }
.anot-item button { background: transparent; border: 0; color: #8ea0ad; padding: 2px 6px; }
@media (max-width: 900px) {
  .visor-cuerpo { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .visor-panel { display: none; border-left: 0; border-top: 1px solid #26313a; max-height: 45vh; }
  .visor-panel.abierto { display: block; }
  .visor-top { padding: 8px 10px 8px 10px; }
}

/* ---- ajustes responsive generales (teléfono) ---- */
@media (max-width: 860px) {
  .main { padding-top: 52px; }
  .encabezado h1 { font-size: 1.25rem; }
  .acciones button, .acciones .btn { padding: 7px 10px; font-size: .875rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 12px 12px; }
  .ficha-head .acciones { width: 100%; }
  .modal { padding: 16px 14px; }
  .modal-fondo { padding: 2vh 8px; }
  .cef-editor { height: auto; }
  .cef-stage { height: 62vh; }
  .cef-stage .ayuda { display: none; }
  .agenda { max-height: calc(100vh - 210px); }
  .agenda-grid { min-width: 560px; }
  .datos-grid { grid-template-columns: 1fr; }
  table { font-size: .875rem; }
  th, td { padding: 7px 6px; }
  input, select, textarea, button { font-size: 16px; } /* evita zoom automático de iOS */
  .btn-chico, .chip { font-size: .8125rem !important; }
  .perio-tabla input.ps { font-size: 14px; width: 22px; }
  .perio-tabla select { font-size: 13px; }
  .visor-herr button { font-size: 16px; }
}
@media (hover: none) and (pointer: coarse) {
  .puntos-lista li.p .quitar { opacity: 1; }
  .odo-svg .diente polygon { stroke-width: 1; }
}
.timeline .tl-fecha::first-letter { text-transform: uppercase; }


/* ---- acceso con PIN ---- */
.login-fondo { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 300; padding: 16px; }
.login { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 32px 28px; width: 100%; max-width: 340px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.login h1 { margin: 0; letter-spacing: -.01em; }
.login p { margin: 0; }
.login input { text-align: center; font-size: 1.5rem; letter-spacing: .5em; padding: 10px; max-width: 220px; }
.login button { width: 100%; max-width: 220px; justify-content: center; padding: 10px; font-size: 1rem; }
.login .error { color: var(--warn); font-size: .875rem; min-height: 1.2em; }
.archivo-fila.error .nombre { color: var(--warn); }

/* ---- visor: barra en filas con etiquetas, sin botón de menú global ---- */
body.modo-visor .menu-btn, body.modo-visor .sidebar { display: none !important; }
body.modo-visor .app { grid-template-columns: 1fr; }
.visor-herr { flex-wrap: wrap; gap: 6px 10px; overflow: visible; }
.visor-herr .grupo-h { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.visor-herr .grupo-h + .grupo-h { border-left: 1px solid #2a3740; padding-left: 10px; }
.visor-herr button { flex-direction: column; gap: 0; height: 44px; min-width: 52px; padding: 2px 6px; line-height: 1.05; }
.visor-herr button .ic { font-size: 1rem; }
.visor-herr button small { font-size: .75rem; color: #8ea0ad; letter-spacing: .01em; }
.visor-herr button[aria-pressed="true"] small { color: #06222c; }
.visor-herr .colores button { height: 24px; min-width: 24px; }
@media (max-width: 900px) {
  .visor-top { flex-wrap: nowrap; padding: 6px 8px; }
  .visor-top .visor-titulo b { font-size: .875rem; }
  .visor-top .acciones { gap: 4px; }
  .visor-top .acciones button, .visor-top .acciones .btn { padding: 6px 8px; font-size: .8125rem; }
  .visor-top #b-guardar:not([hidden]) { display: inline-flex; }
  .visor-herr { padding: 4px 6px; gap: 4px 6px; }
  .visor-herr .grupo-h + .grupo-h { border-left: 0; padding-left: 0; }
  .visor-herr button { min-width: calc((100vw - 12px - 6 * 4px) / 6 - 1px); height: 42px; }
  .visor-herr .colores button { min-width: 24px; }
}
@media (max-width: 900px) {
  .visor-top { flex-wrap: wrap; row-gap: 6px; }
  .visor-titulo { flex: 1; min-width: 0; }
  .visor-titulo b, .visor-titulo small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .visor-top .acciones { flex-basis: 100%; justify-content: flex-start; }
}

/* ---- popover / hoja inferior ---- */
.popover { position: fixed; z-index: 150; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 6px; animation: modal-in .12s ease-out; max-height: 80vh; overflow: auto; }
.popover.hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 16px 16px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); max-height: 85vh; }
.pop-fondo { position: fixed; inset: 0; background: rgba(8,20,26,.45); z-index: 149; }
.pop-titulo { font-size: .75rem; color: var(--muted); font-weight: 600; padding: 6px 10px 4px; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; font-size: .9375rem; }
.pop-item:hover { background: var(--accent-soft); }
.pop-item b { font-weight: 600; display: block; }
.pop-item small { color: var(--muted); display: block; font-size: .75rem; }
.pop-item.peligro b { color: var(--warn); }
.pop-ic { width: 24px; text-align: center; font-size: 1rem; flex-shrink: 0; }
.pop-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.pop-cerrar { width: 100%; margin-top: 8px; justify-content: center; }
.hoja .pop-item { padding: 12px 10px; font-size: 1rem; }
.paleta-colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px; }
.paleta-colores button { height: 36px; border-radius: 8px; border: 2px solid var(--line); padding: 0; }
.paleta-colores button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 2px #fff; }
.visor-herr .sw-color { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; }

/* ---- cabecera de ficha compacta ---- */
.ficha-head { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); gap: 12px; margin-bottom: 12px; }
.ficha-head .avatar { width: 46px; height: 46px; font-size: 1rem; }
.ficha-head .datos h1 { font-size: 1.25rem; margin-bottom: 4px; }
.ficha-head .chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.chip-dato { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--fg); max-width: 100%; }
.chip-dato .ic { font-size: .8125rem; opacity: .8; }
.chip-dato.motivo { color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ficha-head .acciones { gap: 6px; }
.ficha-head #b-mas { font-size: 1.25rem; line-height: 1; padding: 4px 10px; }
@media (max-width: 860px) {
  .ficha-head { padding: 10px 12px; gap: 10px; align-items: flex-start; }
  .ficha-head .avatar { width: 40px; height: 40px; font-size: .9375rem; }
  .ficha-head .datos { flex: 1; min-width: 0; }
  .ficha-head .datos h1 { font-size: 1.125rem; }
  .ficha-head .acciones { width: auto; margin-left: auto; }
  .chip-dato.motivo { max-width: 100%; }
  .tabs { gap: 0; margin-bottom: 12px; }
  .tabs button { padding: 8px 10px; font-size: .875rem; }
}

/* ---- editor cefalométrico en teléfono ---- */
.cef-head .cef-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cef-head .volver { display: inline-flex; padding: 6px 12px; white-space: nowrap; }
.cef-head h1 { font-size: 1.125rem; }
.cef-tactil { display: none; position: absolute; left: 8px; right: 8px; bottom: 8px; gap: 6px; justify-content: center; }
.cef-tactil button { background: rgba(20,28,32,.85); color: #fff; border: 1px solid rgba(255,255,255,.2); height: 40px; padding: 0 12px; backdrop-filter: blur(4px); }
.cef-tactil button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
@media (hover: none) and (pointer: coarse) {
  .cef-tactil { display: flex; }
  .cef-stage .ayuda { display: none; }
}
@media (max-width: 860px) {
  .cef-head .volver { display: inline-flex; }
  .cef-head h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cef-head .cef-titulo > div { min-width: 0; }
  .cef-head .solo-escritorio { display: none; }
  .cef-editor { gap: 8px; }
  .cef-stage { height: 58vh; border-radius: 8px; }
  .cef-stage .hud { font-size: .8125rem; max-width: 60%; }
  .cef-stage .zoom { top: 8px; right: 8px; }
  .cef-panel { max-height: 50vh; }
  .cef-panel .contenido { padding: 8px 10px; }
  .puntos-lista li.p { padding: 8px 8px; font-size: .9375rem; }
}
/* cabecera de ficha: grilla avatar | nombre | acciones, chips debajo */
.ficha-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "avatar nombre acciones" "avatar chips chips"; align-items: center; column-gap: 12px; row-gap: 6px; }
.ficha-head .avatar { grid-area: avatar; align-self: start; }
.ficha-head .datos { grid-area: nombre; min-width: 0; }
.ficha-head .datos h1 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-head .acciones { grid-area: acciones; }
.ficha-head .chips { grid-area: chips; }
@media (max-width: 860px) {
  .ficha-head { grid-template-areas: "avatar nombre acciones" "chips chips chips"; column-gap: 10px; }
  .ficha-head .datos h1 { white-space: normal; font-size: 1rem; line-height: 1.2; }
  .cef-stage .hud { max-width: calc(100% - 80px); }
}

/* ---- modo solo lectura (odontograma, periodontograma, visor) ---- */
.solo-lectura .odo-svg .diente polygon { cursor: default; }
.solo-lectura .perio-tabla input, .solo-lectura .perio-tabla select { background: transparent; border-color: transparent; color: var(--fg); opacity: 1; }
.solo-lectura .perio-tabla input.ps:disabled { font-weight: 600; }
.solo-lectura .perio-tabla th.pieza { cursor: default; }
.herr-actual { width: 100%; justify-content: flex-start; margin-bottom: 8px; }
.herr-actual .sw { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid; font-size: .6rem; font-weight: 700; background: #fff; }
.visor-app.solo-lectura [data-h="hallazgo"], .visor-app.solo-lectura [data-h="flecha"], .visor-app.solo-lectura [data-h="elipse"], .visor-app.solo-lectura [data-h="rect"], .visor-app.solo-lectura [data-h="lapiz"], .visor-app.solo-lectura [data-h="texto"], .visor-app.solo-lectura [data-h="distancia"], .visor-app.solo-lectura [data-h="angulo"], .visor-app.solo-lectura [data-h="calibrar"], .visor-app.solo-lectura #b-color, .visor-app.solo-lectura [data-a="deshacer"], .visor-app.solo-lectura [data-a="borrar"] { display: none; }
.visor-app.solo-lectura .visor-stage canvas { cursor: grab; }
.anot-item p { margin: 2px 0 0; font-size: .8125rem; color: #cfd8dc; }
@media (max-width: 860px) {
  .odo-svg { min-width: 560px; }
  .perio-tabla { font-size: .8125rem; }
  .perio-tabla th { font-size: .75rem; padding-right: 4px; }
  .perio-grafico svg { min-height: 120px; }
}

/* ---- estilo app móvil: barra inferior, tarjetas, botón flotante, vista de lectura ---- */
.solo-movil { display: none !important; }
.tabbar { display: none; }
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin: 0; }
.dl > div { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.dl dt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.dl dd { margin: 2px 0 0; white-space: pre-wrap; }
.card.lectura h2 { font-size: 1rem; }
.fab { position: fixed; right: 18px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: 0; font-size: 1.9rem; line-height: 1; justify-content: center; box-shadow: 0 8px 24px rgba(15,139,141,.45); z-index: 60; }
.fab:hover { background: var(--accent); filter: brightness(1.08); }
.lista-tarjetas { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-pac { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--fg); text-decoration: none; }
.tarjeta-pac:active { background: var(--panel-2); }
.tarjeta-pac .avatar { width: 42px; height: 42px; font-size: .9375rem; flex-shrink: 0; }
.tarjeta-pac .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tarjeta-pac .cuerpo b { font-size: 1rem; }
.tarjeta-pac .cuerpo small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-pac .flecha { color: var(--muted); font-size: 1.5rem; }
@media (max-width: 860px) {
  .solo-pc { display: none !important; }
  .solo-movil { display: block !important; }
  .lista-tarjetas.solo-movil { display: flex !important; }
  .fab.solo-movil { display: inline-flex !important; }
  .menu-btn, .sidebar { display: none !important; }
  .main { padding: 12px 14px calc(84px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--panel); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--muted); text-decoration: none; font-size: .75rem; padding: 4px 0; border-radius: 10px; }
  .tabbar a .ic { font-size: 1.25rem; line-height: 1.1; }
  .tabbar a.activo { color: var(--accent-ink); background: var(--accent-soft); }
  body.sin-tabbar .tabbar { display: none; }
  body.sin-tabbar .main { padding-bottom: 0; }
  .encabezado { margin-bottom: 12px; }
  .encabezado h1 { font-size: 1.25rem; }
  .buscador { max-width: none; width: 100%; }
  .buscador input { padding: 11px 12px 11px 36px; border-radius: 12px; font-size: 16px; }
  .encabezado .acciones { width: 100%; }
  .encabezado .acciones #b-nuevo { display: none; } /* reemplazado por el botón flotante */
  .card { border-radius: 14px; }
  .stat { border-radius: 14px; }
  .stat b { font-size: 1.5rem; }
  .historial-barra .acciones input[type="text"] { max-width: 150px; }
  .tabs { position: sticky; top: 0; background: var(--bg); z-index: 5; padding-top: 4px; }
  .dl { grid-template-columns: 1fr; }
  .cef-editor { height: auto; }
}

/* ---- ficha como cuadrícula de módulos (app) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; color: var(--fg); text-decoration: none; box-shadow: var(--shadow); min-height: 104px; }
.tile:hover { text-decoration: none; border-color: var(--accent); }
.tile .ic { font-size: 1.5rem; line-height: 1; }
.tile b { font-size: .9375rem; }
.tile small { color: var(--muted); font-size: .75rem; line-height: 1.25; }
.sub-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sub-barra b { font-size: 1rem; }
.lista-registros { display: flex; flex-direction: column; gap: 8px; }
.registro { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--fg); text-decoration: none; }
.registro .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registro .cuerpo b { text-transform: none; }
.registro .etiqueta { font-size: .8125rem; color: var(--accent); font-weight: 600; }
.registro small { color: var(--muted); font-size: .8125rem; }
.registro .flecha { color: var(--muted); font-size: 1.5rem; }
a.fab { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { min-height: 96px; padding: 12px; border-radius: 14px; }
  .tile .ic { font-size: 1.25rem; }
  .tile b { font-size: .875rem; }
  .historial-barra h2 { font-size: 1rem; }
  .ficha-head { margin-bottom: 10px; }
}

/* ---- inicio y agenda en teléfono ---- */
a.stat { text-decoration: none; display: block; }
a.stat:hover { border-color: var(--accent); text-decoration: none; }
.lista .lista-fecha { border: 0; padding: 10px 0 2px; }
.lista .lista-fecha small { font-weight: 600; display: inline-block; }
.lista .lista-fecha small::first-letter { text-transform: uppercase; }
.turno-item .flecha { color: var(--muted); font-size: 1.25rem; align-self: center; }
.tira-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
.tira-dias .dia { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.tira-dias .dia small { font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.tira-dias .dia b { font-size: 1.125rem; line-height: 1.1; }
.tira-dias .dia .puntos { font-size: .6rem; color: var(--accent); letter-spacing: -1px; min-height: .8em; line-height: 1; }
.tira-dias .dia.hoy b { color: var(--accent); }
.tira-dias .dia.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tira-dias .dia.sel small, .tira-dias .dia.sel .puntos { color: var(--accent-fg); }
.turno-card { border-left: 4px solid var(--accent); cursor: pointer; }
.turno-card.confirmado { border-left-color: var(--violet); }
.turno-card.atendido { border-left-color: var(--ok); }
.turno-card.ausente { border-left-color: var(--warn); }
.turno-card.en_espera { border-left-color: var(--sol); }
.turno-card.cancelado { border-left-color: var(--muted); opacity: .6; }
.turno-card.pasado:not(.atendido) { opacity: .75; }
.turno-card .hora-col { display: flex; flex-direction: column; align-items: center; min-width: 52px; font-family: var(--mono); }
.turno-card .hora-col b { font-size: 1rem; color: var(--accent); }
.turno-card .hora-col small { color: var(--muted); font-size: .75rem; }
.turno-card .cuerpo .nota { white-space: normal; font-style: italic; }
@media (max-width: 860px) {
  .turno-item { cursor: pointer; }
  .encabezado .acciones .seg button { padding: 7px 12px; }
  .card h2 .btn-chico { font-size: .8125rem; }
}
.cap::first-letter { text-transform: uppercase; }
#m-fecha { color: transparent; caret-color: transparent; }

/* ---- títulos compactos con separador de color ---- */
.encabezado { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-soft); position: relative; }
.encabezado::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--accent); }
.encabezado h1 { font-size: 1.25rem; padding-left: 10px; border-left: 4px solid var(--accent); line-height: 1.15; }
.encabezado > div > small { padding-left: 14px; display: block; }
.historial-barra { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.historial-barra h2 { padding-left: 8px; border-left: 3px solid var(--accent); font-size: 1rem; line-height: 1.2; }
.sub-barra { padding-bottom: 6px; border-bottom: 2px solid var(--accent-soft); margin-bottom: 8px; }
.sub-barra b { font-size: 1rem; }
/* buscador plegable en teléfono */
#b-buscar { font-size: 1.25rem; line-height: 1; padding: 4px 10px; }
/* cabecera del paciente: datos en cuadrícula tipo tabla */
.datos-tabla { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.datos-tabla .celda { display: grid; grid-template-columns: 22px 1fr; grid-template-areas: "ic k" "ic v"; column-gap: 6px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.datos-tabla .celda .ic { grid-area: ic; align-self: center; font-size: .9375rem; opacity: .85; }
.datos-tabla .celda .k { grid-area: k; font-size: .75rem; color: var(--muted); font-weight: 600; }
.datos-tabla .celda .v { grid-area: v; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datos-tabla .celda.c0 { background: #e8f5f5; border-color: #cfe9ea; }
.datos-tabla .celda.c1 { background: #eef1fb; border-color: #d9dff5; }
.datos-tabla .celda.c2 { background: #fdf3e7; border-color: #f5e3c8; }
.datos-tabla .celda.c3 { background: #eef8ee; border-color: #d4ecd4; }
.datos-tabla .celda.motivo { grid-column: 1 / -1; background: #fff9e6; border-color: #f3e7b8; }
.datos-tabla .celda.motivo .v { white-space: normal; font-weight: 500; font-style: italic; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .datos-tabla .celda.c0, :root:not([data-theme="light"]) .datos-tabla .celda.c1, :root:not([data-theme="light"]) .datos-tabla .celda.c2, :root:not([data-theme="light"]) .datos-tabla .celda.c3, :root:not([data-theme="light"]) .datos-tabla .celda.motivo { background: var(--panel-2); border-color: var(--line); }
}
:root[data-theme="dark"] .datos-tabla .celda.c0, :root[data-theme="dark"] .datos-tabla .celda.c1, :root[data-theme="dark"] .datos-tabla .celda.c2, :root[data-theme="dark"] .datos-tabla .celda.c3, :root[data-theme="dark"] .datos-tabla .celda.motivo { background: var(--panel-2); border-color: var(--line); }
.ficha-head .datos h1 { font-size: 1.25rem; white-space: normal; }
.ficha-head #b-nuevo-reg { font-size: 1.25rem; line-height: 1; padding: 4px 11px; }
/* tarjetas de módulos: ícono a la izquierda */
.tile { flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 12px 12px 12px 10px; }
.tile .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); font-size: 1.25rem; flex-shrink: 0; }
.tile .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tile .tx b { font-size: .9375rem; }
.tile .tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .flecha { color: var(--muted); font-size: 1.25rem; }
/* acordeón */
.acordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::before { content: "▸"; color: var(--accent); font-size: .875rem; transition: transform .15s; }
.acordeon[open] summary::before { transform: rotate(90deg); }
.acordeon summary b { font-size: 1rem; }
.acordeon summary small { color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acordeon > .indices { margin-top: 10px; }
/* cefalometrías lista móvil */
.registro .miniatura { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; background: #000; flex-shrink: 0; }
@media (max-width: 860px) {
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } /* se adapta si el rol oculta alguna sección */
  .encabezado { margin-bottom: 10px; padding-bottom: 6px; align-items: center; }
  .encabezado h1 { font-size: 1.125rem; }
  .encabezado .acciones { width: auto; margin-left: auto; }
  .encabezado .acciones .buscador { display: none; }
  .encabezado .acciones .buscador.abierto { display: block; flex-basis: 100%; order: 10; margin-top: 6px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 10px 8px 10px 8px; gap: 8px; }
  .tile .ic { width: 36px; height: 36px; font-size: 1.125rem; border-radius: 10px; }
  .tile .tx b { font-size: .8125rem; }
  .tile .tx small { font-size: .75rem; white-space: normal; }
  .tile .flecha { display: none; }
  .datos-tabla { grid-template-columns: 1fr 1fr; }
  .historial-barra { flex-direction: column; align-items: stretch; gap: 6px; }
  .historial-barra h2 { display: none; } /* el título ya está en la barra "‹ Ficha" */
  .historial-barra .acciones { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .historial-barra .acciones > * { flex-shrink: 0; }
  .historial-barra .acciones input[type="date"] { width: 130px !important; }
  .historial-barra .acciones input[type="text"] { max-width: 140px; }
  .historial-barra > a.btn { align-self: flex-start; }
  .historial-barra > small { order: -1; }
  .sub-barra b { flex: 1; }
  .acordeon summary b { font-size: .9375rem; }
  .form-sec .card h2, .card h2 { font-size: 1rem; }
}
@media (max-width: 860px) {
  .ficha-head.compacta { padding: 8px 12px; grid-template-areas: "avatar nombre acciones"; }
  .ficha-head.compacta .datos-tabla { display: none; }
  .ficha-head.compacta .avatar { width: 34px; height: 34px; font-size: .875rem; }
  .ficha-head.compacta .datos h1 { font-size: 1rem; }
  .encabezado .acciones #b-nueva { display: none; }
}

/* ---- menú: cada opción como fila individual ---- */
.pop-item + .pop-item { border-top: 1px solid var(--line); border-radius: 0; }
.pop-item:first-child { border-radius: 8px 8px 0 0; }
.pop-item:last-child { border-radius: 0 0 8px 8px; }
.pop-sep + .pop-item, .pop-titulo + .pop-cuerpo > .pop-item:first-child { border-top: 0; border-radius: 8px 8px 0 0; }
.pop-sep { height: 0; margin: 8px 0; border-top: 2px solid var(--line); }
.hoja .pop-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px !important; margin-bottom: 6px; padding: 12px 12px; }
.hoja .pop-item:active { background: var(--accent-soft); }
.hoja .pop-item .pop-ic { width: 32px; height: 32px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.hoja .pop-item.peligro { border-color: var(--warn-soft); background: var(--warn-soft); }
.hoja .pop-sep { border: 0; height: 6px; margin: 0; }

/* ---- cabecera del paciente plegable en teléfono ---- */
.plegar-hint { display: none; color: var(--muted); font-size: .75rem; }
@media (max-width: 860px) {
  .ficha-head { padding: 8px 12px; grid-template-areas: "avatar nombre acciones" "chips chips chips"; cursor: pointer; }
  .ficha-head .datos-tabla { display: none; }
  .ficha-head.abierta .datos-tabla { display: grid; margin-top: 6px; }
  .ficha-head .datos h1 { font-size: 1rem; line-height: 1.2; }
  .ficha-head .avatar { width: 36px; height: 36px; font-size: .875rem; }
  .ficha-head .plegar-hint { display: block !important; line-height: 1.1; margin-top: 1px; }
  .ficha-head .acciones { cursor: default; }
}

/* ---- móvil: acciones de módulo en dos líneas, sin desborde horizontal ---- */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .main { max-width: 100vw; overflow-x: clip; }
  .historial-barra { min-width: 0; }
  .historial-barra .acciones { display: flex; flex-wrap: wrap; overflow: visible; min-width: 0; gap: 6px; }
  .historial-barra .acciones input[type="date"] { flex: 1 1 42%; width: auto !important; min-width: 0; }
  .historial-barra .acciones input[type="text"] { flex: 1 1 50%; max-width: none; min-width: 0; }
  .historial-barra .acciones small { flex: 1 1 100%; order: 5; font-size: .75rem; }
  .historial-barra .acciones button, .historial-barra .acciones .btn { flex: 0 1 auto; order: 6; padding: 7px 10px; font-size: .8125rem; }
  .historial-barra .acciones button.btn-primario { order: 6; }
  .historial-barra > small { flex: 1 1 100%; }
  .tabla-wrap, .perio-wrap, .odo-wrap, .fotos-grid, .modelos-grid { max-width: 100%; min-width: 0; }
  .modelos-grid { grid-template-columns: 1fr; }
  .card { min-width: 0; }
  .encabezado { min-width: 0; }
  .encabezado .acciones { flex-wrap: wrap; min-width: 0; }
}

/* ---- buscador de pacientes abierto en teléfono: campo a todo el ancho ---- */
@media (max-width: 860px) {
  .encabezado.con-buscador > div:first-child { display: none; }
  .encabezado.con-buscador .acciones { flex: 1 1 100%; width: 100%; margin-left: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .encabezado.con-buscador .acciones .buscador.abierto { display: block; flex: 1; order: 0; margin-top: 0; min-width: 0; }
  .encabezado.con-buscador #b-buscar { order: 1; flex-shrink: 0; }
  /* editor cefalométrico: cabecera en una línea */
  .cef-head { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .cef-head .cef-titulo { flex: 1; min-width: 0; }
  .cef-head .cef-titulo small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .cef-head .acciones { width: auto; flex-shrink: 0; gap: 6px; }
  .cef-head .acciones .btn, .cef-head .acciones button { padding: 6px 10px; font-size: .8125rem; }
  .cef-stage { height: 52vh; }
}

/* ---- datos del paciente más compactos en teléfono ---- */
@media (max-width: 860px) {
  .ficha-head.abierta .datos-tabla { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
  .datos-tabla .celda { grid-template-columns: 16px 1fr; padding: 3px 6px; border-radius: 8px; column-gap: 4px; }
  .datos-tabla .celda .ic { font-size: .75rem; }
  .datos-tabla .celda .k { font-size: .75rem; letter-spacing: .03em; }
  .datos-tabla .celda .v { font-size: .75rem; font-weight: 600; }
  .datos-tabla .celda.motivo .v { font-size: .75rem; }
  /* odontograma y periodontograma: controles compactos */
  .odo-wrap { margin: 0 -6px; }
  .odo-svg { min-width: 520px; }
  .herr-actual { padding: 6px 10px; font-size: .875rem; margin-bottom: 6px; }
  .paleta { margin: 6px 0 8px; }
  .seg button { padding: 6px 10px; font-size: .8125rem; }
  .odo-resumen { font-size: .8125rem; }
  .indices .badge { font-size: .75rem; padding: 2px 7px; }
  .perio-grafico svg { margin-bottom: 6px; }
  .perio-tabla { min-width: 900px; }
  .perio-tabla th { padding: 1px 6px 1px 3px; font-size: .75rem; }
  .perio-tabla input.ps { width: 21px; font-size: 13px; padding: 1px 0; }
  .perio-tabla input[type="checkbox"] { width: 13px; height: 13px; }
  .perio-tabla tr.num-fila th.pieza { font-size: .75rem; }
  .acordeon summary small { font-size: .75rem; }
  .card > p > small, .card .muted small { font-size: .75rem; }
}

/* ---- examen clínico y modelos compactos en teléfono ---- */
@media (max-width: 860px) {
  .form-sec .card { padding: 10px 12px; margin-bottom: 10px; }
  .form-sec .card h2 { font-size: .9375rem; margin-bottom: 6px; }
  .form-sec .campo { margin-bottom: 8px; }
  .form-sec label { font-size: .75rem; margin-bottom: 2px; }
  .form-sec input, .form-sec select, .form-sec textarea { padding: 6px 8px; }
  .form-sec .capas { gap: 4px 8px; font-size: .8125rem; }
  .form-sec .capas label { font-size: .8125rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); }
  .form-sec .capas label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .form-sec .capas input { width: 14px; height: 14px; margin: 0; }
  .form-sec .capas button { padding: 2px 7px; font-size: .75rem; }
  .form-sec .campo small.muted { font-size: .75rem; }
  .card.lectura { padding: 10px 12px; }
  .card.lectura h2 { font-size: .9375rem; margin-bottom: 4px; }
  .dl > div { padding: 4px 0; }
  .dl dt { font-size: .75rem; }
  .dl dd { font-size: .8125rem; }
  .modelos-grid > div > .card { padding: 10px 12px; margin-bottom: 10px; }
  .modelos-grid .card h2 { font-size: .9375rem; }
  .modelos-grid .card > p.muted { margin: 0 0 6px; }
  .modelos-grid .card > p.muted small { font-size: .75rem; }
  table.anchos input { width: 44px; padding: 3px; font-size: 13px; }
  table.anchos td small { font-size: .75rem; }
  .modelos-grid .form-grid { grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .modelos-grid .campo { margin-bottom: 6px; }
  .modelos-grid .campo label { font-size: .75rem; }
  .modelos-grid .res-tabla td, .modelos-grid .res-tabla th { padding: 4px 4px; font-size: .75rem; }
  .modelos-grid .resumen { font-size: .8125rem; padding: 8px 10px; }
  .modelos-grid .grid.c2 { gap: 8px; }
}

/* ---- fotos, plan y pagos compactos en teléfono; margen en anchos ---- */
@media (max-width: 860px) {
  table.anchos { margin-bottom: 10px; }
  .modelos-grid .tabla-wrap { padding-bottom: 6px; }
  /* fotos */
  .fotos-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .foto-card { border-radius: 10px; }
  .foto-card figcaption { padding: 3px 5px; font-size: .75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .foto-card figcaption small { display: none; }
  .historial-barra .acciones #b-subir { display: none; } /* reemplazado por el botón flotante */
  .archivo-fila { grid-template-columns: 44px 1fr; gap: 6px; }
  .archivo-fila select { grid-column: 1 / -1; }
  /* plan y pagos */
  .presupuesto-resumen { font-size: .8125rem; padding: 8px 10px; }
  .pagos-form { grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .pagos-form .campo:nth-child(2) { grid-column: 1 / -1; }
  .pagos-form .campo:last-child { grid-column: 1 / -1; }
  .pagos-form .campo:last-child button { width: 100%; justify-content: center; }
  .pagos-tabla table { font-size: .8125rem; }
  .pagos-tabla th, .pagos-tabla td { padding: 5px 4px; }
}

/* ---- logo en configuración ---- */
.logo-cfg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-prev { width: 160px; height: 80px; border: 1px dashed var(--line); border-radius: 10px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- mejoras del informe de diseño: legibilidad, objetivos táctiles, listas, visor, tabs ---- */
.tabs { flex-wrap: wrap; row-gap: 2px; } /* escritorio: las pestañas pasan a dos filas en vez de desbordar */
.registro .cuerpo .meta { font-size: .8125rem; color: var(--muted); }
.registro .cuerpo .sin-etiqueta { color: var(--amber); font-weight: 600; }
.registro .cuerpo b { font-size: .9375rem; }
.tile .tx small { font-size: .8125rem; }
.turno-card .hora-col small { font-size: .75rem; }
.tira-dias .dia small { font-size: .75rem; }
.tira-dias .dia .puntos { font-size: .7rem; }
.dl dt { font-size: .75rem; }
.datos-tabla .celda .k { font-size: .75rem; }
.visor-herr button small { font-size: .75rem; color: #b6c3cc; }
.visor-titulo small { font-size: .8125rem; }
.visor-stage .hud { font-size: .8125rem; }
.historial-barra .acciones small { font-size: .8125rem; }
.chip small { font-size: .75rem; }
.lista .cuerpo small, .lista li small { font-size: .8125rem; }
.encabezado > div > small { font-size: .8125rem; }
@media (pointer: coarse) {
  .btn-chico, .btn-icono, .seg button, .chip, .tabs button, .historial-barra .acciones button, .historial-barra .acciones .btn, .sub-barra .btn, .encabezado .acciones .seg button { min-height: 42px; }
  .btn-icono, .seg button { min-width: 42px; }
  .ficha-head #b-nuevo-reg, .ficha-head #b-mas { min-width: 44px; min-height: 40px; }
  .herr-actual { min-height: 44px; }
  .paleta-colores button { height: 44px; }
  .tabbar a small { font-size: .75rem; }
  .tabbar a { padding: 6px 0; }
  .datos-tabla .celda { padding: 5px 8px; }
  .datos-tabla .celda .k { font-size: .75rem; }
  .datos-tabla .celda .v { font-size: .8125rem; }
  .plegar-hint { font-size: .8125rem; }
  .tile .tx small { font-size: .75rem; }
  .perio-tabla input.ps { width: 26px; height: 30px; font-size: 15px; }
  .perio-tabla input[type="checkbox"] { width: 18px; height: 18px; }
  .odo-svg .diente polygon { stroke-width: 1.1; }
}
@media (max-width: 860px) {
  /* visor: una sola fila (Mover · Ventana · Lupa · herramientas de anotación en edición · Imagen ▾) */
  .visor-herr .grupo-h [data-a] { display: none !important; }
  .visor-herr #b-imagen-menu { display: inline-flex !important; }
  .visor-herr { flex-wrap: nowrap; overflow-x: auto; }
  .visor-herr .grupo-h { flex-wrap: nowrap; }
  .visor-herr button { min-width: 58px; height: 46px; }
  .visor-herr button small { font-size: .75rem; }
  .historial-barra .acciones .btn-icono { min-width: 44px; }
  .historial-barra .acciones small { flex: 0 1 auto; order: 0; }
  .sub-barra .btn { min-height: 40px; }
}
@media (max-width: 860px) {
  /* en edición, Deshacer y Borrar siguen a mano en la barra del visor */
  .visor-app:not(.solo-lectura) .visor-herr [data-a="deshacer"], .visor-app:not(.solo-lectura) .visor-herr [data-a="borrar"] { display: inline-flex !important; }
}

/* ---- Formulario 033 ---- */
table.f033 { font-size: .875rem; }
table.f033 th { text-align: left; font-size: .75rem; white-space: nowrap; }
table.f033 td { padding: 4px 6px; }
table.f033 input[type="text"], table.f033 input[type="date"], table.f033 select { padding: 5px 8px; font-size: .875rem; }
table.f033 input[type="number"] { width: 52px; padding: 4px; text-align: center; }
table.f033.higiene td, table.f033.higiene th { text-align: center; }
table.f033.higiene th:first-child { text-align: left; }
table.f033 .prom, table.f033 .tot { font-weight: 700; color: var(--accent-ink); text-align: center; }
table.f033 input[type="radio"] { width: 18px; height: 18px; }
table.f033.filas th { white-space: normal; }
@media (max-width: 860px) {
  table.f033 { min-width: 520px; }
  table.f033.filas { min-width: 0; }
  table.f033 input[type="number"] { width: 44px; }
}

/* ---- pestañas de la ficha en PC: píldoras separadas con ícono ---- */
.tabs.tabs-pildoras { border-bottom: 0; gap: 6px; margin-bottom: 16px; padding: 2px 0; }
.tabs.tabs-pildoras button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--fg); padding: 7px 14px 7px 10px; margin: 0; font-weight: 500; box-shadow: var(--shadow); }
.tabs.tabs-pildoras button .ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); font-size: .875rem; }
.tabs.tabs-pildoras button:hover { border-color: var(--accent); background: var(--accent-soft); }
.tabs.tabs-pildoras button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.tabs.tabs-pildoras button[aria-selected="true"] .ic { background: rgba(255,255,255,.25); }

/* ---- pestañas de la ficha en PC: estilo clásico (cajas + panel con título) ---- */
.tabs.tabs-pildoras { gap: 4px; margin-bottom: 0; padding: 0; border-bottom: 1px solid var(--line); align-items: flex-end; }
.tabs.tabs-pildoras button { border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--panel); color: var(--accent-ink); padding: 10px 16px; box-shadow: none; font-weight: 500; font-size: .9375rem; margin-bottom: -1px; }
.tabs.tabs-pildoras button .ic { width: auto; height: auto; background: transparent; font-size: .9375rem; }
.tabs.tabs-pildoras button:hover { background: var(--accent-soft); border-color: var(--line); }
.tabs.tabs-pildoras button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.tabs.tabs-pildoras button[aria-selected="true"] .ic { background: transparent; }
.panel-tab { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--panel); padding: 12px; }
.panel-tab-titulo { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 500; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 10px 16px; margin-bottom: 0; }
.panel-tab-cuerpo { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; padding: 14px; background: var(--panel); }
.panel-tab-cuerpo > .card, .panel-tab-cuerpo .form-sec .card, .panel-tab-cuerpo .historial-barra { box-shadow: none; }
.panel-tab-cuerpo > .card:first-child { margin-top: 0; }

/* ---- ingreso (usuario + PIN) y asistente ---- */
.login input { max-width: 260px; font-size: 1rem; letter-spacing: normal; text-align: left; padding: 10px 12px; }

.login.setup { max-width: 380px; }
/* ---- selector de archivo con tarjetas ---- */
.subir-tarjetas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.subir-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--line); border-radius: 14px; background: var(--panel); cursor: pointer; text-align: center; }
.subir-tarjeta:hover, .subir.arrastrando .subir-tarjeta { border-color: var(--accent); background: var(--accent-soft); }
.subir-tarjeta .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--panel-2); font-size: 1.5rem; }
.subir-tarjeta b { font-size: 1rem; }
.subir-tarjeta small { color: var(--muted); font-size: .8125rem; }
.subir-ayuda { display: block; margin-top: 8px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.subir-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 860px) { .subir-tarjetas { grid-template-columns: 1fr 1fr; } .subir-tarjeta.solo-movil { display: flex !important; } }

/* ---- solicitudes ---- */
.registro .ic-reg { font-size: 1.5rem; width: 36px; text-align: center; }
.cat-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cat-grupo { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin: 0; min-width: 0; }
.cat-grupo legend { font-size: .75rem; color: var(--accent-ink); font-weight: 600; padding: 0 4px; }
.cat-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; font-size: .875rem; cursor: pointer; margin: 0; color: var(--fg); }
.cat-item:hover { background: var(--panel-2); }
.cat-item.sel { background: var(--accent-soft); }
.cat-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.cat-item .nombre { flex: 1; }
.cat-item .detalle { width: 130px; padding: 4px 6px; font-size: .8125rem; }
@media (max-width: 860px) {
  .cat-grupos { grid-template-columns: 1fr; }
  .cat-item { padding: 9px 4px; flex-wrap: wrap; }
  .cat-item .detalle { width: 100%; margin-left: 26px; }
}

/* ---------- Solicitudes (menú general) ---------- */
.filtros-sol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.badge.sin-ficha { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pac-solicitud { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; margin: 0 0 14px; background: var(--panel-2); }
.pac-solicitud legend { font-weight: 700; padding: 0 6px; }
.seg-ancho { display: flex; width: 100%; margin-bottom: 10px; }
.seg-ancho button { flex: 1; padding: 8px 10px; }
.modo-reg { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.modo-reg .sel-pac { flex: 1 1 260px; min-width: 0; }
.nota-libre { margin-top: 6px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }

/* ---------- Catálogo ---------- */
.catalogo-lay { display: grid; grid-template-columns: minmax(230px, 290px) 1fr; gap: 16px; align-items: start; }
.cat-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
.cat-grupo-tit { font-size: .75rem; font-weight: 700; color: var(--muted); margin: 10px 4px 2px; }
.cat-grupo-tit:first-child { margin-top: 0; }
.cat-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--fg); text-decoration: none; border: 1px solid transparent; }
.cat-link .ic { font-size: 1.125rem; width: 26px; text-align: center; flex-shrink: 0; }
.cat-link > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-link small { color: var(--muted); font-size: .75rem; display: none; }
.cat-link .flecha { color: var(--muted); display: none; }
.cat-link:hover { background: var(--panel-2); }
.cat-link.activo { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.cat-card .cat-barra { margin-bottom: 4px; }
.cat-card .cat-barra .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-card .cat-barra .buscador { max-width: 260px; }
.cat-desc { margin: 0 0 10px; }
.cat-lista { gap: 6px; }
.cat-fila { padding: 9px 12px; border-radius: 10px; }
.cat-fila .flecha { color: var(--muted); }
.cat-fila.inactivo { opacity: .6; }
.cat-cod { font-family: var(--mono); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; font-size: .875rem; flex-shrink: 0; min-width: 56px; text-align: center; }
.cat-total { display: block; margin-top: 10px; }
@media (max-width: 860px) {
  .catalogo-lay { grid-template-columns: 1fr; }
  .catalogo-lay.con-panel .cat-nav { display: none; }
  .cat-nav { position: static; gap: 6px; }
  .cat-link { background: var(--panel); border-color: var(--line); padding: 12px; border-radius: 14px; }
  .cat-link small, .cat-link .flecha { display: block; }
  .cat-card .cat-barra { flex-direction: column; align-items: stretch; }
  .cat-card .cat-barra h2 { display: block; }
  .cat-card .cat-barra #b-agregar { display: none; }
  .cat-card .cat-barra .buscador { max-width: none; flex: 1; }
}

/* ---------- Selector CIE-10 con búsqueda ---------- */
.cie-sel { position: relative; min-width: 220px; }
.cie-sel input { width: 100%; padding-right: 28px; text-overflow: ellipsis; }
.cie-sel .cie-flecha { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .8125rem; }
.cie-lista { position: fixed; z-index: 1000; right: auto; margin: 0; max-height: 280px; }
.cie-lista b { font-family: var(--mono); color: var(--accent-ink); margin-right: 4px; }
.cie-lista .vacio-cie { cursor: default; }
td.td-cie { min-width: 240px; }

/* ---------- Formularios en modo lectura (todo visible, bloqueado) ---------- */
.lectura-completa input:disabled, .lectura-completa select:disabled, .lectura-completa textarea:disabled { opacity: 1; color: var(--fg); background: var(--panel-2); cursor: default; -webkit-text-fill-color: var(--fg); }
.lectura-completa input[type="radio"]:disabled, .lectura-completa input[type="checkbox"]:disabled { accent-color: var(--accent); }
.lectura-completa label:has(input:checked) { color: var(--accent-ink); font-weight: 600; }
.lectura-completa textarea:disabled:placeholder-shown, .lectura-completa input:disabled:placeholder-shown { -webkit-text-fill-color: var(--muted); }

/* ---------- Administración (superadmin) ---------- */
.admin-clinicas { display: flex; flex-direction: column; gap: 14px; }
.admin-clinica.inactiva { opacity: .7; }
.admin-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-cab .avatar { width: 44px; height: 44px; font-size: 1rem; flex-shrink: 0; }
.admin-cab .datos { flex: 1; min-width: 200px; }
.admin-cab h2 { margin: 0 0 2px; font-size: 1rem; }
.admin-cab .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-usuarios { display: flex; flex-direction: column; gap: 6px; }
.admin-u { padding: 8px 12px; border-radius: 10px; }
.admin-u.inactivo { opacity: .6; }
@media (max-width: 860px) {
  .admin-cab .acciones { width: 100%; }
  .admin-cab .acciones .btn-chico { flex: 1; }
}

/* foto del paciente */
.avatar.con-foto { overflow: hidden; padding: 0; background: var(--panel-2); }
.avatar.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.mini { width: 30px; height: 30px; font-size: .75rem; flex-shrink: 0; }
.nombre-con-avatar { display: inline-flex; align-items: center; gap: 10px; }
.foto-pac { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; }
.foto-pac .avatar { width: 76px; height: 76px; font-size: 1.5rem; }
.foto-pac .foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foto-pac .foto-acciones small { flex-basis: 100%; }
.foto-pac label.btn { cursor: pointer; margin: 0; }

/* ===== Atención: apertura → evoluciones → alta ===== */
.aten-badge { display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 9px; margin-top: 3px; }
.aten-badge:hover { text-decoration: none; filter: brightness(.97); }
.alertas-clinicas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.alertas-clinicas span { font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.alertas-clinicas span.grave { background: var(--warn-soft); color: var(--warn); }

.aten-vacia { text-align: center; padding: 22px 18px; }
.aten-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; text-align: left; }
.aten-pasos div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.aten-pasos span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: .875rem; margin-bottom: 4px; }
.aten-pasos small { color: var(--muted); }
.aviso-aten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--amber-soft); color: var(--fg); font-size: .875rem; }

.aten-head { padding: 14px 16px; }
.aten-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.aten-top .acciones { gap: 6px; }
.estado-aten { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; }
.estado-aten.activa { background: var(--ok-soft); color: var(--ok); }
.estado-aten.alta { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.aten-titulo { font-size: 1.125rem; margin: 0 0 6px; display: block !important; }
.aten-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: .875rem; }
.aten-meta b { color: var(--fg); font-weight: 600; }
.aten-motivo { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; font-style: italic; }
.aten-motivo.vacio { font-style: normal; color: var(--muted); border-left-color: var(--line); font-size: .875rem; }
.aten-dx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-dx { font-size: .8125rem; padding: 3px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-dx.def { background: var(--accent-soft); color: var(--accent-ink); }

.segmentos { display: flex; gap: 4px; padding: 4px; margin: 12px 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.segmentos::-webkit-scrollbar { display: none; }
.segmentos button { flex: 1 0 auto; justify-content: center; border: 0; background: transparent; border-radius: 9px; padding: 8px 14px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.segmentos button small { font-size: .75rem; background: var(--line); color: var(--fg); border-radius: 999px; padding: 0 7px; }
.segmentos button:hover { background: var(--panel); color: var(--fg); }
.segmentos button[aria-selected="true"] { background: var(--panel); color: var(--accent-ink); box-shadow: var(--shadow); }
.segmentos button[aria-selected="true"] small { background: var(--accent); color: var(--accent-fg); }

/* evoluciones como línea de sesiones numeradas */
.sesiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.sesiones::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--line); }
.sesion { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; position: relative; }
.sesion-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .875rem; position: relative; z-index: 1; }
.sesion:first-child .sesion-num { background: var(--accent); color: var(--accent-fg); }
.sesion-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); min-width: 0; }
.sesion-card header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.sesion-card header > div { display: flex; flex-direction: column; min-width: 0; }
.sesion-card header b { font-size: .9375rem; overflow-wrap: anywhere; }
.sesion-card time { font-size: .8125rem; color: var(--muted); }
.sesion-card header .btn-icono { padding: 2px 9px; flex-shrink: 0; }
.sesion-card p { margin: 6px 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.sesion-card .rx { color: var(--violet); }
.sesion-card .prox { color: var(--accent-ink); font-weight: 500; }
.orto-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.orto-chips span { display: inline-flex; flex-direction: column; font-size: .8125rem; line-height: 1.15; padding: 4px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.orto-chips small { font-size: .75rem; color: var(--muted); }

/* formularios de sesión y alta */
.form-evol details.orto, .form-evol details.signos { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 0; margin: 0 0 12px; background: var(--panel-2); }
.form-evol details.orto summary, .form-evol details.signos summary { cursor: pointer; font-weight: 600; font-size: .875rem; margin-bottom: 8px; }
.form-evol details.orto summary small, .form-evol details.signos summary small { font-weight: 400; color: var(--muted); }
.check-linea { display: flex !important; align-items: center; gap: 8px; color: var(--fg) !important; font-size: .875rem !important; margin: 4px 0 0 !important; }
.capas.pildoras label { gap: 8px; padding: 7px 12px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); cursor: pointer; }
.capas.pildoras label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.capas.pildoras input { margin: 0; }
.pdf-graf input[type="radio"]:disabled { opacity: .5; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sugerencias button { font-size: .75rem; padding: 3px 9px; }

.barra-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.barra-sec > div:first-child { display: flex; flex-direction: column; }
.barra-sec .acciones { gap: 6px; align-items: center; }
.fecha-ini { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; }
.fecha-ini input { width: auto; padding: 4px 8px; }
.indices-cpo { display: flex; flex-wrap: wrap; gap: 10px; }
.indices-cpo span { display: flex; flex-direction: column; min-width: 120px; padding: 8px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.indices-cpo b { font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.nuevo-estudio { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.registro .reg-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); flex-shrink: 0; }
.alta-resumen h3 { margin: 14px 0 4px; }
.alta-resumen p { margin: 0; }
.alta-resumen .pre { white-space: pre-line; }
.alta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.aten-otras { margin-top: 18px; }

@media (max-width: 860px) {
  .aten-pasos { grid-template-columns: 1fr; }
  .aten-head { padding: 12px; }
  .aten-titulo { font-size: 1rem; }
  .segmentos { margin: 10px 0; }
  .segmentos button { padding: 8px 10px; font-size: .875rem; }
  .sesion { grid-template-columns: 28px 1fr; gap: 8px; }
  .sesion-num { width: 28px; height: 28px; font-size: .8125rem; }
  .sesiones::before { left: 13px; }
  .barra-sec .acciones { width: 100%; }
  .barra-sec .acciones button { flex: 1; justify-content: center; }
  .nuevo-estudio .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* ===== Recetas ===== */
.alergias-banner { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: .875rem; border: 1px solid var(--line); background: var(--panel-2); }
.alergias-banner.hay { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.alergias-banner.sin-dato { background: var(--amber-soft); border-color: transparent; }
.alergias-banner span { color: var(--fg); font-size: .875rem; }
.alergias-banner.hay span { color: var(--warn); font-weight: 600; }
.med-buscar { display: flex; gap: 6px; }
.med-buscar input { flex: 1; min-width: 0; }
.med-rapidos { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.med-rapidos button { font-size: .8125rem; padding: 4px 10px; }
.med-lista { display: flex; flex-direction: column; gap: 10px; }
.med-vacio { margin: 4px 0; }
.med-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.med-item.grave { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn) inset; }
.med-item.precaucion { border-color: var(--amber); }
.med-cab { display: flex; align-items: center; gap: 8px; }
.med-cab input { flex: 1; min-width: 0; font-weight: 600; }
.med-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: .8125rem; font-weight: 700; flex-shrink: 0; }
.med-avisos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.med-avisos li { font-size: .8125rem; padding: 4px 9px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.med-avisos li.grave { background: var(--warn-soft); color: var(--warn); }
.med-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin-top: 10px; }
.med-campos label { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: .75rem; }
.med-campos label.ancho { grid-column: 1 / -1; }
.med-campos input, .med-campos select { font-size: .875rem; }
.med-posologia { display: block; margin-top: 8px; color: var(--accent-ink); font-weight: 500; }
.med-posologia:empty { display: none; }
.registro.receta .reg-ic { font-weight: 700; color: var(--accent-ink); font-size: 1.125rem; }
.registro.receta.anulada { opacity: .6; }
.registro.receta.anulada b { text-decoration: line-through; }
.txt-aviso { color: var(--amber); font-weight: 600; }

/* ===== Menú Atención ===== */
.aten-buscar { flex: 1; max-width: 520px; }
.aten-buscar .ac { width: 100%; }
.trabajo { margin-bottom: 18px; }
.trabajo h3 small { font-size: .75rem; background: var(--line); color: var(--fg); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.trabajo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trabajo-cab input { max-width: 220px; padding: 5px 10px; }
.trabajo-item .avatar { width: 40px; height: 40px; font-size: .875rem; flex-shrink: 0; }
.trabajo-item .cuerpo { gap: 3px; }
.trabajo-item .badge { font-size: .75rem; padding: 1px 7px; }
.trabajo-item .alertas-clinicas { margin-top: 2px; }
.motivo-linea { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hora-turno { font-family: var(--mono); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; font-size: .875rem; flex-shrink: 0; }
.foco-cab { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.foco-cab .avatar { width: 44px; height: 44px; font-size: 1rem; flex-shrink: 0; }
.foco-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.foco-datos b { font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foco-datos small { color: var(--muted); }

@media (max-width: 860px) {
  .med-campos { grid-template-columns: 1fr 1fr; }
  .aten-buscar { max-width: none; width: 100% !important; }
  .foco-cab { padding: 8px 10px; gap: 8px; position: sticky; top: 0; z-index: 30; }
  .foco-cab .avatar { width: 36px; height: 36px; font-size: .875rem; }
  .foco-datos b { font-size: 1rem; }
  .foco-volver { padding: 6px 10px; font-size: 1.125rem; }
}

/* CIE-10 en el teléfono: panel de búsqueda (el teclado tapaba la lista desplegable) */
.cie-hoja { display: flex; flex-direction: column; gap: 10px; }
.cie-hoja input[type=search] { font-size: 16px; }
.cie-resultados { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.cie-resultados button { justify-content: flex-start; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 11px 6px; font-weight: 400; line-height: 1.3; display: block; width: 100%; }
.cie-resultados button b { font-family: var(--mono); color: var(--accent-ink); margin-right: 6px; }
.cie-sel input[readonly] { cursor: pointer; }
@media (max-width: 860px) {
  /* filas dinámicas (diagnósticos) como tarjetas que entran en el ancho */
  .f033.filas thead { display: none; }
  .f033.filas, .f033.filas tbody { display: block; width: 100%; }
  .f033.filas tr { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .f033.filas td.td-cie { grid-column: 1 / -1; }
  .f033.filas select { width: 100%; }
  .f033.filas td { display: block; padding: 0; border: 0; min-width: 0; }
  .f033.filas .cie-sel { min-width: 0; }
  .foco-datos small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== Certificados ===== */
.form-cert .dias-rapidos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form-cert .dias-rapidos button { min-width: 40px; justify-content: center; }
.form-cert .dias-rapidos input { width: 80px; }
.cert-preview { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; margin: 4px 0 12px; background: var(--panel-2); }
.cert-preview p { margin: 6px 0 0; font-size: .875rem; line-height: 1.5; }
.docs-sec { margin-bottom: 14px; }
.docs-sec h3 { margin-bottom: 6px; }

/* ===== Personas, usuarios y cupo ===== */
.cupo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.cupo-barra { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.cupo-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.doc-fila { display: flex; gap: 6px; }
.doc-fila select { width: auto; flex: 0 0 auto; }
.doc-fila input { flex: 1; min-width: 0; }
.txt-error { color: var(--warn); font-weight: 600; }
.persona-hallada { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); margin-top: 6px; }
.persona-hallada .avatar { width: 38px; height: 38px; background: var(--ok); color: var(--sobre-color); }
.persona-hallada div { display: flex; flex-direction: column; }
.agregar-u h3, .modal h3 { margin-top: 14px; }
.admin-u .avatar { width: 38px; height: 38px; font-size: .875rem; flex-shrink: 0; }
.admin-seg { max-width: 360px; }
.admin-seg a { flex: 1; text-align: center; text-decoration: none; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; }
.admin-seg a[aria-selected="true"] { background: var(--panel); color: var(--accent-ink); box-shadow: var(--shadow); }
.buscador-personas { margin-bottom: 12px; }
.elegir-clinica { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.elegir-clinica .btn { flex-direction: column; align-items: flex-start; padding: 12px 14px; width: 100%; }
.elegir-clinica .btn small { color: var(--muted); font-weight: 400; }
@media (max-width: 860px) {
  .cupo { grid-template-columns: 1fr; }
  .cupo .btn-primario { width: 100%; justify-content: center; }
}

/* ===== Roles, bitácora y firma ===== */
.config-seg, .admin-seg { max-width: none; }
.config-seg a { flex: 1 0 auto; text-align: center; text-decoration: none; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.config-seg a[aria-selected="true"] { background: var(--panel); color: var(--accent-ink); box-shadow: var(--shadow); }
.permisos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.permisos-grid fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; }
.permisos-grid legend { font-weight: 700; font-size: .875rem; padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.permisos-grid legend .btn-chico { padding: 1px 8px; font-size: .75rem; }
.permisos-grid .check-linea { font-size: .875rem !important; margin: 6px 0 0 !important; align-items: flex-start; }
.matriz-permisos { font-size: .8125rem; }
.matriz-permisos th, .matriz-permisos td { padding: 6px 10px; }
.matriz-permisos tr.grupo th { background: var(--panel-2); text-align: left; font-size: .75rem; color: var(--muted); }
.matriz-permisos td.c { text-align: center; }
.matriz-permisos .si { color: var(--ok); font-weight: 800; }
.matriz-permisos .no { color: var(--line); }
.bitacora { display: flex; flex-direction: column; }
.bit-fila { display: grid; grid-template-columns: 130px 1fr auto; gap: 4px 14px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: .875rem; }
.bit-fila time { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.bit-fila div { display: flex; flex-direction: column; min-width: 0; }
.bit-fila div span { color: var(--muted); overflow-wrap: anywhere; }
.bit-fila small { color: var(--muted); text-align: right; }
.bit-fila.grave b { color: var(--warn); }
.firma-actual { display: flex; flex-direction: column; gap: 12px; }
.firma-cab { display: flex; align-items: center; gap: 12px; }
.firma-cab > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.firma-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); font-size: 1.25rem; flex-shrink: 0; }
.firma-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 0; }
.firma-datos dt { font-size: .75rem; color: var(--muted); }
.firma-datos dd { margin: 2px 0 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .bit-fila { grid-template-columns: 1fr; }
  .bit-fila small { text-align: left; }
}
.matriz-permisos td:first-child { min-width: 200px; }

/* ===== Íconos SVG (iconos.js reemplaza los símbolos por íconos de línea) ===== */
.ico-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.17em; }
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke-width: 1.9; }
.sidebar .ic .ico, .tabbar .ic .ico { width: 1.25em; height: 1.25em; }
.tile .ic .ico, .reg-ic .ico, .func-ic .ico, .firma-ic .ico { width: 1.3em; height: 1.3em; }
.pop-ic .ico { width: 1.2em; height: 1.2em; }
.badge .ico, small .ico { width: 1em; height: 1em; }

/* ===== Accesibilidad táctil: áreas de 44 px en pantallas táctiles (se usa con guantes) ===== */
@media (pointer: coarse) {
  .btn-chico, button.btn-chico, .btn { min-height: 40px; }
  .btn-icono, button.btn-icono { min-width: 44px; min-height: 44px; justify-content: center; }
  .segmentos button, .segmentos a { min-height: 40px; }
  .pop-item { min-height: 48px; }
  .tabbar a { min-height: 48px; justify-content: center; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}
.pasos-instalar { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; }
/* app instalada: respeta la muesca y la barra de gestos del teléfono */
@media (display-mode: standalone) { .main { padding-top: max(22px, env(safe-area-inset-top)); } }

/* ===== Encabezado clínico de la ficha ===== */
.ficha-clinico { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fc { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); text-decoration: none; max-width: 100%; min-width: 0; }
.fc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fc:hover { text-decoration: none; border-color: var(--accent); }
.fc-aten { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.fc-aten span { color: var(--fg); }
.fc-debe { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.fc-ok { color: var(--ok); }
.fc-apagado { color: var(--muted); }
@media (max-width: 860px) { .ficha-clinico { flex-direction: column; align-items: flex-start; gap: 4px; } .fc { font-size: .8125rem; } }

/* ===== Lista de atenciones: una línea por atención ===== */
.aten-lista h3 small { font-size: .75rem; background: var(--line); color: var(--fg); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.aten-lista > div { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.aten-fila { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--fg); text-decoration: none; border-top: 1px solid var(--line); min-height: 48px; }
.aten-fila:first-child { border-top: 0; }
.aten-fila:hover { background: var(--panel-2); text-decoration: none; }
.aten-fila b { white-space: nowrap; font-size: .9375rem; }
.aten-fila .meta { flex: 1; min-width: 0; color: var(--muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aten-fila .flecha { color: var(--muted); }
.aten-fila .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.aten-fila.activa .punto { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ===== Sesiones en una línea (se despliegan al tocarlas) ===== */
details.sesion-card { padding: 0; }
details.sesion-card > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
details.sesion-card > summary::-webkit-details-marker { display: none; }
details.sesion-card > summary b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.ses-fecha { font-family: var(--mono); font-size: .8125rem; color: var(--muted); flex-shrink: 0; }
details.sesion-card .por { color: var(--muted); font-size: .8125rem; white-space: nowrap; flex-shrink: 0; }
details.sesion-card .chev { color: var(--muted); transition: transform .15s; flex-shrink: 0; }
details.sesion-card[open] .chev { transform: rotate(90deg); }
details.sesion-card[open] > summary { border-bottom: 1px solid var(--line); }
.ses-det { padding: 8px 12px 12px; }
.ses-det time { font-size: .8125rem; color: var(--muted); }
.ses-acc { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 560px) { details.sesion-card .por { display: none; } }

/* ===== Colores por estado de la atención ===== */
.estado-aten.en-curso { background: var(--ok-soft); color: var(--ok); }
.estado-aten.alta-terminado { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.estado-aten.alta-abandono { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.estado-aten.alta-derivacion { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.estado-aten.alta-otro { background: var(--panel-2); color: var(--muted); }
.aten-fila .punto { background: var(--muted); }
.aten-fila.en-curso .punto { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.aten-fila.alta-terminado .punto { background: var(--accent); }
.aten-fila.alta-abandono .punto { background: var(--warn); }
.aten-fila.alta-derivacion .punto { background: var(--violet); }
.aten-fila.en-curso .estado-txt { color: var(--ok); font-weight: 600; }
.aten-fila.alta-terminado .estado-txt { color: var(--accent-ink); font-weight: 600; }
.aten-fila.alta-abandono .estado-txt { color: var(--warn); font-weight: 600; }
.aten-fila.alta-derivacion .estado-txt { color: var(--violet); font-weight: 600; }
.aten-head:has(.estado-aten.en-curso) { border-left: 4px solid var(--ok); }
.aten-head:has(.estado-aten.alta-terminado) { border-left: 4px solid var(--accent); }
.aten-head:has(.estado-aten.alta-abandono) { border-left: 4px solid var(--warn); }
.aten-head:has(.estado-aten.alta-derivacion) { border-left: 4px solid var(--violet); }
details.bit-fila.aud { display: block; }
details.bit-fila > summary { list-style: none; display: grid; grid-template-columns: 130px 1fr auto; gap: 4px 14px; align-items: baseline; cursor: pointer; }
@media (max-width: 860px) { details.bit-fila > summary { grid-template-columns: 1fr; } }
details.bit-fila > summary::-webkit-details-marker { display: none; }
details.bit-fila { cursor: pointer; }
.bit-fila.aud b .muted { font-weight: 400; font-family: var(--mono); font-size: .8125rem; }
.bit-fila.op-crea b { color: var(--ok); }
.bit-fila.op-mod b { color: var(--accent-ink); }
.bit-fila.op-elim b { color: var(--warn); }
.aud-json { grid-column: 1 / -1; margin: 6px 0 0; padding: 10px; background: var(--panel-2); border-radius: 8px; font-size: .8125rem; overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word; }

/* ===== Fases de la atención: secuencia de avance ===== */
.pasos-aten { display: flex; gap: 0; margin: 12px 0; overflow-x: auto; scrollbar-width: none; counter-reset: paso; }
.pasos-aten::-webkit-scrollbar { display: none; }
.pasos-aten .paso { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 0; border: 0; background: transparent; border-radius: 0; text-align: left; position: relative; color: var(--fg); }
.pasos-aten .paso:hover { background: transparent; }
.pasos-aten .paso + .paso::before { content: ""; position: absolute; left: -2px; right: calc(100% - 4px); top: 50%; }
.pasos-aten .paso:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 14px; background: var(--line); margin-left: 4px; border-radius: 2px; }
.pasos-aten .paso.hecho:not(:last-child)::after { background: var(--ok); }
.paso-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 800; font-size: .875rem; flex-shrink: 0; }
.paso-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.paso-tx b { font-size: .875rem; white-space: nowrap; }
.pasos-aten .paso:last-child { flex: 0 0 auto; }
.paso-tx small { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.paso.hecho .paso-n { background: var(--ok); border-color: var(--ok); color: var(--sobre-color); }
.paso.parcial .paso-n { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.paso.opcional .paso-n { border-style: dashed; }
.paso[aria-selected="true"] .paso-n { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); }
.paso.hecho[aria-selected="true"] .paso-n { box-shadow: 0 0 0 4px var(--ok-soft); }
.paso[aria-selected="true"] .paso-tx b { color: var(--accent-ink); }
.paso:focus-visible { outline-offset: -2px; border-radius: 10px; }
@media (max-width: 860px) {
  .pasos-aten .paso { min-width: 0; flex: 0 0 auto; padding-right: 0; }
  .pasos-aten .paso:not(:last-child)::after { min-width: 10px; width: 14px; flex: 0 0 14px; margin: 0 6px; }
  .paso-tx small { display: none; }
  .paso:not([aria-selected="true"]) .paso-tx { display: none; }
}

/* ===== Semáforo de signos vitales ===== */
.semaforo { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8125rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; width: fit-content; }
.semaforo i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.semaforo.ok { color: var(--ok); background: var(--ok-soft); }
.semaforo.alerta { color: var(--amber); background: var(--amber-soft); }
.semaforo.critico { color: var(--warn); background: var(--warn-soft); }
.semaforo.critico i { animation: latido 1.4s ease-in-out infinite; }
input.fuera-rango { border-color: var(--amber); }
.campo:has(.semaforo.critico) input { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
@keyframes latido { 50% { transform: scale(1.35); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .semaforo.critico i { animation: none; } }

.estudio-en-aten { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.estudio-zona > .historial-barra:first-child { margin-top: 0; }
.paso-tx b, .paso-tx small { overflow: hidden; text-overflow: ellipsis; }

/* ===== Signos vitales: chips y gráfico ===== */
.signos-campos .campo { min-width: 0; }
.signos-chips, .foco-signos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.sv { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); white-space: nowrap; }
.sv i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.sv.alerta { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.sv.alerta i { background: var(--amber); }
.sv.critico { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.sv.critico i { background: var(--warn); }
.sv .ico { width: 14px; height: 14px; }
.sv small { color: var(--muted); font-size: .75rem; }
details.signos-graf { margin-top: 14px; padding: 0; }
details.signos-graf > summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
details.signos-graf > summary::-webkit-details-marker { display: none; }
details.signos-graf > summary span:first-child { display: flex; flex-direction: column; }
details.signos-graf > summary .chev { transition: transform .2s; font-size: 1.25rem; color: var(--muted); }
details.signos-graf[open] > summary .chev { transform: rotate(90deg); }
.sg-cuerpo { padding: 0 14px 14px; }
.sg-barra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.sg-barra .segmentos { margin: 0; overflow-x: auto; scrollbar-width: none; }
.sg-barra button[disabled] { opacity: .45; cursor: default; }
.sg-svg { width: 100%; height: auto; display: block; }
.sg-banda { fill: var(--ok); opacity: .13; }
.sg-banda.dia { opacity: .08; }
.sg-grid { stroke: var(--line); stroke-width: 1; }
.sg-ytx { fill: var(--muted); font-size: 12px; text-anchor: end; font-family: var(--font); }
.sg-xtx { fill: var(--muted); font-size: 12px; text-anchor: middle; font-family: var(--font); }
.sg-linea { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sg-linea.dia { stroke-dasharray: 6 5; opacity: .8; }
.sg-pt { stroke: var(--panel); stroke-width: 2; cursor: pointer; fill: var(--ok); }
.sg-pt.alerta { fill: var(--amber); }
.sg-pt.critico { fill: var(--warn); }
.sg-pt.sel, .sg-pt:focus-visible { stroke: var(--fg); stroke-width: 3; outline: none; }
.sg-leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; color: var(--muted); margin-top: 4px; }
.sg-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.sg-leyenda i { display: inline-block; width: 18px; height: 3px; background: var(--accent); border-radius: 2px; }
.sg-leyenda i.dia { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px); }
.sg-leyenda i.banda { height: 10px; background: var(--ok); opacity: .25; }
.sg-leyenda i.pt { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.sg-leyenda i.pt.alerta { background: var(--amber); }
.sg-leyenda i.pt.critico { background: var(--warn); }
.sg-det { margin: 6px 0 0; font-size: .875rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sg-resumen { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); align-items: center; }
.sg-resumen .semaforo { margin: 0 0 0 4px; vertical-align: middle; }
.sg-fuera { color: var(--warn); }
.ses-herr { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.btn-signos { color: var(--muted); }
.btn-signos:hover { color: var(--accent-ink); }
.btn-signos .ico { width: 18px; height: 18px; }
.sg-svg { width: auto; height: auto; max-width: 100%; margin: 0 auto; }
.sg-cuerpo { padding: 0; }
button.sv { font: inherit; font-size: .8125rem; cursor: pointer; min-height: 0; }
button.sv:hover { filter: brightness(1.1); }
/* últimos signos vitales: píldoras mínimas bajo la línea clínica */
.sv-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sv-mini button { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: .75rem; line-height: 1; padding: 3px 7px; min-height: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; }
.sv-mini button b { color: var(--fg); font-weight: 600; }
.sv-mini .ico { width: 12px; height: 12px; }
.sv-mini .sv-al { width: 11px; height: 11px; }
.sv-mini button.alerta { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.sv-mini button.critico { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.sv-mini button.alerta b, .sv-mini button.critico b { color: inherit; }
.sv-mini button:hover { border-color: var(--accent); }
@media (pointer: coarse) { .sv-mini button { min-height: 0; min-width: 0; padding: 4px 8px; } }

/* últimos signos vitales en el encabezado de Atención: monitor compacto, centrado */
.foco-cab { flex-wrap: wrap; }
.foco-signos { display: inline-flex; flex-wrap: nowrap; gap: 0; align-items: stretch; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; flex-shrink: 0; }
.svm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 74px; padding: 6px 12px; border: 0; border-radius: 0; background: transparent; font: inherit; color: var(--fg); cursor: pointer; min-height: 0; position: relative; }
.svm + .svm { border-left: 1px solid var(--line); }
.svm:hover { background: var(--accent-soft); }
.svm-k { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.svm-k .ico { width: 13px; height: 13px; }
.svm-k .svm-al { width: 12px; height: 12px; }
.svm-v { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1.1; }
.svm-v b { font-family: var(--titulo); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.svm-v small { font-size: .75rem; color: var(--muted); }
.svm.alerta { background: var(--amber-soft); }
.svm.alerta .svm-k, .svm.alerta .svm-v b { color: var(--amber); }
.svm.critico { background: var(--warn-soft); }
.svm.critico .svm-k, .svm.critico .svm-v b { color: var(--warn); }
.svm.critico::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--warn); }
.svm.alerta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); }
@media (max-width: 860px) {
  .foco-cab > .foco-signos { order: 10; flex-basis: 100%; display: flex; margin: 2px 0 0; }
  .foco-cab > .foco-signos .svm { flex: 1; min-width: 0; padding: 5px 6px; }
  .svm-v b { font-size: .9375rem; }
}
@media (pointer: coarse) { .svm { min-height: 0; } }
@media (min-width: 861px) { .foco-cab { flex-wrap: nowrap; } .foco-cab:has(.foco-signos) .foco-datos { flex: 0 1 auto; } }
.pdf-graf { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.pdf-graf legend { font-weight: 700; font-size: .875rem; padding: 0 4px; }
.pdf-graf label { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
/* fecha con selects: día · mes · año */
.sel-fecha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.3fr); gap: 6px; }
.sel-fecha select { min-width: 0; padding-left: 8px; padding-right: 4px; text-overflow: ellipsis; }
.sel-fecha.invalida select { border-color: var(--warn); }

/* ===== Atención en el teléfono: más compacta, lo clínico arriba ===== */
@media (max-width: 860px) {
  /* encabezado del paciente: una línea de datos, alertas en una sola fila deslizable, signos bajos */
  .foco-cab { padding: 8px 10px; gap: 6px 8px; margin-bottom: 8px; }
  .foco-cab .avatar { width: 32px; height: 32px; font-size: .8125rem; }
  .foco-volver { padding: 4px 9px; }
  .foco-cab > a.btn:last-of-type { padding: 4px 10px; font-size: .8125rem; }
  .foco-datos { gap: 1px; }
  .foco-datos b { font-size: 1rem; }
  .foco-datos small { font-size: .75rem; }
  .foco-datos .alertas-clinicas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-top: 2px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .foco-datos .alertas-clinicas::-webkit-scrollbar { display: none; }
  .foco-datos .alertas-clinicas span { flex-shrink: 0; font-size: .75rem; padding: 1px 8px; white-space: nowrap; }
  .foco-datos .alertas-clinicas .ico { width: 12px; height: 12px; }
  .foco-cab > .foco-signos .svm { padding: 3px 4px; gap: 0; }
  .svm-k { font-size: .75rem; }
  .svm-v b { font-size: .875rem; }

  /* tarjeta de la atención */
  .aten-head { padding: 10px 12px; }
  .aten-top { margin-bottom: 2px; }
  .aten-top .acciones .btn-chico { padding: 4px 10px; }
  .aten-titulo { font-size: .9375rem; margin: 0 0 3px; }
  .aten-meta { font-size: .75rem; gap: 2px 12px; }
  .aten-motivo { margin-top: 6px; padding: 5px 10px; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aten-dx { margin-top: 6px; }

  /* fases: las cinco a la vista, con su nombre corto debajo */
  .pasos-aten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 8px; overflow: visible; }
  .pasos-aten .paso { flex-direction: column; gap: 3px; padding: 2px 0; min-width: 0; align-items: center; text-align: center; }
  .pasos-aten .paso:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 17px); right: calc(-50% + 17px); width: auto; height: 2px; min-width: 0; margin: 0; flex: none; }
  .paso-n { width: 28px; height: 28px; font-size: .8125rem; }
  .pasos-aten .paso .paso-tx, .pasos-aten .paso:not([aria-selected="true"]) .paso-tx { display: block; }
  .paso-tx b { font-size: .75rem; font-weight: 600; color: var(--muted); max-width: 100%; display: block; }
  .paso-tx small { display: none; }
  .paso[aria-selected="true"] .paso-tx b { color: var(--accent-ink); font-weight: 700; }

  /* que el botón + no tape el final de la lista */
  .foco-cuerpo { padding-bottom: 76px; }
  .sesiones { margin-top: 4px; }
}
@media (max-width: 860px) {
  .pasos-aten, .aten-cuerpo, .sesiones { scroll-margin-top: 120px; }
  .signos-chips .sv { font-size: .75rem; padding: 2px 8px; }
}
@media (max-width: 860px) {
  /* estudios: botones de nuevo en una fila deslizable y registros más bajos */
  .aten-cuerpo .nuevo-estudio { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; }
  .aten-cuerpo .nuevo-estudio::-webkit-scrollbar { display: none; }
  .aten-cuerpo .nuevo-estudio .btn { flex: 0 0 auto; white-space: nowrap; }
  .aten-cuerpo .registro { padding: 8px 12px; border-radius: 12px; }
  .aten-cuerpo .registro .reg-ic { width: 30px; height: 30px; border-radius: 8px; }
  .aten-cuerpo .lista-registros { gap: 6px; }
}
@media (max-width: 860px) {
  .docs-nuevo { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .docs-nuevo .btn-chico { justify-content: center; padding: 9px 10px; }
  .docs-sec h3 { margin: 10px 0 6px; }
}
.signos-campos .sv-ct { display: none; }
@media (max-width: 860px) {
  /* sesión: signos y aparatología en dos columnas, con siglas */
  .form-evol .signos-campos, .form-evol details.orto .form-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .form-evol details.orto .form-grid .campo.ancho { grid-column: 1 / -1; }
  .signos-campos .sv-lg { display: none; }
  .signos-campos .sv-ct { display: inline; font-weight: 700; }
  .signos-campos .semaforo { font-size: .75rem; padding: 2px 7px; }
}
/* botones al final de un formulario largo (apertura) */
.barra-fin { display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .barra-fin { display: grid; grid-template-columns: 2fr 1fr; } .barra-fin button { padding: 12px; justify-content: center; text-align: center; } }

/* ===== Encabezado de Atención: volver discreto, nombre que abre la ficha, signos con punto de color ===== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.foco-volver { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; color: var(--muted); background: transparent; text-decoration: none; transition: background .15s, color .15s; }
.foco-volver:hover, .foco-volver:focus-visible { background: var(--panel-2); color: var(--fg); }
.foco-volver .ico { width: 22px; height: 22px; }
.foco-nombre { color: inherit; text-decoration: none; min-width: 0; display: block; overflow: hidden; }
.foco-nombre:hover b { color: var(--accent-ink); }
.foco-cab { gap: 8px 10px; }

/* signos: fondo neutro, un punto de color indica el estado; el valor toma el color solo si está alterado */
.foco-signos { border-radius: 10px; background: var(--panel-2); }
.svm { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; padding: 6px 12px; background: transparent !important; }
.svm::before { display: none !important; }
.svm-k { gap: 5px; font-size: .75rem; color: var(--muted) !important; align-self: center; }
.svm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.svm.alerta .svm-dot { background: var(--amber); }
.svm.critico .svm-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.svm-v b { font-size: 1rem; color: var(--fg); }
.svm.alerta .svm-v b { color: var(--amber); }
.svm.critico .svm-v b { color: var(--warn); }
.svm:hover { background: var(--accent-soft) !important; }
@media (max-width: 860px) {
  .foco-cab { padding: 8px 10px 8px 4px; }
  .foco-volver { width: 30px; height: 30px; margin-right: -4px; }
  .foco-cab > .foco-signos { margin-top: 0; }
  .foco-cab > .foco-signos .svm { justify-content: center; padding: 6px 4px; gap: 5px; }
  .svm-v small { display: none; }
  .svm-v b { font-size: .875rem; }
}
@media (max-width: 860px) {
  /* tarjeta de la atención: estado, rango de fechas y menú en una sola fila */
  .aten-top { flex-wrap: nowrap; }
  .aten-rango { flex: 1; min-width: 0; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aten-head .aten-titulo { display: none !important; }
  .aten-head .estado-aten { flex-shrink: 0; }
  .aten-top .acciones .btn-icono { padding: 4px 9px; }
}
@media (max-width: 860px) {
  /* menú ⋯ de la atención: discreto, sin caja */
  .aten-top .acciones .btn-icono { width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; background: transparent; box-shadow: none; color: var(--muted); border-radius: 50%; font-size: 1.125rem; line-height: 1; }
  .aten-top .acciones .btn-icono:hover, .aten-top .acciones .btn-icono:focus-visible { background: var(--panel-2); color: var(--fg); }
  .aten-top { margin-right: -4px; }
}
/* menú de la atención (teléfono): círculo suave con el color de la marca */
.btn-menu-aten { display: grid; place-items: center; width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; box-shadow: none; }
.btn-menu-aten .ico { width: 18px; height: 18px; }
.btn-menu-aten:hover, .btn-menu-aten:focus-visible { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 860px) {
  /* "Editar" de la apertura: chico y a la derecha (Guardar/Cancelar siguen grandes al editar) */
  .barra-sec { flex-wrap: nowrap; }
  .barra-sec:has(.fecha-ini) { flex-wrap: wrap; }
  .barra-sec .acciones:not(:has(.fecha-ini)) { width: auto; flex-shrink: 0; }
  .barra-sec .acciones:not(:has(.fecha-ini)) button { flex: none; padding: 5px 12px; background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: none; font-size: .8125rem; }
  /* editar / borrar una sesión: solo íconos, discretos */
  .ses-acc { margin-top: 6px; gap: 4px; }
  .ses-acc .tx { display: none; }
  .ses-acc button { width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 50%; box-shadow: none; }
  .ses-acc button.btn-peligro { color: var(--warn); opacity: .75; }
  .ses-acc button:hover, .ses-acc button:focus-visible { background: var(--panel-2); opacity: 1; }
}
@media (max-width: 860px) {
  /* botón Editar (apertura y estudios): contorno fino, compacto */
  .btn-editar { flex: none !important; height: 32px; min-height: 0 !important; padding: 0 12px !important; background: transparent !important; color: var(--accent-ink) !important; border: 1px solid var(--accent) !important; box-shadow: none !important; font-size: .8125rem; }
  .btn-editar .ico { width: 14px; height: 14px; }
}

/* sin el recuadro de color que pinta el navegador al tocar un botón o enlace (el foco con teclado se mantiene) */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="tab"], summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }
/* respuesta suave al tocar, en lugar del recuadro */
@media (pointer: coarse) {
  button:active, a.btn:active, .paso:active, .registro:active { opacity: .7; transition: opacity .08s; }
}
.barra-fin button .ico { width: 16px; height: 16px; }

/* ===== Contraseñas ===== */
.clave-in { position: relative; display: flex; width: 100%; }
.clave-in input { flex: 1; min-width: 0; padding-right: 42px !important; }
.ver-clave { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); box-shadow: none; border-radius: 8px; }
.ver-clave:hover { color: var(--fg); background: var(--panel-2); }
.ver-clave .ico { width: 18px; height: 18px; }
.clave-reglas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--muted); }
.clave-reglas li::before { content: "○"; margin-right: 4px; }
.clave-reglas li.ok { color: var(--ok); }
.clave-reglas li.ok::before { content: "✓"; }
.login .clave-in { max-width: 260px; }
.login .clave-in input { max-width: none; text-align: left; letter-spacing: normal; font-size: 1rem; }

/* ===== Mi cuenta ===== */
.cuenta-cab { display: flex; align-items: center; gap: 18px; }
.cuenta-foto { position: relative; flex-shrink: 0; }
.avatar.grande { width: 92px; height: 92px; font-size: 2rem; overflow: hidden; }
.avatar img, .avatar.grande img, .avatar.mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cuenta-foto-btn { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); border: 3px solid var(--panel); cursor: pointer; }
.cuenta-foto-btn .ico { width: 16px; height: 16px; }
.cuenta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cuenta-txt h1 { margin: 0; font-size: 1.25rem; }
.cuenta-foto-acc { margin-top: 6px; }
.cuenta-seg a { display: inline-flex; align-items: center; gap: 6px; }
.cuenta-seg .ico { width: 16px; height: 16px; }
.cuenta-clave { max-width: 720px; }
/* tarjeta del usuario en la barra lateral */
.sidebar a.nav-cuenta { gap: 10px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--line); background: var(--panel-2); }
.sidebar a.nav-cuenta[hidden] { display: none; }
.avatar.mini { width: 32px; height: 32px; font-size: .8125rem; flex-shrink: 0; overflow: hidden; }
.nc-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.nc-tx b { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-tx small { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .cuenta-cab { flex-direction: column; text-align: center; gap: 10px; }
  .cuenta-txt { align-items: center; }
  .cuenta-seg { overflow-x: auto; flex-wrap: nowrap; }
  .cuenta-seg a { white-space: nowrap; }
}
.login .ver-clave { width: 34px; max-width: none; padding: 0; font-size: inherit; }
.login .clave-in { width: 100%; }
.cuenta-seg a { flex: 1 0 auto; justify-content: center; text-decoration: none; padding: 8px 12px; border-radius: 9px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cuenta-seg a:hover { background: var(--panel); color: var(--fg); }
.cuenta-seg a[aria-selected="true"] { background: var(--panel); color: var(--accent-ink); box-shadow: var(--shadow); }
@media (max-width: 860px) { .cuenta-seg a { padding: 7px 8px; font-size: .8125rem; gap: 4px; } .cuenta-seg .ico { width: 14px; height: 14px; } }
/* lista de atenciones: una línea con paciente, inicio y fin */
.registro.aten-min { padding: 8px 12px; gap: 10px; }
.registro.aten-min .cuerpo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.aten-min-f { font-size: .8125rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aten-min-f .en-curso { color: var(--ok); font-weight: 600; }
.aviso-lectura { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line); color: var(--muted); font-size: .875rem; }

.registro.aten-min .cuerpo { flex: 1; min-width: 0; }

/* ===== Inicio: quién entró y su firma electrónica ===== */
.inicio-yo { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.inicio-yo-av .avatar { width: 56px; height: 56px; font-size: 1.25rem; overflow: hidden; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line); }
.inicio-yo-av .avatar img { width: 100%; height: 100%; object-fit: cover; }
.inicio-yo-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inicio-yo-tx h1 { margin: 0; font-size: 1.5rem; }
.firma-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--fg); }
.firma-chip:hover { border-color: var(--accent); text-decoration: none; }
.firma-chip .ico { width: 22px; height: 22px; flex-shrink: 0; }
.firma-chip span { display: flex; flex-direction: column; line-height: 1.2; }
.firma-chip b { font-size: .875rem; }
.firma-chip small { font-size: .75rem; color: var(--muted); }
.firma-chip.vigente .ico { color: var(--ok); }
.firma-chip.por-vencer { background: var(--amber-soft); border-color: transparent; }
.firma-chip.por-vencer .ico, .firma-chip.por-vencer b { color: var(--amber); }
.firma-chip.vencida { background: var(--warn-soft); border-color: transparent; }
.firma-chip.vencida .ico, .firma-chip.vencida b { color: var(--warn); }
.firma-chip.sin { border-style: dashed; }
.firma-chip.sin .ico { color: var(--muted); }
.inicio-acc { justify-content: flex-end; margin: -6px 0 12px; }
@media (max-width: 860px) {
  .inicio-yo { gap: 10px; }
  .inicio-yo-av .avatar { width: 46px; height: 46px; font-size: 1rem; }
  .inicio-yo-tx h1 { font-size: 1.25rem; }
  .firma-chip { flex-basis: 100%; padding: 7px 12px; }
}

/* ===== Detalle de una sesión (acordeón): procedimiento completo y campos ordenados ===== */
.ses-det { padding: 10px 14px 12px; }
.ses-det .ses-proc { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.ses-det .ses-meta { margin: 2px 0 10px; font-size: .8125rem; color: var(--muted); }
.ses-det .ses-meta time { font-size: inherit; }
.ses-det .ses-meta::first-letter { text-transform: uppercase; }
details.sesion-card[open] > summary .por { display: none; }
.ses-campos { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ses-campos > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px dashed var(--line); }
.ses-campos > div:first-child { border-top: 0; padding-top: 0; }
.ses-campos dt { font-size: .75rem; font-weight: 700; color: var(--muted); }
.ses-campos dd { margin: 0; font-size: .875rem; min-width: 0; overflow-wrap: anywhere; }
.ses-campos dd.rx { color: var(--violet); }
.ses-campos dd.prox { color: var(--accent-ink); font-weight: 600; }
.ses-campos .signos-chips, .ses-campos .orto-chips { margin: 0; }
.ses-det .ses-acc { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .ses-det { padding: 10px 12px; }
  .ses-campos > div { grid-template-columns: 1fr; gap: 3px; }
  .ses-det .ses-proc { font-size: .9375rem; }
}
/* abierto: el título completo va adentro, en la cabecera queda solo la fecha */
details.sesion-card[open] > summary b { display: none; }
details.sesion-card[open] > summary .chev { margin-left: auto; }

/* ===== Agenda en el teléfono ===== */
.ag-cab { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.ag-mes { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; justify-content: flex-start; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-family: var(--titulo); font-size: 1.125rem; font-weight: 700; box-shadow: none; }
.ag-mes .ico { width: 20px; height: 20px; color: var(--accent-ink); flex-shrink: 0; }
.ag-mes .ag-chev { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .2s; }
.ag-mes[aria-expanded="true"] .ag-chev { transform: rotate(180deg); }
.ag-hoy { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; box-shadow: none; }
.ag-grilla { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.ag-grilla .ico { width: 20px; height: 20px; }
/* calendario del mes */
.ag-cal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 10px; margin-bottom: 10px; box-shadow: var(--shadow); }
.ag-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ag-cal-nav b { font-size: .9375rem; }
.ag-cal-nav button { width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg); border-radius: 50%; box-shadow: none; }
.ag-cal-nav .ico { width: 20px; height: 20px; }
.ag-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ag-dow { font-size: .75rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.ag-d { position: relative; aspect-ratio: 1; min-height: 0; min-width: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg); box-shadow: none; font-size: .9375rem; }
.ag-d b { font-weight: 600; }
.ag-d.libre { color: var(--muted); }
.ag-d.hoy b { color: var(--accent-ink); font-weight: 800; }
.ag-d.hoy::after { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--accent); border-radius: 50%; }
.ag-d.sel { background: var(--accent); color: var(--accent-fg); }
.ag-d.sel b { color: var(--accent-fg); }
.ag-n { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--amber); color: var(--sobre-color); font-size: .6rem; font-style: normal; font-weight: 700; line-height: 16px; }
.ag-d.sel .ag-n { background: var(--panel); color: var(--accent-ink); }
/* tira de la semana */
.ag-tira { grid-template-columns: 22px repeat(7, 1fr) 22px; align-items: stretch; gap: 3px; }
.ag-sem { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; box-shadow: none; }
.ag-sem .ico { width: 18px; height: 18px; }
.tira-dias .dia.sel b, .tira-dias .dia.hoy.sel b { color: var(--accent-fg); }
.tira-dias .dia.hoy:not(.sel) { border-color: var(--accent); }
.tira-dias .dia .puntos { min-height: 14px; display: grid; place-items: center; }
.tira-dias .dia .puntos i { font-style: normal; font-size: .62rem; font-weight: 700; min-width: 16px; height: 14px; line-height: 14px; padding: 0 4px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); letter-spacing: 0; }
.tira-dias .dia.sel .puntos i { background: var(--accent-fg); color: var(--accent); }
/* título del día y marca de la hora actual */
.ag-dia-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px 8px; }
.ag-dia-tit h2 { margin: 0; font-size: 1rem; }
.ag-dia { min-height: 40vh; padding-bottom: 76px; }
.ag-ahora { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: .75rem; font-weight: 700; }
.ag-ahora::before, .ag-ahora::after { content: ""; flex: 1; height: 2px; background: var(--warn); opacity: .6; border-radius: 2px; }
.ag-tira[hidden] { display: none; }
/* tira de días desplazable (además de las flechas) */
.ag-tira { display: flex !important; align-items: stretch; gap: 2px; }
.ag-tira .ag-sem { flex: 0 0 22px; }
.ag-dias { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 18px) / 7); gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ag-dias::-webkit-scrollbar { display: none; }
.ag-dias .dia { scroll-snap-align: start; position: relative; }
.tira-dias .dia small.ag-mes-ini { color: var(--accent-ink); font-weight: 800; }
.tira-dias .dia.sel small.ag-mes-ini { color: var(--accent-fg); }

/* ===== Grilla horaria de un día: más compacta ===== */
.agenda-dia-lay { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.agenda-dia-lay .agenda { max-height: calc(100vh - 170px); }
.agenda-dia-lista { margin: 0; max-height: calc(100vh - 170px); overflow: auto; position: sticky; top: 12px; }
.agenda-dia-lista h2 { font-size: 1rem; }
.agenda.agenda-dia .dia-h { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 6px 4px; }
.agenda.agenda-dia .dia-h b { display: inline; font-size: 1rem; }
.turno.bajo { display: flex; align-items: center; gap: 6px; padding: 1px 6px; white-space: nowrap; }
.turno.bajo b { overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
.turno.bajo small { font-size: .68rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .agenda-dia-lay { grid-template-columns: 1fr; } .agenda-dia-lista { position: static; max-height: none; } }
/* teléfono: barra compacta y grilla que ocupa la pantalla */
.ag-cab-grilla { gap: 8px; }
.ag-g-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ag-g-tit b { font-family: var(--titulo); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-g-tit small { font-size: .75rem; }
.ag-cab-grilla .seg button { padding: 6px 10px; }
@media (max-width: 860px) {
  .agenda.agenda-dia { max-height: calc(100vh - 200px); border-radius: 12px; }
  .agenda.agenda-dia .hora-l { font-size: .75rem; padding-right: 4px; }
  /* el día ya está en la barra: la cabecera de la columna se colapsa (sin sacarla de la grilla) */
  .agenda.agenda-dia .dia-h, .agenda.agenda-dia .esq { height: 0; padding: 0; border: 0; overflow: hidden; }
}

/* ===== Encabezado de la ficha (ordenado como el de Atención) ===== */
.ficha-head.fh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "avatar nombre signos acciones" "avatar clin clin clin" "alertas alertas alertas alertas" "chips chips chips chips"; align-items: center; column-gap: 12px; row-gap: 8px; }
.ficha-head.fh > .avatar { grid-area: avatar; align-self: start; }
.ficha-head.fh .datos { grid-area: nombre; min-width: 0; }
.ficha-head.fh .datos h1 { margin: 0; font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-meta { display: block; color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-meta .plegar-hint { display: inline !important; font-size: inherit; color: var(--accent-ink); font-weight: 600; margin: 0; }
.ficha-head.fh .fh-clin { grid-area: clin; min-width: 0; }
.ficha-head.fh .fh-clin .ficha-clinico { margin: 0; flex-wrap: wrap; }
.ficha-head.fh > .foco-signos { grid-area: signos; margin: 0; }
.ficha-head.fh > .acciones { grid-area: acciones; align-self: start; }
.ficha-head.fh > .alertas-clinicas { grid-area: alertas; }
.ficha-head.fh > .datos-tabla { grid-area: chips; }
@media (max-width: 860px) {
  .ficha-head.fh { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar nombre acciones" "alertas alertas alertas" "clin clin clin" "signos signos signos" "chips chips chips"; padding: 8px 10px; column-gap: 8px; row-gap: 6px; cursor: default; }
  .ficha-head.fh > .avatar { width: 34px; height: 34px; font-size: .8125rem; align-self: center; }
  .ficha-head.fh .datos { cursor: pointer; }
  .ficha-head.fh .datos h1 { font-size: 1rem; }
  .fh-meta { font-size: .75rem; }
  .ficha-head.fh > .acciones { align-self: center; gap: 4px; }
  .ficha-head.fh > .acciones button { width: 32px; height: 32px; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; }
  .ficha-head.fh > .acciones #b-mas { border: 0; background: var(--accent-soft); color: var(--accent-ink); }
  /* alertas y estado clínico: una fila cada uno, se deslizan */
  .ficha-head.fh > .alertas-clinicas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ficha-head.fh > .alertas-clinicas::-webkit-scrollbar { display: none; }
  .ficha-head.fh > .alertas-clinicas span { flex-shrink: 0; white-space: nowrap; font-size: .75rem; padding: 1px 8px; }
  .ficha-head.fh .fh-clin .ficha-clinico { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; align-items: center; }
  .ficha-head.fh .fh-clin .ficha-clinico::-webkit-scrollbar { display: none; }
  .ficha-head.fh .fh-clin .fc { flex-shrink: 0; font-size: .75rem; padding: 3px 9px; max-width: 75vw; }
  .ficha-head.fh > .foco-signos { display: flex; }
  .ficha-head.fh > .foco-signos .svm { flex: 1; min-width: 0; justify-content: center; padding: 5px 4px; gap: 5px; }
}

/* ===== Cefalometría: barra de puntos y máscara para poder desplazar la página ===== */
.cef-tactil { display: flex !important; z-index: 3; }
.cef-tactil button { display: inline-flex; align-items: center; gap: 4px; }
.cef-tactil .ico { width: 18px; height: 18px; }
.cef-stage .ayuda { bottom: 56px; }
@media (hover: hover) and (pointer: fine) { .cef-tactil .solo-tactil { display: none; } .cef-tactil { justify-content: flex-end; } }
@media (max-width: 860px) { .cef-tactil .tx { display: none; } .cef-tactil button { padding: 0 14px; } }
.cef-mascara { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
.cef-mascara[hidden] { display: none; }
.cef-mascara span { display: inline-flex; align-items: center; gap: 6px; background: rgba(20, 28, 32, .85); color: #fff; font-size: .8125rem; padding: 6px 12px; border-radius: 999px; }
.cef-mascara .ico { width: 15px; height: 15px; }
.cef-stage.bloqueada { touch-action: pan-y; }
.cef-stage.bloqueada .zoom, .cef-stage.bloqueada .hud { display: none; }
.cef-tactil button[data-t="bloq"][aria-pressed="true"] { background: var(--amber); color: #1b1b1b; border-color: transparent; }
/* Guardar de la cefalometría: visible también en el teléfono, con color según el estado */
.cef-guardar { display: inline-flex; align-items: center; gap: 4px; }
.cef-guardar .ico { width: 16px; height: 16px; }
.cef-guardar.pendiente { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.cef-guardar.ok { color: var(--ok); }
@media (max-width: 860px) { .cef-guardar .tx { display: none; } .cef-guardar { width: 38px; height: 38px; padding: 0; justify-content: center; } }

/* ===== Informe cefalométrico: barra y adaptación al teléfono ===== */
.inf-cab { flex-wrap: wrap; gap: 8px; }
.inf-tit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inf-tit h1 { margin: 0; }
.inf-cab .acciones button { white-space: nowrap; }
@media (max-width: 860px) {
  .inf-cab { flex-direction: column; align-items: stretch; }
  .inf-tit h1 { font-size: 1.125rem; }
  .inf-tit .tx { display: none; }
  .inf-cab .acciones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; width: 100%; }
  .inf-cab .acciones button { justify-content: center; }
  .informe { padding: 14px 12px; border-radius: 12px; }
  .informe .cab { flex-direction: column; gap: 6px; }
  .informe .cab > div[style] { text-align: left !important; }
  .informe .cab h1 { font-size: 1.125rem; }
  .informe .pac { grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: .8125rem; }
  .informe img { max-height: 340px; margin: 6px 0 10px; }
  /* resultados: cada medida como fila de tarjeta (medida · valor · norma, e interpretación debajo) */
  .informe .res-tabla thead { display: none; }
  .informe .res-tabla, .informe .res-tabla tbody { display: block; width: 100%; }
  .informe .res-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1px 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
  .informe .res-tabla td { padding: 0; border: 0; background: none; }
  .informe .res-tabla td.interp { grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }
  .informe .res-tabla td.interp:empty { display: none; }
  .informe .res-tabla tr.analisis { padding-top: 12px; }
  .informe .res-tabla tr.analisis td { grid-column: 1 / -1; }
  .informe .firma div { min-width: 0; width: 80%; }
}

/* ===== Cefalometría: barra de la imagen como un solo grupo y modos con ícono ===== */
.cef-tactil { left: 50%; right: auto; transform: translateX(-50%); gap: 0; background: rgba(15, 22, 26, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 4px; backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.cef-tactil button { background: transparent; border: 0; height: 40px; min-width: 42px; padding: 0 10px; border-radius: 10px; color: #e8eef1; justify-content: center; }
.cef-tactil button:hover { background: rgba(255, 255, 255, .1); }
.cef-tactil button + button { position: relative; }
.cef-tactil button[data-t="quitar"], .cef-tactil button[data-t="pan"] { margin-left: 4px; }
.cef-tactil button[data-t="quitar"]::before { content: ""; position: absolute; left: -3px; top: 9px; bottom: 9px; width: 1px; background: rgba(255, 255, 255, .2); }
.cef-tactil button[data-t="sig"] { background: var(--accent); color: var(--accent-fg); }
.cef-tactil button[data-t="pan"][aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .cef-tactil { left: auto; right: 10px; transform: none; } }
.cef-modos { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.cef-modos .seg button { display: inline-flex; align-items: center; gap: 5px; }
.cef-modos .seg .ico { width: 16px; height: 16px; }
.btn-borrar-todo { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--warn); font-size: .8125rem; padding: 6px 8px; box-shadow: none; }
.btn-borrar-todo .ico { width: 16px; height: 16px; }
.btn-borrar-todo:hover { background: var(--warn-soft); }
@media (max-width: 860px) {
  .cef-modos .seg button { padding: 7px 9px; font-size: .8125rem; }
  .btn-borrar-todo .tx { display: none; }
  .btn-borrar-todo { width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: 50%; }
}

/* ===== Odontograma: herramienta compacta y pantalla completa ===== */
.herr-actual { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: .875rem; box-shadow: none; }
.herr-actual .herr-k { color: var(--muted); font-size: .75rem; }
.herr-actual .ico { width: 16px; height: 16px; color: var(--muted); }
.herr-actual .sw { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid; display: inline-grid; place-items: center; font-size: .6rem; font-weight: 700; }
.odo-full-btn { width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); margin-left: auto; box-shadow: none; }
.odo-full-btn .ico { width: 18px; height: 18px; }
.herr:has(.odo-full-btn) { display: flex; flex-wrap: wrap; gap: 8px; }
.herr:has(.odo-full-btn) .odo-ayuda { flex-basis: 100%; }
/* pantalla completa */
.card.odo-full { position: fixed; inset: 0; z-index: 300; margin: 0; border-radius: 0; overflow: auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.card.odo-full .odo-ayuda { display: none; }
.card.odo-full .odo-wrap { flex: 1; display: flex; align-items: center; overflow: auto; }
.card.odo-full .odo-svg { min-width: 900px; width: 100%; max-width: none; }
.card.odo-full .odo-resumen { display: none; }
body.odo-full-on .tabbar, body.odo-full-on .fab { display: none !important; }
@media (orientation: landscape) { .card.odo-full .odo-svg { min-width: 0; max-height: calc(100vh - 90px); } }
@media (max-width: 860px) {
  .card .herr .seg button { padding: 6px 10px; font-size: .8125rem; }
  .odo-ayuda { font-size: .75rem; }
}
.paleta .herr-actual { width: auto !important; justify-content: flex-start; }
.odo-girar { display: none; }
@media (orientation: portrait) and (max-width: 860px) {
  .card.odo-full .odo-girar { display: inline-flex; align-self: center; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .8125rem; font-weight: 600; }
  .card.odo-full .odo-girar .ico { width: 16px; height: 16px; }
}
/* zoom de la cefalometría con el mismo estilo que la barra */
.cef-stage .zoom { gap: 0; background: rgba(15, 22, 26, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 3px; backdrop-filter: blur(6px); }
.cef-stage .zoom button { background: transparent; color: #e8eef1; width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
.cef-stage .zoom button:hover { background: rgba(255, 255, 255, .1); }
/* cefalometría a pantalla completa */
.cef-stage.cef-full { position: fixed !important; inset: 0; z-index: 300; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; border: 0; }
body.cef-full-on .tabbar, body.cef-full-on .fab { display: none !important; }
.cef-full-btn .ico { width: 16px; height: 16px; }
/* barra de puntos: más transparente y con los botones separados */
.cef-tactil { background: rgba(15, 22, 26, .5); gap: 6px; padding: 6px; border-radius: 16px; bottom: 12px; }
.cef-tactil button { background: rgba(255, 255, 255, .1); border-radius: 11px; margin: 0 !important; }
.cef-tactil button[data-t="quitar"]::before { display: none; }
.cef-tactil button[data-t="sig"] { background: color-mix(in srgb, var(--accent) 88%, transparent); }
.cef-stage .zoom { background: rgba(15, 22, 26, .5); gap: 4px; padding: 5px; }
.cef-stage .zoom button { background: rgba(255, 255, 255, .1); }

/* ===== Revisión de diseño: legibilidad y tamaños táctiles en el teléfono ===== */
@media (max-width: 860px) {
  /* nada de texto por debajo de 12 px en los encabezados */
  .foco-datos .alertas-clinicas span, .ficha-head.fh > .alertas-clinicas span { font-size: .75rem; padding: 3px 9px; }
  .svm-k { font-size: .75rem; }
  .svm-v b { font-size: .9375rem; }
  /* chips y signos tocables: al menos 34 px de alto */
  .ficha-head.fh .fh-clin .fc { min-height: 32px; font-size: .8125rem; }
  .foco-cab > .foco-signos .svm, .ficha-head.fh > .foco-signos .svm { min-height: 36px; }
  /* tira de la agenda: flechas más anchas y cantidad de turnos legible */
  .ag-tira .ag-sem { flex-basis: 30px; }
  .tira-dias .dia .puntos i { font-size: .7rem; height: 16px; line-height: 16px; min-width: 18px; }
  /* casillas y opciones más fáciles de tocar */
  input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; }
  /* turnos de la ficha: cada turno como fila de tarjeta (sin desplazar la tabla) */
  .tabla-turnos thead { display: none; }
  .tabla-turnos, .tabla-turnos tbody { display: block; width: 100%; min-width: 0 !important; }
  .tabla-turnos tr { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); align-items: center; }
  .tabla-turnos td { padding: 0; border: 0; }
  .tabla-turnos td:nth-child(3) { grid-column: 1 / 3; color: var(--muted); font-size: .8125rem; }
  .tabla-turnos td:nth-child(4) { grid-row: 1; grid-column: 3; justify-self: end; }
  .tabla-turnos td:nth-child(5) { grid-column: 1 / -1; }
  .tabla-turnos td:nth-child(5):empty, .tabla-turnos td:nth-child(5):has(small:empty) { display: none; }
  .tabla-turnos td:last-child { grid-column: 3; grid-row: 2; justify-self: end; font-size: .8125rem; }
}
/* lista de pacientes: buscador siempre visible y sin tarjeta doble en el teléfono */
@media (max-width: 860px) {
  .lista-pac-cab { flex-direction: column; align-items: stretch; gap: 8px; }
  .lista-pac-cab .acciones { width: 100%; }
  .lista-pac-cab .buscador { display: block !important; flex: 1; width: 100%; }
  .lista-pac-cab .buscador input { width: 100%; height: 44px; border-radius: 12px; font-size: 1rem; }
  .lista-pac-cab #b-nuevo { display: none; }
  .card.lista-pac { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .lista-tarjetas { gap: 8px; }
}
/* lupa de los buscadores: ícono de línea (antes era el carácter ⌕, casi invisible) */
.buscador::before { content: ""; width: 17px; height: 17px; background: var(--muted); transform: translateY(-50%); z-index: 1; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.buscador input { padding-left: 36px !important; }
/* Inicio en el teléfono: números en una sola fila y estados vacíos más bajos */
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .stats .stat { padding: 8px 6px !important; text-align: center; align-items: center; }
  .stats .stat b { font-size: 1.25rem !important; }
  .stats .stat span { display: block; font-size: .75rem !important; line-height: 1.2; margin-top: 2px; }
  .card .vacio { padding: 14px 8px; }
}
/* modos de la cefalometría en el panel angosto de la PC: los tres botones caben y «Borrar todo» va como ícono */
.cef-modos .seg { flex: 1 1 auto; min-width: 0; overflow: visible; }
.cef-modos .seg button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 8px; font-size: .8125rem; white-space: nowrap; }
.btn-borrar-todo .tx { display: none; }
.btn-borrar-todo { flex: 0 0 auto; width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: 50%; }
/* Atención (lista): fecha y cantidad en curso bajo el título; buscador con lupa, a todo el ancho en el teléfono */
.aten-lista-cab .aten-buscar { flex: 1; max-width: 520px; }
.aten-lista-cab .aten-buscar .ac, .aten-lista-cab .aten-buscar input { width: 100%; }
.aten-lista-cab small { display: block; }
.aten-lista-cab small::first-letter { text-transform: uppercase; }
.vacio-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .875rem; }
.vacio-linea a { font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
  .aten-lista-cab { flex-direction: column; align-items: stretch; gap: 8px; }
  .aten-lista-cab .aten-buscar { max-width: none; display: block !important; }
  .aten-lista-cab .aten-buscar input { height: 44px; border-radius: 12px; font-size: 1rem; }
}
/* ===== Teléfono: «+ Nuevo …» como botón chico arriba (reemplaza al botón flotante redondo) ===== */
@media (max-width: 860px) {
  .fab-mini { white-space: nowrap; padding: 7px 12px !important; min-height: 0 !important; font-size: .8125rem; border-radius: 10px; flex-shrink: 0; }
  .fab-barra { display: flex; justify-content: flex-end; margin: 0 0 8px; }
  .encabezado:has(> .fab-mini) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 8px; }
  .encabezado:has(> .fab-mini) > .acciones { order: 2; width: auto; }
  .encabezado:has(> .fab-mini) > .fab-mini { order: 3; }
  .encabezado:has(> .fab-mini) > .acciones.buscador, .encabezado:has(> .fab-mini) > .acciones:has(.buscador.abierto) { order: 4; grid-column: 1 / -1; width: 100%; }
  .ag-cab .fab-mini { order: 5; }
  .inicio-yo .fab-mini { align-self: flex-start; }
  .historial-barra .fab-mini { margin-left: auto; }
}
@media (max-width: 860px) { .ag-mes { white-space: nowrap; font-size: 1rem; padding: 8px 10px; } .ag-mes span { overflow: hidden; text-overflow: ellipsis; } }

/* ---------- Facturación electrónica e inventario ---------- */
.badge.fe-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.fe-pend { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge.fe-err { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.fe-anul { background: var(--panel-2); color: var(--muted); }
.txt-aviso { color: var(--amber); }
.aviso-fact { background: var(--amber-soft); border-color: transparent; color: var(--fg); }
.aviso-fact a { font-weight: 600; }
.fact-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fact-filtros input[type=search] { flex: 1 1 220px; min-width: 0; }
.fact-filtros input[type=date], .fact-filtros select { flex: 0 1 auto; width: auto; }
.fact-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.fact-resumen > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
.fact-resumen small { color: var(--muted); font-size: .75rem; }
.fact-resumen b { font-family: var(--titulo); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.fact-reg .cuerpo b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fact-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact-reg.anulada .fact-total { text-decoration: line-through; color: var(--muted); }
.fact-detalle .fd-cab { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.fd-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 0 0 12px; }
.fd-datos .ancho { grid-column: 1 / -1; }
.fd-datos dt { font-size: .75rem; color: var(--muted); }
.fd-datos dd { margin: 0; overflow-wrap: anywhere; }
.fd-items { width: 100%; border-collapse: collapse; font-size: .875rem; }
.fd-items th { text-align: left; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 6px; }
.fd-items td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; font-variant-numeric: tabular-nums; }
.fd-items td small { display: block; color: var(--muted); font-size: .75rem; }
.fd-items th:not(:first-child), .fd-items td:not(:first-child) { text-align: right; white-space: nowrap; }
.fd-totales { display: grid; gap: 2px; margin: 10px 0 0 auto; max-width: 300px; }
.fd-totales > div { display: flex; justify-content: space-between; gap: 16px; }
.fd-totales dt { color: var(--muted); }
.fd-totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.fd-totales .total { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; font-weight: 700; font-size: 1.125rem; }
.fd-totales .total dt { color: var(--fg); }
.fd-msj { margin-top: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .875rem; }
.fd-msj ul { margin: 4px 0 0; padding-left: 18px; }
.fd-msj li.err b { color: var(--warn); }
.fd-msj li small { display: block; color: var(--muted); }
.fd-acc { margin-top: 14px; flex-wrap: wrap; }
.fd-acc .izq { margin-right: auto; }
.mono { font-family: var(--mono); font-size: .85em; }

.volver { display: inline-flex; align-items: center; gap: 2px; font-size: .875rem; color: var(--muted); text-decoration: none; margin-bottom: 2px; }
.nf-pac-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.nf-pac-sel .check-linea { margin: 0; font-size: .875rem; }
.nf-pac-sel button { margin-left: auto; }
.nf-pac .ac { margin-bottom: 10px; }
.nf-buscar { position: relative; margin-bottom: 10px; }
.nf-buscar .ac-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 300px; overflow: auto; }
.nf-buscar .ac-lista > div b { float: right; font-variant-numeric: tabular-nums; }
.nf-item { display: grid; grid-template-columns: minmax(0, 1fr) 70px 90px 80px 80px 36px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.nf-item label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.nf-item label small { font-size: .75rem; color: var(--muted); }
.nf-item input, .nf-item select { width: 100%; min-width: 0; }
.nf-desc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nf-desc small { color: var(--muted); font-size: .8125rem; }
.nf-sub { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.nf-libre { margin-top: 10px; }
.nf-vacio { margin: 6px 0; }
.nf-pagar { justify-content: space-between; align-items: center; }
.nf-pagar span { font-size: 1rem; }
.nf-pagar b { font-family: var(--titulo); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.nf-amb { margin-bottom: 4px; }

.inv-lista { display: flex; flex-direction: column; gap: 6px; }
.inv-item { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.inv-item.inactivo { opacity: .55; }
.inv-ic { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.inv-ic.bien { background: var(--violet-soft); color: var(--violet); }
.inv-cuerpo { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; display: flex; flex-direction: column; cursor: pointer; }
.inv-cuerpo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-cuerpo small { color: var(--muted); font-size: .8125rem; }
.iva-chip { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.iva-chip:not(.iva-0):not(.iva-6):not(.iva-7) { background: var(--amber-soft); color: var(--amber); }
.inv-precio { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.inv-precio small, .inv-stock small { font-weight: 400; font-size: .75rem; color: var(--muted); }
.inv-stock { flex: 0 0 64px; text-align: center; display: flex; flex-direction: column; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px 4px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
button.inv-stock { cursor: pointer; }
.inv-stock.bajo { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.inv-stock.neg { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.inv-stock.sin { background: none; border-style: dashed; font-weight: 400; }
.kx-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.kx-cab > div:first-child { display: flex; align-items: baseline; gap: 6px; }
.kx-stock { font-family: var(--titulo); font-size: 1.5rem; }
.kx-form { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.kx-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.kx-tabla th { text-align: left; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 6px; }
.kx-tabla td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.kx-tabla td small { display: block; color: var(--muted); font-size: .75rem; }
.kx-tabla td.pos { color: var(--ok); font-weight: 600; }
.kx-tabla td.neg { color: var(--warn); font-weight: 600; }
.kx-tabla .ico { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 700px) {
  .fact-resumen { grid-template-columns: repeat(2, 1fr); }
  .fact-filtros input[type=date] { flex: 1 1 40%; }
  .fact-filtros select { flex: 1 1 100%; }
  .fd-datos { grid-template-columns: 1fr; }
  .inv-item { flex-wrap: nowrap; }
  .inv-stock { flex-basis: 54px; }
}
@media (max-width: 700px) {
  .fact-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .fact-filtros input[type=search], .fact-filtros .seg { grid-column: 1 / -1; }
  .fact-filtros input, .fact-filtros select { min-width: 0; width: 100%; font-size: .875rem; padding-top: 6px; padding-bottom: 6px; }
  .fact-filtros select { grid-column: 1 / -1; }
  .fact-resumen { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .fact-resumen > div { padding: 6px 8px; border-radius: 10px; }
  .fact-resumen small { font-size: .75rem; }
  .fact-resumen b { font-size: .9375rem; }
  .fact-filtros .seg { overflow-x: auto; display: flex; }
  .fact-filtros .seg button { flex: 1 0 auto; padding: 6px 10px; font-size: .875rem; }
}
@media (max-width: 700px) {
  .nf-item { grid-template-columns: repeat(3, minmax(0, 1fr)) 34px; grid-template-areas: "d d d s" "c p x b"; gap: 4px 6px; padding: 6px 0; }
  .nf-item .nf-desc { grid-area: d; }
  .nf-item .nf-sub { grid-area: s; align-self: start; white-space: nowrap; }
  .nf-item > label:nth-of-type(1) { grid-area: c; }
  .nf-item > label:nth-of-type(2) { grid-area: p; }
  .nf-item > label:nth-of-type(3) { grid-area: x; }
  .nf-item > .btn-icono { grid-area: b; align-self: end; width: 34px; height: 34px; padding: 0; }
  .nf-item input, .nf-item select { padding: 5px 8px; font-size: .875rem; min-height: 0; }
  .nf-item label small { font-size: .75rem; }
  .nf-desc small { font-size: .75rem; }
}
@media (max-width: 700px) {
  .nf-cli.form-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .nf-cli .campo.ancho { grid-column: 1 / -1; }
  .nf-cli .campo label { font-size: .8125rem; }
  .nf-pac-sel { padding: 6px 10px; gap: 4px 10px; }
  .nf-pac-sel .check-linea { font-size: .8125rem; }
  .nf-pac-sel button { padding: 4px 10px; }
}
.inv-cuerpo { align-items: flex-start; justify-content: center; overflow: hidden; }
.inv-cuerpo b { max-width: 100%; }
.inv-precio { flex: 0 0 auto; }
@media (max-width: 700px) { .fe-emisor.form-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .fe-emisor .campo.ancho, .fe-emisor .check-linea { grid-column: 1 / -1; } .fe-emisor .campo label { font-size: .8125rem; } }
.nf-bodega { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.nf-bodega label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: .875rem; }
.nf-bodega select { width: auto; flex: 1 1 160px; }
.kx-bodegas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
.kx-bod { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: .8125rem; color: var(--muted); }
.kx-bod b { font-size: 1rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.kx-bod.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.kx-acc { flex-wrap: wrap; }
.bod-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bod-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.bod-item.inactivo { opacity: .6; }
.bod-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bod-tx b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 700px) { .kx-acc button { padding: 6px 9px; font-size: .8125rem; } }
@media (max-width: 700px) {
  .kx-form .form-grid, .inv-form.form-grid, .inv-stock-campos.form-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kx-form .campo.ancho, .inv-form .campo.ancho, .inv-form .check-linea { grid-column: 1 / -1; }
  .kx-form .campo label, .inv-form .campo label { font-size: .8125rem; }
}
.nf-pagar button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
/* botón discreto dentro de un campo (p. ej. consultar con la cédula) */
.in-boton { position: relative; display: block; }
.in-boton > input { width: 100%; padding-right: 40px; }
.in-boton > .btn-ced { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.in-boton > .btn-ced:hover, .in-boton > .btn-ced:focus-visible { background: var(--accent-soft); color: var(--accent-ink); }
.in-boton > .btn-ced:disabled { opacity: .5; cursor: progress; }
.in-boton > .btn-ced .ico { width: 18px; height: 18px; }

/* ---------- WhatsApp ---------- */
.wa-cab { display: flex; align-items: center; gap: 12px; }
.wa-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-ic { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.wa-ic.ok { background: var(--ok-soft); color: var(--ok); }
.wa-ic .ico { width: 22px; height: 22px; }
.wa-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wa-qr img { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.wa-qr ol { flex: 1 1 220px; margin: 0; padding-left: 18px; line-height: 1.6; }
.wa-prueba { margin-top: 12px; }
.wa-horas { width: auto; margin-left: 6px; padding: 3px 6px; }
.wa-vars code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font-size: .8125rem; cursor: help; }
.wa-hist { display: flex; flex-direction: column; }
.wa-msj { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wa-msj > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-err { color: var(--warn); }
.turno-wa { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: .875rem; }
.turno-wa span { flex: 1; color: var(--muted); }
.turno-wa .ico { color: var(--ok); }
.wa-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 6px 0 14px; align-items: start; }
.wa-editor textarea { font-family: var(--mono); font-size: .8125rem; line-height: 1.45; min-height: 200px; }
.wa-chat { background: #e5ddd5; border-radius: 12px; padding: 14px 12px; min-height: 100%; }
:root[data-theme="dark"] .wa-chat { background: #0b141a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-chat { background: #0b141a; } }
.wa-burbuja { position: relative; background: #fff; color: #111b21; border-radius: 8px 8px 8px 2px; padding: 7px 10px 18px; max-width: 92%; font-size: .875rem; line-height: 1.4; box-shadow: 0 1px .5px rgba(0,0,0,.13); white-space: normal; overflow-wrap: anywhere; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-theme="dark"] .wa-burbuja { background: #202c33; color: #e9edef; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-burbuja { background: #202c33; color: #e9edef; } }
.wa-burbuja .wa-hora { position: absolute; right: 8px; bottom: 3px; font-size: .75rem; color: #667781; }
.barra-fin [data-sugeridos] { margin-right: auto; }
@media (max-width: 700px) { .wa-editor { grid-template-columns: 1fr; } .wa-editor textarea { min-height: 160px; } }

/* ===== Encabezado de la ficha en PC: todo alineado con la columna del nombre y los datos en una línea ===== */
@media (min-width: 861px) {
  .ficha-head.fh { grid-template-areas: "avatar nombre signos acciones" "avatar clin clin clin" ". alertas alertas alertas" ". chips chips chips"; row-gap: 10px; padding: 14px 18px; }
  .ficha-head.fh > .avatar { width: 52px; height: 52px; font-size: 1.125rem; }
  .ficha-head.fh .datos h1 { font-size: 1.25rem; }
  .fh-meta { font-size: .875rem; }
  .fh-meta .plegar-hint { display: none !important; }      /* en PC los datos se ven siempre */
  .ficha-head.fh > .alertas-clinicas { gap: 6px; }
  .ficha-head.fh > .alertas-clinicas span { font-size: .8125rem; padding: 3px 10px; }
  /* datos: línea compacta clave · valor, sin repetir edad y cédula (ya están bajo el nombre) */
  .ficha-head.fh > .datos-tabla { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .ficha-head.fh > .datos-tabla .celda { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none !important; min-width: 0; }
  .ficha-head.fh > .datos-tabla .celda.rep { display: none; }
  .ficha-head.fh > .datos-tabla .celda .ic { font-size: .875rem; color: var(--muted); opacity: 1; }
  .ficha-head.fh > .datos-tabla .celda .ic .ico { width: 15px; height: 15px; }
  .ficha-head.fh > .datos-tabla .celda .k { font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
  .ficha-head.fh > .datos-tabla .celda .v { font-size: .875rem; font-weight: 600; max-width: 340px; }
}

/* ---------- Planes y cobros ---------- */
.planes-lista, .cobros-lista { display: flex; flex-direction: column; }
.plan-item, .cobro-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan-item:last-child, .cobro-item:last-child { border-bottom: 0; }
.plan-item.inactivo { opacity: .55; }
.plan-tx, .cobro-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cobro-tx b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-precio, .cobro-monto { font-family: var(--titulo); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cobro-acc { display: flex; gap: 6px; }
.cobro-acc:empty { display: none; }
.admin-plan { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.plan-estado { margin-bottom: 10px; }
.plan-instr { margin-top: 8px; font-size: .875rem; }
.aviso-plan.vencido p:first-child { color: var(--warn); }
.historial-barra .seg a.btn { border-radius: 0; border: 0; border-right: 1px solid var(--line); padding: 6px 12px; text-decoration: none; }
.historial-barra .seg a.btn:last-child { border-right: 0; }
.historial-barra .seg a[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 700px) {
  .cobro-item { flex-wrap: wrap; }
  .cobro-acc { width: 100%; justify-content: flex-end; }
}
.equipo-lista .plan-item { flex-wrap: wrap; }
.equipo-lista .plan-item select { width: auto; flex: 0 0 auto; }
@media (max-width: 700px) {
  .equipo-lista .plan-tx { flex: 1 1 100%; }
  .equipo-lista .plan-item select { flex: 1 1 auto; }
}

/* ---------- Clínicas: lista y ficha ---------- */
.admin-cl-fila .cuerpo { display: flex; flex-direction: column; gap: 3px; }
.admin-cl-fila .admin-plan { margin-top: 2px; }
.admin-cl-fila.inactivo { opacity: .6; }
.cl-datos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cl-acciones { margin-top: 14px; flex-wrap: wrap; }
.admin-u .u-activar { margin-left: auto; flex: 0 0 auto; }
.admin-seg a small { opacity: .7; font-weight: 500; }
@media (max-width: 700px) { .fd-datos.cl-datos { grid-template-columns: 1fr 1fr; gap: 8px 12px; } .cl-datos dd { font-size: .9375rem; } }

/* ---------- Marca ---------- */
.marca-edit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.marca-prev { display: flex; flex-direction: column; gap: 10px; }
.marca-login { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); text-align: center; }
.marca-login img { width: 56px; height: 56px; object-fit: contain; }
.marca-login b { font-family: var(--titulo); font-size: 1.25rem; }
.marca-login small { color: var(--muted); }
.marca-pie { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: #fff; color: #555; border-radius: 6px; font-size: .75rem; }
.marca-pie img { width: 16px; height: 16px; object-fit: contain; }
.marca-pie b { color: var(--accent); }
@media (max-width: 700px) { .marca-edit { grid-template-columns: 1fr; } }
.nf-buscar-cli { position: relative; margin-bottom: 12px; }
.nf-buscar-cli .ac-lista { position: absolute; left: 0; right: 0; top: 42px; z-index: 20; max-height: 320px; overflow: auto; }
.nf-buscar-cli > small { display: block; margin-top: 4px; }
.nf-cli-nom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- casillas de selección múltiple (formularios): grilla alineada con check propio ---------- */
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.casilla { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font-size: .875rem; font-weight: 400; line-height: 1.35; cursor: pointer; transition: border-color .15s, background-color .15s; }
.casilla:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.casilla input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--line-campo); border-radius: 5px; background: var(--panel) center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.casilla input[type="checkbox"]:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.casilla input[type="checkbox"]:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
/* Opciones de una sola respuesta (radios de los formularios clínicos): mismo lenguaje que las casillas */
.capas.opciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding-top: 0; font-size: .875rem; }
.capas.opciones .opcion { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font-size: .875rem; font-weight: 400; line-height: 1.3; cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s; }
.capas.opciones .opcion:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.capas.opciones .opcion input[type="radio"], .capas.pildoras input[type="radio"], .pdf-graf input[type="radio"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; box-sizing: border-box; width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 1.5px solid var(--line-campo); border-radius: 50%; background: var(--panel); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.capas.opciones .opcion input[type="radio"]:checked, .capas.pildoras input[type="radio"]:checked, .pdf-graf input[type="radio"]:checked { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 9px var(--accent); }
.capas.opciones .opcion input[type="radio"]:focus-visible, .capas.pildoras input[type="radio"]:focus-visible, .pdf-graf input[type="radio"]:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.capas.opciones .opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.capas.opciones .opcion:has(input:checked) input[type="radio"], .capas.pildoras label:has(input:checked) input[type="radio"] { box-shadow: inset 0 0 0 4px var(--accent-soft), inset 0 0 0 9px var(--accent); }
.capas.opciones .opcion:has(input:checked) span { color: var(--accent-ink); font-weight: 500; }
.capas.opciones .opcion:has(input:disabled) { cursor: default; }
.capas.opciones .opcion:has(input:disabled):hover { border-color: var(--line); }
.capas.opciones .opcion:has(input:disabled:not(:checked)) { opacity: .6; }
@media (max-width: 640px) { .capas.opciones .opcion { padding: 9px 12px 9px 10px; } }
.casilla:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.casilla:has(input:checked) span { color: var(--accent-ink); font-weight: 500; }
.casilla:has(input:disabled) { cursor: default; }
.casilla:has(input:disabled):hover { border-color: var(--line); }
.casilla:has(input:disabled:not(:checked)) { opacity: .6; }
.casilla input[type="checkbox"]:disabled { cursor: default; }
@media (max-width: 640px) {
  .casillas { grid-template-columns: 1fr; gap: 6px; }
  .casilla { padding: 10px 12px; font-size: .875rem; }
}
@media (min-width: 641px) and (max-width: 1000px) { .casillas { grid-template-columns: repeat(2, 1fr); } }

/* tipo de diagnóstico obligatorio (sección K del 033) */
.obligatorio { color: var(--warn); font-weight: 700; }
.f033.filas select[required]:has(option[value=""]:checked) { color: var(--muted); }
.f033.filas select[data-k="tipo"] { min-width: 124px; }
.f033.filas select.falta { border-color: var(--warn); background-color: var(--warn-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

/* ---------- notificaciones ---------- */
.sidebar a[hidden] { display: none; }
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: var(--sobre-color); font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.contador[hidden] { display: none; }
.sidebar a .contador { margin-left: auto; }
.tabbar a { position: relative; }
.tabbar a .contador { position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; line-height: 17px; font-size: .66rem; padding: 0 4px; box-shadow: 0 0 0 2px var(--panel); }
.sidebar a.nav-actualizar { background: var(--amber-soft); color: var(--amber); }

.notif-config { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.notif-lista { padding: 6px 0; margin-bottom: 16px; }
.notif-lista .vacio p:first-child { font-size: 2rem; margin: 0; }
.notif-grupo { margin: 0; padding: 12px 18px 6px; font-size: .75rem; color: var(--muted); font-weight: 600; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; color: var(--fg); text-decoration: none; border-top: 1px solid var(--line); }
.notif-grupo + .notif { border-top: 0; }
.notif:hover { background: var(--panel-2); text-decoration: none; }
.notif-ic { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 1rem; }
.notif.t-paciente_llego .notif-ic { background: var(--amber-soft); color: var(--amber); }
.notif.t-turno_cancelado .notif-ic { background: var(--warn-soft); color: var(--warn); }
.notif.t-turno_reprogramado .notif-ic { background: var(--violet-soft); color: var(--violet); }
.notif-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-tx b { font-weight: 600; }
.notif-tx span { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.notif:not(.nueva) .notif-tx b { font-weight: 500; color: var(--muted); }
.notif.nueva { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.notif.nueva .notif-tx span { color: var(--fg); }
.notif-cuando { flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.notif-cuando .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.notif-mas { display: block; margin: 10px auto 6px; }
.notif-disp { display: flex; gap: 14px; align-items: flex-start; }
.notif-disp-ic { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.25rem; }
.notif-disp.ok .notif-disp-ic { background: var(--ok-soft); color: var(--ok); }
.notif-disp.alerta .notif-disp-ic { background: var(--amber-soft); color: var(--amber); }
.notif-disp-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.notif-disp-tx small { color: var(--muted); line-height: 1.4; }
.notif-disp-tx .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.notif-pref h2 { margin-top: 0; }
.notif-pref .casillas { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .notif-config { grid-template-columns: 1fr; gap: 12px; }
  .notif { padding: 12px 14px; }
  .notif-grupo { padding: 12px 14px 6px; }
}

/* ---------- versión nueva y sin conexión ---------- */
.aviso-actualizar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 210; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--fg); color: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: subir-aviso .25s ease-out; }
.aviso-actualizar .tx { display: flex; flex-direction: column; line-height: 1.25; }
.aviso-actualizar .tx small { opacity: .75; }
.aviso-actualizar .cerrar { background: transparent; color: inherit; border-color: transparent; opacity: .7; }
.aviso-actualizar.trabajando .ico-wrap, .aviso-actualizar.trabajando > span:first-child { animation: girar 1s linear infinite; }
@keyframes subir-aviso { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes girar { to { transform: rotate(360deg); } }
.aviso-conexion { position: fixed; top: env(safe-area-inset-top); left: 50%; transform: translateX(-50%); z-index: 220; width: max-content; max-width: calc(100vw - 32px); padding: 4px 14px; border-radius: 0 0 10px 10px; background: var(--amber-soft); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); border-top: 0; font-size: .8125rem; font-weight: 600; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
@media (max-width: 860px) {
  .aviso-actualizar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .aviso-actualizar .tx small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aviso-actualizar, .aviso-actualizar.trabajando > span:first-child { animation: none; } }

/* ---------- resultado del pago con tarjeta ---------- */
.pago-resultado { max-width: 560px; margin: 0 auto; }
.pago-ok { text-align: center; padding: 18px 8px 8px; }
.pago-ok h2 { margin: 10px 0 6px; justify-content: center; text-align: center; }
.pago-ok p { margin: 6px 0; }
.pago-ok .btn { margin-top: 14px; }
.pago-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); font-size: 1.5rem; font-weight: 700; }
.pago-ic.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- Mis pagos ---------- */
.pagos-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.pagos-resumen .card { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pagos-resumen .card > span { font-size: .75rem; }
.pagos-resumen .card b { font-size: 1.25rem; font-family: var(--titulo); }
.pagos-resumen .card small { color: var(--muted); }
.txt-err { color: var(--warn); }
.pagos-pend { border-left: 4px solid var(--sol); }
.pago-fila { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pago-fila:first-child { border-top: 0; }
.pago-ic-fila { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); }
.pago-ic-fila.ok { background: var(--ok-soft); color: var(--ok); }
.pago-ic-fila.err { background: var(--panel-2); color: var(--muted); }
.pago-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pago-tx b { font-weight: 600; }
.pago-tx b .muted { font-weight: 400; }
.pago-tx small { color: var(--muted); line-height: 1.35; }
.pago-monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagos-intentos summary { cursor: pointer; padding: 2px 0; }
.pagos-intentos[open] summary { margin-bottom: 8px; }
@media (max-width: 860px) {
  .pagos-resumen { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pagos-resumen .card:last-child { grid-column: 1 / -1; }
  .pago-fila { grid-template-columns: auto 1fr auto; gap: 4px 10px; }
  .pago-fila .pago-acc { grid-column: 2 / -1; }
  .pago-fila .pago-acc:empty { display: none; }
}

/* ---------- superficies del navegador y números (pasada de diseño) ---------- */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--fg); }
input, textarea, [contenteditable] { caret-color: var(--accent); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
html { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
select:hover, input:hover:not(:focus):not([type="checkbox"]):not([type="radio"]), textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--fg) 45%, var(--line-campo)); }
.hora, .num, td.num, .monto, .pago-monto, .cobro-monto, .prom, .tot, .notif-cuando, .stat b, .indices-cpo b, table td, .mono { font-variant-numeric: tabular-nums; }

/* ---------- grupos del menú lateral (acordeón) ---------- */
.nav-grupo { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-grupo[hidden] { display: none; }
.nav-grupo > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px 5px; border-radius: 8px; cursor: pointer; user-select: none;
  font-size: .75rem; font-weight: 600; color: var(--muted); }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease-out; }
.nav-grupo:not([open]) > summary::after { transform: rotate(-45deg); }
.nav-grupo > summary:hover { color: var(--fg); background: var(--panel-2); }
.nav-grupo > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* el grupo cerrado avisa si la pantalla actual está adentro */
.nav-grupo:not([open]):has(a.activo) > summary { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .nav-grupo > summary::after { transition: none; } }

/* ---------- clínica en solo lectura por plan vencido ---------- */
.banda-solo-lectura { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: .875rem; text-align: center; }
.banda-solo-lectura small { color: var(--warn); }
body.solo-lectura-plan .app { min-height: calc(100vh - 44px); }

/* ---------- Administración → Estado ---------- */
.estado-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.estado-grid .card { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.estado-grid .card b { font-family: var(--titulo); font-size: 1.25rem; }
.estado-grid .card small { color: var(--muted); }
.estado-grid .card.alerta { border-color: var(--warn); background: var(--warn-soft); }
.estado-fila { display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.estado-fila:first-child { border-top: 0; }
.estado-fila small { grid-column: 1 / -1; }
.notif.t-sistema .notif-ic { background: var(--warn-soft); color: var(--warn); }

/* ---------- agenda con varios odontólogos ---------- */
.ag-profs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.ag-profs button { padding: 5px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 500; gap: 6px; }
.ag-profs button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.ag-profs .ag-colores { margin-left: auto; padding: 5px 9px; }
.prof-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--prof, var(--muted)); flex-shrink: 0; }
.prof-ini { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; margin-right: 5px; border-radius: 5px; background: var(--prof, var(--muted)); color: #fff; font-size: .6875rem; font-style: normal; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.turno .prof-ini { min-width: 20px; height: 16px; margin-right: 4px; }
.ag-colores-lista { display: flex; flex-direction: column; gap: 8px; }
.ag-colores-lista label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .875rem; color: var(--fg); }
.ag-colores-lista input[type=color] { width: 34px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer; }
@media (max-width: 860px) {
  .ag-profs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding-bottom: 2px; }
  .ag-profs button { flex-shrink: 0; }
}
.turno.pide-cambio { box-shadow: inset 0 0 0 2px var(--warn); }

/* ---------- Configuración → Reservas ---------- */
.reservas-enlace { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.reservas-enlace img { border-radius: 8px; background: #fff; padding: 6px; flex-shrink: 0; }
.reservas-enlace > div { min-width: 0; flex: 1; }
.reservas-url { display: flex; gap: 8px; margin: 6px 0 4px; }
.reservas-url input { font-family: var(--mono); font-size: .8125rem; }
@media (max-width: 560px) { .reservas-enlace { flex-direction: column; align-items: center; text-align: center; } .reservas-enlace .acciones { justify-content: center; } }
.badge.en-linea { background: var(--violet-soft); color: var(--violet); border-color: transparent; }

/* ---------- presupuesto: tratamientos y calendario de cuotas ---------- */
.items-pres td { padding: 6px; }
.items-pres input { padding: 6px 8px; }
.cuotas-cal tr.cuota-vencida td { background: color-mix(in srgb, var(--warn-soft) 60%, transparent); }
.cuotas-cal tr.cuota-pagada td { color: var(--muted); }

/* ---------- Reportes ---------- */
.rep-periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rep-periodo .ag-profs { margin: 0; }
.rep-fechas { display: flex; align-items: center; gap: 6px; }
.rep-fechas input { width: auto; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rep-kpis .card { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.rep-kpis .card > span { font-size: .8125rem; }
.rep-kpis .card b { font-family: var(--titulo); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rep-kpis .card small { color: var(--muted); }
.rep-kpis .card.alerta { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rep-kpis .card.alerta b { color: var(--warn); }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.rep-grid .card { margin: 0; }
.rep-barras { display: flex; flex-direction: column; gap: 7px; }
.rep-barra { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: .875rem; }
.rep-e { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-b { height: 12px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.rep-b i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rep-barras.suave .rep-b i { background: color-mix(in srgb, var(--accent) 55%, var(--panel-2)); }
.rep-v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.rep-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-cobranza h2 { display: flex; align-items: center; gap: 10px; }
.rep-cobranza h2 button { margin-left: auto; }
.rep-cobranza tr.cuota-vencida td { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
@media (max-width: 860px) { .rep-grid { grid-template-columns: 1fr; } .rep-kpis { grid-template-columns: 1fr 1fr; } }

/* ---------- Socios y pacientes compartidos ---------- */
.socios-codigo { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.socios-codigo > div { display: flex; flex-direction: column; gap: 2px; }
.socios-codigo b { font-size: 1.5rem; letter-spacing: .04em; color: var(--accent-ink); }
.socios-pend { border-color: color-mix(in srgb, var(--violet) 45%, var(--line)); }
.socios-elegidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.socios-elegidos .chip-dato { display: inline-flex; align-items: center; gap: 4px; }
.badge.socio { background: var(--violet-soft); color: var(--violet); border-color: transparent; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.lista-compartidos { border-left: 0; background: color-mix(in srgb, var(--violet-soft) 35%, var(--panel)); }
.registro.compartido .cuerpo b { color: var(--violet); }
.compartido-banda { margin: -4px 0 14px; padding: 9px 14px; border-radius: var(--radius); background: var(--violet-soft); color: var(--violet); font-size: .875rem; }
.compartido-banda a { color: inherit; text-decoration: underline; }
.comp-aten { border-top: 1px solid var(--line); padding: 10px 0; }
.comp-aten:first-of-type { border-top: 0; }
.comp-aten summary { cursor: pointer; }
.comp-evol { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.comp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.comp-fotos a { display: flex; flex-direction: column; gap: 4px; color: var(--fg); text-decoration: none; }
.comp-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #000; }
.comp-fotos small { color: var(--muted); }

/* ---------- cambios guardados sin conexión ---------- */
.aviso-cola { position: fixed; left: 16px; bottom: 18px; z-index: 205; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); color: var(--amber); font-weight: 600; font-size: .875rem; box-shadow: var(--shadow); }
.aviso-cola.con-error { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.cola-lista { display: flex; flex-direction: column; gap: 10px; }
.cola-item { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cola-item button { align-self: flex-start; margin-top: 4px; }
@media (max-width: 860px) { .aviso-cola { bottom: calc(78px + env(safe-area-inset-bottom)); left: 12px; } }
.login-ayuda { display: block; margin-top: 10px; text-align: center; font-size: .875rem; }
@media (max-width: 560px) {
  /* presupuesto en el teléfono: más lugar para el nombre del tratamiento y el estado de cada cuota */
  .items-pres th:nth-child(4), .items-pres td:nth-child(4) { display: none; }
  .items-pres th:nth-child(2), .items-pres td:nth-child(2) { width: 58px !important; }
  .items-pres th:nth-child(3), .items-pres td:nth-child(3) { width: 92px !important; }
  .cuotas-cal th:nth-child(4), .cuotas-cal td:nth-child(4) { display: none; }
  .cuotas-cal th, .cuotas-cal td { padding: 8px 6px; }
}

/* texto en mayúsculas sin afectar el ejemplo del campo */
.mayus { text-transform: uppercase; }
.mayus::placeholder { text-transform: none; }