/* Estilo general. El color de acento (--acento) se configura en Ajustes.
   Todo va en rem: el tamaño base crece con el ancho de la pantalla y el programa escala entero. */
html { font-size: calc(clamp(15px, 0.5vw + 8px, 22px) * var(--escala, 1)); }
:root {
  --acento: #1f6f8b;
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --borde: #dde2e7;
  --texto: #1d2329;
  --suave: #5f6b76;
  --ok: #1e7b48;
  --ok-fondo: #e3f4ea;
  --error: #b3261e;
  --error-fondo: #fbe9e7;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4d6;
  --radio: 0.5rem;
  --lateral: 15rem;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: var(--texto);
  /* Tanda T, parte 3: un tono claro del color de la clínica para lo que se señala al pasar el ratón */
  --acento-suave: color-mix(in srgb, var(--acento) 9%, #fff);
}
/* Contraste alto (Ajustes › Datos de la clínica › Pantalla): grises más oscuros y bordes más marcados. */
html.contraste-alto { --texto: #000; --suave: #3b444d; --borde: #9aa4ae; --fondo: #eef1f4; --ok: #145c35; --error: #8f1d16; --aviso: #6b4500; }
html.contraste-alto .tabla th { color: var(--texto); }
html.contraste-alto input, html.contraste-alto select, html.contraste-alto textarea { border-color: #7d8893; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); font-size: 1rem; }
a { color: var(--acento); }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
small { color: var(--suave); }

/* --- Estructura ------------------------------------------------------------ */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral);
  background: var(--superficie); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; padding: .8rem .55rem;
}
.marca { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .5rem .6rem; font-weight: 700; font-size: 1.1rem; color: var(--texto); text-decoration: none; margin-bottom: .6rem; }
.marca img { max-height: 4.5rem; max-width: 100%; object-fit: contain; }
.lateral nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.lateral nav a {
  display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
}
.lateral nav a:hover { background: var(--acento-suave); }
.lateral nav a kbd { margin-left: auto; font-size: .7rem; font-family: inherit; color: var(--suave); border: 1px solid var(--borde); border-radius: 4px; padding: 0 .3rem; line-height: 1.4; }
.lateral nav a.activo kbd { color: #fff; border-color: rgba(255, 255, 255, .6); }
.lateral nav a.activo { background: var(--acento); color: #fff; }
.lateral nav a.pendiente span::after { content: " ·"; color: var(--suave); }
.menu-mas > summary { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: var(--radio); cursor: pointer; color: var(--suave); list-style: none; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary::after { content: "▸"; margin-left: auto; font-size: .8rem; }
.menu-mas[open] > summary::after { content: "▾"; }
.menu-mas > summary:hover { background: var(--acento-suave); }
.menu-mas > a { padding-left: 1.4rem; }
.entregas { display: grid; gap: .8rem; margin-top: 1rem; }
.entrega { padding: .8rem 1rem; }
.entrega-cabecera { display: flex; justify-content: flex-start; gap: .6rem 1.2rem; align-items: center; flex-wrap: wrap; }
.entrega-fila, .entrega-hecha { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; padding: .45rem 0; border-top: 1px solid var(--borde); }
.entrega-fila:first-of-type { margin-top: .5rem; }
.entrega-que { flex: 0 1 auto; }
.entrega-venta { color: var(--suave); font-size: .92rem; flex: 0 1 auto; min-width: 0; }
.entrega-acciones { display: flex; gap: .6rem; align-items: center; }
.entrega form button.primario, .entrega-cabecera button { padding: .5rem 1rem; }
.entrega-hecha { font-size: .9rem; color: var(--suave); }
.entrega-hecha form { margin-left: 0; }
.entrega-en-ficha { margin: .4rem 0 1rem; }
.fila.fila-buscar { align-items: flex-end; }
.fila.fila-buscar .campo { margin-bottom: 0; }
.fila-buscar > .boton, .fila-buscar > button { margin-bottom: 0; }
dialog.dialogo-entrega { width: min(36rem, 94vw); }
dialog.dialogo-contacto { width: min(34rem, 94vw); }
dialog.dialogo-contacto textarea { width: 100%; text-transform: none; font-size: 1rem; }
.numero-grande { font-size: 2rem; font-weight: 700; text-align: center; margin: .6rem 0 1rem; letter-spacing: .04em; }
.numero-grande a { text-decoration: none; color: var(--texto); }
.botones-contacto { display: inline-flex; gap: .35rem; margin-left: .4rem; vertical-align: middle; }
table.contactos td.texto-largo { white-space: pre-line; max-width: 22rem; }
.sin-partir { white-space: nowrap; }
dialog.dialogo-entrega input { text-transform: none; font-size: 1rem; }
.botonera-formas { flex-wrap: wrap; justify-content: flex-start !important; }
.bloques-ajustes a { font-weight: 600; }
.pestanas-bloque { margin-top: -.4rem; font-size: .92rem; }
.ayuda-apartado { margin: -.2rem 0 1rem; }
.menu-final { margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--borde); }
.clinica-de { color: var(--suave); font-weight: 400; margin-left: .3rem; }
/* Punto discreto de faltas a citas (tanda Q, punto 16): solo lo entiende el personal; el detalle, al pasar el ratón. */
.punto-faltas { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; cursor: help; }
.punto-verde { background: #2e9e5b; } .punto-amarillo { background: #e0b100; } .punto-rojo { background: #c62828; } .punto-negro { background: #111; }
.cita-anulada { opacity: .55; } .cita-anulada strong, .cita-anulada small { text-decoration: line-through; }
.cita[data-href] { cursor: pointer; } .cita .cita-detalle { color: inherit; text-decoration: none; display: block; }
.sugerencia.sugerida span { font-weight: 600; }
.tabla th.col-marca, .tabla td.col-marca { text-align: center; width: 1%; white-space: nowrap; }
.marca-si { color: var(--acento); font-weight: 700; }
.iconos-grad .marca-si { display: inline-flex; margin: 0 .1rem; }
.iconos-grad .ico { width: 1.15rem; height: 1.15rem; }
.estado-paciente { white-space: normal; }
.chip { display: inline-block; font-size: .74rem; line-height: 1.3; padding: .08rem .45rem; border-radius: 999px; margin: .1rem .25rem .1rem 0; white-space: nowrap; font-weight: 600; }
.chip-verde { background: var(--ok-fondo); color: var(--ok); }
.chip-azul { background: #e3eefb; color: #1d4f91; }
.chip-rojo { background: var(--error-fondo); color: var(--error); }
.chip-ambar { background: var(--aviso-fondo); color: var(--aviso); }
.chip-naranja { background: #fde8d7; color: #9a3d07; }
.chip-gris { background: #eceff3; color: #3f4a55; }
.marca-busqueda { font-size: .75rem; padding: 0 .35rem; }
.boton-copiar { border: none; background: none; padding: 0 .2rem; cursor: copy; color: var(--suave); font-size: .9rem; line-height: 1; }
.boton-copiar:hover { color: var(--acento); }
.boton-copiar.dato-copiado { color: var(--ok, #2e9e5b); }
.hueco-tarjeta.arrastrando { outline: 2px dashed var(--acento); outline-offset: 2px; border-radius: var(--radio); }
.hueco-tarjeta.arrastrando > * { visibility: hidden; }  /* queda el marco vacío donde caerá */
.tarjeta-fantasma { z-index: 1000; pointer-events: none; opacity: .92; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transform: rotate(1.5deg); }
.columna-aqui { background: var(--fondo-suave, rgba(0, 0, 0, .03)); font-weight: 600; }
.clinica-de::before { content: "· "; }
button.enlace { background: none; border: 0; padding: 0; color: var(--acento, inherit); text-decoration: underline; cursor: pointer; font: inherit; }
.clinica-todas { display: block; margin-top: .2rem; }
.clinica-lateral { font-size: .85rem; color: var(--suave); padding: .4rem 0; border-top: 1px solid var(--borde); }
.clinica-lateral span { font-weight: 600; color: var(--texto); }
.usuario-lateral { display: flex; align-items: center; gap: .25rem; border-top: 1px solid var(--borde); padding-top: .7rem; }
.usuario-lateral a { display: flex; gap: .55rem; align-items: center; flex: 1; text-decoration: none; color: var(--texto); padding: .25rem; font-size: .92rem; }
.usuario-lateral small { display: block; font-size: .8rem; }
.ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.contenido { margin-left: var(--lateral); padding: 1.6rem 2rem 4rem; }
/* Editar el inicio */
.editando .hueco-tarjeta { touch-action: none; user-select: none; position: relative; border: 2px dashed var(--borde); border-radius: var(--radio); background: var(--superficie); cursor: grab; }
.editando .hueco-tarjeta.nueva { border-color: var(--acento); }
.editando .contenido-tarjeta, .editando .hueco-tarjeta > .tarjeta { pointer-events: none; }
.editando .contenido-tarjeta > .tarjeta, .editando .hueco-tarjeta > .tarjeta { box-shadow: none; }
.mando-tarjeta { display: flex; justify-content: space-between; align-items: center; padding: .3rem .4rem 0; }
.mando-tarjeta .asa { font-size: 1.2rem; color: var(--suave); cursor: grab; user-select: none; }
.tarjetas-disponibles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tarjetas-disponibles li { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--borde); border-radius: var(--radio); padding: .35rem .35rem .35rem .7rem; background: var(--superficie); }
/* Monitor de estado y filas que se abren con doble clic */
tr[data-doble-clic] { cursor: pointer; user-select: none; }
tr[data-doble-clic]:hover td { background: var(--fondo); }
tr[data-doble-clic].elegida td { background: color-mix(in srgb, var(--acento) 14%, transparent); }
.titulo-estado { font-size: 1rem; margin: 1rem 0 .3rem; }
.titulo-estado:first-of-type { margin-top: .2rem; }
.solo-imprimir { display: none; }
@media print { .solo-imprimir { display: block; } .resumen-monitor .tarjeta { break-inside: avoid; } }
/* Copia de prueba: franja fija arriba para no confundirla con los datos de verdad. */
.franja-prueba {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: 1.9rem; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, #c2410c 0 18px, #b03a0a 18px 36px); color: #fff; font-weight: 800; letter-spacing: .08em;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none;
}
body.con-franja-prueba { padding-top: 1.9rem; }
body.con-franja-prueba .lateral { top: 1.9rem; }
body.publico:has(.franja-prueba) { padding-top: 2.6rem; }
@media print { .franja-prueba { display: none; } body.con-franja-prueba { padding-top: 0; } }
.cabecera { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cabecera .acciones { margin-left: auto; display: flex; gap: .55rem; flex-wrap: wrap; }
.cabecera .sub { color: var(--suave); }
.estrecha { max-width: 42rem; }

/* --- Bloques --------------------------------------------------------------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.35rem; margin-bottom: 1.1rem; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.tarjeta-numero { display: block; text-decoration: none; color: inherit; margin: 0; }
.tarjeta-numero .titulo { color: var(--suave); font-size: .92rem; }
.tarjeta-numero .valor { font-size: 2.2rem; font-weight: 700; margin: .4rem 0 .15rem; }
.tarjeta-numero.inactiva .valor { color: var(--borde); }
.vacio { background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); padding: 2rem; text-align: center; color: var(--suave); }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 0 1.1rem; }

.aviso { padding: .7rem .95rem; border-radius: var(--radio); margin-bottom: .95rem; }
.aviso p { margin: 0 0 .4rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); }
.aviso-error { background: var(--error-fondo); color: var(--error); }
.aviso-atencion { background: var(--aviso-fondo); color: var(--aviso); }
.aviso-atencion a, .aviso-atencion select, .aviso-atencion label { color: var(--texto); }

.etiqueta { display: inline-block; font-size: .8rem; padding: .12rem .55rem; border-radius: 99px; background: var(--fondo); color: var(--suave); border: 1px solid var(--borde); }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.etiqueta.error { background: var(--error-fondo); color: var(--error); border-color: transparent; }

/* --- Botones ---------------------------------------------------------------- */
.boton, button {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font: inherit; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.boton:hover, button:hover { border-color: var(--suave); }
.boton.primario, button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.primario:hover, button.primario:hover { filter: brightness(1.08); }
.boton.peligro, button.peligro { color: var(--error); }
.boton.pequeno, button.pequeno { padding: .3rem .6rem; font-size: .88rem; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, .boton:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 55%, #fff); outline-offset: 2px; }
.boton-icono { border: none; background: none; padding: .4rem; color: var(--suave); }
form.en-linea { display: inline; }
.htmx-request .cargando, .cargando.htmx-request { opacity: .6; }

/* --- Formularios ------------------------------------------------------------ */
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 1.1rem 1.35rem .4rem; margin: 0 0 1.1rem; min-width: 0; }
legend { font-weight: 600; padding: 0 .4rem; }
.fila { display: flex; gap: .95rem; flex-wrap: wrap; align-items: flex-start; }
.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; flex: 1 1 13rem; min-width: 0; }
.campo.estrecho { flex: 0 1 10rem; }
.campo.ancho { flex: 2 1 22rem; }
.campo label { font-size: .9rem; color: var(--suave); }
/* En una fila, cada título en una sola línea: así todas las casillas quedan a la misma altura. La casilla nunca es
   más estrecha que su título; si no cabe, pasa a la línea siguiente. */
.fila > .campo > label { white-space: nowrap; }
.fila > .campo { min-width: min-content; }
.con-boton { display: flex; gap: .5rem; }
.con-boton input { flex: 1; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=number], input[type=search], input:not([type]), select, textarea {
  font: inherit; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: .4rem; background: #fff; color: var(--texto); width: 100%;
}
.en-linea-campos select { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
input[type=color] { width: 4rem; height: 2.4rem; padding: 2px; border: 1px solid var(--borde); border-radius: .4rem; }
input[type=file] { font: inherit; }
textarea { min-height: 5rem; resize: vertical; }
.con-error input, .con-error select, .con-error textarea { border-color: var(--error); }
.error { color: var(--error); font-size: .88rem; margin: 0; }
.ayuda { color: var(--suave); font-size: .85rem; margin: 0; }
.obligatorio { color: var(--error); }
.casilla { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .65rem; cursor: pointer; }
.casilla input[type=checkbox], .casilla input[type=radio] { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.opciones { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.opciones .casilla { margin-bottom: .3rem; }
.botonera { display: flex; gap: .7rem; margin-top: .5rem; flex-wrap: wrap; }

/* --- Tablas ------------------------------------------------------------------ */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .85rem; color: var(--suave); font-weight: 600; background: #fafbfc; }
.tabla tbody tr:hover { background: var(--acento-suave); }
.tabla tr:last-child td { border-bottom: none; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.baja td { color: var(--suave); }
.tabla tr[data-href] { cursor: pointer; }
.tabla tr[data-href]:hover td { background: #eef5f8; }
.aviso-borrador { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.aviso-borrador span { flex: 1; }
.pie-tabla { color: var(--suave); font-size: .9rem; margin-top: .55rem; }

.buscador { display: flex; gap: .8rem; align-items: center; margin-bottom: .95rem; }
.buscador .caja-busqueda { position: relative; flex: 1; max-width: 40rem; }
.buscador .caja-busqueda .ico { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.buscador input[type=search] { padding-left: 2.3rem; font-size: 1.05rem; }

/* --- Pestañas ---------------------------------------------------------------- */
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1.1rem; flex-wrap: wrap; }
.pestanas a, .pestanas span { padding: .6rem .95rem; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.pestanas span { opacity: .55; cursor: default; }

.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem 1.6rem; margin: 0; }
.datos dt { font-size: .85rem; color: var(--suave); }
.datos dd { margin: .15rem 0 0; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: none; }
.lista-simple li .acciones { margin-left: auto; }

/* --- Páginas públicas (login) --------------------------------------------------- */
body.publico { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.caja-publica { width: 100%; max-width: 30rem; }
.marca-publica { text-align: center; margin-bottom: 1.2rem; }
.marca-publica img { max-height: 6rem; max-width: 16rem; object-fit: contain; }
.pie-publico { text-align: center; color: var(--suave); font-size: .82rem; }
.selector-papel { margin-left: 1rem; }
.pasos-asistente { list-style: none; padding: 0; display: grid; gap: .6rem; max-width: 52rem; }
.pasos-asistente .paso { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .8rem 1rem; }
.pasos-asistente .paso-hecho { opacity: .8; }
.pasos-asistente .paso-saltado { opacity: .6; }
.paso-botones { display: flex; gap: .4rem; align-items: center; }
.columnas-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; max-width: 44rem; }
.lista-menu { list-style: none; margin: 0; padding: 0; min-height: 3rem; }
.lista-menu li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; margin-bottom: .35rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px; cursor: grab; touch-action: none; user-select: none; }
.lista-menu li .nombre { flex: 1; }
.lista-menu li.arrastrando { opacity: .55; outline: 2px dashed var(--acento); }
.logo-klaro-pie { height: 4.5rem; width: auto; margin-bottom: .2rem; }
.acerca-lateral { display: block; text-align: center; font-size: .75rem; color: var(--suave); text-decoration: none; padding: .3rem 0 0; }
.acerca-lateral:hover { color: var(--texto); }
.acerca { max-width: 40rem; text-align: center; margin: 1rem auto; }
.acerca .logo-klaro { width: 12rem; height: auto; margin: .5rem auto 1rem; display: block; }
.acerca h1 small { font-size: .9rem; color: var(--suave); font-weight: 400; }
.datos-acerca { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; text-align: left; max-width: 30rem; margin: 1rem auto; }
.datos-acerca dt { color: var(--suave); }
.datos-acerca dd { margin: 0; }

/* --- Graduaciones ------------------------------------------------------------------ */
details.seccion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .2rem 1.35rem; margin-bottom: 1.1rem; }
details.seccion[open] { padding-bottom: 1rem; }
details.seccion > summary { font-weight: 600; cursor: pointer; padding: .7rem 0; list-style-position: outside; }
details.seccion > summary::marker { color: var(--acento); }
.tabla-desplazable { overflow-x: auto; }
.tabla-ojos th, .tabla-ojos td { padding: .3rem .35rem; text-align: center; }
.tabla-ojos th:first-child { width: 3rem; font-weight: 700; color: var(--texto); }
.tabla-ojos input, .tabla-ojos select { min-width: 5.2rem; text-align: center; padding: .45rem .4rem; }
.tabla-ojos.estrecha { width: auto; }
.tabla-ojos td.con-error input { border-color: var(--error); background: var(--error-fondo); }
.tabla-ojos .fila-calculo td { padding: 0 .35rem .5rem; text-align: left; color: var(--acento); font-size: .88rem; border-bottom: 1px solid var(--borde); }
.tabla-ojos tbody tr:hover { background: transparent; }
.tabla-rx th:first-child { font-weight: 700; color: var(--texto); }
.calculado { color: var(--acento); font-weight: 600; }
/* Negativos en rojo y positivos en negro, como las lentes de prueba del gabinete */
.dp-neg { color: #c0262d; }
.tabla-comparar tr.cambia td .dp-neg { color: #c0262d; }
input.dp-neg { color: #c0262d; font-weight: 600; }
input.sin-signo { border-color: var(--error) !important; background: var(--error-fondo); }
.avisos-signo { margin: .6rem 0 0; }
.avisos-signo:empty { display: none; }
details.solo-lectura { background: #f8fafb; }
details.solo-lectura .tabla { background: transparent; }
td.rx { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-comparar tr.cambia td { background: var(--aviso-fondo); font-weight: 600; }
.tabla-comparar tr.inicio-ojo td, .tabla-comparar tr.inicio-ojo th { border-top: 2px solid var(--borde); }
.grafico { width: 100%; height: auto; max-height: 22rem; }
.leyenda { display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--suave); font-size: .9rem; margin-top: .4rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.ajustes-rapidos { display: flex; gap: .3rem; flex-wrap: wrap; }
.borde-error { border-left: 4px solid var(--error); }
.borde-atencion { border-left: 4px solid var(--aviso); }
.texto-error { color: var(--error); }

/* --- Documentos: la «hoja» (igual en PC, tablet y PDF) ---------------------------------- */
.hoja { background: #fff; color: #1d2329; max-width: 54rem; margin: 0 auto 1.1rem; padding: 2.2rem 2.6rem; border: 1px solid var(--borde);
        border-radius: .3rem; box-shadow: 0 2px 10px rgba(16, 24, 32, .07); line-height: 1.55; }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; border-bottom: 3px solid var(--acento);
                 padding-bottom: 1rem; margin-bottom: 1.4rem; }
.hoja-logo img { max-height: 4.6rem; max-width: 13rem; object-fit: contain; }
.hoja-clinica { text-align: right; font-size: .8rem; color: var(--suave); line-height: 1.45; }
.hoja-clinica strong { color: var(--texto); font-size: 1.02rem; }
.hoja-texto h1 { color: var(--acento); font-size: 1.38rem; margin: 0 0 .9rem; line-height: 1.25; }
.hoja-texto h2 { color: var(--acento); font-size: 1.06rem; margin: 1.3rem 0 .35rem; }
.hoja-texto p, .hoja-texto li { font-size: .97rem; margin: 0 0 .55rem; }
.hoja-texto ul { padding-left: 1.3rem; margin: 0 0 .7rem; }
.hoja-grupo { border-top: 1px solid var(--borde); margin-top: 1.1rem; padding-top: .9rem; }
.hoja-grupo > p { margin: 0 0 .5rem; }
.hoja-casillas { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.casilla-hoja { font-size: 1.05rem; align-items: center; margin: .25rem 0; }
.casilla-hoja input { width: 1.45rem; height: 1.45rem; margin: 0; accent-color: var(--acento); }
.aceptar-avisos { margin-bottom: .6rem; font-weight: 600; border-color: var(--acento); color: var(--acento); }
.hoja-firmas { display: flex; gap: 2rem; margin-top: 1.4rem; flex-wrap: wrap; }
.hoja-firmas div { display: flex; flex-direction: column; border-bottom: 1px solid var(--suave); padding-bottom: .3rem; }
.hoja-firmas img { max-height: 5rem; max-width: 16rem; object-fit: contain; }
.hoja-firmas span { font-size: .85rem; color: var(--suave); }
.vista-documento { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem; max-height: 70vh; overflow: auto; }

/* Pantalla de firma (tablet o PC) */
body.pantalla-firma { background: #e9edf1; }
.pantalla-firma main { max-width: 58rem; margin: 0 auto; padding: 1rem 1rem 0; }
.firma-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.panel-firma { position: sticky; bottom: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: .6rem .6rem 0 0;
               padding: .9rem 1.2rem 1rem; box-shadow: 0 -4px 16px rgba(16, 24, 32, .1); }
.panel-firma canvas { display: block; width: 100%; height: 11rem; border: 2px dashed var(--suave); border-radius: .5rem; background: #fff; touch-action: none; cursor: crosshair; }
.firma-instruccion { margin: 0 0 .4rem; color: var(--suave); }
.firma-botones { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.firma-botones button { font-size: 1.1rem; padding: .75rem 1.4rem; }
.firma-mensaje { margin: .5rem 0 0; color: var(--error); min-height: 1.2em; }
.firma-gracias { text-align: center; padding: 4rem 1rem; font-size: 1.3rem; }
.firma-gracias .grande { font-size: 4rem; color: var(--ok); margin: 0; }
.puesto-firma { text-align: center; }
.puesto-firma .grande { font-size: 1.6rem; margin: 1rem 0 .3rem; }
.codigo-emparejar { font-size: 2.6rem; letter-spacing: .35em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.qr svg { width: 11rem; height: auto; }
.firma-guardada { max-height: 5rem; max-width: 16rem; background: #fff; border: 1px solid var(--borde); border-radius: .3rem; padding: .3rem; }

@media (max-width: 800px) {
  .lateral { position: static; width: auto; flex-direction: row; flex-wrap: wrap; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .contenido { margin-left: 0; padding: 1rem; }
}

/* --- Seguridad: bloqueo, clave de recuperación, registro --- */
.bloqueo { text-align: center; }
.bloqueo .campo { text-align: left; }
.bloqueo-candado { font-size: 2.6rem; margin: 0; }
input.pin { font-size: 2rem; letter-spacing: .6em; text-align: center; font-family: Consolas, monospace; }
.clave-recuperacion { font-family: Consolas, monospace; font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; text-align: center;
  padding: 1rem; margin: 1rem 0; border: 2px dashed var(--acento); border-radius: 8px; background: #fff; word-break: break-all; }
.fila-alerta td { color: var(--error); }
@media print {
  .lateral, .no-imprimir, .aviso { display: none !important; }
  .hoja-recuperacion { border: 0; box-shadow: none; }
}

/* --- Firma por pasos: leer, elegir avisos, firmar --- */
.firma-pasos { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.firma-pasos li { counter-increment: paso; font-size: .85rem; color: var(--suave); padding: .25rem .6rem; border-radius: 1rem; background: #fff; border: 1px solid var(--borde); }
.firma-pasos li::before { content: counter(paso) ". "; }
.firma-pasos li.actual { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.firma-pasos li.hecho { color: var(--ok); border-color: var(--ok); }
.firma-navegacion { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.4rem; }
.firma-navegacion .primario { margin-left: auto; }
button.grande { font-size: 1.2rem; padding: .9rem 2.2rem; }
.eleccion-avisos h2 { font-size: 1.4rem; color: var(--acento); }
.opciones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.opcion-grande { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 6.5rem; padding: 1rem;
  border: 2px solid var(--borde); border-radius: .8rem; background: #fff; cursor: pointer; font-size: 1.25rem; text-align: center; user-select: none;
  transition: background .12s, border-color .12s; }
.opcion-grande input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-grande .opcion-estado::before { content: "No"; font-size: .95rem; color: var(--suave); }
.opcion-grande:has(input:checked) { border-color: var(--ok); background: var(--ok-fondo); }
.opcion-grande:has(input:checked) .opcion-estado::before { content: "✓ Sí"; color: var(--ok); font-weight: 700; }
.opcion-grande:has(input:focus-visible) { outline: 3px solid var(--acento); outline-offset: 2px; }
.eleccion-avisos .aceptar-avisos { font-size: 1.1rem; padding: .8rem 1.6rem; width: 100%; }
.recuadro-ofertas { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 2px solid var(--aviso); border-radius: .8rem; background: var(--aviso-fondo); }
.recuadro-ofertas h3 { margin: 0 0 .3rem; font-size: 1.2rem; color: var(--aviso); }
.recuadro-ofertas p { margin: 0 0 .8rem; }
.recuadro-ofertas .opcion-grande { min-height: 4.5rem; font-size: 1.1rem; }
.resumen-eleccion ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.resumen-eleccion li { display: flex; justify-content: space-between; padding: .55rem .8rem; border-radius: .4rem; background: var(--fondo); font-size: 1.1rem; }
.resumen-eleccion li.si { background: var(--ok-fondo); }
.resumen-eleccion li.si strong { color: var(--ok); }
.resumen-eleccion li.no strong { color: var(--suave); }
.resumen-eleccion { margin-bottom: .8rem; }
/* Casillas en la vista del documento (PC): marcadas en verde con SÍ, el resto con NO */
.casilla-resultado { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: .3rem; min-width: 14rem; }
.casilla-resultado .marca { width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--texto); border-radius: .2rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.casilla-resultado strong { margin-left: auto; color: var(--suave); }
.casilla-resultado.si { background: var(--ok-fondo); }
.casilla-resultado.si strong, .casilla-resultado.si .marca { color: var(--ok); }
.lista-firmantes { display: grid; gap: .3rem; margin-top: .2rem; }
.pasos-conexion { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem; margin-bottom: .8rem; }
.pasos-conexion p { margin: 0 0 .3rem; }
.pasos-conexion small { word-break: break-all; }
.pasos-dispositivo ol { margin: .4rem 0 .6rem; padding-left: 1.3rem; }
.pasos-dispositivo li { margin-bottom: .3rem; }
.avisos-tablet { margin-top: 1rem; text-align: center; }

/* --- Avisos de resultado: junto al botón y flotantes --- */
.mensajes-junto { margin: .6rem 0; }
.mensajes-junto .aviso { box-shadow: 0 2px 10px rgba(16, 24, 32, .1); }
#avisos-flotantes { position: fixed; top: 1rem; right: 1rem; z-index: 1000; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); }
.aviso-flotante { position: relative; margin: 0; padding-right: 2.4rem; box-shadow: 0 6px 24px rgba(16, 24, 32, .22); border: 1px solid currentColor; }
.cerrar-aviso { position: absolute; top: .3rem; right: .3rem; border: 0; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; padding: .2rem .45rem; cursor: pointer; }
@media print { #avisos-flotantes { display: none; } }
.nota-safari { font-size: .82rem; margin: .5rem 0 .2rem !important; }
.direccion-grande { font-family: Consolas, monospace; font-size: 1.15rem; font-weight: 700; word-break: break-all; background: #fff;
  border: 1px solid var(--borde); border-radius: .3rem; padding: .35rem .5rem; margin: .2rem 0 .4rem; color: var(--texto); }

/* --- Copiar OD → OI y copiar de la ficha --- */
.botones-copiar { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
input.copiado, select.copiado { background: #fff4c2 !important; outline: 2px solid #e0b100; }
.aviso-copiado { margin-top: .5rem; }
.aviso-copiado > div { margin-top: .35rem; }
.boton-copiar { margin-top: .3rem; white-space: nowrap; font-weight: 400; }

/* --- Stock --- */
.precio-grande { font-size: 1.6rem; font-weight: 700; }
.existencias-grande { font-size: 2rem; font-weight: 700; margin: 0; }
.existencias-grande small { font-size: .95rem; font-weight: 400; color: var(--suave); }
.filas-marcas { display: block; padding: .4rem .8rem; }
.fila-marca { display: grid; grid-template-columns: 2fr 1fr 1fr 5rem auto auto; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.fila-marca:last-child { border-bottom: 0; }
.fila-marca.cabeza { font-size: .85rem; color: var(--suave); font-weight: 600; }
.lector-recuento { margin-bottom: 1rem; }
.entrada-lector { font-size: 1.3rem !important; font-family: Consolas, monospace; }
.lectura-recuento { font-size: 1.1rem; }
.resumen-recuento { margin: .4rem 0 .8rem; }
.vista-etiqueta { width: 100%; height: 14rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }

/* --- Albaranes --- */
.subir-albaran { margin-bottom: 1.2rem; }
.columnas-albaran { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 .8rem; }
.columnas-albaran select.asignada { border-color: var(--acento); }
.lineas-documento { max-height: 22rem; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; font-family: Consolas, monospace; font-size: .82rem; }
.lineas-documento a { display: block; padding: .2rem .5rem; color: var(--texto); text-decoration: none; white-space: nowrap; }
.lineas-documento a:hover { background: #eef5f8; }
.lineas-documento a.activa { background: var(--acento); color: #fff; }
.tabla-compacta th, .tabla-compacta td { padding: .3rem .5rem; font-size: .88rem; }
.paleta-zonas { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.paleta-zonas button.hecha:not(.primario) { border-color: var(--ok); color: var(--ok); }
.lienzo-zonas { position: relative; width: 100%; max-width: 60rem; border: 1px solid var(--borde); cursor: crosshair; user-select: none; touch-action: none; background: #fff; }
.lienzo-zonas img { width: 100%; height: 100%; display: block; pointer-events: none; }
.zona { position: absolute; border: 2px solid var(--acento); background: rgba(31, 111, 139, .15); font-size: .72rem; color: #fff; overflow: hidden; cursor: pointer; }
.zona::first-line { background: var(--acento); }
.zona-cabecera { border-color: #b26a00; background: rgba(224, 177, 0, .18); }
.zona-guia { border-style: dashed; pointer-events: none; }
.resumen-albaran { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: .7rem 1rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); margin-bottom: .8rem; }
.resumen-albaran.cuadra { border-color: var(--ok); background: var(--ok-fondo); }
.resumen-albaran.no-cuadra { border-color: var(--error); background: var(--error-fondo); }
.tabla-albaran td { vertical-align: top; padding: .4rem .35rem; }
.tabla-albaran input:not([type=checkbox]), .tabla-albaran select { padding: .3rem .4rem; font-size: .88rem; width: auto; }
.tabla-albaran td:nth-child(2) select { width: 100%; }
.tabla-albaran td.num input { text-align: right; }
.tabla-albaran td:nth-child(2) { min-width: 15rem; }
.tabla-albaran tr.linea-dudosa td { background: #fff8e1; }
.tabla-albaran tr.linea-fuera td { opacity: .55; }
.aviso-linea { color: var(--aviso); font-size: .82rem; margin-top: .25rem; }
.aviso-linea::before { content: "⚠ "; }
.texto-original { font-family: Consolas, monospace; font-size: .75rem; margin-top: .25rem; }
.reglas-propuestas { border-color: var(--acento); }

.pestanas-categorias { margin-top: -.6rem; }
.pestanas-categorias a { font-size: .92rem; padding: .45rem .8rem; }
.barra-guardar { position: sticky; bottom: 0; background: var(--fondo); padding: .6rem 0; align-items: center; z-index: 2; }
.barras-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; height: 7rem; align-items: end; margin: 1rem 0 .4rem; }
.barras-meses > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.barras-meses span { width: 70%; background: var(--acento); border-radius: .2rem .2rem 0 0; min-height: 0; }
.barras-meses small { font-size: .75rem; color: var(--texto); }
.barras-meses em { font-style: normal; font-size: .7rem; color: var(--suave); white-space: nowrap; }

/* --- Desplegable de sugerencias propio ------------------------------------------------------- */
.sugerencias {
  position: fixed; z-index: 60; overflow-y: auto; max-width: min(36rem, 95vw);
  background: #fff; color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); padding: .25rem 0; font-size: 1rem; font-weight: 400;
}
.sugerencia { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .4rem .75rem; cursor: pointer; white-space: nowrap; }
.sugerencia small { color: var(--suave); font-size: .85rem; }
.sugerencia.marcada { background: #e6f0f4; }
.sugerencia.sin-stock small { color: var(--error); }
.sugerencias-separador { padding: .35rem .75rem .2rem; font-size: .8rem; color: var(--suave); border-top: 1px solid var(--borde); margin-top: .2rem; text-transform: uppercase; letter-spacing: .03em; }
.sugerencias-vacio { padding: .45rem .75rem; color: var(--suave); font-size: .9rem; white-space: normal; }

/* --- Ventanas de aviso propias --------------------------------------------------------------- */
dialog.dialogo {
  border: none; border-radius: .75rem; padding: 1.4rem 1.6rem 1.1rem; width: min(30rem, 92vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25); color: var(--texto); background: var(--superficie);
}
dialog.dialogo::backdrop { background: rgba(20, 28, 36, .45); }
dialog.dialogo h2 { margin: 0 0 .6rem; }
dialog.dialogo p { margin: 0 0 .6rem; line-height: 1.45; }
dialog.dialogo input { width: 100%; margin: .2rem 0 .4rem; font-size: 1.1rem; text-transform: uppercase; }
dialog.dialogo .botonera { justify-content: flex-end; margin-top: 1rem; }
dialog.dialogo .botonera button { min-width: 8rem; padding: .55rem 1rem; }
button.peligro-lleno { background: var(--error); border-color: var(--error); color: #fff; }
button.peligro-lleno:hover { filter: brightness(1.08); }

/* --- Lentillas: línea de stock bajo cada ojo (adaptación y entrega) ---------------------------- */
tr.fila-estado td { border-top: none; padding-top: 0; padding-bottom: .5rem; }
.estado-stock { font-size: .88rem; }
.estado-stock.ok { color: var(--ok); }
.estado-stock.falta { color: var(--aviso); font-weight: 600; }
.estado-stock.suelto { color: var(--error); font-weight: 600; }
.estado-stock button { margin-left: .4rem; font-weight: 400; }
.rx-entrega { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rx-entrega small { display: block; white-space: normal; }

/* --- Ajustes › Etiquetas: vista previa en vivo ------------------------------------------------- */
.vista-etiqueta-imagen { background: #e9edf0; border-radius: var(--radio); padding: 1.2rem; display: flex; justify-content: center; }
.vista-etiqueta-imagen img { max-width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); border-radius: 2px; image-rendering: auto; }

/* Vista previa del ticket (Ajustes › Tickets y cajón): papel térmico de 80 mm. */
.vista-ticket { background: #fff; color: #111; font: 12px/1.35 "Consolas", "Courier New", monospace; padding: 14px 12px; width: max-content; max-width: 100%; overflow-x: auto; box-shadow: 0 1px 4px rgba(0,0,0,.18); border-radius: 2px; margin: 0; }
.vista-ticket span { display: block; white-space: pre; }
.vista-ticket .titulo { text-align: center; font-weight: 700; font-size: 1.6em; line-height: 1.5; }
.vista-ticket .negrita, .vista-ticket .titulo_derecha { font-weight: 700; }
.vista-ticket .centro { text-align: center; }
.vista-ticket .logo-ticket { height: auto; image-rendering: pixelated; }
.logo-ticket-vista { max-width: 320px; border: 1px dashed var(--borde); padding: .4rem; background: #fff; image-rendering: pixelated; }

/* Ficha del paciente: última graduación arriba y las anteriores a un clic. */
.resumen-graduacion .anteriores { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: .7rem 0 0; font-size: .92rem; }
.resumen-graduacion .anteriores > span:first-child { color: var(--suave); }
.chip { display: inline-block; padding: .15rem .55rem; border: 1px solid var(--borde, #ccd); border-radius: 999px; text-decoration: none; background: var(--fondo-suave, #f4f6f8); }
.chip:hover { border-color: var(--acento); }

/* Partes preparadas pero aún sin usar (p. ej. la receta oficial del Colegio en Ajustes › Graduaciones). */
fieldset.desactivado { opacity: .55; }

/* Venta: líneas de cada trabajo (se desplazan en pantallas estrechas) y totales. */
.tabla td.num, .tabla th.num { white-space: nowrap; }  /* «199,00 €» nunca se parte */
.lineas-venta { margin-top: .6rem; }
.lineas-venta th, .lineas-venta td { padding: .45rem .5rem; }
.lineas-venta td:nth-child(3) { width: 100%; }  /* el producto se queda con el ancho que sobra */
.lineas-venta [data-desc] { width: 100%; min-width: 14rem; }
.lineas-venta .campo-codigo { width: 11rem; }
.lineas-venta .campo-cantidad { width: 3.5rem; text-align: right; }
.lineas-venta .campo-pvp { width: 6.5rem; text-align: right; }
.lineas-venta .campo-dto { width: 4rem; text-align: right; }
.lineas-venta .rebaja-revision { display: block; color: var(--suave); }
.lineas-venta td:first-child { white-space: nowrap; }  /* «Lente OD» en una línea (tanda R, 18) */
.motivo-gris { color: var(--suave); margin-left: .3rem; }
.lineas-venta tr.fila-servicio td { background: var(--fondo-suave, #f6f8f9); }
.lineas-venta [data-rango] { margin: .3rem 0 0; font-size: .85rem; }
.lineas-venta [data-rango] button { margin: .15rem .2rem 0 0; }
.trabajo { border-left: 4px solid var(--acento); }
.totales-venta dd { font-size: 1.3rem; }

/* Agenda de citas. */
.agenda td { vertical-align: top; min-width: 12rem; }
.agenda .cita { border-left: 4px solid var(--acento); background: var(--superficie); border-radius: .3rem; padding: .3rem .5rem; margin-bottom: .3rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.agenda .cita small { display: block; color: var(--suave); }
.agenda .cita-no_vino { border-left-color: #c0262d; opacity: .75; }
.agenda .cita-atendida { border-left-color: #2e7d32; opacity: .75; }
.agenda .acciones-cita { margin-top: .25rem; display: flex; gap: .3rem; }
.agenda .hueco-libre { color: var(--suave); text-decoration: none; font-size: .9rem; }
.agenda .hueco-libre:hover { color: var(--acento); }
tr.fila-propuesta { background: #fff8e1; }
/* Importador general: casillas leídas con dudas (OCR) */
td.casilla-dudosa { background: #fff3bf; box-shadow: inset 0 0 0 2px #f08c00; }
.vista-importacion td { white-space: nowrap; }
/* PDF propio: páginas con recuadros (editor, firma y vista) */
.pagina-pdf { position: relative; background: #fff; border: 1px solid var(--borde); box-shadow: 0 1px 4px rgba(0,0,0,.12); margin: 0 auto 1rem; max-width: 54rem; width: 100%; user-select: none; }
.pagina-pdf > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pagina-pdf .numero-pagina { position: absolute; right: .4rem; bottom: .3rem; font-size: .75rem; color: var(--suave); }
.recuadro-pdf { position: absolute; border: 2px dashed var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); border-radius: 3px;
  display: flex; align-items: center; overflow: hidden; font-size: .78rem; color: #0b1f44; cursor: move; touch-action: none; }
.recuadro-pdf.elegido { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent); }
.recuadro-pdf .texto { padding: 0 .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recuadro-pdf .asa-tamano { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: var(--acento); cursor: nwse-resize; }
.recuadro-pdf.tipo-firma_paciente, .recuadro-pdf.tipo-firma_profesional { justify-content: center; }
.recuadro-pdf.fijo { cursor: default; border-color: transparent; background: transparent; }
.recuadro-pdf.fijo.tipo-casilla, .recuadro-pdf.fijo.tipo-firma_paciente { border: 2px dashed #f08c00; background: rgba(255, 243, 191, .55); }
.recuadro-pdf.fijo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.recuadro-pdf .aqui-firma { color: #a35a00; font-weight: 600; }
.casilla-pdf { display: flex; align-items: center; gap: .3rem; width: 100%; height: 100%; padding: 0 .2rem; cursor: pointer; }
.casilla-pdf input { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.marca-pdf { display: inline-block; width: 1em; border: 1px solid #333; text-align: center; line-height: 1; }
.falta-marcar { outline: 3px solid var(--error); }
.editor-pdf { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: start; }
.editor-pdf-panel { position: sticky; top: 2.5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; }
.editor-pdf-panel h2 { font-size: 1rem; }
.botonera.vertical { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
.editor-pdf-opciones { border-top: 1px solid var(--borde); margin-top: .8rem; padding-top: .6rem; }
@media (max-width: 800px) { .editor-pdf { grid-template-columns: 1fr; } .editor-pdf-panel { position: static; } }
/* Ventana flotante (buscador F2, lector y «abrir encima») */
.ventana-flotante { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 32, .45); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 2vw; }
.ventana-flotante[hidden] { display: none; }
.ventana-flotante-caja { background: var(--superficie); border-radius: var(--radio); width: min(70rem, 100%); height: 92vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
.ventana-flotante-caja header { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--borde); }
.ventana-flotante-caja header .acciones { margin-left: auto; display: flex; gap: .4rem; }
.buscador-flotante { flex: 1; font-size: 1.1rem; padding: .6rem .8rem; }
.resultados-flotante { overflow: auto; padding: .4rem 1rem 1rem; }
.ventana-flotante iframe { flex: 1; border: 0; width: 100%; }
.grupo-busqueda h3 { font-size: .95rem; margin: .8rem 0 .3rem; color: var(--suave); }
.grupo-busqueda ul { list-style: none; margin: 0; padding: 0; }
.grupo-busqueda a { display: block; padding: .45rem .6rem; border-radius: var(--radio); text-decoration: none; color: var(--texto); }
.grupo-busqueda a:hover, .grupo-busqueda a:focus { background: color-mix(in srgb, var(--acento) 12%, transparent); outline: none; }
.en-flotante .lateral, .en-flotante .franja-prueba { display: none; }
.en-flotante .contenido { margin-left: 0; }
.en-flotante body.con-franja-prueba { padding-top: 0; }
.boton-buscar-lateral { display: flex; align-items: center; gap: .5rem; margin: 0 .2rem .6rem; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); color: var(--suave); text-decoration: none; font-size: .92rem; }
.boton-buscar-lateral kbd { margin-left: auto; font-size: .75rem; border: 1px solid var(--borde); border-radius: 4px; padding: 0 .3rem; }
.accesos-paciente { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.6rem 0 .9rem; }
/* Estado «Entregado con deuda»: ámbar */
.etiqueta.deuda { background: #fff3bf; color: #8a4b00; border-color: #f0b400; }
.texto-deuda { color: #b35c00; }

/* Pedidos a proveedores */
.dato-copiar { font: inherit; padding: .15rem .45rem; margin: .1rem .2rem .1rem 0; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo, #fff); cursor: copy; }
.dato-copiar:hover { border-color: var(--primario, #1a7f37); }
.dato-copiar.dato-copiado { background: #dff5e3; border-color: #1a7f37; }
.ficha-web-encargo { margin: .6rem 0 .8rem; }
.ficha-web-encargo h3 { font-size: 1rem; margin: 0 0 .3rem; }
.numero-grande { font-size: 2.2rem; font-weight: 700; letter-spacing: .04em; margin: .3rem 0 .6rem; }
.grupo-pedido .botonera { gap: .5rem; align-items: center; }

/* Informes */
.texto-ok { color: var(--ok, #1a7f37); }
.periodos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.periodos .campo { margin: 0; }
.periodo-actual { margin: .5rem 0 0; }
.grafica-barras { display: flex; align-items: flex-end; gap: 2px; height: 11rem; padding-top: .5rem; }
.grafica-barras .barra { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.grafica-barras .barra span { display: block; width: 100%; max-width: 2.6rem; background: var(--primario, #1a7f37); border-radius: 3px 3px 0 0; min-height: 1px; }
.grafica-barras .barra small { font-size: .7rem; color: var(--suave); white-space: nowrap; height: 1rem; margin-top: .2rem; }
.barra-fila { display: inline-block; width: 4rem; height: .5rem; background: var(--borde); border-radius: 3px; margin-right: .4rem; vertical-align: middle; overflow: hidden; }
.barra-fila span { display: block; height: 100%; background: var(--primario, #1a7f37); }
@media print { .grafica-barras .barra span, .barra-fila span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Botón pulsado mientras se guarda (doble clic, app.js) */
button.enviando, .boton.enviando { opacity: .55; cursor: progress; }
.trabajando { margin: .6rem 0 0; color: var(--suave); font-weight: 600; }
.trabajando::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trabajando::before { animation: none; } }

/* Juntar dos fichas: iguales en gris, distintos resaltados y con su valor elegible */
table.juntar tr.igual th, table.juntar tr.igual td { color: var(--suave); background: transparent; }
table.juntar tr.distinto td { background: var(--aviso-fondo); }
table.juntar th { width: 12rem; }
.opcion-juntar { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; padding: .2rem .3rem; border-radius: 6px; }
.opcion-juntar:has(input:checked) { outline: 2px solid var(--acento); background: var(--superficie); font-weight: 600; }
.resumen-juntar { margin-top: 1rem; }

/* Encargos por avisar (tanda R, 27): los cuatro botones en una fila y del mismo tamaño; Teléfono y Anotar abren una
   cajita debajo sin mover la fila. */
.acciones-aviso { display: grid; grid-template-columns: repeat(4, minmax(5.5rem, 1fr)); gap: .3rem; align-items: start; }
.acciones-aviso.respuesta { grid-template-columns: repeat(2, minmax(5.5rem, 1fr)); margin-top: .3rem; max-width: 50%; }
.acciones-aviso > a, .acciones-aviso > button, .acciones-aviso > form > button, .acciones-aviso summary { width: 100%; justify-content: center; text-align: center; margin: 0; }
.acciones-aviso summary { list-style: none; cursor: pointer; }
.acciones-aviso summary::-webkit-details-marker { display: none; }
.desplegable-aviso { position: relative; }
.desplegable-aviso .caja-aviso { position: absolute; z-index: 20; right: 0; top: calc(100% + .25rem); min-width: 16rem; padding: .6rem;
  background: var(--fondo, #fff); border: 1px solid var(--borde, #ccc); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.acciones-aviso button[disabled] { opacity: .45; cursor: not-allowed; }
.etiqueta.aviso-confirmado { background: #dcfce7; color: #166534; }
.etiqueta.aviso-sin_respuesta { background: #fef3c7; color: #92400e; }
.botones-respuesta { margin: .4rem 0; }

/* Tanda R, 32 y 33: hora pasada debajo del campo; citas anuladas en una línea pequeña debajo de la activa. */
.aviso-campo { color: #92400e; font-size: .85rem; margin: .2rem 0 0; }
.cita-anulada { display: block; font-size: .8rem; color: var(--texto-suave, #777); text-decoration: none; margin-top: .15rem; }
.cita-anulada:hover { text-decoration: underline; }
.agenda.sin-anuladas .cita-anulada { display: none; }
/* Tanda R, 34: «Editar inicio» pequeño, abajo a la derecha. */
.editar-inicio { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* Tanda S, 8-12: Monitor con alertas en color, fichas que filtran y un bloque de color por estado. */
.resumen-monitor button.tarjeta-numero { text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--borde); width: 100%; }
.resumen-monitor .ficha-activa { outline: 3px solid var(--acento); }
.resumen-monitor .ficha-ambar { background: #fff7e0; border-color: #e2b23c; }
.resumen-monitor .ficha-roja { background: #fdecec; border-color: #d9534f; }
.alertas-monitor { background: #fff7e0; border-left: 6px solid #e2b23c; }
.alertas-monitor.alertas-rojas { background: #fdecec; border-left-color: #d9534f; }
.etiqueta.atencion { background: #fde9b8; color: #6b4b00; }
.bloque-estado { border-left: 6px solid var(--borde); border-radius: 6px; padding: .3rem .8rem .6rem; margin: .8rem 0; background: var(--fondo-suave, #fafafa); }
.bloque-estado > summary { cursor: pointer; padding: .3rem 0; }
.bloque-estado > summary .titulo-estado { font-weight: 700; font-size: 1.05rem; }
.bloque-estado.estado-pendiente { border-left-color: #9a9a9a; background: #f4f4f4; }
.bloque-estado.estado-pedido { border-left-color: #3b82c4; background: #eef5fc; }
.bloque-estado.estado-recibido { border-left-color: #7a5cc2; background: #f3effb; }
.bloque-estado.estado-montaje { border-left-color: #d98a1f; background: #fdf3e5; }
.bloque-estado.estado-listo { border-left-color: #2f9a4a; background: #ebf7ee; }
.acciones-fila { white-space: nowrap; }
.bloque-estado .tabla { width: 100%; max-width: none; }
.bloque-estado td:first-child { white-space: nowrap; }
.bloque-estado select { min-width: 11rem; width: auto; }
.resumen-monitor { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.acciones-fila form { display: inline; }
/* Tanda S, 7: resumen para la gestora */
.resumen-gestora .valor { font-size: 1.8rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
/* Tanda S, 18: los días de la semana de la agenda, todos a la misma altura (lleven o no el número de citas). */
.pestanas-agenda a { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.4rem; line-height: 1; vertical-align: middle; }
.pestanas-agenda a .etiqueta { line-height: 1; padding: .15rem .4rem; margin: 0; font-size: .75rem; }
.fila-agenda { gap: .5rem; }
/* Tanda S, 20: guardar arriba a la derecha, siempre visible. */
.guardar-arriba { position: fixed; top: .7rem; right: 1.2rem; z-index: 40; }
.guardar-arriba button { box-shadow: 0 2px 10px rgba(0, 0, 0, .2); padding: .55rem 1.2rem; }
@media print { .guardar-arriba { display: none; } }
/* Tanda S (B): lo leído con dudas de una foto, en amarillo, y el envío a la tablet o el móvil. */
.leido-dudoso { background: #fff3b0 !important; border-color: #d4a300 !important; }
.aparato-envio { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.aparato-envio select { width: auto; }
.escanear-receta { align-items: center; gap: .6rem; margin: .4rem 0; }
/* Tanda S, 22 y 28: lote de cada línea vendida; casilla «Regalo». */
.lote-linea { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; }
.lote-linea input { width: auto; padding: .15rem .3rem; font-size: .85rem; }
.lote-linea input[placeholder="falta"] { border-color: #e2b23c; background: #fff7e0; }
.casilla.regalo { font-size: .8rem; margin: 0 .3rem 0 0; }
.sin-partir { white-space: nowrap; }
/* Tanda S, 23: galería de imágenes del paciente */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.galeria figure { margin: 0; padding: .5rem; }
.galeria img { width: 100%; height: 12rem; object-fit: cover; border-radius: 6px; background: #eee; }
.galeria figcaption input { width: 7rem; }
.fila-elegida td { background: #ebf7ee; }
/* Tanda S, 24: esquema del ojo */
.esquema-ojos { display: flex; flex-wrap: wrap; gap: 1rem; }
.esquema-ojos figure { margin: 0; text-align: center; }
.esquema-ojos svg { width: 300px; max-width: 90vw; height: auto; border: 1px solid var(--borde); border-radius: 8px; background: #fafafa; touch-action: none; cursor: crosshair; }
.esquema-ojos .marca-esquema { cursor: grab; }
.esquema-dibujos img { height: 9rem; margin: .3rem .3rem 0 0; border: 1px solid var(--borde); border-radius: 6px; }
/* Tanda S, D: la trastienda en el móvil (taller, recepción, escáner) */
.movil { max-width: 40rem; margin: 0 auto; }
.boton-grande { display: block; width: 100%; padding: .9rem 1rem; font-size: 1.1rem; margin: .4rem 0; text-align: center; }
.movil-usuario { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--acento); color: #fff; padding: .5rem .8rem; border-radius: 8px; margin-bottom: .6rem; }
.movil-usuario .boton-grande { width: auto; margin: 0; font-size: 1rem; padding: .6rem 1rem; }
.movil-modos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-bottom: .6rem; }
.movil-modos a { text-align: center; padding: .6rem .2rem; border: 1px solid var(--borde); border-radius: 6px; text-decoration: none; }
.movil-modos a.activo { background: var(--acento); color: #fff; }
.movil-menu .boton-grande { padding: 1.3rem 1rem; font-size: 1.3rem; }
.movil-estados, .movil-avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .4rem; }
.movil-pedido { border-top: 1px solid var(--borde); padding: .7rem 0; }
.botones-usuarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; }
.pin-grande { font-size: 1.6rem; letter-spacing: .4rem; text-align: center; }
.pin-corto { width: 6rem; margin-bottom: .2rem; }
/* Tanda T, parte 1: interruptores de Ajustes › Funciones */
.grupo-funciones { display: grid; gap: .2rem; }
.interruptor-funcion { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .6rem .2rem; border-bottom: 1px solid var(--borde); cursor: pointer; }
.interruptor-funcion:last-child { border-bottom: 0; }
.interruptor-funcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-funcion .interruptor { width: 2.6rem; height: 1.45rem; border-radius: 1rem; background: #c7ccd1; position: relative; margin-top: .15rem; transition: background .15s; }
.interruptor-funcion .interruptor::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.interruptor-funcion input:checked + .interruptor { background: var(--acento); }
.interruptor-funcion input:checked + .interruptor::after { left: 1.3rem; }
.interruptor-funcion input:focus-visible + .interruptor { outline: 3px solid var(--acento); outline-offset: 2px; }
/* Tanda V, 2: lentes que se fabrican con la graduación y sus suplementos, en la venta */
.panel-lentes, .panel-suplementos { margin-top: .6rem; padding: .7rem .8rem; border: 1px solid var(--borde, #d6dbe0); border-radius: 8px; background: var(--acento-suave, #f4f6f8); }
.filtros-lentes { align-items: flex-end; }
.grupos-suplementos { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.grupos-suplementos fieldset { margin: 0; min-width: 14rem; }
.grupos-suplementos .casilla { display: block; margin: .15rem 0; }


/* --- Klaro Clínicas: tablet y pantallas nuevas --------------------------------------------------------------- */
/* Botones y campos grandes: se usa con el dedo en la tablet. */
button, .boton { min-height: 2.6rem; }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { min-height: 2.6rem; font-size: 1rem; }
button.grande, .boton.grande { min-height: 3.2rem; font-size: 1.1rem; padding: .7rem 1.3rem; }
.tabla td, .tabla th { padding: .6rem .7rem; }
@media (pointer: coarse) { button, .boton { min-height: 3rem; } .tabla td { padding: .8rem .7rem; } }
input.pin { font-size: 1.6rem; letter-spacing: .6rem; text-align: center; max-width: 11rem; }
.punto-color { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
/* Permisos por bloques (Ajustes › Usuarios) */
.bloques-permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem 1.2rem; }
.bloque-permisos h3 { font-size: .95rem; margin: .4rem 0 .3rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.casilla.permiso { align-items: flex-start; padding: .3rem .4rem; border-radius: var(--radio); margin: 0 -.4rem; }
.casilla.permiso small { display: block; color: var(--suave); font-size: .82rem; line-height: 1.3; }
.casilla.permiso.excepcion { background: var(--aviso-fondo); }
.es-admin .casilla.permiso { opacity: .55; }
/* Cambio rápido de usuario en la pantalla bloqueada */
.cambio-usuario { margin-top: 1rem; }
.botones-usuarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.boton-usuario { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .7rem; cursor: pointer; }
.boton-usuario:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.boton-usuario small { display: block; color: var(--suave); font-size: .8rem; }
.boton-usuario input { margin: 0; }
/* Usuarios de la demostración */
.usuarios-demo { margin-top: 1rem; }
.lista-demo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lista-demo button { text-transform: none; }
/* Horario por días */
.tabla-horario input[type=time] { min-width: 6.5rem; }
.tabla-horario td { vertical-align: middle; }

/* Sin conexión: aviso fijo arriba y la pantalla en solo lectura (los formularios no se envían). */
.aviso-sin-conexion { position: sticky; top: 0; z-index: 60; background: #b91c1c; color: #fff; font-weight: 700; padding: .6rem 1rem; text-align: center; }
body.sin-conexion form button, body.sin-conexion form input[type="submit"], body.sin-conexion [data-arrastrable] { pointer-events: none; opacity: .5; }
body.sin-conexion main.contenido { filter: grayscale(.35); }