/* Galla · Expedientes. Interfaz blanca, plana y silenciosa.
   Marca: Poppins (Regular, Medium, Bold) y la paleta oficial. El color va en el significado, no en el marco:
   carbón para el texto y la única acción principal, ámbar y verde azulado solo como puntos de estado.
   Sin sombras, sin degradados, sin tarjetas con borde, sin etiquetas en mayúsculas. */
:root {
  color-scheme: light;
  --fondo: #ffffff;
  --panel: #fafafa;
  --linea: #ededed;
  --borde: #d9d9d9;
  --tinta: #191e1e;
  --tinta-2: #5b6060;
  --suave: #6b7070;
  --ambar: #ebb44f;
  --verde: #3c8c8c;
  --alerta: #a12b1d;
  --radio: 12px;
  --alto: 48px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
main { max-width: 560px; margin: 0 auto; padding: 8px 20px 120px; }

/* Encabezado: una línea, sin barra de color */
.barra { max-width: 560px; margin: 0 auto; padding: 22px 20px 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.barra strong { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.barra span { font-size: 13px; color: var(--tinta-2); display: flex; align-items: center; gap: 12px; }
.barra button { background: none; color: var(--tinta-2); border: 0; padding: 6px 0; min-height: 32px; font-weight: 500; font-size: 13px; gap: 6px; }
.barra button:hover { color: var(--tinta); }
.demo { max-width: 560px; margin: 4px auto 0; padding: 0 20px; font-size: 12px; color: var(--suave); }
.demo[hidden] { display: none; }
.demo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); margin-right: 8px; vertical-align: 1px; }

/* Tipografía: pocos tamaños, mucho aire */
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 26px; margin: 28px 0 4px; }
h2 { font-size: 17px; margin: 40px 0 6px; }
h3 { font-size: 15px; font-weight: 500; margin: 28px 0 8px; letter-spacing: 0; }
p { margin: 0 0 14px; }
a { color: var(--tinta); text-decoration-color: var(--borde); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tinta); }
.enlace-volver {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--linea); border-radius: 8px; color: var(--tinta-2); font-size: 13px;
  font-weight: 500; text-decoration: none;
}
.enlace-volver svg { width: 16px; height: 16px; flex: none; }
.enlace-volver:hover { color: var(--tinta); border-color: var(--borde); background: var(--panel); text-decoration: none; }
.nota { color: var(--suave); font-size: 13px; line-height: 1.55; }
.error { color: var(--alerta); font-weight: 500; font-size: 14px; min-height: 0; }
.error:empty { display: none; }
.vacio { text-align: center; padding: 72px 8px; color: var(--tinta-2); }
.vacio h1 { margin-top: 0; }

/* Secciones: aire y una línea fina, sin cajas */
.tarjeta { background: none; border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 28px 0 8px; margin: 36px 0 0; }
.tarjeta h2, .tarjeta h3:first-child { margin-top: 0; }
.seccion { margin-top: 12px; }
.seccion h3 { font-size: 17px; font-weight: 700; margin: 44px 0 4px; letter-spacing: -.01em; }

/* Campos */
.campo { display: block; margin: 20px 0; border: 0; padding: 0; min-width: 0; }
.campo > span, .campo > legend { display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; padding: 0; }
.req { color: var(--alerta); }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="number"], input[type="search"], textarea, select {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 10px; padding: 11px 14px; min-height: var(--alto);
  appearance: none; -webkit-appearance: none;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #8f9494; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
input[type="file"] { font: inherit; font-size: 14px; color: var(--tinta-2); }
.opcion { display: inline-flex; align-items: center; gap: 10px; margin: 0 20px 4px 0; min-height: 44px; font-size: 15px; cursor: pointer; }
.opcion input { width: 20px; height: 20px; accent-color: var(--tinta); margin: 0; flex: none; }
.opcion span { line-height: 1.4; }

/* Botones: una acción principal en carbón; el resto, claro */
button, .boton {
  font: inherit; font-weight: 700; font-size: 15px; background: var(--tinta); color: #fff; border: 1px solid var(--tinta);
  border-radius: 10px; padding: 0 22px; min-height: var(--alto); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button.secundario, .boton.secundario { background: var(--fondo); color: var(--tinta); border-color: var(--borde); font-weight: 500; }
button.secundario:hover, .boton.secundario:hover { border-color: var(--tinta); }
button.peligro { background: var(--fondo); color: var(--alerta); border-color: var(--borde); font-weight: 500; }
button[disabled] { background: var(--panel); color: #8f9494; border-color: var(--linea); cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }

/* Estado: un icono de línea y una frase */
.estados { list-style: none; padding: 0; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.estado { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.estado .ic { margin-top: 2px; }
.estado.ok .ic { color: var(--verde); }
.estado.falta .ic { color: var(--alerta); }
.estado.aviso .ic { color: var(--tinta); }
p.enviado { display: flex; align-items: center; gap: 8px; }
p.enviado .ic { color: var(--verde); }

/* Avisos: un panel plano, el color lo pone el texto */
.alerta { background: var(--panel); border: 0; border-radius: var(--radio); padding: 16px 18px; margin: 18px 0; font-size: 14px; }
.alerta strong { font-weight: 500; }
.alerta ul { margin: 8px 0 0; padding-left: 18px; color: var(--tinta-2); }
.alerta li { margin: 2px 0; }

/* Listas: filas con una línea, nada más */
.lista { list-style: none; padding: 0; margin: 12px 0 0; }
.lista li { border-bottom: 1px solid var(--linea); }
.lista li:first-child { border-top: 1px solid var(--linea); }
.lista a, .lista button.fila-boton {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 16px 2px; color: inherit;
  text-decoration: none; background: none; border: 0; border-radius: 0; min-height: 56px; font-weight: 500; font-size: 15px; text-align: left;
}
.lista a:hover, .lista button.fila-boton:hover { background: var(--panel); }

/* Consentimiento y firma */
.consentimiento { max-height: 48vh; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 20px 12px; background: var(--fondo); font-size: 14px; line-height: 1.65; color: var(--tinta-2); }
.consentimiento h2 { margin: 20px 0 6px; font-size: 16px; color: var(--tinta); }
.consentimiento h3 { margin: 18px 0 4px; font-size: 14px; color: var(--tinta); font-weight: 500; }
.consentimiento ul { padding-left: 18px; margin: 6px 0 10px; }
.consentimiento p { margin: 0 0 10px; }
canvas.firma { width: 100%; height: 168px; background: var(--panel); border: 1.5px dashed #c9c9c9; border-radius: var(--radio); touch-action: none; display: block; margin-bottom: 8px; }
.diagrama svg { width: 100%; max-width: 340px; touch-action: manipulation; cursor: crosshair; }
.diagrama svg text { fill: var(--suave); font-family: inherit; }

/* Barra de acción fija: blanca, con una línea arriba */
.fijo { position: fixed; left: 0; right: 0; bottom: 0; background: var(--fondo); border-top: 1px solid var(--linea); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.fijo > * { max-width: 520px; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  button, .boton, input, textarea { transition: border-color .12s ease; }
  button:active:not([disabled]) { transform: translateY(1px); }
}
@media (min-width: 720px) {
  main, .barra, .demo { max-width: 640px; }
  h1 { font-size: 30px; }
}

/* Iconos y campos con icono */
.ic { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.buscador { position: relative; display: block; margin: 20px 0 6px; }
.buscador .ic, .con-icono .ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.buscador input, .con-icono input { padding-left: 46px; }
.campo > .con-icono { position: relative; display: block; font-weight: 400; margin: 0; }
.contacto { display: flex; gap: 20px; flex-wrap: wrap; margin: 2px 0 14px; font-size: 14px; }
.contacto a { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); text-decoration: none; }
.contacto a:hover { color: var(--tinta); }
.lista .meta { display: inline-flex; align-items: center; gap: 10px; color: var(--suave); font-weight: 400; font-size: 14px; }
.lista .con-ic { display: inline-flex; align-items: center; gap: 12px; }
.lista li.historial { padding: 16px 2px; font-size: 14px; }
.sin-resultados { padding: 20px 0 6px; }
.sin-resultados p:first-child { color: var(--tinta-2); }
.aviso-salud { margin-top: 20px; }
.aviso-salud > strong { display: block; font-weight: 700; font-size: 16px; line-height: 1.35; }
.vacio svg { margin-bottom: 14px; color: var(--tinta); }

/* Agenda de Wix y citas */
.sub-lista { font-size: 14px; font-weight: 500; color: var(--tinta-2); margin: 24px 0 0; letter-spacing: 0; }
.dos-lineas { display: flex; flex-direction: column; line-height: 1.35; }
.dos-lineas .nota { font-size: 13px; }
.lista li.cita { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; }
.lista li.cita[hidden] { display: none; }
.lista li.cita .estado { flex: none; }
button.chico, .boton.chico { min-height: 38px; padding: 0 14px; font-size: 13px; font-weight: 500; flex: none; }
.lista button.fila-boton .con-ic, .lista a .con-ic { text-align: left; }
.lista a.boton { display: inline-flex; justify-content: center; align-items: center; width: auto; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); border-radius: 10px; padding: 0 14px; min-height: 38px; font-size: 13px; font-weight: 500; }
.lista a.boton:hover { background: var(--fondo); border-color: var(--tinta); }

/* Hoja de observaciones: botones con icono y palabra */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opcion { position: relative; display: inline-flex; margin: 0; }
.chip-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-cuerpo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); color: var(--tinta); font-size: 14px; font-weight: 500; line-height: 1.2; }
.chip-cuerpo .ic { color: var(--suave); }
.chip-cuerpo .ic-on { display: none; }
.chip-opcion input:checked + .chip-cuerpo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip-opcion input:checked + .chip-cuerpo .ic { color: #fff; }
.chip-opcion input:checked + .chip-cuerpo .ic-off { display: none; }
.chip-opcion input:checked + .chip-cuerpo .ic-on { display: inline; }
.chip-opcion input:focus-visible + .chip-cuerpo { outline: 2px solid var(--tinta); outline-offset: 3px; }
.chip-opcion:hover input:not(:checked) + .chip-cuerpo { border-color: var(--tinta); }
.pie-seccion { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.pie-seccion .campo { margin: 14px 0 0; }
.pie-seccion .campo > span { font-weight: 400; color: var(--tinta-2); font-size: 13px; }
.progreso { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); margin: 6px 0 4px; }
.seccion.pendiente h3::after { content: "falta evaluar"; margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--alerta); letter-spacing: 0; }
.diag-acciones { margin: 8px 0 4px; }

/* ---- Seguimiento: pestañas, «Hoy toca revisar», presupuesto, progreso y «Para cobrar» ---- */
.pestanas { display: flex; gap: 0; overflow-x: auto; margin: 18px -20px 0; padding: 0 20px; border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; padding: 12px 7px; min-height: 44px; font-size: 13.5px; color: var(--tinta-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.pestana:hover { color: var(--tinta); }
.pestana.activa { color: var(--tinta); font-weight: 700; border-bottom-color: var(--tinta); }
.punto { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ambar); color: var(--tinta); font-size: 11px; font-weight: 700; }
.pestana-cuerpo > :first-child { margin-top: 20px; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--borde); color: var(--tinta-2); }
.etiqueta.atrasado { border-color: var(--ambar); color: var(--tinta); }
.etiqueta.cerrado { color: var(--suave); }
.opciones-hallazgo { margin: 10px 0 0; padding: 10px 12px; background: var(--panel); border-radius: 10px; }
.opciones-hallazgo .fila { margin: 6px 0; }
.hoy-toca h2 { display: flex; align-items: center; gap: 8px; }
.chips.escala .chip-opcion { min-width: 44px; }
.grupo-unas { margin: 8px 0; }
.senales legend { color: var(--alerta); }
.guia { margin: 8px 0; }
.guia img, .lado-a-lado img { width: 100%; border-radius: 10px; border: 1px solid var(--linea); display: block; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.lado-a-lado figure { margin: 0; }
.lado-a-lado figcaption { font-size: 13px; color: var(--tinta-2); margin-top: 6px; text-align: center; }
.grafica { width: 100%; height: auto; margin: 8px 0 4px; color: var(--tinta); }
.grafica text { fill: var(--tinta-2); }
.tabla, .presupuesto { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.tabla th, .tabla td, .presupuesto td, .presupuesto th { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.presupuesto .num { text-align: right; white-space: nowrap; }
.presupuesto tfoot th, .presupuesto tfoot td { border-bottom: 0; font-size: 16px; }
.pantalla-cliente { font-size: 17px; }
.pantalla-cliente h1 { font-size: 28px; }
.aviso-cliente { font-size: 14px; color: var(--tinta-2); border-left: 3px solid var(--ambar); padding: 4px 0 4px 12px; }
button.grande { width: 100%; min-height: 56px; font-size: 18px; }
.linea-cobro { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.linea-cobro .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.total { text-align: right; margin-top: 10px; }
.enlace-cobros { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tinta); text-decoration: none; }
.cerrar-caso { margin: 24px 0; }
.cerrar-caso summary { cursor: pointer; color: var(--tinta-2); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.barra strong, .enlace-cobros { white-space: nowrap; }
.alerta > svg { margin-right: 6px; vertical-align: -3px; }
@media (max-width: 400px) { .pestana { padding: 12px 5px; font-size: 13px; } }
.lista .meta .nota, .lista .meta .etiqueta { white-space: nowrap; }

/* ---- Inicio del día, llegada guiada y agendar (spec rev. 17) ---- */
.hoy-titulo { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.hoy-titulo::first-letter { text-transform: uppercase; }
.cita-hoy { display: flex; align-items: center; gap: 12px; padding: 14px 2px; text-decoration: none; color: var(--tinta); }
.lista a.cita-hoy { justify-content: flex-start; }
.cita-hoy .hora { flex: none; width: 74px; font-weight: 700; font-size: 14px; }
.cita-hoy .dos-lineas { flex: 1; min-width: 0; }
.cita-hoy .meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.estado-cita { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--tinta-2); }
.estado-cita.ok .ic { color: var(--verde); }
.estado-cita.falta { color: var(--tinta); }
.estado-cita.falta .ic { color: var(--alerta); }
.estado-cita.aviso .ic { color: var(--ambar); }
.aviso-inicio { display: flex; align-items: center; gap: 10px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--ambar); border-radius: 10px; text-decoration: none; color: var(--tinta); font-size: 14px; }
.aviso-inicio span { flex: 1; }
.guia-app { margin: 36px 0 0; border-top: 1px solid var(--linea); padding-top: 12px; }
.guia-app summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.guia-app dt { font-weight: 700; font-size: 14px; margin-top: 12px; }
.guia-app dd { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); }
.pasos { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.paso { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.paso.actual { border-color: var(--tinta); }
.paso.hecho { color: var(--tinta-2); }
.paso.hecho .paso-cabeza .ic { color: var(--verde); }
.paso.pendiente { color: var(--suave); }
.paso-cabeza { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.paso-cabeza > span:nth-child(2) { flex: 1; }
.paso-num { font-size: 12px; color: var(--suave); display: block; font-weight: 400; }
.paso-cuerpo { margin-top: 12px; }
.decir-titulo { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--tinta-2); margin: 14px 0 6px; }
.decir { margin: 0; padding: 12px 14px; background: var(--panel); border-left: 3px solid var(--ambar); border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.5; }
.pedir { list-style: none; padding: 0; margin: 0 0 14px; }
.pedir li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 4px 0; }
.pedir .ic { color: var(--suave); margin-top: 2px; flex: none; }
.horarios .fila-boton { justify-content: space-between; }

/* ---- Aviso antes de la cita y bienvenida del formulario (spec rev. 18) ---- */
.lista li.aviso { padding: 14px 2px; }
.aviso-cabeza { display: flex; flex-direction: column; gap: 2px; }
.aviso .decir { font-size: 14px; margin-top: 8px; }
.bienvenida { margin: 8px 0 24px; }
.bienvenida h2 { margin-top: 12px; }
.bienvenida .puntos { list-style: none; padding: 0; margin: 12px 0; }
.bienvenida .puntos li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; }
.bienvenida .puntos .ic { color: var(--verde); flex: none; margin-top: 2px; }
/* Encabezado: con varios enlaces (administración) baja a una segunda línea en vez de desbordar el teléfono */
.barra { flex-wrap: wrap; row-gap: 4px; }
.barra span { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }

/* ---- Lo añadido en la visita (cobro simplificado, spec rev. 19) ---- */
.anadidos { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; }
.anadidos ul { list-style: none; padding: 0; margin: 8px 0; }
.anadidos li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.anadidos-total { margin: 0; color: var(--tinta-2); }
.anadido-hoy { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tinta); margin-top: 2px; }