/* Firma caligráfica: Pinyon Script (SIL OFL, assets/fuentes/OFL-PinyonScript.txt), alojada en el propio sitio */
@font-face { font-family: "Pinyon Script"; src: url("../assets/fuentes/PinyonScript-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

/* Layout: cabecera institucional azul marino + columna única de formulario clínico, ancho 860px */
:root {
  --bg: #EEF2F6;
  --surface: #FFFFFF;
  --surface-2: #F6F8FB;
  --ink: #14202B;
  --muted: #5A6B7A;
  --line: #D3DCE5;
  --accent: #1F4E79;
  --accent-ink: #FFFFFF;
  --accent-2: #1A9AD6;
  --ems: #D7262E;
  --ok: #1E7F4F;
  --ok-bg: #E3F3EA;
  --bad: #B3261E;
  --bad-bg: #FBE7E5;
  --warn: #9A6200;
  --head-bg: #16304B;
  --head-ink: #EAF1F8;
  --head-muted: #A9BCCF;

  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --r: 10px;
  --sombra: 0 1px 2px rgba(20, 32, 43, .06), 0 6px 18px rgba(20, 32, 43, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D141B; --surface: #15202A; --surface-2: #1A2733; --ink: #E5ECF2; --muted: #93A4B3; --line: #2A3A48;
    --accent: #7DB3E3; --accent-ink: #0B1520; --accent-2: #4FB8E8; --ems: #FF5A60;
    --ok: #5CCB93; --ok-bg: #12301F; --bad: #FF7B70; --bad-bg: #3A1714; --warn: #E7B04A;
    --head-bg: #0A1A2A; --head-ink: #E5ECF2; --head-muted: #8EA4BA;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D141B; --surface: #15202A; --surface-2: #1A2733; --ink: #E5ECF2; --muted: #93A4B3; --line: #2A3A48;
  --accent: #7DB3E3; --accent-ink: #0B1520; --accent-2: #4FB8E8; --ems: #FF5A60;
  --ok: #5CCB93; --ok-bg: #12301F; --bad: #FF7B70; --bad-bg: #3A1714; --warn: #E7B04A;
  --head-bg: #0A1A2A; --head-ink: #E5ECF2; --head-muted: #8EA4BA;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* ── Cabecera ── */
.cabecera { background: var(--head-bg); color: var(--head-ink); border-bottom: 4px solid var(--ems); }
/* Como app de inicio en iPhone la barra de estado es translúcida: la cabecera se extiende por debajo */
.cabecera { padding-top: env(safe-area-inset-top, 0px); }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.pie { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
.cabecera-in, .pasos { max-width: 860px; margin: 0 auto; padding-inline: 16px; }
.cabecera-in { display: flex; align-items: center; gap: 14px; padding-block: 18px 12px; }
.cabecera-logo { width: 52px; height: 52px; flex: none; }
.cabecera-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cabecera-org { font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--head-muted); }
.cabecera h1 { font-size: clamp(22px, 5vw, 30px); font-weight: 800; font-stretch: 85%; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1; }
.facciones-tag { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--head-muted); border: 1px solid currentColor; border-radius: 4px; padding: 6px 8px; white-space: nowrap; }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-block: 0 14px; margin-block: 0; }
.pasos li { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-body); color: var(--head-muted); padding-top: 10px; border-top: 3px solid rgba(255,255,255,.14); }
.pasos li span { font-family: var(--f-mono); font-size: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; flex: none; }
.pasos li.activo { color: var(--head-ink); border-top-color: var(--accent-2); }
.pasos li.activo span { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.pasos li.hecho { color: var(--head-ink); border-top-color: rgba(255,255,255,.45); }

/* ── Contenedor ── */
.contenedor { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; display: block; }
.vista { display: flex; flex-direction: column; gap: 18px; }
#form-datos { display: flex; flex-direction: column; gap: 18px; }

.bloque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
fieldset.bloque { display: block; }
fieldset.bloque > * + * { margin-top: 16px; }
legend { font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 0 6px; margin-left: -6px; }
.titulo-bloque { font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.titulo-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.etiqueta { font-weight: 600; font-size: 13px; color: var(--ink); }
.etiqueta small { font-weight: 400; color: var(--muted); }
input:not([type=radio]), select, textarea, .dato-fijo {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 12px; min-height: 42px;
}
textarea { resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input[aria-invalid], select[aria-invalid] { border-color: var(--bad); background: var(--bad-bg); }
.dato-fijo { display: flex; align-items: center; font-family: var(--f-mono); font-weight: 600; color: var(--accent); }
::placeholder { color: var(--muted); opacity: .75; font-style: italic; }
.recordado { margin: 0; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ayuda { margin: 0; font-size: 13px; color: var(--muted); }
.error { margin: 0; padding: 10px 14px; border-radius: 7px; background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.aviso { margin: 0; padding: 10px 14px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* Segmentos (radios con estilo) */
.segmentos { display: grid; gap: 8px; }
.segmentos.faccion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmentos.numeros { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.segmentos.res { grid-template-columns: repeat(2, minmax(0, 160px)); }
.segmentos label { position: relative; cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  min-height: 46px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
  font-family: var(--f-mono); font-weight: 600; transition: background .12s, border-color .12s;
}
.segmentos.faccion span { padding-block: 12px; gap: 4px; }
.segmentos span img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 2px; }
.segmentos span b { font: 800 19px/1 var(--f-display); font-stretch: 85%; letter-spacing: .04em; }
.segmentos span small { font: 500 11px/1.2 var(--f-body); color: var(--muted); }
.segmentos label:hover span { border-color: var(--muted); }
.segmentos input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.segmentos input:checked + span small { color: inherit; opacity: .8; }
.segmentos input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* Botones */
.acciones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.btn { border: 1px solid transparent; border-radius: 8px; padding: 11px 20px; min-height: 44px; font-weight: 700; cursor: pointer; transition: filter .12s, background .12s; }
.btn-primario { background: var(--accent); color: var(--accent-ink); }
.btn-primario:hover { filter: brightness(1.1); }
.btn-primario:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-sec { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-sec:hover { border-color: var(--muted); }
.btn-sec:disabled { opacity: .45; cursor: not-allowed; }
.btn-peligro { background: var(--bad); color: #fff; }
.btn-peq { padding: 6px 12px; min-height: 34px; font-size: 13px; }
.btn-texto { background: none; border: 0; padding: 4px 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Examen ── */
.examen-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.examen-agente { font-weight: 600; min-width: 0; display: flex; align-items: center; gap: 10px; }
.examen-agente img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.examen-agente small { color: var(--muted); font-weight: 400; }
.progreso-txt { font-family: var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.progreso-txt b { color: var(--ink); font-size: 20px; }
.barra { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.barra-relleno { height: 100%; width: 0; background: var(--accent-2); transition: width .25s ease; }
.pregunta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); }
.chip { align-self: flex-start; font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
.pregunta h2 { font-family: var(--f-body); font-size: clamp(18px, 3.4vw, 21px); font-weight: 600; line-height: 1.4; }
.opciones { display: flex; flex-direction: column; gap: 10px; }
.opcion { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s; }
.opcion:hover { border-color: var(--accent-2); }
.opcion .letra { font: 600 14px/32px var(--f-mono); width: 32px; height: 32px; text-align: center; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.opcion .txt { padding-top: 5px; }
.opcion[aria-checked="true"] { border-color: var(--accent); background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); }
.opcion[aria-checked="true"] .letra { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.teclado { font-size: 12px; }
.acciones-examen { justify-content: space-between; }
.cancelar { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 8px; }
.confirmar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--muted); }

/* ── Resultado ── */
.veredicto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--ok); border-radius: var(--r); padding: 22px; box-shadow: var(--sombra); }
.veredicto.no { border-left-color: var(--bad); }
.veredicto-num { font: 800 64px/1 var(--f-display); font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--ok); }
.veredicto.no .veredicto-num { color: var(--bad); }
.veredicto-num small { font-size: 28px; margin-left: 2px; }
.veredicto-txt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.veredicto-txt p { margin: 0; color: var(--muted); }
.pill { font: 700 13px/1 var(--f-body); letter-spacing: .1em; padding: 7px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }
.veredicto.no .pill { background: var(--bad-bg); color: var(--bad); }
.motivos { margin: 0; padding-left: 18px; color: var(--bad); font-size: 14px; }
.motivos:empty { display: none; }

.competencias { display: flex; flex-direction: column; gap: 12px; }
.comp { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 6px 12px; align-items: center; }
.comp-nombre { font-weight: 600; font-size: 14px; }
.comp-nombre small { color: var(--muted); font-weight: 400; }
.comp-pct { font: 600 14px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.comp-barra { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.comp-barra i { position: absolute; inset: 0 auto 0 0; background: var(--ok); border-radius: 4px; }
.comp-barra i.medio { background: var(--warn); }
.comp-barra i.bajo { background: var(--bad); }
.comp-barra::after { content: ""; position: absolute; top: 0; bottom: 0; left: 70%; width: 2px; background: var(--surface); }
.resultado-final { margin-top: 4px; }

.revision summary { cursor: pointer; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.revision ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.revision li span { display: block; color: var(--muted); }
.revision .p0 { color: var(--bad); font-weight: 600; }
.revision .p3 { color: var(--ok); }

/* ── Certificado ── */
.acciones-cert { justify-content: flex-start; }
.hoja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: var(--sombra); }
.hoja canvas { display: block; width: 100%; max-width: 100%; height: auto; background: #fff; border-radius: 4px; }

.pie { max-width: 860px; margin: 0 auto; padding: 0 16px 30px; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 620px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .segmentos.numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facciones-tag:not(.enlace-cab) { display: none; }
  .enlace-cab { font-size: 11px; padding: 6px 7px; letter-spacing: .04em; }
  .pasos li { font-size: 0; gap: 0; justify-content: center; }
  .veredicto { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bloque, .pregunta { padding: 16px; }
  .acciones .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Acceso evaluadores (admin.html) ── */
.enlace-cab { text-decoration: none; color: var(--head-muted); }
.enlace-cab:hover { color: var(--head-ink); }
.acceso { max-width: 460px; margin: 20px auto 0; width: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px; }
.nota { display: inline-block; font: 700 12px/1 var(--f-body); letter-spacing: .04em; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.nota.n3 { background: var(--ok-bg); color: var(--ok); }
.nota.n2 { background: var(--surface-2); color: var(--accent); border: 1px solid var(--line); }
.nota.n1 { background: var(--surface-2); color: var(--warn); border: 1px solid var(--line); }
.nota.n0 { background: var(--bad-bg); color: var(--bad); }
.glosario summary { cursor: pointer; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.glosario-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.glosario-grupo h3 { font: 700 14px/1.2 var(--f-body); margin-bottom: 8px; }
.glosario-grupo dl { display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.glosario-grupo dt { font-family: var(--f-mono); font-weight: 600; color: var(--accent); font-size: 13px; }
.glosario-grupo dd { margin: 0; color: var(--ink); }
.filtros { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px 16px; }
.lista-preguntas { display: flex; flex-direction: column; gap: 14px; }
.item-pregunta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.item-cab { display: flex; align-items: center; gap: 10px; }
.item-num { font: 600 13px/1 var(--f-mono); color: var(--muted); min-width: 26px; }
.item-pregunta h3 { font: 600 17px/1.4 var(--f-body); }
.item-opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item-opciones .op { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; padding: 8px 10px; border-radius: 8px; }
.item-opciones .op.p3 { background: var(--ok-bg); }
.item-opciones .op.p0 { background: var(--bad-bg); }
.item-opciones .op .nota { justify-self: start; }
.pie a { color: var(--muted); }
@media (max-width: 620px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
  .item-opciones .op { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ── Parte médico de lesiones (parte.html) ── */
.cabecera-parte { border-bottom-color: var(--ems); }
.pasos-2 { grid-template-columns: repeat(2, 1fr); }
.intro-parte { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ems); border-radius: var(--r); padding: 14px 18px; }
.intro-parte p { margin: 0; flex: 1 1 360px; min-width: 0; color: var(--muted); font-size: 14px; }
.intro-parte b { color: var(--ink); }
.segmentos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmentos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmentos.tres span, .segmentos.cuatro span { font-family: var(--f-body); font-size: 14px; }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-media { max-width: 320px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; transition: background .12s, border-color .12s; }
.chips span::before { content: "+"; font-weight: 700; color: var(--muted); }
.chips label:hover span { border-color: var(--muted); }
.chips input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chips input:checked + span::before { content: "✓"; color: inherit; }
.chips input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.lista-lesiones { display: flex; flex-direction: column; gap: 10px; }
.lesion { display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) 40px; grid-template-areas: "n z t g x" "n d d d x"; gap: 8px 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.lesion-num { grid-area: n; width: 28px; height: 28px; border-radius: 50%; background: var(--ems); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--f-mono); align-self: start; margin-top: 7px; }
.lesion .l-zona { grid-area: z; } .lesion .l-tipo { grid-area: t; } .lesion .l-grav { grid-area: g; } .lesion .l-desc { grid-area: d; }
.lesion select, .lesion input { background: var(--surface); }
.btn-quitar { grid-area: x; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 15px; align-self: start; margin-top: 2px; }
.btn-quitar:hover { color: var(--bad); border-color: var(--bad); }
.fila-accion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.bloque .titulo-fila .etiqueta { margin: 0; }
@media (max-width: 720px) {
  .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesion { grid-template-columns: 30px minmax(0, 1fr) 40px; grid-template-areas: "n z x" "n t x" "n g x" "n d x"; }
  .segmentos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .segmentos.tres { grid-template-columns: minmax(0, 1fr); }
  .campo-media { max-width: none; }
}

/* ── Portal de servicios (index.html) ── */
.portal { display: flex; flex-direction: column; gap: 26px; }
.portal-intro { margin: 0; color: var(--muted); font-size: 16px; max-width: 62ch; }
.areas { display: flex; flex-direction: column; gap: 28px; }
.area { display: flex; flex-direction: column; gap: 12px; }
.area-titulo { font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.servicio { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.servicio:hover { border-color: var(--accent-2); box-shadow: var(--sombra); transform: translateY(-1px); }
a.servicio:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.servicio-icono { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.servicio-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.servicio-nombre { font: 700 18px/1.25 var(--f-display); font-stretch: 92%; }
.servicio-desc { font-size: 14px; color: var(--muted); }
.servicio-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.servicio-doc { font: 600 12px/1 var(--f-mono); color: var(--muted); }
.servicio-ir { font-weight: 700; font-size: 14px; color: var(--accent); }
.servicio-pronto { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.servicio.es-pronto { background: var(--surface-2); cursor: default; }
.servicio.es-pronto .servicio-icono { filter: grayscale(1); opacity: .6; }
.servicio.es-pronto .servicio-nombre { color: var(--muted); }

/* ── Páginas de servicio (motor común) ── */
.pestanas { max-width: 860px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; }
.pestanas button { background: none; border: 0; border-top: 3px solid rgba(255,255,255,.14); color: var(--head-muted); font: 600 14px/1 var(--f-body); padding: 12px 14px 14px; cursor: pointer; flex: 1; text-align: left; }
.pestanas button.activo { color: var(--head-ink); border-top-color: var(--accent-2); }
.pestanas button:hover { color: var(--head-ink); }
.pestanas button[hidden] { display: none; }
.seg-texto span { font-family: var(--f-body); font-size: 14px; font-weight: 600; }
.hojas { display: flex; flex-direction: column; gap: 16px; }
.subir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.subir-btn { cursor: pointer; display: inline-flex; align-items: center; }
.pegar { display: grid; place-items: center; min-height: 120px; padding: 14px; border: 2px dashed var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.pegar:hover { border-color: var(--muted); }
.pegar:focus-visible, .pegar:focus { outline: none; border-color: var(--accent-2); border-style: solid; background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.pegar.arrastrando { border-color: var(--accent-2); background: var(--surface); }
.pegar.con-imagen { border-style: solid; min-height: 0; padding: 8px; }
.pegar-txt { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; max-width: 46ch; }
.pegar-txt b { color: var(--ink); font-size: 15px; }
.pegar-txt kbd { font: 600 11px/1 var(--f-mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); }
.pegar-vista { max-width: 100%; max-height: 260px; border-radius: 6px; object-fit: contain; }
.lesion.lesion-3 { grid-template-columns: 30px minmax(0, 1.2fr) minmax(0, 1.2fr) 40px; grid-template-areas: "n z t x" "n d d x"; }
.lesion-3 [data-k="zona"] { grid-area: z; } .lesion-3 [data-k="tipo"] { grid-area: t; } .lesion-3 [data-k="desc"] { grid-area: d; }
.lesion.lesion-3.lesion-marca { grid-template-areas: "n z t x" "n d d x" "n m m x"; }
.lesion-destacar { grid-area: m; font-weight: 600; }
.lesion.destacada { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--surface-2)); }
.lesion.destacada .lesion-num { background: var(--bad); }
.lesion.destacada .lesion-destacar { color: var(--bad); }
.lista-equipo { display: flex; flex-direction: column; gap: 10px; }
.miembro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto 40px; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.miembro input:not([type=checkbox]), .miembro select { background: var(--surface); }
.miembro .check { font-size: 13px; white-space: nowrap; }
.mensajes { gap: 12px; }
.mensaje { display: flex; flex-direction: column; gap: 6px; }
.mensaje + .mensaje { margin-top: 10px; }
.mensaje-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mensaje-fila code, .pc-cmd code { font: 500 13px/1.5 var(--f-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; white-space: pre-wrap; word-break: break-word; min-width: 0; }
.pc-copiar { border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 700 12px/1 var(--f-body); padding: 9px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.pc-copiar:hover { border-color: var(--accent); }
.pc-copiar.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

/* Protocolo IC */
.protocolo { gap: 14px; }
.pc-intro { margin: 0; color: var(--muted); font-size: 14px; }
.pc-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; counter-reset: none; }
.pc-etapa h3 { font: 700 17px/1.3 var(--f-display); display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pc-etapa h3 span { font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ems); }
.pc-etapa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pc-cmd code b { color: var(--accent); }
.pc-nota { font-size: 14px; color: var(--muted); padding: 8px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.pc-dice { font-size: 14px; font-style: italic; padding: 8px 12px; border-left: 3px solid var(--accent-2); }
.pc-dice span { display: block; font: 700 11px/1.4 var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.pc-opcion { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pc-opcion-tit { font-weight: 700; font-size: 14px; color: var(--accent); }
@media (max-width: 720px) {
  .lesion.lesion-3 { grid-template-columns: 30px minmax(0, 1fr) 40px; grid-template-areas: "n z x" "n t x" "n d x"; }
  .lesion.lesion-3.lesion-marca { grid-template-areas: "n z x" "n t x" "n d x" "n m x"; }
  .miembro { grid-template-columns: minmax(0, 1fr) 40px; }
  .miembro [data-k="nombre"] { grid-column: 1; } .miembro select { grid-column: 1; }
  .miembro .check { grid-column: 1; }
  .miembro .btn-quitar { grid-column: 2; grid-row: 1; }
  .segmentos.seg-texto { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .segmentos.seg-texto { grid-template-columns: minmax(0, 1fr) !important; }
  .pc-copiar { padding: 8px 8px; font-size: 11px; }
  .mensaje-fila code, .pc-cmd code { font-size: 12px; padding: 8px 9px; }
}
.protocolo-plegable summary { cursor: pointer; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.protocolo-plegable[open] summary { margin-bottom: 6px; }

/* ── Rellenado rápido: casos frecuentes, frases y «Otro» ── */
.casos { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--sombra); }
.casos-cab h2 { margin: 0 0 4px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.casos-cab p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.casos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.caso { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .12s, background .12s; }
.caso b { font-size: 14px; }
.caso span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.caso:hover { border-color: var(--accent-2); }
.caso:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.caso.activo { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); }
.casos-aviso { margin: 10px 0 0; min-height: 1em; color: var(--ok); }
.frases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.frase { padding: 5px 10px; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px/1.25 var(--f-body, inherit); cursor: pointer; text-align: left; }
.frase::before { content: "+ "; font-weight: 700; }
.frase:hover { border-color: var(--accent-2); color: var(--ink); }
.frase.activa { border-style: solid; border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); color: var(--ink); }
.frase.activa::before { content: "✓ "; }
.frase:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.otro-texto { margin-top: 8px; }
@media (max-width: 620px) { .casos-lista { grid-template-columns: 1fr 1fr; } .caso span { display: none; } }

/* ══════════ Home · Centro de servicios (estilo C) ══════════
   Cabecera azul con luces de ambulancia y ECG; baldosas de color por servicio; columna con recientes, ficha y comandos */
.aviso-reciente { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); color: var(--ink); font-size: 14px; }
.h-sirena { height: 6px; background: linear-gradient(90deg, #E2323B 0 25%, #FFFFFF 25% 27%, #2F6BFF 27% 52%, #FFFFFF 52% 54%, #E2323B 54% 79%, #FFFFFF 79% 81%, #2F6BFF 81% 100%); background-size: 200% 100%; animation: h-sirena 2.4s linear infinite; }
@keyframes h-sirena { to { background-position: -200% 0; } }
.h-cab { background: var(--head-bg); color: var(--head-ink); }
.h-cab-in { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 16px 4px; }
.h-cab-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.h-logo { width: 52px; height: 52px; flex: none; }
.h-titulo span { display: block; font: 600 12px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--head-muted); }
.h-titulo h1 { font: 800 clamp(24px, 3.2vw, 30px)/1.05 var(--f-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .02em; color: var(--head-ink); }
.h-turno { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.h-reloj { font: 600 16px var(--f-mono); color: var(--head-ink); font-variant-numeric: tabular-nums; }
.h-btn-turno { border: 0; border-radius: 999px; padding: 9px 16px; font: 700 13px var(--f-body); cursor: pointer; background: #2BB673; color: #062314; display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.h-btn-turno::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.h-btn-turno span { font-family: var(--f-mono); }
.h-btn-turno.fuera { background: rgba(255,255,255,.12); color: var(--head-ink); }
.h-btn-turno:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.h-ecg { display: block; width: 100%; height: 44px; }
.h-cuerpo { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 22px 32px; display: grid; gap: 14px; }
.h-saludo { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.h-saludo h2 { font: 700 clamp(21px, 2.6vw, 26px)/1.2 var(--f-display); font-stretch: 90%; color: var(--ink); }
.h-buscar { flex: 1 1 280px; max-width: 440px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--muted); }
.h-buscar:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.h-buscar input { border: 0; outline: 0; background: transparent; padding: 11px 0; font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.h-buscar input::-webkit-search-cancel-button { display: none; }
.h-buscar kbd { font: 600 11px var(--f-mono); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.h-buscar-info { margin: -6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.h-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.h-baldosas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.h-baldosa { --c: #334; position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 18px; min-height: 172px; padding: 16px; border-radius: 14px; background: var(--c); color: #FFFFFF; text-decoration: none; transition: transform .15s, box-shadow .15s, opacity .15s, filter .15s; }
.h-baldosa::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.09); pointer-events: none; }
.h-baldosa:hover, .h-baldosa:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 42%, transparent); outline: none; }
.h-baldosa:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
.h-baldosa.apagada { opacity: .22; filter: grayscale(.6); }
.h-baldosa img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.h-baldosa .h-txt { position: relative; z-index: 1; display: grid; gap: 4px; }
.h-baldosa b { font: 800 21px/1.1 var(--f-display); font-stretch: 85%; }
.h-baldosa .h-txt span { font-size: 13px; line-height: 1.4; opacity: .9; }
.h-area { position: absolute; top: 15px; right: 15px; font: 600 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; text-align: right; max-width: 55%; }
.h-lateral { display: grid; gap: 14px; min-width: 0; }
.h-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.h-panel h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h-enlace { border: 0; background: none; padding: 0; font: 600 12px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.h-vacio { margin: 0; color: var(--muted); font-size: 13.5px; }
.h-reciente { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.h-reciente:first-child { border-top: 0; padding-top: 0; }
.h-reciente i { width: 6px; height: 34px; border-radius: 3px; background: var(--c); }
.h-reciente b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-reciente span { color: var(--muted); font-size: 12px; }
.h-btn-mini { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 7px; padding: 5px 10px; font: 600 12px var(--f-body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.h-btn-mini:hover { border-color: var(--accent-2); }
.h-btn-mini.ok { border-color: var(--ok); color: var(--ok); }
.h-ficha .h-firma { font: 400 36px/1.15 "Pinyon Script", "Edwardian Script ITC", cursive; color: #1D3A8A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ficha #h-ficha-ver b { display: block; font-size: 14px; }
.h-ficha #h-ficha-ver span { color: var(--muted); font-size: 13px; }
.h-nota { margin: 0; font-size: 12px; color: var(--muted); }
.h-ficha-form { display: grid; gap: 6px; }
.h-ficha-form label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.h-ficha-form label small { font-weight: 400; color: var(--muted); }
.h-ficha-form input, .h-ficha-form select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); min-width: 0; }
.h-ficha-acc { display: flex; gap: 8px; margin-top: 6px; }
.h-btn { border: 0; border-radius: 8px; padding: 8px 14px; font: 700 13px var(--f-body); background: var(--accent); color: var(--accent-ink, #FFFFFF); cursor: pointer; }
.h-btn-sec { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.h-cmd { display: flex; gap: 8px; align-items: center; justify-content: space-between; font: 500 12px var(--f-mono); background: var(--surface-2); border-radius: 8px; padding: 7px 8px 7px 10px; }
.h-cmd code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h-ficha .h-firma { color: #9DB8FF; } }
@media (max-width: 900px) { .h-rejilla { grid-template-columns: 1fr; } .h-baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .h-baldosa { min-height: 128px; gap: 12px; padding: 14px; } .h-baldosa .h-txt span, .h-area { display: none; } .h-baldosa b { font-size: 18px; }
  .h-turno { margin-left: 0; width: 100%; justify-content: space-between; } .h-saludo h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .h-sirena { animation: none; } .h-baldosa { transition: none; } }