:root {
  --azul: #0d7d8f;
  --azul-osc: #0a5f6d;
  --azul-claro: #e6f4f6;
  --menta: #14b8a6;
  --texto: #16232b;
  --suave: #5d7280;
  --borde: #dde5ea;
  --fondo: #f4f7f9;
  --panel: #ffffff;
  --ok: #16a34a;
  --alerta: #d97706;
  --error: #dc2626;
  --morado: #7c3aed;
  --radio: 12px;
  --sombra: 0 1px 3px rgba(16,40,56,.08), 0 6px 18px rgba(16,40,56,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* El fondo se pinta también en html: si la app se incrusta en una página con
   tema oscuro, el lienzo bajo el body no se transparenta. */
html, body { height: 100%; background: var(--fondo); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }

/* Foco visible para quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Quien pide menos movimiento no ve animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------ Carga ---------------------------------- */
.pantalla-carga {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; height: 100vh; color: var(--suave);
}
.spinner {
  width: 36px; height: 36px; border: 3px solid var(--borde);
  border-top-color: var(--azul); border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------ Login ---------------------------------- */
.login-fondo {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(135deg, #0d7d8f 0%, #0a5f6d 50%, #134e5e 100%);
}
/* Registro de cambios (Configuración y la pestaña «Cambios»). */
.lista-registro { max-height: 480px; overflow-y: auto; }
.lista-registro li.item-registro { display: block; padding: 7px 0; }

/* Bloqueo por inactividad: tapa todo, incluidas las ventanas abiertas. */
.bloqueo-inactividad { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; }
.login-caja {
  background: #fff; border-radius: 18px; padding: 34px; width: min(420px, 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-caja h1 { font-size: 1.6rem; margin-bottom: 4px; }
.login-caja .sub { color: var(--suave); margin-bottom: 22px; font-size: .93rem; }
.demo-accesos {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde);
  font-size: .82rem; color: var(--suave);
}
.demo-accesos button {
  display: block; width: 100%; text-align: left; margin-top: 6px; padding: 8px 10px;
  background: var(--azul-claro); border: 1px solid var(--borde); border-radius: 8px; cursor: pointer;
}
.demo-accesos button:hover { background: #d3ecef; }

/* ------------------------------ Layout --------------------------------- */
.marco { display: flex; min-height: 100vh; }
.lateral {
  width: 232px; flex-shrink: 0; background: #0f2b33; color: #cfe3e7;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.marca { padding: 20px 18px; font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: .5px; }
.marca span { color: var(--menta); }
.nav { flex: 1; overflow-y: auto; padding: 4px 10px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px;
  color: #b9d3d9; text-decoration: none; margin-bottom: 3px; font-size: .94rem;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.activo { background: var(--azul); color: #fff; font-weight: 600; }
.nav .icono { width: 20px; text-align: center; }
.usuario-caja { padding: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.usuario-caja .nom { color: #fff; font-weight: 600; }
/* El nombre del puesto ya viene escrito como se dice; capitalizarlo producía «Doctor/A». */
.usuario-caja .rol { color: var(--menta); font-size: .78rem; }
.usuario-caja button {
  margin-top: 10px; width: 100%; padding: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); color: #cfe3e7; border-radius: 8px; cursor: pointer;
}
.usuario-caja button:hover { background: rgba(255,255,255,.16); }
/* «Marcar entrada / salida» de recepción: resalta sobre los otros botones de la caja. */
.usuario-caja .asistencia-caja button.marcar { background: var(--menta, #b8d8c8); color: #1f3a30; border-color: transparent; font-weight: 600; }
.usuario-caja .asistencia-caja button.marcar.salida { background: rgba(255,255,255,.92); }
.usuario-caja .asistencia-caja button.marcar:disabled { opacity: .55; cursor: not-allowed; }
.usuario-caja .asistencia-caja { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.usuario-caja .asistencia-texto { color: #cfe3e7; margin-top: 4px; white-space: normal; line-height: 1.3; }

/* El hueco de abajo deja sitio al botón flotante de ayuda: nada queda debajo. */
.contenido { flex: 1; min-width: 0; padding: 22px 26px 96px; }
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.cabecera h2 { font-size: 1.45rem; }
.cabecera .desc { color: var(--suave); font-size: .88rem; }
.barra-movil { display: none; }

/* ------------------------------ Tarjetas -------------------------------- */
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px;
}
.tarjeta > h3 { font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rejilla { display: grid; gap: 16px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Una tarjeta con tabla necesita el ancho entero: en dos columnas de 350 px la
   tablet escondía la columna del dinero. */
.rejilla.c2:has(.tabla-envoltura) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.kpi .etq { color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.kpi .val { font-size: 1.7rem; font-weight: 700; margin-top: 4px; }
.kpi .val.ok { color: var(--ok); } .kpi .val.mal { color: var(--error); }
.kpi .pie { color: var(--suave); font-size: .8rem; }

/* ----------------------------- Formularios ------------------------------ */
.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 5px; color: #3a4d59; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 9px;
  background: #fff; outline: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(13,125,143,.14);
}
.campo textarea { min-height: 76px; resize: vertical; }
.campo .ayuda { font-size: .78rem; color: var(--suave); margin-top: 4px; }
.fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fila > .a-lo-ancho { grid-column: 1 / -1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 9px; border: 1px solid transparent;
  background: var(--azul); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--azul-osc); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.sec { background: #fff; color: var(--texto); border-color: var(--borde); }
.btn.sec:hover { background: #f0f4f6; }
.btn.peligro { background: var(--error); }
.btn.peligro:hover { background: #b91c1c; }
.btn.exito { background: var(--ok); }
.btn.chico { padding: 6px 11px; font-size: .84rem; }
.acciones { display: flex; gap: 9px; flex-wrap: wrap; }
.acciones.fin { justify-content: flex-end; }

/* ------------------------------- Tablas --------------------------------- */
/* Si aun así una tabla no cabe, se ve una sombra en el borde por donde sigue:
   sin ella, la columna cortada no dejaba ver que se podía deslizar. */
.tabla-envoltura {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), transparent) right / 14px 100% no-repeat scroll;
}
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabla th, table.tabla td { padding: 10px 11px; text-align: left; border-bottom: 1px solid var(--borde); }
table.tabla th { color: var(--suave); font-size: .77rem; text-transform: uppercase; letter-spacing: .4px; }
table.tabla tbody tr:hover { background: #f7fafb; }
table.tabla td.num, table.tabla th.num {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kpi .val { font-variant-numeric: tabular-nums; }

/* ------------------------------ Etiquetas ------------------------------- */
.eti {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.tabla-abonos .eti { white-space: normal; }
.eti.agendada    { background: #e0f2fe; color: #0369a1; }
.eti.confirmada  { background: #dcfce7; color: #15803d; }
.eti.en_curso    { background: #fef3c7; color: #b45309; }
.eti.completada  { background: #e0e7ff; color: #4338ca; }
.eti.cancelada   { background: #fee2e2; color: #b91c1c; }
.eti.no_asistio  { background: #f3f4f6; color: #4b5563; }
.eti.pendiente   { background: #fef3c7; color: #b45309; }
.eti.firmado     { background: #dcfce7; color: #15803d; }
.eti.completado  { background: #dcfce7; color: #15803d; }
.eti.rechazado, .eti.cancelado { background: #fee2e2; color: #b91c1c; }
.eti.alta { background: #fee2e2; color: #b91c1c; }
.eti.media { background: #fef3c7; color: #b45309; }
.eti.baja { background: #e0f2fe; color: #0369a1; }
.eti.info { background: var(--azul-claro); color: var(--azul-osc); }

/* ------------------------------- Agenda --------------------------------- */
.agenda-controles {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px;
}
.agenda-controles .campo { margin-bottom: 0; min-width: 150px; }
.pestanas { display: flex; gap: 4px; background: #e8eef1; padding: 4px; border-radius: 10px; }
.pestanas button {
  padding: 8px 14px; border: none; background: transparent; border-radius: 7px;
  cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--suave);
}
.pestanas button.activo { background: #fff; color: var(--azul); box-shadow: var(--sombra); }

.agenda-rejilla { overflow-x: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.agenda-tabla { border-collapse: collapse; width: 100%; min-width: 620px; }
.agenda-tabla th {
  position: sticky; top: 0; background: #f7fafb; z-index: 2; padding: 9px 8px;
  border-bottom: 2px solid var(--borde); font-size: .82rem; text-align: center;
}
.agenda-tabla th small { display: block; font-weight: 400; color: var(--suave); font-size: .72rem; }
.agenda-tabla td { border-bottom: 1px solid #eef2f4; border-left: 1px solid #eef2f4; vertical-align: top; padding: 2px; height: 42px; }
.agenda-tabla td.hora {
  width: 62px; border-left: none; color: var(--suave); font-size: .78rem;
  text-align: right; padding-right: 8px; background: #fbfdfd; white-space: nowrap;
}
.bloque-cita {
  border-radius: 7px; padding: 5px 7px; font-size: .78rem; cursor: pointer;
  border-left: 4px solid var(--azul); background: var(--azul-claro); margin-bottom: 2px;
  overflow: hidden;
}
.bloque-cita:hover { filter: brightness(.96); }
.bloque-cita .pac { font-weight: 700; display: block; }
.bloque-cita .det { color: var(--suave); font-size: .72rem; display: block; }
.bloque-cita.estado-cancelada, .bloque-cita.estado-no_asistio { opacity: .55; text-decoration: line-through; }
.bloque-sigue {
  border-left: 4px solid var(--azul); border-radius: 7px; padding: 4px 7px; margin-bottom: 2px;
  background: repeating-linear-gradient(135deg, #eef6f7 0 6px, #f7fbfb 6px 12px);
  color: var(--suave); font-size: .72rem; cursor: pointer;
}
/* La hora de otro doctor, en la agenda de un doctor: tomada, sin el paciente. */
.bloque-ocupado {
  border-left: 4px solid #9aa5a0; border-radius: 7px; padding: 4px 7px; margin-bottom: 2px;
  background: repeating-linear-gradient(135deg, #eef0ee 0 6px, #f6f7f6 6px 12px);
  color: var(--suave); font-size: .72rem;
}
/* El horario propio de un doctor, en su formulario (Configuración → Doctores). */
.dias-horario { border: 1px solid var(--borde); border-radius: 9px; padding: 10px; margin: 6px 0; }
.fila-horario { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 3px 0; }
.fila-horario label { display: flex; gap: 8px; align-items: center; min-width: 110px; }
.fila-horario input[type="time"] { width: auto; }
/* Fuera del horario propio del doctor (Configuración → Doctores). */
.agenda-tabla td.no-atiende { background: repeating-linear-gradient(135deg, #eceeec 0 6px, #f4f5f4 6px 12px); }
.no-atiende-texto { color: var(--suave); font-size: .72rem; }
.bloque-cita.choca, .linea-cita.choca { outline: 2px solid #c0392b; }
.bloque-cita .aviso-choque, .linea-cita .aviso-choque { display: block; color: #a02a1e; font-weight: 700; font-size: .72rem; margin-top: 2px; }
.dia-encabezado { background: #eef6f7; font-weight: 700; padding: 8px 10px; font-size: .88rem; }

/* ---------------------------- Línea de tiempo --------------------------- */
.linea { border-left: 2px solid var(--borde); margin-left: 8px; padding-left: 18px; }
.linea .item { position: relative; padding-bottom: 18px; }
.linea .item::before {
  content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--azul); border: 2px solid #fff;
}
.linea .item.tratamiento::before { background: var(--menta); }
.linea .item.consentimiento::before { background: var(--morado); }
.linea .item.foto::before { background: var(--alerta); }
.linea .fecha { font-size: .78rem; color: var(--suave); }
.linea .tit { font-weight: 700; }
.linea .det { font-size: .87rem; color: #45585f; }

/* ------------------------------- Fotos ---------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.galeria figure { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; }
.galeria img { width: 100%; height: 110px; object-fit: cover; display: block; background: #eef2f4; }
.galeria figcaption { padding: 7px 9px; font-size: .78rem; }
.galeria figcaption b { display: block; }
.galeria figcaption span { color: var(--suave); }

/* ----------------------------- Odontograma ------------------------------ */
.odontograma { display: flex; flex-direction: column; gap: 12px; }
/* Una arcada siempre en una fila, como en la boca: las piezas se achican en pantallas angostas. */
.arcada { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 42px); gap: 3px; justify-content: center; }
.diente {
  min-width: 0; min-height: 62px; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  font-size: .68rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1px; padding: 2px 0; cursor: pointer; position: relative; color: var(--texto);
}
.diente:hover { border-color: var(--azul); }
.diente .num { font-weight: 700; line-height: 1.1; }
.diente .dibujo-pieza { display: block; width: 100%; max-width: 32px; height: auto; }
.diente .marca-pieza { font-size: .62rem; font-weight: 700; line-height: 1; min-height: .62rem; color: var(--suave); }
/* Una pieza con algo por tratar lleva además el borde rojo: se ve de lejos. */
.diente.hay-por-tratar { border-color: #dc2626; }
.diente.ausente .dibujo-pieza, .diente.extraccion .dibujo-pieza { opacity: .9; }
.pieza-grande { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pieza-grande .cara-tocable { cursor: pointer; }
.pieza-grande .cara-tocable:hover { opacity: .8; stroke-width: 1.6; }
.editor-pieza { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.editor-pieza .campo { margin-bottom: 6px; }
.editor-pieza .campo.resaltada select { outline: 3px solid var(--azul); }
@media (max-width: 560px) { .editor-pieza { grid-template-columns: 1fr; } }
.resumenes-odonto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 700px) { .resumenes-odonto { grid-template-columns: 1fr; } }
.resumen-odonto { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; }
.resumen-odonto h4 { font-size: .88rem; margin-bottom: 4px; }
.resumen-odonto ul { margin: 0; padding-left: 18px; font-size: .86rem; }
.resumen-odonto.por-tratar { border-left: 4px solid #dc2626; }
.resumen-odonto.ya-hecho { border-left: 4px solid #1d4ed8; }
.leyenda-simbolos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .82rem; color: var(--suave); }
.leyenda-simbolos .simbolo { display: inline-flex; align-items: center; gap: 5px; }
/* En pantalla, los dibujos de la leyenda más grandes: a 22 px caries, fractura y sellante se veían iguales. */
.leyenda-simbolos .dibujo-pieza { width: 30px; height: 30px; flex: none; }
.leyenda-simbolos .simbolo.por_hacer span { color: #b91c1c; }
.leyenda-simbolos .simbolo.hecho span { color: #1e40af; }
.leyenda-simbolos .marca-t { color: var(--texto); font-size: .72rem; }
.leyenda-simbolos .muestra-nota { display: inline-block; width: 18px; height: 14px; border: 1px solid var(--borde);
  border-radius: 3px; box-shadow: inset 0 -3px 0 var(--morado); }
.leyenda { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--suave); }
/* Solo el cuadrito del estado, no el del texto que va dentro: con `span span`
   salía un segundo cuadrito blanco que parecía una casilla para marcar. */
.leyenda > span::before {
  content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; border: 1px solid var(--borde);
}
.leyenda .caries::before { background: #fee2e2; }
.leyenda .obturado::before { background: #dbeafe; }
.leyenda .corona::before { background: #fef3c7; }
.leyenda .ausente::before { background: #e5e7eb; }
.leyenda .endodoncia::before { background: #ede9fe; }
.leyenda .implante::before { background: #ccfbf1; }
.leyenda .fractura::before { background: #ffe4e6; }
.leyenda .sellante::before { background: #ecfccb; }
.leyenda .extraccion::before { background: #fecaca; border-color: #dc2626; }
.leyenda b { color: var(--texto); font-weight: 700; margin-right: 3px; }

/* ------------------------------- Modales -------------------------------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(15,35,43,.55); display: flex;
  align-items: flex-start; justify-content: center; padding: 24px 14px; z-index: 200;
  overflow-y: auto;
}
/* El cuadro nunca es más alto que la pantalla: el contenido se desplaza por
   dentro y los botones de guardar y cancelar se quedan siempre a la vista. En
   1366x768 el botón «Agendar cita» caía por debajo del borde y nada avisaba. */
.modal {
  background: #fff; border-radius: 16px; width: min(680px, 100%); box-shadow: 0 24px 60px rgba(0,0,0,.3);
  margin: auto 0; display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
.modal.ancho { width: min(940px, 100%); }
.modal-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--borde);
}
.modal-cab h3 { font-size: 1.07rem; }
.modal-cab button {
  background: transparent; border: none; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--suave); padding: 0 4px;
}
.modal-cuerpo { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-pie {
  padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 9px;
  justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; background: #fff;
  border-radius: 0 0 16px 16px;
}

/* -------------------------------- Avisos -------------------------------- */
/* La columna de avisos no intercepta clics: su caja invisible cubría el botón de
   ayuda y las acciones de la esquina, y durante los segundos que duraba el aviso
   los clics no llegaban a nada. Cada aviso concreto sí es pulsable. */
.avisos {
  /* Por encima del botón de ayuda, no sobre él: aunque cada aviso sí sea
     pulsable, ninguno debe caer encima de un botón de la esquina. */
  position: fixed; bottom: 68px; right: 18px; z-index: 400; display: flex;
  flex-direction: column; gap: 9px; max-width: min(420px, 92vw);
  pointer-events: none;
}
.aviso {
  pointer-events: auto;
  background: #fff; border-left: 4px solid var(--azul); border-radius: 10px; padding: 12px 15px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); font-size: .9rem; animation: entrar .25s ease;
}
.aviso.error { border-left-color: var(--error); }
.aviso.exito { border-left-color: var(--ok); }
.aviso.alerta { border-left-color: var(--alerta); }
.aviso b { display: block; margin-bottom: 2px; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* -------------------------------- Firma --------------------------------- */
.firma-lienzo {
  border: 2px dashed var(--borde); border-radius: 10px; background: #fbfdfd;
  width: 100%; height: 190px; touch-action: none; display: block; cursor: crosshair;
}
.consent-texto {
  background: #f8fafb; border: 1px solid var(--borde); border-radius: 10px;
  padding: 15px; font-size: .89rem; max-height: 260px; overflow-y: auto;
}
.consent-texto h4 { font-size: .84rem; text-transform: uppercase; color: var(--azul); margin: 12px 0 4px; letter-spacing: .4px; }
.consent-texto h4:first-child { margin-top: 0; }

/* ------------------------------- Varios --------------------------------- */
.vacio { text-align: center; padding: 30px 16px; color: var(--suave); font-size: .9rem; }
.alerta-caja {
  border-radius: 10px; padding: 12px 14px; font-size: .88rem; margin-bottom: 14px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}
.alerta-caja.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alerta-caja.aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
/* Una explicación, no un problema: en gris neutro. */
.alerta-caja.info { background: #f4f6f5; border-color: #dde3df; color: #33403a; }
.alerta-caja ul { margin: 6px 0 0 18px; }
.buscador { display: flex; gap: 9px; margin-bottom: 15px; flex-wrap: wrap; }
.buscador input { flex: 1; min-width: 220px; padding: 11px 14px; border: 1px solid var(--borde); border-radius: 10px; }
.lista-simple { list-style: none; }
.lista-simple li { padding: 10px 0; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lista-simple li:last-child { border-bottom: none; }
.lista-simple .tit { font-weight: 600; }
.lista-simple .det { font-size: .84rem; color: var(--suave); }
.enlace-btn { background: none; border: none; color: var(--azul); cursor: pointer; padding: 0; font-weight: 600; text-decoration: underline; }
.mini { font-size: .82rem; color: var(--suave); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 900px) {
  .marco { flex-direction: column; }
  .lateral {
    width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; flex-wrap: wrap; overflow: visible; gap: 8px; padding: 8px 10px;
  }
  .marca { padding: 6px 8px; font-size: 1rem; white-space: nowrap; }
  /* Envuelve en varias líneas en vez de esconderse en una tira que se desliza:
     en 768 px la mitad del menú quedaba fuera de la vista sin ninguna pista. */
  .nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; overflow: visible; }
  .nav a { margin-bottom: 0; padding: 9px 11px; white-space: nowrap; font-size: .86rem; }
  /* El nombre de cada sección se queda: en tablet la barra se desplaza de lado,
     que es mejor que dejar cuatro emoji sin explicación. */
  .nav a .txt { display: inline; }
  .usuario-caja { border-top: none; border-left: 1px solid rgba(255,255,255,.1); padding: 4px 10px; white-space: nowrap; }
  .usuario-caja button { margin-top: 3px; padding: 5px 8px; font-size: .78rem; }
  /* 96px, no 50: el botón «¿Cómo hago…?» flota abajo a la derecha y con el
     hueco corto tapaba el último botón de la página (se comprobó que solapaba
     «➕ Agendar seguimiento» a 820×1180). */
  .contenido { padding: 16px 14px 96px; }
}
@media (max-width: 560px) {
  .modal-fondo { padding: 10px; }
  .cabecera h2 { font-size: 1.2rem; }
}

/* ====================== Consentimiento informado ======================== */

.hoja {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 34px 38px; margin-bottom: 18px;
  max-width: 900px; position: relative;
}
.documento { font-size: .95rem; line-height: 1.65; color: #1b2a33; }
.doc-titulo {
  font-size: 1.05rem; text-align: center; letter-spacing: .4px;
  margin-bottom: 18px; text-transform: uppercase;
}
.doc-encabezado {
  text-align: center; border-bottom: 2px solid var(--borde);
  padding-bottom: 12px; margin-bottom: 20px;
}
.doc-clinica { font-weight: 800; font-size: 1.02rem; }
.doc-clinica-datos { color: var(--suave); font-size: .84rem; }
.doc-parrafo { margin: 14px 0; text-align: justify; }
.doc-lista { margin: 14px 0 14px 22px; }
.doc-punto { margin-bottom: 9px; text-align: justify; }
.doc-lugar { margin-top: 26px; font-size: .9rem; }

/* Consentimiento de especialidad (Fase 1, ciclo 5): la cabecera de las hojas
   «FORMULARIO» como una rejilla de datos, subtítulos, viñetas y el pie legal. */
.doc-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 18px; margin: 0 0 18px; font-size: .88rem;
}
.doc-dato { display: flex; flex-direction: column; border-bottom: 1px solid var(--borde); padding-bottom: 4px; min-width: 0; }
.doc-dato-eti { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--suave); }
.doc-dato-valor { font-weight: 600; overflow-wrap: anywhere; }
.doc-dato-valor.sin-dato { font-weight: 400; color: var(--suave); }
.doc-subtitulo { font-size: .92rem; text-transform: uppercase; letter-spacing: .3px; margin: 20px 0 6px; }
.doc-vinetas { list-style: disc; }
.doc-pie-legal { margin-top: 26px; font-size: .8rem; line-height: 1.5; color: var(--suave); }
.doc-pie-legal p { margin: 8px 0; text-align: justify; }
.doc-responsabilidad { font-style: italic; }
.firma-papel {
  height: 110px; border-bottom: 1px solid var(--texto); display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 8px; font-style: italic; color: var(--suave);
}
.galeria .pdf-miniatura {
  width: 100%; height: 110px; border: 0; background: #eef2f4; font-size: 1.3rem; font-weight: 700;
  cursor: pointer; color: var(--texto);
}
@media (max-width: 600px) { .hoja { padding: 20px 16px; } }

.firmas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px; margin-top: 34px;
}
.firma-bloque { text-align: center; }
.firma-img {
  max-width: 100%; height: 110px; object-fit: contain;
  border-bottom: 1px solid var(--texto); display: block; margin: 0 auto;
}
.firma-linea { height: 110px; border-bottom: 1px solid var(--texto); }
.firma-pie { padding-top: 7px; }
/* La firma de un resumen (no la de un consentimiento): más baja, para que
   quepa con lo que firma. */
.firmas-compactas { margin-top: 8px; margin-bottom: 22px; }
.firmas-compactas .firma-linea { height: 48px; }
.firmas-compactas .firma-pie { padding-top: 4px; }
.cierre-impresion { break-inside: avoid; }
.firma-rol { font-weight: 700; font-size: .85rem; }
.firma-nombre { font-size: .9rem; }
.firma-detalle { color: var(--suave); font-size: .78rem; }

.zona-firmas { margin-top: 30px; border-top: 2px dashed var(--borde); padding-top: 22px; }
.firma-campo {
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px; background: #fbfdfd;
}
.firma-etiqueta { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.firma-lienzo {
  border: 2px dashed var(--borde); border-radius: 10px; background: #fff;
  width: 100%; height: 190px; touch-action: none; display: block; cursor: crosshair;
}
.firma-lienzo.con-trazo { border-style: solid; border-color: var(--azul); }
.firma-aviso.ok { color: var(--ok); font-weight: 600; }

.sello-borrador {
  position: absolute; top: 26px; right: 30px;
  border: 3px solid var(--alerta); color: var(--alerta);
  padding: 6px 14px; border-radius: 8px; font-weight: 800;
  transform: rotate(-8deg); letter-spacing: 1px; font-size: .85rem;
}

/* Modo tablet: pantalla limpia para entregar el dispositivo al paciente */
body.modo-tablet .lateral,
body.modo-tablet .consent-vista .cabecera,
body.modo-tablet .consent-vista .tarjeta.sin-imprimir { display: none; }
/* Hueco arriba para el botón fijo de salir: se montaba encima del recuadro de
   aviso y tapaba justo el texto legal del consentimiento de un menor. */
body.modo-tablet .contenido { padding: 58px 10px 10px; }
body.modo-tablet .hoja { max-width: 100%; padding: 26px; font-size: 1.05rem; }
body.modo-tablet .documento { font-size: 1.05rem; }
body.modo-tablet .firma-lienzo { height: 240px; }
.salir-tablet { display: none; }
/* Una franja fija arriba, del color del fondo, donde vive el botón de salir:
   al bajar por el documento, el texto pasa por debajo de la franja en vez de
   quedar tapado a medias por el botón (a 1366 cortaba el final de las líneas). */
body.modo-tablet::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 140;
  background: var(--fondo); box-shadow: 0 1px 0 var(--borde);
}
@media print { body.modo-tablet::before { display: none; } }
body.modo-tablet .salir-tablet {
  /* Debajo del fondo de las ventanas (200): con la pregunta de salir abierta,
     el botón queda tapado y no se puede tocar otra vez. */
  display: inline-flex; position: fixed; top: 12px; right: 14px; z-index: 150;
  box-shadow: var(--sombra);
}

/* ============================= Impresión ================================ */

.vista-impresion .hoja { max-width: 940px; }
.membrete {
  border-bottom: 2px solid var(--borde); padding-bottom: 12px; margin-bottom: 20px;
}
.membrete-sub { font-weight: 600; margin-top: 4px; }
.bloque-impresion { margin-bottom: 22px; break-inside: avoid; }
.titulo-impresion {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--azul); border-bottom: 1px solid var(--borde);
  padding-bottom: 5px; margin-bottom: 10px;
}
.rejilla-impresion {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px;
}
.dato-impreso { font-size: .89rem; }
.dato-etq { color: var(--suave); }
.resumen-cuenta { font-weight: 700; margin-top: 10px; }
.galeria-impresion {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.galeria-impresion img {
  width: 100%; height: 120px; object-fit: cover;
  border: 1px solid var(--borde); border-radius: 8px; background: #eef2f4;
}
.galeria-impresion figcaption { font-size: .74rem; color: var(--suave); margin-top: 4px; }

@media print {
  /* También el fondo de la página: si no, la última hoja salía gris debajo del papel. */
  html, body { background: #fff; }
  .lateral, .sin-imprimir, .avisos, .pestanas, .modal-fondo { display: none !important; }
  .marco { display: block; }
  .contenido { padding: 0; }
  .hoja {
    box-shadow: none; border: none; border-radius: 0;
    padding: 0; margin: 0; max-width: 100%;
  }
  .tarjeta { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  table.tabla { font-size: .8rem; }
  a { color: inherit; text-decoration: none; }
  .bloque-impresion { break-inside: avoid; }
  .firmas { break-inside: avoid; }
  .cierre-impresion { break-inside: avoid; }
  @page { margin: 15mm; }
}

/* ---------------- Buscador de pacientes en la barra lateral -------------- */

.buscador-global { position: relative; padding: 0 12px 10px; }
@media (max-width: 900px) {
  /* En horizontal el buscador necesita un ancho mínimo utilizable: encogido a
     unos pocos píxeles, buscar un teléfono dejaba de ser posible. */
  .buscador-global { flex: 1 1 220px; min-width: 180px; padding: 0; }
  .resultados-busqueda { left: 0; right: 0; }
}
.buscador-global input {
  width: 100%; padding: 9px 12px; border-radius: 9px; font-size: .88rem;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff;
}
.buscador-global input::placeholder { color: rgba(255,255,255,.55); }
.buscador-global input:focus { background: rgba(255,255,255,.14); outline: 2px solid var(--menta); }
.resultados-busqueda {
  position: absolute; left: 12px; right: 12px; top: 100%; z-index: 60;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.resultados-busqueda .mini { padding: 10px 12px; }
.resultados-busqueda .resultado {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
  border-bottom: 1px solid var(--borde); text-decoration: none;
}
.resultados-busqueda .resultado:last-child { border-bottom: 0; }
.resultados-busqueda .resultado:hover { background: var(--azul-claro); }
.resultados-busqueda .r-nom { font-weight: 600; color: var(--texto); font-size: .9rem; }
.resultados-busqueda .r-tel { font-size: .8rem; color: var(--suave); }

/* ------------------- La página del día, como en papel -------------------- */

.hoja-dia {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden;
}
.renglon-dia {
  display: grid; grid-template-columns: 74px 1fr; align-items: stretch;
  border-bottom: 1px solid var(--borde);
}
.renglon-dia:last-child { border-bottom: 0; }
.renglon-dia.vacia { background: repeating-linear-gradient(180deg, transparent, transparent 27px, #fafcfd 27px, #fafcfd 28px); }
.renglon-hora {
  padding: 10px 12px; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--suave); border-right: 1px solid var(--borde); background: #fbfdfe; font-size: .88rem;
}
.renglon-cont { padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 40px; justify-content: center; }

.linea-cita {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid var(--borde); border-left: 5px solid var(--azul);
  border-radius: 9px; background: #fff; cursor: pointer; font: inherit;
}
.linea-cita:hover { background: var(--azul-claro); }
.linea-cita .lc-pac { font-weight: 700; color: var(--texto); }
.linea-cita .lc-det { font-size: .85rem; color: var(--suave); }
.linea-cita .lc-tel { font-size: .85rem; color: var(--suave); margin-left: auto; font-variant-numeric: tabular-nums; }
.linea-cita.estado-cancelada .lc-pac, .linea-cita.estado-no_asistio .lc-pac {
  text-decoration: line-through; color: var(--suave);
}

.hora-libre {
  width: 100%; text-align: left; padding: 7px 12px; border: 1px dashed var(--borde);
  border-radius: 9px; background: transparent; color: var(--suave); cursor: pointer;
  font: inherit; font-size: .85rem;
}
.hora-libre:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }
.hora-libre-txt { font-size: .85rem; color: var(--suave); padding: 7px 12px; }

.casilla-firma { min-width: 130px; border-bottom: 1px solid var(--borde); }

@media (max-width: 620px) {
  .renglon-dia { grid-template-columns: 58px 1fr; }
  .linea-cita .lc-tel { margin-left: 0; }
}

/* --------------------------- Ayuda del primer día ------------------------ */

.boton-ayuda {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  padding: 10px 16px; border-radius: 24px; border: 0; cursor: pointer;
  background: var(--azul); color: #fff; font-weight: 600; font-size: .88rem;
  box-shadow: 0 6px 18px rgba(13,125,143,.35);
}
.boton-ayuda:hover { background: var(--azul-osc); }
.lista-ayuda details {
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.lista-ayuda summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.lista-ayuda ol { margin: 10px 0 2px 20px; display: grid; gap: 6px; }
.lista-ayuda li { color: var(--suave); font-size: .9rem; }
@media print { .boton-ayuda { display: none !important; } }
body.modo-tablet .boton-ayuda, body.imprimiendo .boton-ayuda { display: none; }
/* Con una ventana abierta (el cobro, una pieza) no flota encima de ella. */
body:has(.modal-fondo) .boton-ayuda { display: none; }
.lista-ayuda details.de-otros { background: #fbfdfe; }
.lista-ayuda details.de-otros summary { color: var(--suave); font-weight: 500; }
.lista-ayuda details.de-otros p { margin: 10px 0 2px; }
/* El «＋ Otra cita» de una hora que ya tiene alguien: presente pero discreto. */
.hora-libre.extra { border-style: dotted; opacity: .75; font-size: .8rem; padding: 5px 12px; }
.hora-libre.extra:hover { opacity: 1; }
.hora-libre.cerrado { border-color: #d9b56a; background: #fdf8ec; }

/* ------------------------- Pantalla «Cómo vamos» ------------------------- */
/* Las gráficas llevan viewBox, así que escalan solas: aquí solo se les fija el
   ancho y se les da aire. Nada de tamaños en píxeles, que desbordarían. */
.grafica { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.grafica-intro { color: var(--suave); font-size: .86rem; margin-bottom: 10px; }
.grafica-pie { color: var(--suave); font-size: .82rem; margin-top: 8px; }

/* Clase propia: `.leyenda` ya existe para el odontograma y redefinirla aquí
   le cambiaba el tamaño de letra y el color desde el otro extremo del archivo. */
.leyenda-grafica { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--suave); font-size: .82rem; margin-bottom: 6px; }
.leyenda-grafica .punto + span { margin-right: 10px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* La tabla con las cifras exactas bajo cada gráfica. Ninguna cifra existe solo
   dentro del dibujo: esto sirve para lector de pantalla, impresión y copiar. */
details.numeros { margin-top: 6px; }
details.numeros > summary {
  cursor: pointer; color: var(--azul); font-size: .85rem; padding: 4px 0;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
details.numeros > summary::-webkit-details-marker { display: none; }
details.numeros > summary::before { content: '▸'; font-size: .8em; }
details.numeros[open] > summary::before { content: '▾'; }
details.numeros > summary:hover { text-decoration: underline; }
details.numeros .tabla { margin-top: 8px; }

.sublista { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px; }
.sublista h4 { font-size: .9rem; margin-bottom: 8px; }
.fila-sublista {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--borde);
}
.fila-sublista:last-child { border-bottom: 0; }

/* Un diente que no se puede editar no se ofrece como botón. */
.diente.solo-lectura { cursor: default; }

/* Un diente con nota lleva una marca visible: antes la nota solo existía en el
   globito del ratón, que en una tablet no se abre. */
.diente.con-nota { box-shadow: inset 0 -3px 0 var(--morado); }

/* Lista de precios agrupada por especialidad (Configuración). Cada grupo se
   pliega; el triángulo dice que se abre, igual que «Ver los números». */
details.grupo-catalogo { border-top: 1px solid var(--borde); padding: 10px 0 4px; }
details.grupo-catalogo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; padding: 4px 0;
}
details.grupo-catalogo > summary::-webkit-details-marker { display: none; }
details.grupo-catalogo > summary::before { content: '▸'; font-size: .8em; color: var(--suave); }
details.grupo-catalogo[open] > summary::before { content: '▾'; }
details.grupo-catalogo .tabla { margin-top: 6px; }
.aviso-confirmar { margin-top: 4px; }

/* Después de firmar, la tablet sigue en manos del paciente: ve el agradecimiento
   y no los avisos ni botones pensados para el personal. */
.solo-tablet { display: none; }
body.modo-tablet .solo-tablet { display: block; font-size: 1.1rem; }
body.modo-tablet .solo-personal { display: none; }

/* Qué doctor es cada color de la agenda. */
.leyenda-doctores { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; }
.leyenda-doctor { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.leyenda-doctor i { width: 4px; height: 14px; border-radius: 2px; display: inline-block; }

/* Elegir a la persona al agendar desde una hora libre: una lista corta que se
   filtra al escribir, cada fila es un botón grande. */
.lista-elegir { display: grid; gap: 6px; margin-top: 10px; max-height: 340px; overflow: auto; }
.opcion-elegir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); cursor: pointer;
}
.opcion-elegir { flex-wrap: wrap; }
.opcion-elegir .aviso-mismo-dia { flex-basis: 100%; color: var(--alerta); font-weight: 600; }
.opcion-elegir:hover, .opcion-elegir:focus-visible { border-color: var(--azul); background: var(--azul-claro); }

/* La agenda impresa: hora estrecha, teléfono sin partir, líneas libres con
   altura para escribir a mano. */
.hoja .hora-papel { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.hoja .sin-partir { white-space: nowrap; }
.hoja tr.fila-libre td { height: 26px; border-bottom: 1px dotted var(--borde); }

/* En el papel, el sello de «ANULADO» / «PENDIENTE DE FIRMA» se repite en cada
   página (un elemento fijo se imprime en todas): antes la hoja de las firmas
   salía sin él. */
@media print { .sello-borrador { position: fixed; } }
.nota-anulado { margin-top: 14px; padding: 8px 10px; border: 1px solid var(--alerta); border-radius: 6px; font-size: .85rem; }
.leyenda .leyenda-nota::before { background: #fff; box-shadow: inset 0 -3px 0 var(--morado); }

/* Las casillas no se estiran como un campo de texto: con `width:100%` la
   casilla quedaba flotando en el centro y su texto lejos, a la derecha. */
.campo input[type="checkbox"], .campo input[type="radio"] {
  width: auto; flex: none; padding: 0; margin: 0; min-height: 0; box-shadow: none;
}
details.grupo-catalogo > summary::before { font-size: 1rem; }
.hoja tr.fila-sigue td { color: var(--suave); font-size: .82rem; font-style: italic; }

/* En pantallas anchas, los resultados del buscador empujan el menú hacia abajo
   en vez de taparlo: tapado, pulsar «El día de hoy» caía sobre la lista y no
   pasaba nada. */
@media (min-width: 901px) {
  .resultados-busqueda { position: static; margin-top: 6px; max-height: 45vh; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
}

/* Las pestañas del expediente bajan a otra línea en vez de salirse por el
   costado: en tablet «Su cuenta» quedaba cortada y nada decía que había que
   deslizar. */
.pestanas { flex-wrap: wrap; overflow-x: visible !important; row-gap: 6px; }
.pestanas button { white-space: nowrap; }
.opcion-elegir:disabled { opacity: .55; cursor: not-allowed; }
.lc-sigue { color: var(--suave); font-style: italic; padding: 2px 0 4px 4px; }

/* Cuestionario de salud SÍ/NO de la ficha de diagnóstico. */
.cuestionario-salud { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 12px; }
.pregunta-sino { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--borde); }
.pregunta-sino > span { flex: 1; }
.pregunta-sino label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; min-height: 32px; }
.pregunta-sino input[type="radio"] { width: 20px; height: 20px; margin: 0; }
.salud-si { color: var(--error); font-weight: 700; }
.firma-guardada { max-width: 320px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.texto-aceptacion { font-size: 1rem; line-height: 1.55; background: #f7fafb; border: 1px solid var(--borde); border-radius: 9px; padding: 12px 14px; }
.pregunta-sino label.sin-preguntar { font-weight: 400; color: var(--suave); }
.aceptar-vista .hoja { max-width: 860px; margin: 0 auto; }
body.modo-tablet .aceptar-vista .texto-aceptacion { font-size: 1.15rem; }

/* Presupuesto (F1-3). */
.linea-presupuesto { border: 1px solid var(--borde); border-radius: 9px; padding: 10px 12px 6px; margin-bottom: 10px; background: #fbfdfd; }
.total-presupuesto { font-size: 1.1rem; font-weight: 700; margin: 10px 0 12px; }
.totales-presupuesto { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.totales-presupuesto > div { display: flex; flex-direction: column; }
.totales-presupuesto > div.fuerte b { font-size: 1.15rem; }
.casillas-acepta { white-space: nowrap; }

/* Con una ventana abierta, los avisos suben arriba: abajo tapaban los botones
   del pie de la ventana («Guardar», «Entendido»). */
body:has(.modal-fondo) .avisos { bottom: auto; top: 18px; }

/* Un campo que no se escribe se ve distinto (y dice por qué, al lado). */
.campo input[readonly] { background: #f1f5f7; color: #3a4d59; cursor: default; }

/* ------------------------------ Cobro y recibo --------------------------- */

/* «¿Cuándo paga el resto?»: los próximos días a un toque. */
.compromiso-pago {
  margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--borde); border-radius: 10px;
  display: grid; gap: 8px;
}
.compromiso-pago[hidden] { display: none; }
.compromiso-pago .etq-campo { font-size: .88rem; font-weight: 600; }
.dias-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.dias-rapidos .btn.sec.activo, .dias-rapidos .btn.sec.activo:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.compromiso-pago .campo { margin-bottom: 0; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }

/* El recibo cabe en media hoja. */
.hoja-recibo { max-width: 680px; }
.vista-impresion .hoja-recibo { max-width: 680px; }
.recibo-de { margin: 16px 0 6px; line-height: 1.6; }
.recibo-saldo {
  margin: 14px 0 6px; padding: 10px 14px; border-left: 3px solid var(--azul);
  background: var(--azul-claro); display: grid; gap: 4px;
}
.fila-total td { border-top: 2px solid var(--texto); }
@media print {
  .recibo-saldo { background: none; }
}
.recibo-momento { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }
.recibo-hoy { border-left-color: var(--borde); background: none; border: 1px dashed var(--borde); }

/* «Cosas por hacer» en calendario: un mes, de lunes a domingo, como la pizarra. */
.cal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cal-cabecera h3 { margin: 0; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.cal-semana { font-size: .78rem; font-weight: 700; color: var(--suave); text-align: center; padding: 4px 0; }
.cal-dia {
  min-height: 78px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left;
  padding: 6px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); cursor: pointer;
  font: inherit; color: var(--texto); overflow: hidden;
}
.cal-dia:hover:not(:disabled) { border-color: var(--azul); }
.cal-dia.fuera { background: transparent; border-style: dashed; color: var(--suave); cursor: default; opacity: .55; }
.cal-dia.hoy .cal-num { background: var(--azul); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-dia.elegido { outline: 2px solid var(--azul); outline-offset: 1px; }
.cal-num { font-weight: 700; font-size: .85rem; align-self: flex-start; }
.cal-tarea {
  font-size: .72rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: var(--azul-claro);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-tarea.alta { background: #fee2e2; }
.cal-mas { font-size: .72rem; color: var(--suave); }
/* La agenda por mes: cada cita con la raya de su doctor; en el celular, solo cuántas. */
.cal-cita { background: var(--panel); border-radius: 4px; }
.cal-cuenta { display: none; font-size: .7rem; color: var(--suave); }
@media (max-width: 700px) {
  .cal-dia { min-height: 54px; padding: 4px; }
  .cal-tarea, .cal-dia .cal-mas { display: none; }
  .cal-cuenta { display: block; }
  .cal-agenda .cal-dia.con::after { content: none; }
  .cal-dia.con::after { content: '•'; color: var(--azul); font-size: 1.2rem; line-height: 1; }
}

/* La agenda del día, compacta como la de papel, y en una sola hoja: si aun así
   no cabe, al imprimir se achica lo justo (`--escala-papel`, lo mide imprimir.js). */
.hoja-agenda table.tabla { font-size: .8rem; }
.hoja-agenda table.tabla th, .hoja-agenda table.tabla td { padding: 4px 7px; }
.hoja-agenda tr.fila-libre td { height: 20px; }
.hoja-agenda .membrete { padding-bottom: 8px; margin-bottom: 10px; }
.hoja-agenda .membrete::before { height: 54px; }
@media print {
  .hoja-agenda { zoom: var(--escala-papel, 1); break-inside: avoid; }
  .hoja-agenda.varias-hojas { break-inside: auto; }
  .hoja-agenda table.tabla { font-size: .78rem; }
}
/* La copia con que imprimir.js mide la agenda: las mismas reglas que al imprimir. */
.hoja.midiendo-papel { padding: 0; margin: 0; max-width: none; box-shadow: none; border: 0; border-radius: 0; }
.hoja-agenda.midiendo-papel table.tabla { font-size: .78rem; }

/* Odontograma: «sano» es algo que el doctor anota (✓); sin marca es «nada anotado».
   Una pieza con un tratamiento pero sin estado lleva una T. */
.diente.tratada { background: #f8fafc; border-style: dashed; border-color: var(--suave); }
.leyenda .sano::before { background: #f0fdf4; }
.leyenda .tratada::before { background: #f8fafc; border: 1px dashed var(--suave); }
.muestra-recuadro { display: inline-block; width: 18px; height: 20px; flex: none; border: 1px solid var(--borde); border-radius: 5px; background: #fff; }
.muestra-recuadro.por-tratar { border-color: #dc2626; }
.muestra-recuadro.tratada { background: #f8fafc; border-style: dashed; border-color: var(--suave); }

/* -------------- Historia clínica (formulario 033 del MSP) ---------------- */

.seccion-033-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seccion-033-cab h3 { margin: 0; }
.num-033 {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  border-radius: 7px; background: var(--azul-claro); color: var(--azul); font-size: .85rem; font-weight: 700;
}
.rejilla-033 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.dato-033 { display: flex; flex-direction: column; gap: 1px; }
.dato-033.salud-si b { color: var(--error); }
.con-saltos { white-space: pre-line; }
.sub-033 { font-size: .9rem; margin: 0 0 6px; }
.tabla-033 td, .tabla-033 th { text-align: center; }
.tabla-033 th:first-child, .tabla-033 td:first-child { text-align: left; }
.tabla-033 select { min-width: 64px; }
.tabla-033 .fila-total td { font-weight: 700; border-top: 2px solid var(--borde); }
.casilla { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; }
.casilla input { width: 20px; height: 20px; margin: 0; }
.casillas-033 { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 10px; }
.resultados-cie { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 12px; }
.opcion-cie {
  text-align: left; padding: 9px 12px; min-height: 40px; border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; cursor: pointer; font: inherit; color: var(--texto);
}
.opcion-cie:hover, .opcion-cie:focus { border-color: var(--azul); background: var(--azul-claro); }
.lista-diagnosticos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lista-diagnosticos li > div:first-child { margin-bottom: 4px; }

/* El papel: recuadros numerados, como el formulario. */
.hoja-033 { font-size: .82rem; }
.hoja-033 .caja-033 { border: 1.5px solid #555; margin-bottom: 8px; break-inside: avoid; }
.hoja-033 .caja-033 > h4 {
  margin: 0; padding: 3px 8px; background: #eef2ee; border-bottom: 1px solid #555;
  font-size: .8rem; letter-spacing: .3px;
}
.hoja-033 .caja-033 > .dentro { padding: 5px 8px; }
.hoja-033 table.t033 { width: 100%; border-collapse: collapse; }
.hoja-033 table.t033 td, .hoja-033 table.t033 th { border: 1px solid #999; padding: 3px 5px; text-align: left; vertical-align: top; }
.hoja-033 table.t033 th { font-size: .7rem; font-weight: 600; color: #333; background: #f7f7f5; }
.hoja-033 table.t033 td.x033 { width: 22px; text-align: center; font-weight: 700; }
.hoja-033 table.t033 td.cen, .hoja-033 table.t033 th.cen { text-align: center; }
.hoja-033 .renglon { min-height: 1.4em; white-space: pre-line; }
.hoja-033 .pie-033 { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 700; margin-top: 6px; }
@media print { .hoja-033 { font-size: 9pt; } }
.hoja-033 .caja-033.se-parte { break-inside: auto; }
.hoja-033 table.t033 tr { break-inside: avoid; }
.tabla-033 th.sin-mayusculas { text-transform: none; }
.al-dia { margin-top: 2px; }
.al-dia.sin-conexion { color: var(--error); font-weight: 600; }

/* Odontograma en el papel (033 y expediente impreso). */
.odonto-033 { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.odonto-033 .fila-033, .odonto-033 .fila-perio { display: grid; grid-template-columns: 56px repeat(16, 28px); gap: 1px; align-items: end; }
.odonto-033 .fila-033.leche { grid-template-columns: 56px 87px repeat(10, 28px); }
.odonto-033 .celda-033 { display: flex; flex-direction: column; align-items: center; }
.odonto-033 .celda-033 .n { font-size: .6rem; font-weight: 700; }
.odonto-033 .celda-033 .t { font-size: .6rem; font-weight: 700; line-height: 1; min-height: .6rem; }
.odonto-033 .celda-033.tratada { border: 1px dashed #64748b; border-radius: 4px; }
.odonto-033 .fila-perio .etq, .odonto-033 .fila-033 .etq { font-size: .6rem; text-align: right; padding-right: 4px; }
.odonto-033 .fila-perio .v { border: 1px solid #999; height: 14px; font-size: .62rem; text-align: center; line-height: 12px; }
.simbologia-033 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .7rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.simbologia-033 .simbolo { display: inline-flex; align-items: center; gap: 4px; }


/* Receta e indicaciones (F1-9): hojas de media página, con la marca arriba. */
.hoja-receta, .vista-impresion .hoja-receta { max-width: 680px; }
.hoja-indicaciones, .vista-impresion .hoja-indicaciones { max-width: 760px; }
.receta-rp { font-size: 1.4rem; font-weight: 800; font-style: italic; margin: 6px 0 4px; }
.receta-lista { margin: 0 0 18px 22px; line-height: 1.55; }
.receta-lista li { margin-bottom: 10px; }
.receta-como { color: var(--suave); }
.receta-firma { grid-template-columns: minmax(220px, 320px); justify-content: end; margin-top: 30px; }
.receta-medicamento {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 84px auto;
  gap: 6px; align-items: end; margin-bottom: 8px;
}
@media (max-width: 700px) {
  .receta-medicamento { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
  .receta-medicamento > :first-child { grid-column: 1 / -1; }
}
.indicaciones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
.indicaciones-fila:first-of-type { border-top: 0; }
.indicaciones-fila .indicaciones-nombre { flex: 1 1 220px; min-width: 0; }
.subtitulo-tarjeta { font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); margin: 10px 0 2px; }
.receta-alergias { margin: 6px 0 10px; }
.receta-alergias-no { margin: 4px 0 8px; }
.receta-choque { color: var(--error); font-size: .82rem; font-weight: 600; margin: -6px 0 8px; }

/* ------------------------- Ortodoncia (F1-10) ------------------------- */
/* La tabla paciente × mes, con los colores del Excel de la clínica: rojo =
   perdió el control, amarillo = por agendar, verde = instalación o retiro. */
.orto-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.orto-filtro {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; font-size: .9rem; min-height: 40px;
}
.orto-filtro b { font-size: 1.05rem; }
.orto-filtro.t-perdio { border-color: #e2a79c; }
.orto-filtro.t-agendar, .orto-filtro.t-nuevo { border-color: #e2cf6a; }
.orto-motivo { display: block; font-size: .72rem; opacity: .85; }
.orto-filtro.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.orto-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.orto-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--suave); margin-bottom: 12px; }
.orto-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.orto-muestra { font-style: normal; font-size: .76rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--borde); color: var(--texto); }
.orto-tabla { font-size: .84rem; }
.orto-tabla th, .orto-tabla td { padding: 7px 8px; vertical-align: top; }
.orto-tabla th { white-space: nowrap; text-align: center; }
.orto-tabla th.orto-quien, .orto-tabla td.orto-quien {
  position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left;
  min-width: 180px; max-width: 220px; box-shadow: 1px 0 0 var(--borde);
}
.orto-cuota { font-size: .84rem; margin: 2px 0; }
.orto-nombre { font-weight: 600; }
.orto-cambiar { margin-top: 4px; padding: 3px 10px; font-size: .78rem; white-space: nowrap; }
.orto-estado { display: inline-block; margin-top: 4px; font-size: .74rem; padding: 1px 8px; border-radius: 999px; background: #ecebe7; }
.orto-estado.e-nuevo, .orto-estado.e-retiro { background: #fbf0a8; }
.orto-este { display: block; font-size: .68rem; text-transform: none; letter-spacing: 0; color: var(--azul); }
th.orto-hoy { color: var(--azul); }
.orto-celda { min-width: 112px; width: 112px; text-align: center; border-left: 1px solid var(--borde); }
.orto-celda > * { display: block; }
.orto-celda .btn { margin: 6px auto 0; white-space: normal; font-size: .76rem; padding: 5px 8px; line-height: 1.25; border-radius: 10px; }
.orto-texto { font-weight: 600; text-decoration: none; color: inherit; }
a.orto-texto { text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); }
.orto-pago { font-size: .76rem; margin-top: 2px; }
.orto-pago.ok { color: var(--ok); }
.orto-pago.debe { color: var(--error); font-weight: 600; }
.t-perdio { background: #f7d4cd; color: #7c2415; }
.t-agendar, .t-nuevo { background: #fbf0a8; color: #5f4b00; }
.t-instalacion, .t-retiro { background: #d6ebbf; color: #2c5416; }
.t-cita { background: #eef3f6; }
.t-en_espera, .t-finalizado { background: #ecebe7; color: var(--suave); }
.t-sin_datos { color: #9aa39c; }
td.orto-celda.orto-hoy { box-shadow: inset 0 0 0 2px rgba(40,64,48,.35); }
.orto-tabla th.orto-quien { white-space: normal; }
@media (max-width: 599px) {
  .orto-tabla th.orto-quien, .orto-tabla td.orto-quien { min-width: 120px; max-width: 140px; }
  .orto-celda { min-width: 84px; width: 84px; padding: 6px 4px; }
  .orto-cambiar { white-space: normal; }
  .orto-celda .btn { white-space: normal; }
}
.orto-blanco { background: var(--panel); min-width: 26px; display: inline-block; }

/* Avisos y «¿Cómo hago…?» que no tapan (observación del ciclo 116):
   - los avisos son más angostos, para dejar ver la columna de la derecha;
   - en pantallas angostas (tablet vertical), la ayuda es solo el círculo «?»
     y los avisos salen arriba, donde no hay botones de guardar ni de la lista. */
.avisos { max-width: min(360px, 92vw); }
@media (max-width: 900px) {
  .boton-ayuda { font-size: 0; padding: 12px; line-height: 0; }
  .boton-ayuda .ic { width: 22px; height: 22px; margin: 0; font-size: 16px; }
  .avisos { bottom: auto; top: 12px; right: 12px; }
}

/* Tablas de Configuración en tablet vertical y celular: una ficha por fila,
   cada dato con su nombre, sin deslizar de lado (observación del ciclo 125). */
@media (max-width: 900px) {
  table.apilada, table.apilada tbody, table.apilada tr, table.apilada td { display: block; width: 100%; }
  table.apilada thead { display: none; }
  table.apilada tr { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  table.apilada td:not([data-etiqueta]), table.apilada td[data-etiqueta=""] { grid-column: 1 / -1; }
  table.apilada td { border: 0; padding: 3px 0; }
  table.apilada td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: block; font-size: .72rem; color: var(--suave); font-weight: 600;
  }
}

/* Leyenda de las barras horizontales («Qué tanto se usaron las sillas»). */
.leyenda-barras { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .78rem; color: var(--suave); }
.leyenda-barras > span { display: inline-flex; align-items: center; gap: 6px; }
.muestra-barra { display: inline-block; width: 22px; height: 10px; border-radius: 5px; background: var(--color-muestra); }
.muestra-barra.punteada { background: color-mix(in srgb, var(--color-muestra) 45%, transparent); border: 1px dashed var(--color-muestra); }

/* Agenda impresa: lo que cae antes de abrir o después de cerrar. */
.hora-papel .fuera-horario { color: #b45309; font-weight: 700; white-space: nowrap; }

/* Una pregunta encima de otro diálogo: más angosta, con borde y sombra marcada. */
.modal-fondo.apilado { background: rgba(15,35,43,.35); }
.modal-fondo.apilado .modal { width: min(480px, 100%); border: 2px solid var(--azul); box-shadow: 0 18px 50px rgba(16,40,56,.45); }
.modal:focus { outline: none; }

/* -------------------------------- Asistente ------------------------------ */
/* Botón: en pantallas anchas va en el menú, sobre «¿Cómo hago…?»; en tablet y
   celular flota como un círculo encima del de la ayuda. */
.boton-asistente {
  position: fixed; right: 16px; bottom: 72px; z-index: 300;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--panel); color: var(--azul); font-weight: 600; font-size: .88rem;
  box-shadow: 0 2px 4px rgba(34,55,42,.2), 0 10px 24px rgba(34,55,42,.22);
}
.boton-asistente[hidden] { display: none; }
.boton-asistente:hover { background: var(--azul-claro); }
@media (min-width: 901px) {
  .lateral .boton-asistente {
    position: static; margin: 8px 14px 0; padding: 10px 14px; box-shadow: none; text-align: left;
  }
}
@media (max-width: 900px) {
  .boton-asistente { padding: 12px; }
  .boton-asistente .txt { display: none; }
}
@media print { .boton-asistente, .asis-panel { display: none !important; } }
body.modo-tablet .boton-asistente, body.modo-tablet .asis-panel, body.imprimiendo .boton-asistente { display: none !important; }
body:has(.modal-fondo) .boton-asistente, body.con-asistente .boton-asistente, body.con-asistente .boton-ayuda { display: none; }

/* Panel a la derecha; en celular ocupa toda la pantalla. */
.asis-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--borde);
  box-shadow: -8px 0 28px rgba(16,40,56,.14);
}
.asis-panel[hidden] { display: none; }
.asis-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.asis-cab strong { margin-right: auto; font-size: 1rem; }
.asis-cerrar { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--suave); padding: 0 4px; min-width: 36px; min-height: 36px; }
.asis-conversaciones { max-height: 40vh; overflow-y: auto; border-bottom: 1px solid var(--borde); padding: 8px 10px; background: var(--fondo); }
.asis-conv { display: flex; gap: 4px; }
.asis-conv-abrir { flex: 1; text-align: left; border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asis-conv-abrir:hover { background: var(--azul-claro); }
.asis-conv-borrar { border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; opacity: .6; }
.asis-conv-borrar:hover { opacity: 1; background: #fbefec; }
.asis-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asis-msj { max-width: 92%; padding: 10px 13px; border-radius: 14px; overflow-wrap: anywhere; }
.asis-msj.persona { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.asis-msj.asistente { align-self: flex-start; background: var(--fondo); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.asis-texto p { margin: 0 0 6px; }
.asis-texto p:last-child { margin-bottom: 0; }
.asis-texto ul, .asis-texto ol { margin: 4px 0 6px 20px; display: grid; gap: 3px; }
.asis-texto code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: .88em; }
.asis-titulo { font-weight: 700; }
.asis-tabla { overflow-x: auto; margin: 6px 0; }
.asis-tabla table { border-collapse: collapse; font-size: .86rem; min-width: 100%; }
.asis-tabla th, .asis-tabla td { border: 1px solid var(--borde); padding: 4px 8px; text-align: left; white-space: nowrap; }
.asis-tabla th { background: var(--azul-claro); }
.asis-espera { align-self: flex-start; color: var(--suave); font-size: .86rem; font-style: italic; padding: 0 4px; }
.asis-espera::after { content: ''; display: inline-block; width: 1em; animation: asis-puntos 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes asis-puntos { from { width: 0; } to { width: 1em; } }
@media (prefers-reduced-motion: reduce) { .asis-espera::after { animation: none; } }
.asis-error { align-self: stretch; background: #fbefec; border: 1px solid #efcfc6; color: #86301f; border-radius: 10px; padding: 9px 12px; font-size: .9rem; }
.asis-confirmar { align-self: stretch; border: 2px solid var(--arena, #d4b890); background: var(--arena-claro, #f4ecdf); border-radius: 14px; padding: 12px 14px; }
.asis-confirmar-tit { font-weight: 700; margin-bottom: 4px; }
.asis-confirmar p { margin: 0 0 10px; }
.asis-confirmar-botones { display: flex; gap: 8px; justify-content: flex-end; }
.asis-confirmar.decidida { border-width: 1px; border-color: var(--borde); background: var(--fondo); }
.asis-confirmar.decidida p { margin-bottom: 6px; color: var(--suave); }
.asis-confirmar.ok { border-color: #cfe2d1; background: #eef5ee; }
.asis-confirmar.ok .asis-confirmar-tit { color: #285a37; }
.asis-vacio p { color: var(--suave); margin-bottom: 12px; }
.asis-ideas { display: grid; gap: 8px; }
.asis-idea { text-align: left; border: 1px solid var(--borde); background: var(--panel); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.asis-idea:hover { border-color: var(--azul); background: var(--azul-claro); }
.asis-pie { border-top: 1px solid var(--borde); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.asis-entrada { resize: none; border: 1px solid var(--borde); border-radius: 12px; padding: 9px 11px; min-height: 44px; max-height: 30vh; font-size: 16px; }
.asis-pie .btn { min-height: 44px; }
.asis-nota { grid-column: 1 / -1; font-size: .74rem; color: var(--suave); }
.etiqueta-asistente { margin-left: 6px; font-size: .74rem; padding: 1px 7px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); font-weight: 600; white-space: nowrap; }
.asis-cab strong { white-space: nowrap; }
@media (max-width: 420px) {
  .asis-cab { gap: 6px; padding: 10px; }
  .asis-cab .btn.chico { padding: 5px 9px; font-size: .78rem; }
}
.boton-asistente .asis-ic { font-size: 1.05rem; line-height: 1; }
.asis-confirmar.borra { border-color: #efcfc6; background: #fbefec; }
.asis-detalle { margin: 0 0 10px; font-size: .84rem; }
.asis-detalle summary { cursor: pointer; color: var(--suave); }
.asis-detalle dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-top: 6px; }
.asis-detalle dt { color: var(--suave); }
.asis-detalle dd { margin: 0; overflow-wrap: anywhere; }