/* Fichas clínicas de Inessentia: un bloc de notas. Columna con la lista a la izquierda, la ficha como hoja a la derecha;
   en el teléfono, una a la vez. Sin cajas ni tarjetas con borde: separan los filetes y el aire.
   La escala: el nombre de la paciente es lo más grande; luego la acción; luego fecha y estado.
   Todo color y toda fuente salen de un token de :root, y cada token de color es de la paleta de la marca (sitio:
   src/styles/global.css). Lo vigila guardianes.test.mjs: un literal fuera de :root, o un token fuera de la paleta, es rojo.
   Un var() a un token que no existe hereda sin avisar (16 px en un tamaño): también lo vigila. */
:root {
  /* Claro: el papel cálido del sitio. */
  --fondo: #FCFBF6;        /* --warm */
  --columna: #F4F0E6;      /* --cream-2 */
  --seleccion: #EAE5D9;    /* --cream */
  --texto: #3f3a36;        /* --text */
  --titulo: #262321;       /* --ink */
  --suave: #6a6460;        /* --text-muted */
  --linea: #e2dccc;        /* --border-hair */
  --filete: #C2B07E;       /* --sand: el filete dorado bajo la barra */
  --acento: #46276E;       /* --purple: las acciones */
  --sobre-acento: #ffffff;
  --alerta: #8E2B5D;       /* --wine: sin firmar, errores */
  --sin-leer: #8E2B5D;     /* --wine: el punto de «sin leer» */

  --ff-titulo: "Bitter", Georgia, serif;
  --ff-cuerpo: "Mulish", system-ui, -apple-system, sans-serif;
  --ff-crudo: ui-monospace, monospace;  /* sólo para un sobre que se enseña tal cual */

  --fs-titulo: 1.75rem; --fs-nombre: 1.0625rem; --fs-seccion: 1.1875rem; --fs-accion: 1rem; --fs-cuerpo: 1rem; --fs-meta: 0.875rem; --fs-barra: 0.8125rem;
  --fs-marca: 1.1875rem; --fs-portada: 2.5rem;
  --toque: 2.75rem;
  --ancho-columna: 20rem;
  --ancho-hoja: 42rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  /* Oscuro: el morado de noche del sitio (su tema oscuro). */
  :root {
    --fondo: #221735;      /* --bg oscuro */
    --columna: #26143C;    /* --canvas-top */
    --seleccion: #362849;  /* --cream-2 oscuro */
    --texto: #EAE5D9;      /* --cream */
    --titulo: #F4F0E6;     /* --cream-2 */
    --suave: #a99fb4;      /* --text-muted oscuro */
    --linea: #463659;      /* --border-hair oscuro */
    --filete: #A8945C;     /* --sand-d */
    --acento: #C2B07E;     /* --sand: el dorado sobre oscuro (--gold oscuro) */
    --sobre-acento: #221735;
    --alerta: #D98AB3;     /* vino aclarado: --wine da 2.1:1 sobre --fondo oscuro */
    --sin-leer: #D98AB3;
  }
}
@media (min-width: 48rem) {
  :root { --fs-titulo: 2.125rem; }
}
* { box-sizing: border-box; }
html { background: var(--fondo); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: var(--fs-cuerpo)/1.5 var(--ff-cuerpo); }
h1.titulo { font-family: var(--ff-titulo); font-size: var(--fs-titulo); line-height: 1.15; margin: 0.25rem 0 1rem; font-weight: 700; color: var(--titulo); overflow-wrap: anywhere; }
h2.sub { font-size: var(--fs-cuerpo); margin: 1.25rem 0 0.125rem; font-weight: 700; color: var(--titulo); }
h2.seccion { font-family: var(--ff-titulo); font-size: var(--fs-seccion); font-weight: 600; margin: 2.25rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
p { margin: 0.25rem 0; }
.meta, .estado { font-size: var(--fs-meta); color: var(--suave); }
.sello { font-size: var(--fs-meta); color: var(--alerta); font-weight: 650; }
.vacio { color: var(--suave); }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.crudo { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.875rem/1.4 var(--ff-crudo); border-left: 2px solid var(--linea); padding: 0.25rem 0 0.25rem 0.75rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Los controles: todos con el estilo del sistema de la página, ninguno con el del navegador. */
button, input, select, textarea, progress {
  font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px;
  padding: 0.5rem 0.75rem; width: auto; max-width: 100%; appearance: none; -webkit-appearance: none;
}
button, input, select { min-height: var(--toque); }
input, select, textarea { width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; }
::placeholder { color: var(--suave); opacity: 1; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; display: block; }
select { text-overflow: ellipsis; padding-right: 2rem; background-repeat: no-repeat; background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.8rem) 55%;
  background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); }
button { cursor: pointer; width: fit-content; font-size: var(--fs-accion); font-weight: 650; line-height: 1.2; padding: 0.5rem 0.875rem; flex: none; }
button.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
button.texto { border-color: transparent; background: transparent; color: var(--acento); padding-left: 0; padding-right: 0; }
button.nombre { border: 0; padding: 0; min-height: 0; background: transparent; text-align: left; font-size: var(--fs-nombre); font-weight: 700; line-height: 1.3; color: var(--titulo); overflow-wrap: anywhere; }
button:disabled { opacity: 0.5; cursor: default; }
progress { width: 100%; padding: 0; height: 0.5rem; border-radius: 999px; accent-color: var(--acento); }
progress::-webkit-progress-bar { background: var(--linea); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--acento); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* La marca: el sol y el nombre de la consulta en Bitter. */
.marca { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; line-height: 1.15; min-width: 0; }
.logo { width: 2rem; height: 2rem; flex: none; }
.nombre-marca { font-family: var(--ff-titulo); font-size: var(--fs-marca); font-weight: 600; color: var(--acento); letter-spacing: 0.01em; }

/* La entrada: una portada centrada. La marca en grande, el filete dorado, el título y un solo botón. */
.entrada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; max-width: 22rem; min-height: 100dvh; margin: 0 auto; padding: 22vh 16px 4rem; }
.entrada .marca { flex-direction: column; align-self: stretch; align-items: center; gap: 0.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--filete); }
.entrada .logo { width: 6rem; height: 6rem; }
.entrada .nombre-marca { font-size: var(--fs-portada); font-weight: 700; line-height: 1.1; }
.entrada h1.titulo { font-size: var(--fs-seccion); font-weight: 600; margin: 0; }
.entrada button.primario { min-width: 12rem; }
.entrada .etapa { color: var(--suave); font-size: var(--fs-meta); margin: 0; }
.entrada progress { max-width: 14rem; }
.entrada .mensaje { color: var(--alerta); font-size: var(--fs-meta); margin: 0; }

/* La barra: marca, estado de la bóveda y Bloquear. Se queda arriba, con el filete dorado. Con una ficha abierta en el
   teléfono se va con la página (.suelta): ahí lo que se queda arriba es el mando de la hoja, con «Guardar». */
header.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.5rem 16px; border-bottom: 1px solid var(--filete);
  position: sticky; top: 0; z-index: 2; background: var(--fondo); }
header.barra .marca { flex: 1; }
header.barra .pregunta { flex: 1; margin: 0; font-size: var(--fs-meta); color: var(--alerta); font-weight: 650; }
header.barra.suelta { position: static; }
@media (min-width: 48rem) {
  header.barra.suelta { position: sticky; }
  header.barra { flex-wrap: nowrap; padding: 0.625rem 24px; }
}

/* El marco: en el teléfono, la lista o la hoja; desde 48rem, las dos lado a lado, cada una con su propio desplazamiento. */
.marco .hoja { padding: 0.5rem 16px 4rem; }
.marco:not(.abierta):not(.solo) .hoja { display: none; }
.marco.abierta .columna { display: none; }
.marco.solo .hoja { max-width: var(--ancho-hoja); margin: 0 auto; }
@media (min-width: 48rem) {
  .marco:not(.solo) { display: grid; grid-template-columns: var(--ancho-columna) 1fr; height: calc(100dvh - 3.5rem); }
  .marco:not(.solo) .columna, .marco.abierta .columna { display: block; overflow-y: auto; border-right: 1px solid var(--linea); background: var(--columna); }
  .marco:not(.solo) .hoja, .marco:not(.abierta):not(.solo) .hoja { display: block; overflow-y: auto; padding: 0.5rem 40px 4rem; }
  .marco .hoja > * { max-width: var(--ancho-hoja); margin-left: auto; margin-right: auto; }
  .marco .herramientas .volver { visibility: hidden; }
}

/* La columna: cabeza, buscador, orden y los renglones. */
.columna { padding: 0.75rem 16px 2rem; }
.cabeza-columna { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h2.rotulo { font-family: var(--ff-titulo); font-size: var(--fs-seccion); font-weight: 600; color: var(--titulo); margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.rotulo .cuenta { font-family: var(--ff-cuerpo); font-size: var(--fs-meta); font-weight: 400; color: var(--suave); }
.columna .buscador { margin: 0.25rem 0 0.5rem; background: var(--seleccion); border-color: transparent; border-radius: 10px; }
.columna .buscador:focus { border-color: var(--acento); }
.orden { display: flex; gap: 0 1rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.orden button { font-size: var(--fs-meta); font-weight: 600; min-height: 2.25rem; color: var(--suave); }
.orden button[aria-pressed="true"] { color: var(--acento); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
ul.fichas { list-style: none; padding: 0; margin: 0; }
li.vacio { padding: 1rem 0; }
.renglon { position: relative; margin: 0 -0.75rem; border-radius: 10px; background: transparent; }
/* El renglón se desliza de lado: la cara ocupa todo el ancho y los botones de acción asoman a sus lados. */
.desliza { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 10px; }
.desliza::-webkit-scrollbar { display: none; }
.cara { position: relative; flex: 0 0 100%; box-sizing: border-box; min-width: 0; padding: 0.625rem 0.75rem; scroll-snap-align: start; }
button.accion { flex: none; min-width: 6rem; min-height: var(--toque); padding: 0 1rem; border: 0; border-radius: 0; font-size: var(--fs-accion); font-weight: 600; scroll-snap-align: end; }
button.accion.archivar { background: var(--suave); color: var(--fondo); }
button.accion.firmar { background: var(--acento); color: var(--sobre-acento); scroll-snap-align: start; }
.acuse { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.25rem; }
.renglon + .renglon::before { content: ""; position: absolute; top: 0; left: 0.75rem; right: 0.75rem; border-top: 1px solid var(--linea); }
.renglon.actual { background: var(--seleccion); }
.renglon.actual::before, .renglon.actual + .renglon::before { border-top-color: transparent; }
/* Todo el renglón abre la ficha: el botón del nombre se extiende sobre él. */
.renglon button.nombre::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.cabeza-renglon { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.nuevo { flex: none; position: relative; font-size: var(--fs-barra); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sin-leer); margin: 0; }
.renglon .resumen { display: flex; gap: 0.5rem; min-width: 0; margin: 0.125rem 0 0; font-size: var(--fs-meta); color: var(--suave); }
.resumen .cuando { flex: none; color: var(--texto); font-weight: 600; }
.resumen .renglon-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon .meta { margin: 0.125rem 0 0; }

/* La hoja: herramientas discretas arriba, la fecha centrada, el título grande. */
nav.herramientas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--toque); }
nav.herramientas .acciones { margin: 0; gap: 0 1rem; justify-content: flex-end; }
.herramientas .volver::before { content: "‹ "; }
button.peligro { color: var(--alerta); }
button.discreto { color: var(--suave); font-weight: 600; }
/* El mando de la hoja: «Fichas» y, con algo escrito, «Descartar» y «Guardar». Se queda arriba al desplazar. */
/* Pegado al borde de arriba de la hoja, por encima de su relleno: sin el margen y el top negativos, lo que se desplaza asoma sobre el mando. */
.mando { position: sticky; top: -0.5rem; z-index: 1; background: var(--fondo); margin-top: -0.5rem; padding-top: 0.5rem; }
.mando .pregunta { margin: 0; font-weight: 650; }
.mando > p { margin: 0; padding-bottom: 0.375rem; }
.mando nav.herramientas { min-height: 3.5rem; }
.fecha-hoja { text-align: center; font-size: var(--fs-meta); color: var(--suave); margin: 0.5rem 0 0.75rem; }
.ficha .bloque > h2.sub:first-child { margin-top: 0.5rem; }

/* Las notas: una tras otra, separadas por un filete; sin caja. */
.tarjeta { border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 0.875rem 0 0.75rem; margin: 0; background: transparent; }
h2.seccion + .tarjeta { border-top: 0; padding-top: 0.25rem; }
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cabeza .meta { margin: 0; }
.nombre-fecha { font-size: var(--fs-cuerpo); font-weight: 700; color: var(--titulo); margin: 0; }

.formulario .l { margin: 0.125rem 0; overflow-wrap: anywhere; }
.formulario .titulo { font-family: var(--ff-titulo); font-weight: 600; color: var(--titulo); margin: 1.75rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--linea); }
.formulario .cabecera, .formulario .estado { color: var(--suave); font-size: var(--fs-meta); }
.formulario .riesgo { color: var(--alerta); font-weight: 650; margin: 0.5rem 0; }
.formulario .persona { font-weight: 700; margin-top: 0.75rem; }
.formulario .subtitulo { font-weight: 700; margin-top: 0.75rem; }
.formulario .etiqueta { color: var(--suave); font-size: var(--fs-meta); margin-top: 0.5rem; }
.formulario .vacio, .formulario .faltan { color: var(--suave); }
.formulario .n1 { padding-left: 1rem; } .formulario .n2 { padding-left: 2rem; } .formulario .n3 { padding-left: 3rem; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0.25rem 0 0.5rem; }
.acciones.sueltas { gap: 0 1.25rem; }
.editor .acciones { margin-top: 1.25rem; }
.campo { margin: 0.75rem 0; }
.etiqueta-campo { display: block; font-size: var(--fs-meta); color: var(--suave); margin: 0 0 0.25rem; }
.fecha { display: grid; grid-template-columns: 1fr 2fr 1.2fr; gap: 0.5rem; }
/* Una respuesta: su pregunta y, debajo, lo que vale. La corregida lleva dos renglones chicos: cuándo y lo original. */
.respuesta { margin: 0.25rem 0; }
.respuesta > .l:first-child { margin-top: 0.5rem; }
.respuesta.corregida { margin-bottom: 0.75rem; }
.marca-corregida { margin: 0.125rem 0 0; }
.original { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Editar en el lugar. Un bloque que se puede tocar no lleva marco: sólo el cursor de texto y, al pasar por encima, un
   fondo tenue. Al tocarlo, el control ocupa el mismo sitio que el texto (los márgenes negativos compensan su relleno). */
.editable { display: block; border-radius: 8px; cursor: text; }
span.editable { display: inline; }
.editable.editando { cursor: auto; }
@media (hover: hover) {
  .editable:not(.editando):hover { box-shadow: 0 0 0 0.25rem var(--seleccion); background: var(--seleccion); }
}
.editando > input, .editando > select, .editando > .fecha, .editando > button { margin-top: 0.375rem; }
.editando > .fecha { max-width: 22rem; }
span.editando { display: block; }
.editando > input, .campo-nuevo > input { margin-left: calc(-0.5rem - 1px); margin-right: calc(-0.5rem - 1px); width: calc(100% + 1rem + 2px); max-width: none; padding-left: 0.5rem; padding-right: 0.5rem; }
span.editando > input { margin-top: 0; margin-bottom: 0; font-weight: inherit; }
.crece { display: grid; margin: -1px calc(-0.5rem - 1px); }
.crece::after { content: attr(data-valor) " "; visibility: hidden; white-space: pre-wrap; }
.crece > textarea, .crece::after { grid-area: 1 / 1 / 2 / 2; min-width: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; line-height: 1.5; overflow-wrap: anywhere; }
.crece > textarea { resize: none; overflow: hidden; min-height: 0; border-color: var(--linea); }
.crece > textarea:focus { border-color: var(--acento); }
.editando > .crece { margin-top: 0.25rem; margin-bottom: 0.25rem; }
/* El renglón vacío de la nota nueva: sin marco mientras no se escribe en él. */
.nota-nueva { margin: 0.25rem 0 0.5rem; }
.nota-nueva textarea:placeholder-shown:not(:focus) { border-color: transparent; }
.campo-nuevo { margin: 1rem 0 0.5rem; }
.campo-nuevo > input { font-weight: 700; }
.ficha .ayuda { margin: 0 0 0.125rem; }

/* «Agregar campo»: un buscador y, debajo, la lista agrupada por mapa y agrupación. */
.agregar { margin: 0.75rem 0 0; }
.agregar .cabeza > input { flex: 1; }
ul.opciones { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 20rem; overflow-y: auto; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.opciones .ruta { font-size: var(--fs-barra); color: var(--suave); margin: 0.75rem 0 0; }
.opciones .vacio { padding: 0.75rem 0; }
button.opcion { display: block; width: 100%; text-align: left; border-color: transparent; background: transparent; padding: 0.5rem 0; font-weight: 600; color: var(--titulo); }
button.opcion.propia { color: var(--acento); }
.opcion .ayuda { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--suave); }
h3.sub-nota { font-size: var(--fs-cuerpo); font-weight: 700; margin: 1.25rem 0 0.5rem; }
.cambios del.quita { text-decoration: line-through; color: var(--alerta); }
.cambios ins.pone { text-decoration: underline; text-underline-offset: 0.2em; color: var(--acento); }
.detalle { margin: 0.5rem 0 0.5rem; }

.tapa { position: fixed; inset: 0; background: var(--fondo); z-index: 10; }
.tapa[hidden] { display: none; }
[hidden] { display: none !important; }