/* Diagnóstico de fincas lecheras — pensado para personas mayores:
   letra grande, alto contraste, botones amplios y nada que dependa solo del color. */
:root {
  --fondo: #fbf8f1;
  --tarjeta: #ffffff;
  --texto: #1d2a1f;
  --suave: #4a574c;
  --verde: #2e6b3f;
  --verde-oscuro: #1f4d2c;
  --verde-claro: #e3efe5;
  --borde: #b9c4ba;
  --amarillo: #c99700;
  --rojo: #b3261e;
  --gris: #8a948b;
  --foco: #0b57d0;
  --radio: 14px;
}
html { font-size: 22px; -webkit-text-size-adjust: 100%; }
html.letra-2 { font-size: 26px; }
html.letra-3 { font-size: 30px; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  line-height: 1.45;
}
a { color: var(--verde-oscuro); }
:focus-visible { outline: 4px solid var(--foco); outline-offset: 3px; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: .4rem 0 .8rem; }
h1:focus { outline: none; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
p { margin: .5rem 0 .8rem; }
.grande { font-size: 1.1rem; }
.centro { text-align: center; }
.chica { font-size: .75rem; color: var(--suave); }
.nota { font-size: .85rem; color: var(--suave); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aviso { background: #fff4d6; border: 2px solid var(--amarillo); border-radius: var(--radio); padding: .6rem .8rem; }
.cargando { font-size: 1.1rem; color: var(--suave); }

/* ----- barra superior ----- */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .4rem .6rem; background: var(--verde); color: #fff; flex-wrap: wrap;
}
.marca { font-weight: 700; font-size: .85rem; }
.controles { display: flex; gap: .4rem; }
.control {
  font: inherit; font-size: .85rem; font-weight: 700; min-height: 2.3rem; min-width: 2.3rem; padding: .2rem .6rem;
  border-radius: 999px; border: 2px solid #fff; background: #fff; color: var(--verde-oscuro); cursor: pointer;
}
.control .mas { font-size: .7em; vertical-align: super; }
.ajustes { background: var(--verde-claro); border-bottom: 2px solid var(--verde); padding: .6rem 1rem; font-size: .85rem; }
.interruptor { display: flex; gap: .5rem; align-items: center; }
.interruptor input { width: 1.4rem; height: 1.4rem; }
.fila-ajuste { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.chico { font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; border: 2px solid var(--verde); background: #fff; color: var(--verde-oscuro); cursor: pointer; }
.chico[aria-pressed="true"] { background: var(--verde); color: #fff; }
.piloto { background: #fff4d6; color: #5c4600; text-align: center; font-size: .7rem; padding: .25rem .5rem; border-bottom: 1px solid var(--amarillo); }

/* ----- contenido ----- */
main { max-width: 42rem; margin: 0 auto; padding: .8rem 1rem 6rem; }
main:focus { outline: none; }
.portada { font-size: 2.6rem; text-align: center; margin-top: .6rem; }
.icono-parte { font-size: 3rem; text-align: center; }
.etiqueta { font-size: .8rem; color: var(--suave); font-weight: 600; margin: .5rem 0 0; }
.pregunta { font-size: 1.35rem; }
.ayuda { background: var(--verde-claro); border-radius: var(--radio); padding: .6rem .8rem; font-size: .95rem; }
.pregunta-consentimiento { font-size: 1.25rem; font-weight: 700; }
.progreso { height: .55rem; background: #e2e6e0; border-radius: 999px; overflow: hidden; margin-top: .3rem; }
.progreso span { display: block; height: 100%; background: var(--verde); }

/* ----- opciones ----- */
.opciones { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.fila-opcion { display: flex; align-items: stretch; gap: .4rem; border-radius: var(--radio); }
.opcion {
  flex: 1; display: flex; align-items: center; gap: .7rem; text-align: left; font: inherit; font-size: 1rem;
  min-height: 3.2rem; padding: .6rem .8rem; border: 3px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); color: var(--texto); cursor: pointer;
}
.opcion .letra {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 800;
}
.opcion[role="checkbox"] .letra { border-radius: 8px; }
.opcion .texto { flex: 1; }
.opcion .marca { flex: none; width: 1.6rem; font-size: 1.3rem; font-weight: 800; color: var(--verde); }
.opcion[aria-checked="true"] { border-color: var(--verde); background: var(--verde-claro); box-shadow: 0 0 0 2px var(--verde) inset; }
.opcion[aria-checked="true"] .letra { background: var(--verde); color: #fff; }
.opcion[aria-checked="true"] .marca::after { content: "✔"; }
.oir {
  flex: none; width: 3.2rem; font-size: 1.2rem; border: 3px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); cursor: pointer;
}
.leyendo, .fila-opcion.leyendo .opcion { outline: 4px solid var(--amarillo); outline-offset: 3px; }
h1.leyendo, p.leyendo, li.leyendo, .modulo.leyendo { background: #fff4d6; outline: none; border-radius: 8px; }
input[type="text"], textarea {
  width: 100%; font: inherit; font-size: 1.1rem; padding: .7rem .8rem; border: 3px solid var(--borde);
  border-radius: var(--radio); background: #fff; margin: .6rem 0;
}
input[type="text"]:focus, textarea:focus { border-color: var(--verde); }

/* ----- navegación ----- */
.navegacion { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.boton {
  font: inherit; font-size: 1.1rem; font-weight: 700; min-height: 3.4rem; padding: .6rem 1rem;
  border-radius: var(--radio); cursor: pointer; border: 3px solid var(--verde);
}
.boton.principal { background: var(--verde); color: #fff; }
.boton.principal:disabled { background: #c9d2ca; border-color: #c9d2ca; color: #56605a; cursor: not-allowed; }
.boton.secundario { background: #fff; color: var(--verde-oscuro); }
.boton.enlace { background: none; border: none; color: var(--suave); text-decoration: underline; font-weight: 400; font-size: .9rem; min-height: 2.6rem; }

/* ----- resultado ----- */
.circulo {
  width: 9rem; height: 9rem; border-radius: 50%; margin: .5rem auto; display: grid; place-items: center;
  border: .7rem solid var(--rojo); background: #fff;
}
.circulo strong { font-size: 2.2rem; }
.circulo.nivel-cerca { border-color: var(--amarillo); }
.circulo.nivel-listo { border-color: var(--verde); }
.mensaje { font-size: 1.05rem; font-weight: 600; border-left: .4rem solid var(--rojo); padding: .4rem .8rem; background: #fff; border-radius: 6px; }
.mensaje.nivel-cerca { border-color: var(--amarillo); }
.mensaje.nivel-listo { border-color: var(--verde); }
.modulos { display: flex; flex-direction: column; gap: .4rem; }
.modulo { background: #fff; border: 2px solid #e2e6e0; border-radius: var(--radio); padding: .5rem .8rem; }
.modulo h2 { margin: .2rem 0 .4rem; font-size: 1rem; }
.barra-modulo { display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden; background: #eee; }
.seg.verde { background: var(--verde); }
.seg.amarillo { background: var(--amarillo); }
.seg.rojo { background: var(--rojo); }
.seg.blanco { background: #cfd5d0; }
.mejoras { padding-left: 1.4rem; }
.mejoras li { margin-bottom: .7rem; }
.mejoras strong { display: block; }

.pie { margin-top: 2rem; border-top: 2px solid #e2e6e0; padding-top: .6rem; font-size: .8rem; color: var(--suave); }

/* ----- páginas del equipo (instrumento y panel) ----- */
body.equipo { font-size: .72rem; }
body.equipo main { max-width: 70rem; }
body.equipo h1 { font-size: 1.3rem; }
.tabla { width: 100%; border-collapse: collapse; background: #fff; font-size: .7rem; }
.tabla th, .tabla td { border: 1px solid #dde2dd; padding: .3rem .45rem; vertical-align: top; text-align: left; }
.tabla th { background: var(--verde-claro); }
.chip { display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .65rem; font-weight: 700; border: 1px solid currentColor; }
.chip.verde { color: var(--verde); } .chip.amarillo { color: #7a5c00; } .chip.rojo, .chip.nosabe, .chip.sin_respuesta { color: var(--rojo); } .chip.blanco { color: var(--gris); }
.acciones-panel { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.acciones-panel form { margin: 0; }
.boton-chico { font: inherit; font-size: .7rem; padding: .3rem .7rem; border-radius: 8px; border: 2px solid var(--verde); background: #fff; color: var(--verde-oscuro); cursor: pointer; text-decoration: none; display: inline-block; }
.boton-chico.peligro { border-color: var(--rojo); color: var(--rojo); }
.campo-panel { font: inherit; font-size: .75rem; padding: .3rem .5rem; border: 2px solid var(--borde); border-radius: 8px; }
.cuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: .6rem 0; }
.cuadro { background: #fff; border: 2px solid #e2e6e0; border-radius: 10px; padding: .4rem .6rem; }
.cuadro strong { display: block; font-size: 1.1rem; }
.pregunta-resumen { background: #fff; border: 1px solid #dde2dd; border-radius: 10px; padding: .4rem .7rem; margin: .5rem 0; }
.pregunta-resumen h3 { font-size: .8rem; margin: .2rem 0 .3rem; }
.fila-barra { display: grid; grid-template-columns: minmax(12rem, 2fr) 3fr 3.5rem; gap: .5rem; align-items: center; font-size: .68rem; }
.fila-barra svg { width: 100%; height: .8rem; }
.lista-preguntas li { margin-bottom: .6rem; }
.lista-preguntas .opciones-imp { margin: .2rem 0 0 1rem; padding: 0; list-style: none; }
.error-panel { color: var(--rojo); font-weight: 700; }

@media (min-width: 40rem) {
  .navegacion { flex-direction: row-reverse; flex-wrap: wrap; }
  .navegacion .boton { flex: 1 1 12rem; }
}
@media print {
  .barra, .ajustes, .navegacion, .piloto, .oir { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }