/* INTEGER — estilo propio, liviano, primero para el celular (H1-34).
   Compatible con Chrome 109 (H1-35): sin :has(), sin anidamiento CSS, sin @container,
   sin unidades dvh/svh. Solo flexbox, grid simple y variables CSS.
   Sistema visual: lienzo cálido casi monocromo, un único acento (el azul de la marca),
   cifras tabulares, bordes de 1 px y estados siempre con texto.
   P-26 (M-10, M-11): barra superior oscura, un color sobrio por área y sombra suave en las tarjetas. */

:root {
  /* Superficies y texto */
  --lienzo: #f7f7f5;          /* fondo de página (blanco cálido) */
  --superficie: #ffffff;      /* tarjetas, listas, paneles */
  --hundido: #f0f0ed;         /* cabeceras, hover de fila, campos deshabilitados */
  --borde: #e4e4df;           /* bordes de tarjeta y divisores */
  --borde-fuerte: #cbcbc4;    /* botones secundarios, separadores marcados */
  --borde-campo: #8a8a85;     /* contraste 3:1 sobre blanco para campos (WCAG 1.4.11) */
  --texto: #111110;
  --suave: #5c5c58;           /* descripciones, etiquetas de dato */
  --tenue: #75756f;           /* metadatos y ayudas (4.6:1 sobre el lienzo) */
  --lateral: #efefec;         /* menú lateral */
  --lateral-activo: #e2e2dd;
  --lateral-texto: #3a3a37;

  /* Acento único: el azul de la marca */
  --acento: #1f4e79;
  --acento-hover: #173b5c;
  --acento-suave: #e8f0f8;
  --sobre-acento: #ffffff;

  /* Barra superior oscura (P-26, M-11): azul de la marca, más profundo */
  --barra: #132f4c;
  --sobre-barra: #ffffff;
  --barra-suave: #c9d6e3;  /* 9,2:1 sobre la barra */

  /* Estados (solo para estado, nunca decoración) */
  --verde: #137a4b;    --verde-fondo: #e6f4ec;    --verde-borde: #b9dfc9;
  --amarillo: #8a5200; --amarillo-fondo: #fdf3e1; --amarillo-borde: #f1d29a;
  --rojo: #c42b2b;     --rojo-fondo: #fceaea;     --rojo-borde: #f3bdbd;
  --gris: #5c5c58;     --gris-fondo: #efefec;
  --azul-fondo: #e8f0f8; --azul-borde: #bcd1e6;

  /* Forma */
  --radio-chip: 6px;
  --radio: 8px;          /* botones y campos */
  --radio-tarjeta: 12px;
  --sombra-flotante: 0 8px 24px rgba(17, 17, 16, 0.10), 0 0 0 1px var(--borde);
  --sombra-tarjeta: 0 1px 2px rgba(17, 17, 16, 0.05), 0 4px 14px rgba(17, 17, 16, 0.06); /* P-26 (M-11) */
  --ancho-lateral: 256px;

  /* Nombres anteriores, por compatibilidad */
  --azul: var(--acento);
  --azul-claro: var(--acento-suave);
  --foco: var(--acento);
  --fondo: var(--lienzo);
  --blanco: var(--superficie);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--lienzo);
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums; /* importes, fechas y números de comprobante alineados */
}

h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 1.75rem 0 0.6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; }
p { margin: 0.4rem 0; }
strong, b { font-weight: 600; }
a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--acento-hover); }

/* ---------- Barra superior oscura (P-26, M-11): marca, fecha y usuario ---------- */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0.35rem 0.75rem;
  background: var(--barra);
  color: var(--sobre-barra);
}
.marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--sobre-barra);
  text-decoration: none;
}
.marca:hover { color: var(--sobre-barra); }
/* El logo (naranja y azul) va sobre una ficha blanca para que se lea sobre la barra oscura. */
.marca-chip { display: inline-flex; align-items: center; flex: none; padding: 3px 7px; background: #ffffff; border-radius: var(--radio-chip); }
.marca-logo { display: block; height: 26px; width: auto; mix-blend-mode: multiply; } /* el blanco del PNG toma el de la ficha */
.marca-sub { display: none; margin-left: 0.75rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; }
@media (min-width: 600px) { .marca-sub { display: inline; } }
.barra-derecha { display: flex; align-items: center; margin-left: auto; }
.barra-fecha { display: none; margin-right: 0.75rem; font-size: 0.875rem; color: var(--barra-suave); }
.barra-fecha::first-letter { text-transform: uppercase; }
@media (min-width: 900px) { .barra-fecha { display: inline-block; } }
.barra-usuario {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.6rem;
  color: var(--sobre-barra);
  text-decoration: none;
  border-radius: var(--radio);
}
.barra-usuario:hover { background: rgba(255, 255, 255, 0.12); color: var(--sobre-barra); }
.barra-usuario .icono { width: 22px; height: 22px; }
.barra-usuario-texto { display: none; margin-left: 0.5rem; line-height: 1.2; text-align: left; }
@media (min-width: 700px) { .barra-usuario-texto { display: flex; flex-direction: column; } }
.barra-usuario-nombre { font-size: 0.875rem; font-weight: 600; }
.barra-usuario-rol { font-size: 0.75rem; color: var(--barra-suave); }
.barra .en-linea { margin: 0; }
.barra button.salir { min-width: 44px; padding: 0; background: transparent; border-color: transparent; color: var(--sobre-barra); }
.barra button.salir:hover { background: rgba(255, 255, 255, 0.12); border-color: transparent; color: var(--sobre-barra); }
.boton-menu {
  min-height: 44px;
  min-width: 44px;
  margin-left: 0.35rem;
  padding: 0 0.9rem;
  background: transparent;
  color: var(--sobre-barra);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radio);
  font-size: 1rem;
  font-weight: 500;
}
.boton-menu:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--sobre-barra); color: var(--sobre-barra); }
/* Foco visible sobre la barra oscura: anillo blanco. */
.barra a:focus, .barra button:focus, .barra a:focus-visible, .barra button:focus-visible { outline-color: var(--sobre-barra); box-shadow: none; }

/* ---------- Menú lateral (P-26, M-10): «← Inicio» y las opciones del área de la pantalla ---------- */
/* En el celular se abre con «Menú», debajo de la barra; en el escritorio es una tarjeta fija a la izquierda. */
.menu { display: none; padding: 0.5rem 0.75rem 0.75rem; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.menu.abierto { display: block; }
.icono {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.6rem 0.4rem 2.55rem;
  color: var(--lateral-texto);
  text-decoration: none;
  border-radius: var(--radio);
  font-size: 1rem;
}
.menu a:hover { background: var(--hundido); color: var(--texto); }
.menu a.volver-inicio { padding-left: 0.6rem; font-weight: 600; color: var(--acento); }
.menu a.volver-inicio span { margin-right: 0.45rem; }
.menu-area-titulo {
  display: flex;
  align-items: center;
  margin: 0.4rem 0 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radio);
  background: var(--area);
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}
.menu-area-titulo .icono { margin-right: 0.6rem; }
.menu-area a { padding-left: 0.6rem; }
.menu-area a .icono { margin-right: 0.65rem; color: var(--area); }
/* Sin área (Mi cuenta): todas las áreas como grupos plegables, con ícono, rótulo y flecha. */
.grupo { margin: 0.1rem 0; }
.grupo > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary .icono { margin-right: 0.65rem; color: var(--area, var(--suave)); }
.grupo > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: 0.25rem;
  border-right: 1.75px solid var(--suave);
  border-bottom: 1.75px solid var(--suave);
  margin-top: -4px;
  transform: rotate(45deg);
}
.grupo[open] > summary::after { content: ""; margin-top: 4px; transform: rotate(-135deg); }
.grupo > summary:hover { background: var(--hundido); }
.grupo-opciones { padding: 0.1rem 0 0.35rem; }

/* ---------- Colores por área (P-26, M-11): el azul de la marca y un color sobrio por área ---------- */
/* Texto blanco sobre --area: contraste de 6:1 o más; --area sobre --area-suave: 5,4:1 o más. */
.area-panel { --area: #1f4e79; --area-suave: #e9edf2; }
.area-obras { --area: #9a4a0c; --area-suave: #f5ede7; }
.area-compras { --area: #0e6b68; --area-suave: #e7f0f0; }
.area-finanzas { --area: #1d6b3c; --area-suave: #e8f0ec; }
.area-personal { --area: #5a3f8f; --area-suave: #eeecf4; }
.area-informes { --area: #8a2e4f; --area-suave: #f3eaed; }
.area-maestros { --area: #475663; --area-suave: #edeeef; }
.area-administracion { --area: #3a3a36; --area-suave: #ebebeb; }

/* ---------- Página principal (P-26, M-8 y M-10): logo, tarjetas por área y «Visión rápida» ---------- */
.portada { padding: 0.5rem 0 1.25rem; text-align: center; }
.portada-logo { display: block; width: 200px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.areas { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; }
@media (min-width: 700px) { .areas { grid-template-columns: 1fr 1fr; } }
.tarjeta-area { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.tarjeta-area-cabecera { display: flex; align-items: center; padding: 0.85rem 1rem; background: var(--area); color: #ffffff; border-radius: 11px 11px 0 0; }
.tarjeta-area-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.tarjeta-area-icono .icono { width: 22px; height: 22px; }
h2.tarjeta-area-titulo { margin: 0; font-size: 1.0625rem; line-height: 1.25; color: #ffffff; }
.tarjeta-area-sub { margin: 0.1rem 0 0; font-size: 0.8125rem; line-height: 1.3; color: rgba(255, 255, 255, 0.88); }
.tarjeta-area-opciones { list-style: none; margin: 0; padding: 0.4rem; }
.tarjeta-area-opciones a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 500;
  text-decoration: none;
}
/* Flecha al final del renglón */
.tarjeta-area-opciones a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: 0.4rem;
  border-top: 1.75px solid var(--tenue);
  border-right: 1.75px solid var(--tenue);
  transform: rotate(45deg);
}
.tarjeta-area-opciones a:hover { background: var(--area-suave); color: var(--texto); }
.tarjeta-area-opciones a:focus-visible { outline-offset: -3px; }
.opcion-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: 0.75rem;
  border-radius: var(--radio);
  background: var(--area-suave);
  color: var(--area);
}
/* Visión rápida: número grande y rótulo. En el celular, arriba de las tarjetas, de a dos. */
.vision { margin: 0.75rem 0.75rem 0; }
h2.vision-titulo { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.vision-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5rem; }
.vision-item {
  display: block;
  min-height: 44px;
  height: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--texto);
  text-decoration: none;
}
.vision-item:hover { border-color: var(--acento); color: var(--texto); }
.vision-valor { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.vision-valor .sin-datos { font-size: 1.0625rem; letter-spacing: 0; }
.vision-rotulo { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--suave); }
.vision-item .etiqueta { margin-top: 0.3rem; }

/* ---------- Contenido ---------- */
.contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem;
}
/* P-55: «Volver» arriba de cada pantalla. */
.volver-pagina { margin: 0 0 0.35rem; }
.volver-atras {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  font-weight: 600; color: var(--acento); text-decoration: none; border-radius: 6px;
}
.volver-atras:hover { background: var(--hundido); text-decoration: underline; }
.volver-atras .icono { margin-right: 0.35rem; }
.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.encabezado h1 { margin-right: 0.75rem; }
.acciones {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem -0.25rem;
}
.acciones > * { margin: 0.25rem; }
/* P-33: los botones del final de un formulario largo (nota de pedido), con aire entre uno y otro. */
.acciones.separados { margin: 1rem -0.5rem 0.5rem; }
.acciones.separados > * { margin: 0.5rem; }
@media (max-width: 480px) {
  .acciones.separados > button, .acciones.separados > .boton { -webkit-box-flex: 1; flex: 1 1 100%; }
}
.suave { color: var(--suave); }
.chico { font-size: 0.875rem; }
.sin-datos { color: var(--tenue); font-style: italic; font-weight: 400; }

/* ---------- Mensajes ---------- */
.aviso {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radio);
  margin: 0.5rem 0;
  background: var(--azul-fondo);
  border: 1px solid var(--azul-borde);
  border-left-width: 4px;
}
.aviso-success { background: var(--verde-fondo); border-color: var(--verde-borde); border-left-color: var(--verde); }
.aviso-warning, .aviso-advertencia { background: var(--amarillo-fondo); border-color: var(--amarillo-borde); border-left-color: var(--amarillo); }
.aviso-error { background: var(--rojo-fondo); border-color: var(--rojo-borde); border-left-color: var(--rojo); }

/* ---------- Botones ---------- */
.boton, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--radio);
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover, button:hover, input[type="submit"]:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: var(--sobre-acento); }
.boton-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--hundido); border-color: var(--borde-fuerte); color: var(--texto); }
.boton-peligro { background: var(--rojo); border-color: var(--rojo); color: var(--sobre-acento); }
.boton-peligro:hover { background: #a32222; border-color: #a32222; color: var(--sobre-acento); }
button.enlace {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  min-height: 44px;
  font-weight: 400;
}
button.enlace:hover { background: transparent; color: inherit; text-decoration: underline; }
.en-linea { display: inline; }

/* ---------- Formularios ---------- */
form.formulario { max-width: 640px; }
.campo { margin: 0 0 1rem; }
.campo label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.3rem; }
.campo-casilla label { font-weight: 400; display: flex; align-items: flex-start; }
.campo-casilla input { margin: 0.2rem 0.5rem 0 0; width: 22px; height: 22px; flex: none; accent-color: var(--acento); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--tenue); }
input[type="file"] { width: 100%; min-height: 44px; font-size: 1rem; }
textarea { min-height: 80px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 0.25rem; padding: 0; }
fieldset label { font-weight: 400; display: flex; align-items: center; min-height: 40px; }
fieldset input[type="radio"], fieldset input[type="checkbox"] { width: 22px; height: 22px; margin: 0 0.5rem 0 0; accent-color: var(--acento); }
fieldset div { margin: 0; }
.ayuda { display: block; color: var(--suave); font-size: 0.875rem; margin-top: 0.2rem; }
.error { display: block; color: var(--rojo); font-weight: 600; font-size: 0.9375rem; margin-top: 0.2rem; }
.con-error input, .con-error select, .con-error textarea { border-color: var(--rojo); }
.oculto { display: none; }
/* M-5: contraseña con botón (ojo) para verla. El botón nace con `hidden` y lo muestra integer.js. */
.con-ojo { position: relative; }
.con-ojo input { padding-right: 3rem; }
button.ver-contrasena {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  min-width: 44px;
  padding: 0 0.75rem;
  background: transparent;
  border-color: transparent;
  color: var(--suave);
}
button.ver-contrasena:hover { background: transparent; border-color: transparent; color: var(--texto); }
button.ver-contrasena[hidden] { display: none; }
.ver-contrasena .ojo-tachado { display: none; }
.ver-contrasena[aria-pressed="true"] .ojo-abierto { display: none; }
.ver-contrasena[aria-pressed="true"] .ojo-tachado { display: block; }

/* ---------- Buscador y filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; margin: 0 -0.25rem 0.5rem; }
.filtros > * { margin: 0.25rem; flex: 1 1 160px; }
.filtros .buscar { flex: 3 1 220px; }

/* ---------- Tarjetas (lista de obras) ---------- */
.tarjetas { display: grid; grid-template-columns: 1fr; grid-gap: 0.75rem; }
@media (min-width: 700px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tarjetas { grid-template-columns: 1fr 1fr 1fr; } }
.tarjeta {
  display: block;
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  color: var(--texto);
  text-decoration: none;
}
a.tarjeta:hover, a.tarjeta:focus { border-color: var(--acento); color: var(--texto); }
.tarjeta .titulo { font-weight: 600; font-size: 1.0625rem; }
.tarjeta .linea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 0.35rem; }
.tarjeta > .fila-flex:first-child > a.principal { text-decoration: none; }
.tarjeta > .fila-flex:first-child > a.principal:hover { text-decoration: underline; }

/* ---------- Etiquetas de estado: punto + texto, nunca solo color ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--gris-fondo);
  color: var(--gris);
  text-decoration: none;
  vertical-align: middle;
}
.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
a.etiqueta:hover { text-decoration: underline; }
.etiqueta-verde { background: var(--verde-fondo); color: var(--verde); }
.etiqueta-amarillo { background: var(--amarillo-fondo); color: var(--amarillo); }
.etiqueta-azul { background: var(--azul-fondo); color: var(--acento); }
.etiqueta-gris { background: var(--gris-fondo); color: var(--gris); }
.etiqueta-rojo { background: var(--rojo-fondo); color: var(--rojo); }

/* ---------- Listas de filas (sin tablas: no hay desplazamiento horizontal) ---------- */
.filas { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.filas > li { padding: 0.7rem 1rem; border-top: 1px solid var(--borde); }
.filas > li:first-child { border-top: 0; }
/* Esquinas redondeadas para el fondo de hover sin overflow:hidden (no recorta el anillo de foco). */
.filas > li:first-child, .tablero > li:first-child summary { border-radius: 11px 11px 0 0; }
.filas > li:last-child { border-radius: 0 0 11px 11px; }
.filas > li:only-child { border-radius: 11px; }
.filas a.fila { display: block; color: var(--texto); text-decoration: none; min-height: 44px; }
.filas a.fila:hover .principal { color: var(--acento); text-decoration: underline; }
.fila .principal { font-weight: 600; }
.fila-flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.fila-flex > * { margin: 0.15rem 0; }
.vacio { padding: 1.25rem 1rem; background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-tarjeta); color: var(--suave); }

/* ---------- Ficha (pares dato / valor) ---------- */
.datos { display: grid; grid-template-columns: 1fr; grid-gap: 0.1rem 1rem; margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 0.6rem 1rem 0.8rem; }
.datos dt { font-weight: 500; color: var(--suave); font-size: 0.8125rem; margin-top: 0.5rem; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .datos { grid-template-columns: 200px 1fr; }
  .datos dt { margin-top: 0.4rem; font-size: 0.875rem; }
  .datos dd { margin-top: 0.4rem; }
}
/* Dentro de una tarjeta, la ficha no lleva otra caja: se apoya sobre un fondo hundido. */
.tarjeta .datos { background: var(--hundido); border-color: transparent; border-radius: var(--radio); padding: 0.4rem 0.75rem 0.6rem; margin-top: 0.6rem; }

/* ---------- Cambios de auditoría ---------- */
.cambio { padding: 0.4rem 0; border-top: 1px solid var(--borde); }
.cambio:first-child { border-top: 0; }
.antes { color: var(--rojo); text-decoration: line-through; }
.despues { color: var(--verde); }

/* ---------- QR del segundo factor ---------- */
.qr { background: var(--superficie); padding: 0.75rem; display: inline-block; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.qr svg { width: 220px; height: 220px; display: block; }
.semilla { font-family: Consolas, "Courier New", monospace; font-size: 1.05rem; letter-spacing: 0.05em; }

.paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0.75rem 0; }
.htmx-indicator { opacity: 0; transition: opacity 200ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Fase 2: formularios con varias líneas, tablero desplegable y avisos. Sin anidamiento ni :has() (Chrome 109). */
fieldset.ranura { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 0.6rem 1rem 0.4rem; margin: 0.75rem 0; background: var(--superficie); }
fieldset.ranura legend { font-weight: 600; padding: 0 0.35rem; }
details > summary { cursor: pointer; }
.tablero > li { padding: 0; }
.tablero summary { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; align-items: center; padding: 0.75rem 1rem; }
.tablero summary .principal { flex: 1 1 100%; font-weight: 600; }
.tablero details[open] > summary { background: var(--hundido); border-bottom: 1px solid var(--borde); }
.tablero details > dl, .tablero details > ul, .tablero details > h3 { margin-left: 1rem; margin-right: 1rem; }
.tablero details > dl:last-child, .tablero details > ul:last-child { margin-bottom: 0.9rem; }
.tablero details > dl:first-of-type { margin-top: 0.75rem; }
.aviso-info { background: var(--azul-fondo); border-color: var(--azul-borde); border-left-color: var(--acento); }

/* ---------- Fase 5: personal y parte diario (sin :has() ni anidamiento: Chrome 109) ---------- */
.campo-horas { width: 5rem; min-height: 44px; font-size: 1rem; text-align: right; }
/* Calendario semanal: una fila por persona con 7 celdas (sin tablas: entra en 360 px). */
.dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 3px; margin-top: 0.3rem; }
.dia-celda { border: 1px solid var(--borde); border-radius: var(--radio-chip); padding: 0.2rem 0.1rem; text-align: center; background: var(--superficie); min-width: 0; }
.dia-nombre { display: block; font-size: 0.7rem; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }
.dia-estado { display: block; font-size: 0.8rem; font-weight: 600; overflow-wrap: break-word; }
.dia-celda.celda-ausente { background: var(--rojo-fondo); border-color: var(--rojo-borde); color: var(--rojo); }
.dia-celda.celda-presente { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde); }
.dia-celda.celda-programado { background: var(--azul-fondo); border-color: var(--azul-borde); color: var(--acento); }
.dia-celda.celda-libre { color: var(--suave); }

/* ---------- Mejora de UX (informe docs/qa/ux-fase-1-a-5.md). Sin :has() ni anidamiento: Chrome 109 ---------- */
/* Foco visible para teclado (WCAG 2.4.7): anillo doble que se ve sobre fondo claro y sobre botones azules. */
/* Respaldo para navegadores sin :focus-visible (Safari anterior a 15.4): foco siempre visible.
   En los que sí lo tienen, la regla siguiente lo quita al hacer clic con el mouse. */
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible),
select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--superficie);
}
/* Campos con el cursor adentro: borde del acento, también al hacer clic con el mouse. */
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
.contenido:focus { outline: none; }
.saltar {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--superficie);
  color: var(--acento);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.saltar:focus { left: 0; }
/* Pantalla actual en el menú */
.menu a[aria-current="page"] {
  font-weight: 600;
  color: var(--texto);
  background: var(--area-suave, var(--lateral-activo));
  box-shadow: inset 3px 0 0 var(--area, var(--acento));
}
/* Errores y obligatorios sin depender solo del color */
.error::before { content: "Error: "; }
.obligatorio { font-weight: 400; color: var(--suave); font-size: 0.875rem; }
.con-error input, .con-error select, .con-error textarea { border-width: 2px; }
input:disabled, select:disabled, textarea:disabled { background: var(--hundido); color: var(--suave); border-color: var(--borde-fuerte); }
/* Dos campos cortos lado a lado (punto de venta y número) */
.campos-fila { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 0 0.75rem; }
@media (max-width: 400px) { .campos-fila { grid-template-columns: 1fr 1.5fr; } }
.campos-fila input { width: 100%; }
/* Bloque colapsable dentro de un formulario («Impuestos y detalle», «Cómo se pagó») */
details.opcional { margin: 0.75rem 0; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); }
details.opcional > summary { min-height: 44px; display: flex; align-items: center; padding: 0.5rem 1rem; font-weight: 600; color: var(--texto); border-radius: var(--radio-tarjeta); }
details.opcional > summary:hover { background: var(--hundido); }
details.opcional[open] > summary { border-bottom: 1px solid var(--borde); border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; margin-bottom: 0.75rem; }
details.opcional > .contenido-opcional { padding: 0 1rem 0.25rem; }
/* Con display:flex el resumen pierde la flecha nativa (Chrome, Safari y Firefox): se dibuja una propia. */
details.opcional > summary::after, details.ayuda-larga > summary::after, .tablero summary::after {
  content: "\25BE";
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--suave);
}
details[open] > summary::after { content: "\25B4"; }
details.opcional > summary::-webkit-details-marker, details.ayuda-larga > summary::-webkit-details-marker,
.tablero summary::-webkit-details-marker { display: none; }
/* Barra de guardar fija abajo en el celular: el botón principal siempre al alcance del pulgar */
.barra-accion {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 1rem -0.75rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--lienzo);
  border-top: 1px solid var(--borde);
}
.barra-accion > * { margin: 0.2rem 0.4rem 0.2rem 0; }
@media (max-width: 600px) {
  .barra-accion > button, .barra-accion > .boton { flex: 1 1 100%; }
}
/* Cifras grandes para lo que gerencia mira primero */
.cifra { font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.cifra-media { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.indicadores { list-style: none; margin: 0 0 0.6rem; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.indicadores > li { padding: 0.75rem 1rem; border-top: 1px solid var(--borde); }
.indicadores > li:first-child { border-top: 0; }
.indicador { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
.indicador > .nombre { flex: 1 1 55%; min-width: 0; }
.indicador > .valor { flex: 0 1 auto; text-align: right; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.indicador > .valor strong { font-weight: 600; }
.indicador > .nota { flex: 1 1 100%; font-size: 0.875rem; color: var(--suave); }
.indicador > .nota .etiqueta { margin-top: 0.2rem; }
.indicador > a.nombre { display: flex; align-items: center; min-height: 44px; }
/* Pares dato / valor en dos columnas también en el celular (números alineados a la derecha) */
.datos.compacto { grid-template-columns: 1fr auto; grid-gap: 0 1rem; }
.datos.compacto dt { margin-top: 0.35rem; align-self: baseline; }
.datos.compacto dd { margin-top: 0.35rem; text-align: right; font-weight: 600; }
@media (min-width: 700px) { .datos.compacto { grid-template-columns: 1fr auto; } }
/* Selector de vista (por vencimiento / proveedor / obra; tipos de deuda; filtros de la bandeja) */
.segmentos { display: flex; flex-wrap: wrap; margin: 0.5rem -0.2rem; }
.segmentos > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0.2rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
}
.segmentos > a:hover { background: var(--hundido); color: var(--texto); }
.segmentos > a[aria-current="true"], .segmentos > a[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
/* Filas con casilla grande (parte diario) */
.filas label.campo-casilla { display: flex; align-items: center; min-height: 44px; font-weight: 400; }
.filas label.campo-casilla input { margin-top: 0; }
.filas label { display: block; font-weight: 600; }
.filas label.campo-casilla { font-weight: 400; }
.filas input[type="text"] { margin-top: 0.25rem; }
/* Aviso con acción */
.aviso a { font-weight: 600; }
/* Resumen colapsado de ayuda larga («Cómo leer esta pantalla») */
details.ayuda-larga { margin: 0.5rem 0; }
details.ayuda-larga > summary { min-height: 44px; display: flex; align-items: center; color: var(--acento); }
/* Filtros: la etiqueta pegada a su campo */
.filtros > label { flex: 0 0 auto; align-self: center; font-weight: 600; }
.filtros > select, .filtros > input { flex: 1 1 140px; }
.fila-flex > :last-child { text-align: right; }

/* ---------- Escritorio (administración: Windows 8.1, Chrome 109, 1366x768 a 1920x1080) ---------- */
@media (min-width: 900px) {
  .filas > li:hover { background: var(--hundido); }
  .filas > li.vacio:hover { background: var(--superficie); }
  .tablero > li:hover { background: transparent; }
  .tablero summary:hover { background: var(--hundido); }
}
@media (min-width: 1000px) {
  body { font-size: 15px; }
  h1 { font-size: 1.75rem; letter-spacing: -0.02em; margin: 0.5rem 0 1rem; }
  .contenido { padding: 1.5rem 2rem 2.5rem; }
  /* Controles algo más bajos con mouse: siguen en 40 px */
  .boton, button, input[type="submit"] { min-height: 40px; font-size: 0.9375rem; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"], select, textarea { min-height: 40px; font-size: 0.9375rem; }
  .segmentos > a { min-height: 36px; padding: 0.3rem 0.9rem; font-size: 0.9375rem; }
  /* Formularios en dos columnas: cada campo ocupa una; títulos, grupos y botones, el ancho completo */
  form.formulario { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 1.5rem; align-items: start; }
  form.formulario > * { grid-column: 1 / -1; }
  form.formulario > .campo { grid-column: auto; }
  form.formulario > .campo-casilla, form.formulario > #campo-motivo, form.formulario > #campo-descripcion { grid-column: 1 / -1; }
  fieldset.ranura, details.opcional > .contenido-opcional { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 1.5rem; }
  fieldset.ranura > legend { grid-column: 1 / -1; }
  details.opcional > .contenido-opcional { padding-bottom: 0.5rem; }
  /* Indicadores de gerencia como tarjetas KPI: rótulo arriba, cifra grande abajo */
  .indicadores { display: grid; grid-template-columns: repeat(3, 1fr); }
  .indicadores > li { border-top: 0; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin: 0 -1px -1px 0; padding: 1rem 1.25rem 1.1rem; }
  .indicadores .indicador { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .indicadores .indicador > .nombre { flex: none; font-size: 0.875rem; color: var(--suave); min-height: 0; }
  .indicadores .indicador > a.nombre { color: var(--suave); }
  .indicadores .indicador > a.nombre:hover { color: var(--acento); }
  .indicadores .indicador > .valor { text-align: left; font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0.3rem 0 0.15rem; }
  .indicadores .indicador > .nota { flex: none; }
  /* Fichas con dos pares por renglón */
  .datos:not(.compacto) { grid-template-columns: 220px 1fr 220px 1fr; }
  /* Dentro de una tarjeta hay menos ancho: el rótulo toma lo que necesita, no 220 px. */
  .tarjeta .datos:not(.compacto) { grid-template-columns: minmax(6rem, max-content) 1fr minmax(6rem, max-content) 1fr; }
  .segmentos { margin-top: 0.75rem; }
  .barra-accion { position: static; margin: 1.25rem 0 0; padding: 1rem 0 0; background: transparent; }
}
@media (min-width: 1280px) {
  .contenido { max-width: 1280px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Escritorio: columna izquierda fija debajo de la barra (P-26, M-10) ---------- */
/* La barra oscura queda arriba, de lado a lado. La columna izquierda muestra el menú del área (una tarjeta)
   o, en la página principal, la «Visión rápida». En el celular sigue el botón «Menú». */
@media (min-width: 1000px) {
  body.con-menu .cuerpo { display: flex; align-items: flex-start; }
  body.con-menu .lateral {
    position: sticky;
    top: 0;
    flex: none;
    width: var(--ancho-lateral);
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.5rem 0 1.5rem 1rem;
  }
  body.con-menu .contenido { flex: 1 1 auto; min-width: 0; }
  body.con-menu .boton-menu { display: none; }
  body.con-menu .menu {
    display: block;
    padding: 0.5rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
  }
  body.con-menu .grupo > summary { min-height: 36px; padding: 0.35rem 0.6rem; font-size: 0.9375rem; }
  body.con-menu .menu a { min-height: 34px; padding: 0.3rem 0.6rem 0.3rem 2.45rem; font-size: 0.9375rem; margin: 1px 0; }
  body.con-menu .menu a.volver-inicio, body.con-menu .menu-area a { padding-left: 0.6rem; }
  body.con-menu .vision { margin: 0; }
  body.con-menu .vision-lista { grid-template-columns: 1fr; }
  body.con-menu .vision-valor { font-size: 1.5rem; }
  body.con-menu .portada-logo { width: 272px; }
}
@media (min-width: 1280px) {
  .areas { grid-template-columns: repeat(3, 1fr); }
}
/* P-42: en pantallas anchas, cuatro tarjetas por renglón y la portada más ancha, para no dejar tanto blanco. */
@media (min-width: 1536px) {
  .contenido-portada { max-width: 1600px; }
  .areas { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Pantallas sin sesión (ingresar, recuperar contraseña): una columna centrada ---------- */
body.sin-menu .barra { justify-content: center; }
body.sin-menu .marca { padding: 0.4rem 0; }
body.sin-menu .marca-logo { height: 32px; }
body.sin-menu .marca-sub { display: inline; }
body.sin-menu .contenido { max-width: 460px; padding-top: 2rem; }
@media (min-width: 1000px) {
  body.sin-menu .contenido { padding-top: 4rem; }
  body.sin-menu form.formulario { display: block; }
}
body.sin-menu form.formulario {
  padding: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}
body.sin-menu form.formulario > button[type="submit"] { width: 100%; }

/* Botones de ancho completo en formularios angostos */
@media (max-width: 480px) {
  form.formulario > button[type="submit"], form.formulario > .boton { width: 100%; margin-bottom: 0.4rem; }
}

/* P-34: PDF de la factura. Los campos leídos del PDF quedan en amarillo hasta que se guardan. */
.paso-pdf { max-width: 640px; margin: 0 0 1.25rem; }
.paso-pdf h2 { margin-top: 0; }
.paso-pdf .datos { margin: 0.5rem 0; }
.lista-avisos { margin: 0; padding-left: 1.1rem; }
.campo-leido input[type="text"], .campo-leido select, .campo-leido textarea {
  background: var(--amarillo-fondo);
  border-color: var(--amarillo-borde);
}
.leido-pdf { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 600; color: var(--amarillo); }

/* Al imprimir (por ejemplo, el resumen de cuenta para un cliente) sale solo el contenido: sin menú ni botones. */
/* Libro de caja: la firma al pie de la hoja de rendición. */
.firma { margin-top: 3rem; }

@media print {
  body.con-menu .cuerpo { display: block; }
  .barra, .lateral, .saltar, .acciones, .barra-accion, .no-imprimir { display: none; }
  .tabla-desplazable { overflow: visible; }
  body { background: #ffffff; }
  .tarjeta, .filas, .indicadores, .tarjeta-area { box-shadow: none; }
}

/* P-38: ventana «¿Lo doy de alta?» cuando el proveedor o el cliente de la factura leída no está dado de alta.
   Es un <dialog open> que arma el servidor (sin JavaScript, por la CSP): «No» es un enlace que la cierra. */
.ventana-fondo {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(17, 17, 16, 0.45);
}
.ventana {
  position: static;
  width: 100%;
  max-width: 34rem;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  padding: 1.25rem;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-flotante);
}
.ventana h2 { margin-top: 0; }
.ventana .acciones { margin-top: 1rem; }
.tarjeta .ventana .datos:not(.compacto), .ventana .datos { grid-template-columns: 11rem 1fr; }
@media (max-width: 480px) { .tarjeta .ventana .datos:not(.compacto), .ventana .datos { grid-template-columns: 1fr; } }

/* ---------- P-43 (M-37): formulario de la nota de pedido y pantalla de aprobación ---------- */
/* La tecla Enter elige el primer botón del formulario: uno que solo vuelve a armar la pantalla. Fuera de la vista,
   pero activo (con display:none el navegador podría no usarlo). */
.boton-por-defecto { position: absolute; left: -9999px; width: 1px; height: 1px; min-height: 0; min-width: 0; padding: 0; overflow: hidden; }
/* Lo obligatorio con el color de acento y «*»; lo optativo, en gris. */
.rotulo-obligatorio { color: var(--acento); }
.campo label.rotulo-optativo, .rotulo-optativo { color: var(--suave); font-weight: 500; }
.leyenda-obligatorio { margin: 0.25rem 0 0.75rem; color: var(--suave); }
.leyenda-obligatorio .rotulo-obligatorio { font-weight: 600; }
.datos-fijos { display: flex; flex-wrap: wrap; margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; background: var(--hundido); border-radius: 8px; }
.datos-fijos > div { display: flex; margin: 0.1rem 1.5rem 0.1rem 0; }
.datos-fijos dt { color: var(--suave); margin: 0 0.4rem 0 0; font-weight: 400; }
.datos-fijos dd { margin: 0; font-weight: 600; }
#buscar-proveedor { margin-bottom: 0.4rem; }
.enlace-alta { margin: 0.4rem 0 0; }
/* Cantidad, unidad y material en una sola línea, también en el celular (anchos chicos para cantidad y unidad). */
.linea-material { display: flex; align-items: flex-start; }
.linea-material > .campo { min-width: 0; margin-right: 0.5rem; }
.linea-material > .campo:last-child { margin-right: 0; }
.linea-material .campo-cantidad { flex: 0 0 5.5rem; }
.linea-material .campo-unidad { flex: 0 0 5.75rem; }
.linea-material .campo-material { flex: 1 1 auto; }
.linea-material input, .linea-material select { width: 100%; }
.linea-material select { padding-left: 0.4rem; padding-right: 0.2rem; }
.linea-material label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .linea-material .campo-cantidad, .linea-material .campo-unidad { flex-basis: 4.6rem; }
  .linea-material > .campo { margin-right: 0.35rem; }
  .linea-material label { font-size: 0.875rem; }
  .linea-material input, .linea-material select { padding-left: 0.4rem; padding-right: 0.3rem; }
}
/* El material que se está cargando. */
.material-nuevo { margin: 0 0 1rem; padding: 0.75rem 0.9rem 0.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.material-nuevo-titulo { margin: 0 0 0.6rem; font-size: 1rem; }
.material-nuevo .acciones { margin-top: 0; }
/* Los materiales cargados: una línea en verde con un tilde, el lápiz (editar) y la × (quitar). */
.materiales-cargados { list-style: none; margin: 0 0 1rem; padding: 0; }
.material-cargado { display: flex; align-items: center; margin: 0 0 0.4rem; padding: 0.25rem 0.25rem 0.25rem 0.75rem; color: var(--verde); background: var(--verde-fondo); border: 1px solid var(--verde-borde); border-left: 4px solid var(--verde); border-radius: var(--radio); }
.material-cargado.en-edicion { border-style: dashed; border-left-style: solid; }
.material-tilde { flex: none; width: 20px; height: 20px; margin-right: 0.5rem; stroke-width: 2.5; }
.material-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.material-botones { flex: none; display: flex; margin-left: 0.35rem; }
button.boton-icono { min-width: 44px; padding: 0; color: var(--texto); background: transparent; border-color: transparent; }
button.boton-icono:hover { color: var(--texto); background: var(--superficie); border-color: var(--verde-borde); }
.boton-icono .icono { width: 20px; height: 20px; }
@media (min-width: 1000px) {
  /* Estas pantallas no van en dos columnas: el orden de arriba hacia abajo es el del trabajo. */
  form.formulario.nota-pedido, form.formulario.aprobar-nota { display: block; max-width: 760px; }
}

/* ---------- P-43 (M-37): listados de notas de pedido ---------- */
/* La PC ve la tabla (una fila por material); el celular, las tarjetas (una por nota). Sin JavaScript: media queries. */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vista-pc { display: none; }
.listado-notas { position: relative; }
/* Las casillas que abren «Filtros» y «Ordenar» en el celular: fuera de la vista, pero con foco de teclado. */
.interruptor-panel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.botones-notas { display: flex; flex-wrap: wrap; margin: 0.25rem -0.2rem 0.5rem; }
.botones-notas > a, .botones-notas > label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0.2rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.botones-notas > a:hover, .botones-notas > label:hover { background: var(--hundido); color: var(--texto); }
.botones-notas > a[aria-current="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
#ver-filtros:checked ~ .botones-notas #boton-filtros, #ver-orden:checked ~ .botones-notas #boton-ordenar { background: var(--acento-suave); border-color: var(--acento); font-weight: 600; }
#ver-filtros:focus ~ .botones-notas #boton-filtros, #ver-orden:focus ~ .botones-notas #boton-ordenar { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Celular: los filtros, uno debajo del otro, y las opciones de orden, solo con su botón tocado. */
.filtros-notas { display: none; margin: 0 0 0.75rem; padding: 0.75rem 0.9rem 0.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.filtros-notas .campo { margin-bottom: 0.6rem; }
.filtros-notas .campo label { font-size: 0.875rem; }
.filtros-notas input, .filtros-notas select { width: 100%; }
.botones-filtro { display: flex; flex-wrap: wrap; align-items: center; margin: 0.25rem -0.25rem 0.5rem; }
.botones-filtro > * { margin: 0.25rem; }
#ver-filtros:checked ~ .filtros-notas { display: block; }
.opciones-orden { display: none; margin-bottom: 0.75rem; }
#ver-orden:checked ~ .opciones-orden { display: block; }
.opciones-orden a.fila { display: flex; align-items: center; justify-content: space-between; }
.opciones-orden .icono { width: 18px; height: 18px; color: var(--acento); }
/* Las tarjetas (una por nota). */
.tarjeta-nota-arriba, .tarjeta-nota-abajo { display: flex; justify-content: space-between; align-items: center; }
.tarjeta-nota-arriba > .principal { font-weight: 600; min-width: 0; overflow-wrap: anywhere; margin-right: 0.5rem; }
.tarjeta-nota-arriba > .etiqueta { flex: none; }
.tarjeta-nota-material { margin: 0.2rem 0 0.35rem; overflow-wrap: anywhere; }
.tarjeta-nota-abajo > span:first-child { min-width: 0; margin-right: 0.5rem; }
.tarjeta-nota-abajo .etiqueta { white-space: normal; }
.tarjeta-nota-numero { flex: none; display: inline-flex; align-items: center; }
a.icono-pdf { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--rojo); }
a.icono-pdf:hover { color: var(--texto); }
a.icono-pdf .icono { width: 22px; height: 22px; }
/* La tabla de la PC. */
.tabla-desplazable { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabla th, .tabla td { padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; border-top: 1px solid var(--borde); }
.tabla thead th { background: var(--hundido); border-top: 0; font-weight: 600; vertical-align: bottom; }
/* P-43: las 12 columnas de las notas entran a 1366 px con el menú lateral (títulos en dos líneas, menos relleno). */
.tabla-notas { font-size: 0.8125rem; }
.tabla-notas th, .tabla-notas td { padding: 0.35rem 0.4rem; }
.tabla-notas abbr { text-decoration: none; }
.tabla-notas .estado-nota { white-space: nowrap; }
.tabla td.numero.importe { white-space: nowrap; color: var(--texto); }  /* P-56: el total de la factura en una línea */
.tabla thead th a { color: var(--texto); text-decoration: none; }
.tabla thead th a:hover { color: var(--acento); text-decoration: underline; }
.tabla thead th[aria-sort] a { color: var(--acento); }
.tabla .flecha { font-size: 0.75rem; }
.tabla tr.continua td { border-top-style: dashed; }
.tabla td.repite { color: var(--tenue); }
.tabla td.numero, .tabla th.col-numero { text-align: right; color: var(--suave); }
.tabla td.numero a { color: var(--suave); }
.tabla td.pdf, .tabla th.col-pdf { text-align: center; }
.tabla td.pdf a.icono-pdf { min-width: 32px; min-height: 28px; }
.tabla .etiqueta { white-space: normal; }
@media (min-width: 768px) {
  .vista-pc { display: block; }
  .interruptor-panel { display: none; }  /* en la PC no hay paneles: sin paradas de foco invisibles */
  .vista-celular, .botones-notas, .opciones-orden, #ver-orden:checked ~ .opciones-orden { display: none; }
  /* En la PC los filtros están siempre a la vista, en varias columnas. */
  .filtros-notas, #ver-filtros:checked ~ .filtros-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); grid-gap: 0 0.75rem; align-items: end; }
  .filtros-notas .botones-filtro { grid-column: 1 / -1; }
  .tabla tbody tr:hover { background: var(--hundido); }
}

/* ---------- P-43 (M-37): campanita de notificaciones en la barra ---------- */
/* Se abre con <details> (sin JavaScript). En el celular el panel ocupa el ancho de la pantalla, debajo de la barra; en
   la PC es una tarjeta debajo de la campanita. Las no leídas, con el fondo de acento suave. */
.barra { position: relative; }
.campanita > summary { list-style: none; }
.campanita > summary::-webkit-details-marker { display: none; }
.campanita-boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radio);
  color: var(--sobre-barra);
  cursor: pointer;
}
.campanita-boton:hover, .campanita[open] > .campanita-boton { background: rgba(255, 255, 255, 0.12); }
.barra .campanita-boton:focus, .barra .campanita-boton:focus-visible { outline-color: var(--sobre-barra); box-shadow: none; }
.campanita-boton .icono { width: 22px; height: 22px; }
.numerito {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--rojo);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--barra);
}
.sin-numerito { display: none; }
.campanita-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--superficie);
  color: var(--texto);
  border-top: 1px solid var(--borde);
  box-shadow: var(--sombra-flotante);
  text-align: left;
}
.campanita-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--borde);
}
.campanita-titulo { font-weight: 600; }
.campanita-cabecera button.enlace { color: var(--acento); }
.notificaciones { list-style: none; margin: 0; padding: 0; }
.campanita-panel .notificacion {
  display: block;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
}
.campanita-panel .notificacion:hover { background: var(--hundido); color: var(--texto); }
.campanita-panel .notificacion.sin-leer { background: var(--acento-suave); }
.notificacion-texto { display: block; overflow-wrap: break-word; }
.sin-leer .notificacion-texto { font-weight: 600; }
.notificacion-fecha { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--suave); }
.campanita-todas { display: block; padding: 0.7rem 0.75rem; font-weight: 600; text-align: center; }
.campanita-vacio { margin: 0; padding: 1rem 0.75rem; color: var(--suave); }
.notificaciones-lista > li.sin-leer { background: var(--acento-suave); }
.notificaciones-lista { margin-top: 0.75rem; }
@media (min-width: 700px) {
  .campanita { position: relative; }
  .campanita-panel {
    top: calc(100% + 6px);
    left: auto;
    width: 24rem;
    border-top: 0;
    border-radius: var(--radio-tarjeta);
  }
}
/* El panel es blanco: el foco vuelve al anillo azul (la barra lo pone blanco). */
.barra .campanita-panel a:focus, .barra .campanita-panel button:focus,
.barra .campanita-panel a:focus-visible, .barra .campanita-panel button:focus-visible { outline-color: var(--foco); }

/* ---------- P-44 (PR 3): asistente de 5 pasos para cargar facturas de proveedor ----------
   Colores y componentes de la app (no los de las maquetas). Primero el celular (375 px sin scroll horizontal);
   Chrome 109: grid, flex y :checked ~. */
.asistente { max-width: 1100px; }
.asistente .encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pasos-asistente { display: flex; list-style: none; margin: 0 0 1rem; padding: 0; }
.paso-asistente { flex: 1 1 0; min-width: 0; display: flex; align-items: center; color: var(--suave); }
.paso-asistente:last-child { flex: 0 0 auto; }
.paso-asistente > a, .paso-asistente > span { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.paso-asistente::after { content: ""; flex: 1 1 auto; height: 1px; margin: 0 0.4rem; background: var(--borde-fuerte); min-width: 0.5rem; }
.paso-asistente:last-child::after { display: none; }
.paso-asistente > a { min-height: 44px; }
.paso-asistente > a:hover .paso-nombre { text-decoration: underline; }
.paso-numero { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--borde-fuerte); border-radius: 50%; background: var(--superficie); font-weight: 600; }
.paso-nombre { display: none; margin-left: 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso-actual { color: var(--texto); font-weight: 600; }
.paso-actual .paso-numero { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.paso-hecho .paso-numero { border-color: var(--acento); color: var(--acento); }
.paso-actual .paso-nombre { display: inline; }
@media (min-width: 900px) { .paso-nombre { display: inline; } }
.tarjeta-paso { padding: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.tarjeta-paso h2 { margin-top: 0; }
.tarjeta-paso .paso-pdf { box-shadow: none; }
@media (min-width: 700px) { .tarjeta-paso { padding: 1.25rem 1.5rem; } }
.botones-paso { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--borde); }
.botones-paso > * { margin: 0.25rem 0.5rem 0.25rem 0; }
.botones-paso > :last-child { margin-left: auto; margin-right: 0; }
@media (max-width: 480px) { .botones-paso > * { flex: 1 1 100%; margin-right: 0; } .botones-paso > :last-child { margin-left: 0; } }
.cabecera-paso dd { overflow-wrap: anywhere; }
.cabecera-paso .etiqueta { margin: 0.1rem 0.2rem 0.1rem 0; }
.rotulo-campo { display: block; font-weight: 600; font-size: 0.9375rem; margin: 0.75rem 0 0.3rem; }
.valor-fijo { margin: 0; min-height: 44px; display: flex; align-items: center; }
.grilla-campos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0 1rem; }
@media (min-width: 700px) { .grilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grilla-campos .campo-ancho { grid-column: 1 / -1; } }
.grilla-importes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0 0.75rem; }
@media (min-width: 1000px) { .grilla-importes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.campo-importe input { text-align: right; }
.campo-importe label { font-size: 0.875rem; }
/* Paso 1: buscador y opciones en tarjeta */
.buscador { display: flex; }
.buscador input { flex: 1 1 auto; min-width: 0; margin-right: 0.5rem; }
.buscador button { flex: none; }
.buscar-proveedor { margin: 0.75rem 0; }
.buscar-proveedor > label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.opciones-tarjeta, .opciones-modalidad { margin: 0.5rem 0 1rem; min-width: 0; }
.opcion-tarjeta { display: flex; align-items: center; min-height: 52px; margin: 0 0 0.5rem; padding: 0.6rem 0.8rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer; }
.opcion-tarjeta input { flex: none; }
.opcion-tarjeta input:checked + span .opcion-titulo, .opcion-tarjeta input:checked + .opcion-titulo { color: var(--acento); }
.opcion-tarjeta > span { min-width: 0; overflow-wrap: anywhere; }
.opcion-titulo { display: block; font-weight: 600; }
.opcion-detalle { display: block; font-size: 0.875rem; color: var(--suave); }
@media (min-width: 700px) { .opciones-modalidad { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.75rem; } .opciones-modalidad legend { grid-column: 1 / -1; } .opciones-modalidad .opcion-tarjeta { margin: 0; } }
.ficha-elegida { margin: 0.5rem 0 0; padding: 0.75rem 1rem 0.25rem; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.ficha-elegida > p { margin: 0 0 0.3rem; }
/* Paso 2: desplegable con casillas y cobertura de cada nota */
details.desplegable { margin: 0 0 1rem; border: 1px solid var(--borde-campo); border-radius: var(--radio); background: var(--superficie); }
details.desplegable > summary { min-height: 44px; display: flex; align-items: center; padding: 0.5rem 0.8rem; }
details.desplegable[open] > summary { border-bottom: 1px solid var(--borde); }
.desplegable-cuerpo { padding: 0.5rem 0.8rem; }
.opciones-notas { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.opcion-nota.oculto { display: none; }
.opcion-nota label { display: flex; align-items: flex-start; min-height: 44px; padding: 0.35rem 0; }
.opcion-nota input { flex: none; width: 22px; height: 22px; margin: 0.1rem 0.6rem 0 0; accent-color: var(--acento); }
.opcion-nota span { min-width: 0; overflow-wrap: anywhere; }
.opcion-nota .etiqueta { margin: 0.15rem 0.2rem 0 0; }
.nota-elegida { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.nota-elegida.oculto { display: none; }
.nota-elegida.con-error { border-color: var(--rojo); }
.nota-elegida-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.nota-elegida-cabecera > span { min-width: 0; overflow-wrap: anywhere; }
.nota-elegida-cabecera a { min-height: 44px; display: inline-flex; align-items: center; }
fieldset.cobertura { margin-top: 0.25rem; min-width: 0; }
fieldset.cobertura > input { width: 22px; height: 22px; margin: 0 0.4rem 0 0; vertical-align: middle; accent-color: var(--acento); }
fieldset.cobertura > label { display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 44px; margin-right: 1rem; vertical-align: middle; }
.aviso-completa { display: none; margin: 0.25rem 0; }
.cobertura-completa:checked ~ .aviso-completa { display: block; }
/* Paso 3: el adjunto */
.adjunto-elegido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 1rem; padding: 0.5rem 0.8rem; background: var(--hundido); border-radius: var(--radio); }
.adjunto-elegido > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* Paso 4: conceptos, bases, impuestos y conciliación */
.titulo-con-moneda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.titulo-con-moneda .moneda { margin: 0.25rem 0; }
.importes { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; }
@media (min-width: 1000px) { .importes { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.importes h3 { margin-top: 0.75rem; }
.importes-impuestos { min-width: 0; padding: 0.25rem 0.9rem 0.5rem; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--lienzo); }
.importes-conceptos { min-width: 0; }
.filas-concepto { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.fila-concepto { margin: 0 0 0.6rem; padding: 0.6rem 0.8rem 0.1rem; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.fila-concepto-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.fila-concepto-cabecera > span { min-width: 0; overflow-wrap: anywhere; margin-right: 0.5rem; }
.fila-concepto .campo { margin-bottom: 0.6rem; }
button.boton-quitar { min-height: 36px; padding: 0.2rem 0.7rem; font-size: 0.875rem; }
.renglones-tributo { margin: 0 0 0.75rem; min-width: 0; }
.renglones-tributo > legend { font-weight: 600; font-size: 0.9375rem; }
.renglon-tributo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-gap: 0 0.5rem; }
.renglon-tributo .campo { margin-bottom: 0.5rem; }
.renglones-tributo > button { min-height: 36px; padding: 0.2rem 0.7rem; font-size: 0.875rem; }
.conciliacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 0.5rem; margin: 0.75rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--borde); }
.conciliacion dt { font-size: 0.8125rem; color: var(--suave); }
.conciliacion dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 480px) { .conciliacion { grid-template-columns: minmax(0, 1fr); } .conciliacion > div { display: flex; justify-content: space-between; } }
.cierra { color: var(--verde); }
.no-cierra { color: var(--rojo); }
.conciliacion-mensajes { color: var(--rojo); font-size: 0.875rem; }
/* P-44 (PR 4): «Usar otra moneda» a lo ancho, arriba de los importes; el equivalente en pesos debajo de la conciliación */
.importes > .bloque-moneda { grid-column: 1 / -1; margin: 0; }
.campo-cotizacion.oculto { display: none; }
.equivalente-ars { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
/* Paso 5: resumen */
.resumen-bloque { margin: 0 0 1.25rem; }
.resumen-titulo { display: flex; align-items: baseline; justify-content: space-between; }
.resumen-titulo h3 { margin: 0.5rem 0; }
.resumen .filas > li { overflow-wrap: anywhere; }

/* ---------- P-44 (PR 5): los destinos de cada concepto en el detalle de una factura del asistente ---------- */
ul.destinos { list-style: none; margin: 0.4rem 0 0; padding: 0 0 0 0.75rem; border-left: 2px solid var(--borde); }
ul.destinos > li { padding: 0.3rem 0; }
ul.destinos .acciones { margin-top: 0.25rem; }

/* P-53: asistente de facturas */
/* Paso 1: completar el CUIT del proveedor elegido y los parecidos «a completar» del alta */
.completar-proveedor { margin-top: 0.5rem; }
.completar-proveedor .campo { margin-bottom: 0.5rem; }
.lista-avisos.parecidos > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.2rem 0; }
.lista-avisos.parecidos > li > span { min-width: 0; overflow-wrap: anywhere; margin-right: 0.5rem; }
.lista-avisos.parecidos button { min-height: 36px; padding: 0.2rem 0.7rem; font-size: 0.875rem; }
/* Paso 2: las notas del proveedor elegido y, aparte, las de otros proveedores */
.grupo-notas { margin: 0.6rem 0 0.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--suave); }
.proveedor-nota { font-weight: 600; }
/* Paso 3: la factura es obligatoria */
.paso-pdf .campo-obligatorio { padding: 0.5rem 0.75rem; border: 1px dashed var(--amarillo-borde); border-radius: var(--radio); background: var(--amarillo-fondo); }
/* Paso 4: una línea por alícuota, con su neto y su IVA al lado */
.bases-alicuotas { margin: 0 0 0.25rem; }
.base-encabezado, .base-fila { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr); grid-gap: 0 0.5rem; align-items: start; }
.base-encabezado { font-size: 0.8125rem; font-weight: 600; color: var(--suave); padding-bottom: 0.2rem; }
.base-fila { padding-top: 0.35rem; border-top: 1px solid var(--borde); }
.base-fila .campo { margin-bottom: 0.35rem; }
.base-rotulo { padding-top: 0.55rem; font-weight: 600; overflow-wrap: anywhere; }
.base-sin-iva { padding-top: 0.6rem; }
.otras-alicuotas { margin: 0.25rem 0; }
.otras-alicuotas > .contenido-opcional { padding-top: 0; }
.total-factura { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--borde); }
.total-factura .campo { margin-bottom: 0.2rem; }
.total-factura input { font-weight: 600; }
/* Paso 4: los conceptos, numerados; el motivo sin nota, uno para la factura */
.numero-concepto { display: inline-block; min-width: 1.6rem; height: 1.6rem; margin-right: 0.35rem; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-weight: 600; font-size: 0.8125rem; line-height: 1.6rem; text-align: center; }
.motivo-sin-nota { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--amarillo-borde); background: var(--amarillo-fondo); border-radius: var(--radio); }
@media (max-width: 480px) { .base-encabezado, .base-fila { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); } }
/* Detalle de la factura: con el archivo ya adjunto, agregar otro queda plegado */
#agregar-otro-adjunto { margin-top: 0.5rem; }

/* P-53: pagos y filtros */
/* Lo que integer.js oculta con `hidden` dentro de un formulario (el botón «Filtrar» de un filtro con solo listas, los
   campos del medio de pago que no corresponden) se oculta aunque su clase le dé otro display. */
form [hidden] { display: none !important; }
.factura-a-pagar .campo-casilla { margin-bottom: 0.4rem; }
.pago-parcial { margin: 0 0 0.6rem; }
.pago-parcial > summary { font-size: 0.9375rem; color: var(--acento); padding: 0.6rem 0; }
.pago-parcial[open] > summary { margin-bottom: 0.5rem; }
.total-pago { margin: 1rem 0; padding: 0.6rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); font-size: 1.0625rem; }
.total-pago strong { font-variant-numeric: tabular-nums; }

/* P-55: «Proveedor» de la nota de pedido, un solo campo: lo que coincide aparece debajo y lo elegido queda escrito. */
.combo-lista {
  list-style: none; margin: 0.25rem 0 0; padding: 0.25rem; max-height: 16rem; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
}
.combo-lista li { margin: 0; }
.combo-opcion {
  display: block; width: 100%; min-height: 2.5rem; padding: 0.45rem 0.6rem; text-align: left;
  background: transparent; color: var(--texto); border: 0; border-radius: var(--radio-chip); font-weight: 400;
}
.combo-opcion:hover, .combo-opcion:focus { background: var(--acento-suave); color: var(--texto); }
.combo-vacio { margin: 0.35rem 0 0; color: var(--suave); }

/* P-56: el parte del día (grilla personas × obras) y sus totales. */
.tabla-parte-dia .campo-horas { width: 3.6rem; min-height: 36px; font-size: 0.875rem; padding: 0.2rem 0.35rem; }
.tabla-parte-dia select { min-width: 8rem; font-size: 0.8125rem; }
.tabla-parte-dia td, .tabla-parte-dia th { vertical-align: middle; }
.tabla tbody th[scope="row"] { font-weight: 600; text-align: left; }
.tabla tr.fila-total td, .tabla tr.fila-total th { background: var(--hundido); font-weight: 600; }
/* Una tabla con campos (el parte del día) no se duplica en tarjetas: debajo de 768 px se apila, una tarjeta por fila,
   y cada celda muestra su título (data-titulo). Así no hay desplazamiento horizontal en el celular. */
@media (max-width: 767px) {
  .tabla-apilable thead { display: none; }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr { display: block; width: 100%; }
  .tabla-apilable tr { border-bottom: 1px solid var(--borde); padding: 0.5rem 0.75rem; }
  .tabla-apilable th, .tabla-apilable td { display: flex; justify-content: space-between; align-items: center;
    border: 0; padding: 0.2rem 0; text-align: right; }
  .tabla-apilable th[scope="row"] { display: block; text-align: left; padding-bottom: 0.35rem; }
  .tabla-apilable td[data-titulo]::before { content: attr(data-titulo); color: var(--suave); text-align: left;
    padding-right: 0.75rem; }
  .tabla-apilable td.vacia { display: none; }
}

/* ---------- Caja chica simple: explicación de 3 pasos ---------- */
.como-funciona ol { margin: 0.35rem 0 0; padding-left: 1.25rem; }
.como-funciona li { margin: 0.15rem 0; }