/* Estilos base, móvil primero. Los colores y fuentes viven en tema.css (variables); aquí solo se usan.
   Para otra marca, copia un tema de la skill marcas-grupo (plugin kit-apps, carpeta temas/). Reutiliza estas clases. */
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 var(--fuente); background: var(--fondo); color: var(--texto); }
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.25; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--marca); color: var(--marca-texto); border-bottom: 4px solid var(--marca-linea); }
.barra .marca { display: flex; align-items: center; gap: 10px; }
.barra .logo { height: 36px; width: auto; }
.contenido { max-width: 720px; margin: 0 auto; padding: 16px; }
.contenido.ancho { max-width: 1240px; }  /* reportes de computadora: periodo y comparativo */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.suave { color: var(--suave); }
label { display: block; margin: 0 0 14px; font-weight: 600; }
input, select, textarea { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px;
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: 8px; }
:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; }
button { min-height: 44px; padding: 10px 18px; font: inherit; font-weight: 600; color: var(--accion-texto);
  background: var(--accion); border: 0; border-radius: 8px; cursor: pointer; width: 100%; }
button.enlace { width: auto; min-height: 0; padding: 4px 8px; background: transparent; color: var(--marca-texto); text-decoration: underline; }
.barra :focus-visible { outline-color: var(--marca-texto); }
/* Mensajes de estado: siempre con texto claro (ej. "✓ Guardado", "⚠ Falta la foto"), nunca solo color. */
.ok, .aviso, .error { padding: 10px 12px; border-radius: 8px; }
.ok { color: var(--ok); background: var(--ok-fondo); }
.aviso { color: var(--aviso); background: var(--aviso-fondo); }
.error { color: var(--error); background: var(--error-fondo); }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .875rem; font-weight: 600; }
@media (min-width: 600px) { button { width: auto; } }

/* --- Conteo de corte (y reutilizables) --- */
a { color: var(--accion); }
.barra a.marca { color: var(--marca-texto); text-decoration: none; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.contenido > * + * { margin-top: 16px; }
.pila > * + * { margin-top: 16px; }
.pila > *, .tarjeta > :last-child { margin-bottom: 0; }
.migas { margin: -8px 0 0; }
.migas a { display: inline-block; padding: 10px 0; }
/* Enlace con aspecto de botón (navegación). Para acciones que cambian datos, usa <button>. */
a.boton { display: block; min-height: 44px; padding: 10px 18px; font-weight: 600; text-align: center;
  text-decoration: none; color: var(--accion-texto); background: var(--accion); border-radius: 8px; }
.tarjeta a.boton + a.boton { margin-top: 12px; }
button.secundario, a.boton.secundario { color: var(--accion); background: var(--superficie); border: 2px solid var(--accion); }
fieldset.tarjeta { margin: 0; min-width: 0; }
legend { padding: 0 4px; font-size: 1.15rem; font-weight: 700; }
/* Campos de kg: dos por renglón en celular. */
.campos-kg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 12px; }
.con-unidad { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.con-unidad input { text-align: right; font-variant-numeric: tabular-nums; }
.con-unidad > span { margin-top: 6px; }
input[aria-invalid="true"] { border: 2px solid var(--error); }
.error-campo { display: block; margin: 4px 0 0; color: var(--error); font-weight: 600; }
/* Opciones grandes (radio) para tocar con el dedo. */
.opcion { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 8px; padding: 8px 12px;
  border: 1px solid var(--borde-campo); border-radius: 8px; cursor: pointer; }
.opcion input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--accion); }
.opcion:has(input:checked) { border: 2px solid var(--accion); }
.opcion:has(input:disabled) { color: var(--suave); cursor: default; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 8px 4px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla tfoot th, .tabla tfoot td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); }
.lista li + li { border-top: 1px solid var(--borde); }
.lista a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px;
  padding: 12px 16px; color: var(--texto); text-decoration: none; }
.acciones { display: grid; gap: 12px; }
@media (min-width: 600px) { .acciones { display: flex; } }

/* --- Entradas, traspasos y cuadre --- */
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.botones a.boton { display: flex; align-items: center; justify-content: center; padding: 10px 8px; }
.tarjeta .botones a.boton + a.boton { margin-top: 0; }
.botones > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* el que sobra, a lo ancho */
fieldset.sin-marco { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
fieldset.sin-marco legend { padding: 0; margin-bottom: 8px; font-size: 1rem; }
.ayuda { display: block; font-weight: 400; color: var(--suave); }
.etiqueta.ok { color: var(--ok); background: var(--ok-fondo); }
.etiqueta.aviso { color: var(--aviso); background: var(--aviso-fondo); }
.etiqueta.error { color: var(--error); background: var(--error-fondo); }
.etiqueta.pendiente { color: var(--suave); background: var(--fondo); border: 1px solid var(--borde); font-weight: 400; }
.nav-dias { display: flex; justify-content: space-between; gap: 12px; }
.nav-dias a.boton { flex: 1; }
.renglon { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.lista .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla tr.separa > * { border-top: 2px solid var(--texto); }
.tabla th[scope="row"] { font-weight: 400; }
.tabla tfoot th[scope="row"] { font-weight: 700; }

/* --- Cuadre: día, periodo, comparativo, correcciones --- */
.encabezado { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.encabezado h2, .encabezado h3 { margin: 0; }
.tabla th[scope="row"] a { display: inline-flex; align-items: center; min-height: 44px; }
/* Tablas anchas (periodo, comparativo): en celular se deslizan dentro de su caja, la página no. */
.desliza { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.desliza:focus-visible { outline-offset: -3px; }
.tabla.ancha { min-width: 960px; }
.tabla.ancha th, .tabla.ancha td { padding: 8px 6px; white-space: nowrap; }
.tabla.ancha thead th { font-size: .875rem; color: var(--suave); white-space: nowrap; }
.tabla.ancha tbody th[scope="row"] { white-space: nowrap; position: sticky; left: 0; background: var(--superficie); }
.tabla.ancha tfoot > tr > * { border-top: 2px solid var(--texto); font-weight: 700; }
.tabla tr.incompleto td { color: var(--suave); }
.tabla.comparativo { min-width: 640px; }
.tabla.comparativo td { min-width: 170px; white-space: normal; }
.tabla.comparativo tbody th[scope="row"] { white-space: normal; width: 9rem; min-width: 7rem; }
.tabla.comparativo thead th:first-child { position: sticky; left: 0; background: var(--superficie); }
a.celda { display: grid; gap: 2px; justify-items: start; min-height: 44px; color: var(--texto); text-decoration: none; }
a.celda .valor { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
a.celda:hover .valor { text-decoration: underline; }
/* Minigráfica de tendencia: la franja es la zona ✓ dentro; la línea, la diferencia % diaria. */
svg.tendencia { display: block; margin-top: 6px; overflow: visible; }
svg.tendencia .banda { fill: var(--ok-fondo); }
svg.tendencia .cero { stroke: var(--borde-campo); stroke-width: 1; stroke-dasharray: 2 2; }
svg.tendencia .serie { fill: none; stroke: var(--accion); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.tendencia .suelto { fill: var(--accion); }
svg.tendencia .ultimo { fill: var(--accion); stroke: var(--superficie); stroke-width: 2; }
/* Pestañas de proteína (periodo). */
.pestanas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pestanas a { flex: none; display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--borde-campo);
  border-radius: 999px; color: var(--texto); background: var(--superficie); text-decoration: none; white-space: nowrap; }
.pestanas a[aria-current="page"] { border: 2px solid var(--accion); color: var(--accion); font-weight: 700; }
/* Elegir periodo. */
details.periodo summary { min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
details.periodo[open] summary { margin-bottom: 12px; }
details.periodo a.boton[aria-current] { color: var(--accion-texto); background: var(--accion); }  /* el atajo elegido */
form.rango { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }
form.rango button { grid-column: 1 / -1; }
form.rango label { min-width: 0; }  /* el campo de fecha no empuja la columna fuera de la pantalla */
form.rango input { min-width: 0; padding-left: 8px; padding-right: 8px; }
@media (min-width: 600px) { form.rango { grid-template-columns: 1fr 1fr auto; } form.rango button { grid-column: auto; margin-bottom: 14px; } }
.resumen-periodo p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Enlace "Corregir" dentro de listas y tablas: área de toque de 44 px. */
a.corregir { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }
.etiqueta + .etiqueta { margin-left: 4px; }

/* --- Foto de evidencia (mermas) --- */
.foto img { display: block; max-width: 100%; max-height: 260px; margin-bottom: 8px; border: 1px solid var(--borde); border-radius: 8px; }
.foto img[hidden], .foto [hidden] { display: none; }
.foto > p { margin: 0 0 8px; }
.boton-archivo { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  margin: 0 0 8px; padding: 10px 18px; color: var(--accion); background: var(--superficie); border: 2px solid var(--accion);
  border-radius: 8px; cursor: pointer; }
.boton-archivo:focus-within { outline: 3px solid var(--accion); outline-offset: 2px; }
.boton-archivo input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.boton-archivo:has(input[aria-invalid="true"]) { border-color: var(--error); }
.foto button[data-foto-reintentar] { margin-bottom: 8px; }
.boton-archivo .icono { flex: none; }
/* Indicador de htmx (htmx no inyecta su estilo porque la CSP lo bloquearía; ver base.html). */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }