/* =========================================================
   APARCH — Sistema de Acopio | Raíces de Chirinos
   Hoja de estilos propia (sin dependencias externas)
   ========================================================= */

:root {
  --verde-900: #12401f;
  --verde-800: #1a5c2e;
  --verde-700: #226e39;
  --verde-600: #2c8a48;
  --verde-100: #e6f2e9;
  --oro-500: #c99a3b;
  --oro-600: #b3822a;
  --crema-50: #f8f6f0;
  --crema-100: #f4f1ea;
  --rojo-600: #c0392b;
  --rojo-100: #fbeae8;
  --amber-600: #b7791f;
  --amber-100: #fdf1dc;
  --morado-600: #6b3fa0;
  --morado-100: #efe6f7;
  --azul-600: #2563a8;
  --azul-100: #e5f0fb;
  --naranja-600: #c2661a;
  --naranja-100: #fdece1;
  --gris-900: #1f2937;
  --gris-700: #3f4a53;
  --gris-500: #6b7680;
  --gris-300: #d7dbdd;
  --gris-200: #e8eaec;
  --gris-100: #f3f4f5;
  --blanco: #ffffff;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(18, 64, 31, .08), 0 1px 2px rgba(18, 64, 31, .06);
  --sombra-lg: 0 10px 30px rgba(18, 64, 31, .12);
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--crema-100);
  color: var(--gris-900);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--verde-900); }
p { margin: 0 0 1em; }

/* ---------- layout shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--verde-900), var(--verde-800));
  color: #eef7ee;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.3rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-logo { font-size: 1.6rem; }
.sidebar-brand strong { display: block; font-size: 1.05rem; letter-spacing: .04em; }
.sidebar-brand small { display: block; opacity: .75; font-size: .72rem; }

.sidebar-nav { display: flex; flex-direction: column; padding: .8rem .7rem; gap: .15rem; flex: 1; }
.sidebar-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .8rem; border-radius: 8px;
  color: #d9ecdc; font-size: .92rem; font-weight: 500;
  transition: background .15s ease;
}
.sidebar-nav a span { width: 1.3em; text-align: center; }
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a.active { background: var(--oro-500); color: #1a1200; font-weight: 700; }

/* ---------- sidebar: grupos plegables ---------- */
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-toggle {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .62rem .8rem; border-radius: 8px; border: none; background: none; cursor: pointer;
  color: #d9ecdc; font-size: .92rem; font-weight: 600; font-family: inherit; text-align: left;
  transition: background .15s ease, color .15s ease;
}
.sidebar-group-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-group-icon { width: 1.3em; text-align: center; }
.sidebar-group-label { flex: 1; }
.sidebar-group-chevron { font-size: .8rem; opacity: .6; transition: transform .18s ease; }
.sidebar-group.is-open > .sidebar-group-toggle { color: #fff; }
.sidebar-group.is-open > .sidebar-group-toggle .sidebar-group-chevron { transform: rotate(90deg); opacity: .9; }

.sidebar-group-items {
  display: flex; flex-direction: column; gap: .15rem;
  max-height: 0; overflow: hidden;
  transition: max-height .22s ease;
}
.sidebar-group.is-open > .sidebar-group-items { max-height: 640px; }
.sidebar-group-items a { padding-left: 2.15rem; font-size: .88rem; }

.sidebar-sep {
  margin: .9rem .8rem .3rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; opacity: .55;
}
.sidebar-roadmap {
  margin: .5rem .9rem 1.1rem; padding: .7rem .8rem;
  background: rgba(255,255,255,.07); border-radius: 8px;
  font-size: .72rem; line-height: 1.4; opacity: .85;
}
.sidebar-roadmap p { margin: 0; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.4rem; background: var(--blanco);
  border-bottom: 1px solid var(--gris-200); position: sticky; top: 0; z-index: 5;
}
.topbar-toggle { display: none; background: none; border: 0; font-size: 1.3rem; cursor: pointer; }
.topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--verde-900); flex: 1; }
.topbar-user { display: flex; align-items: center; gap: .7rem; font-size: .88rem; }
.user-pill {
  display: flex; align-items: center; gap: .55rem;
  background: var(--crema-50); border: 1px solid var(--gris-200); border-radius: 999px;
  padding: .28rem .9rem .28rem .28rem;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--verde-600), var(--verde-900));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem; box-shadow: 0 1px 3px rgba(18, 64, 31, .25);
}
.user-pill-info { display: flex; flex-direction: column; line-height: 1.25; }
.user-pill-name { font-weight: 700; color: var(--verde-900); font-size: .84rem; }
.user-pill-role { font-size: .68rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.user-pill-role.es-admin { color: var(--oro-600); }
.topbar-name { color: var(--gris-700); font-weight: 600; }

.app-content { padding: 1.4rem; max-width: 1400px; width: 100%; margin: 0 auto; overflow-x: hidden; }

/* ---------- cards / kpis ---------- */
.card {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; border: 1px solid var(--gris-200);
}
.card-title { font-weight: 700; color: var(--verde-900); margin-bottom: .9rem; font-size: 1rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.kpi {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem; border: 1px solid var(--gris-200); border-left: 4px solid var(--verde-700);
}
.kpi .kpi-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-500); font-weight: 600; }
.kpi .kpi-value { font-size: 1.55rem; font-weight: 800; color: var(--verde-900); margin-top: .25rem; }
.kpi .kpi-sub { font-size: .78rem; color: var(--gris-500); margin-top: .2rem; }
.kpi.kpi-oro { border-left-color: var(--oro-600); }
.kpi.kpi-rojo { border-left-color: var(--rojo-600); }
.kpi.kpi-ambar { border-left-color: var(--amber-600); }
.kpi.kpi-verde-oscuro { border-left-color: var(--verde-900); }
.kpi .kpi-icon { font-size: 1.1rem; margin-right: .3rem; }

/* Barra de progreso ("meter") usada en Saldos Vivos: relleno = estado,
   pista = paso más claro de la misma rampa (verde-en-verde, etc.). */
.meter { height: 6px; border-radius: 999px; background: var(--verde-100); overflow: hidden; margin-top: .55rem; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--verde-600); }
.meter.meter-oro { background: #f5e9d3; }
.meter.meter-oro > span { background: var(--oro-600); }
.meter.meter-rojo { background: var(--rojo-100); }
.meter.meter-rojo > span { background: var(--rojo-600); }

/* Pestañas tipo "pill" (Kárdex de Campaña, etc.) */
.tab-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tab-btn {
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--gris-300);
  background: var(--blanco); color: var(--verde-900); font-size: .82rem; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  transition: all .15s ease;
}
.tab-btn:hover { border-color: var(--verde-600); background: var(--verde-100); }
.tab-btn.active { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }

.table-wrap-scroll { max-height: 560px; overflow-y: auto; }
.table-wrap-scroll table.data-table thead th { position: sticky; top: 0; z-index: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  padding: .55rem 1rem; border-radius: 8px; border: 1px solid transparent;
  font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .15s ease;
  text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--verde-700); color: #fff; }
.btn-primary:hover { background: var(--verde-800); }
.btn-secondary { background: var(--crema-100); color: var(--verde-900); border-color: var(--gris-300); }
.btn-secondary:hover { background: var(--gris-100); }
.btn-danger { background: var(--rojo-600); color: #fff; }
.btn-danger:hover { background: #a53324; }
.btn-ghost { background: transparent; color: var(--gris-700); border-color: var(--gris-300); }
.btn-ghost:hover { background: var(--gris-100); }
.btn-gold { background: var(--oro-500); color: #241a00; }
.btn-gold:hover { background: var(--oro-600); }
.btn-sm { padding: .34rem .7rem; font-size: .78rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- forms ---------- */
label { display: block; margin-bottom: .9rem; font-size: .84rem; font-weight: 600; color: var(--gris-700); }
/* Fase 57 — este bloque de casillas (usado en Colindancias, ver
   inspecciones/form.php) no tenía ningún estilo propio en la computadora,
   así que se veía con el acomodo por defecto del navegador. Se agrega el
   mismo tratamiento en cuadrícula pareja que ya se hizo en el celular, para
   que las casillas se vean alineadas en columnas parejas en vez de una
   detrás de otra sin orden. */
label.checkbox-inline { display: flex; align-items: flex-start; gap: .4rem; font-weight: 400; margin-bottom: 0; }
.checkbox-group-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; margin: 0 0 .8rem; }
input, select, textarea {
  width: 100%; margin-top: .3rem; padding: .55rem .7rem; border: 1px solid var(--gris-300);
  border-radius: 8px; font-size: .92rem; font-family: inherit; background: var(--blanco); color: var(--gris-900);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde-600); box-shadow: 0 0 0 3px var(--verde-100); }
input[readonly], input:disabled { background: var(--gris-100); color: var(--gris-500); }
textarea { resize: vertical; min-height: 70px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
/* Fila compacta de 9 meses (compromiso de entrega de café, Fase 20) — campos angostos, varios por fila. */
.form-grid-meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0 .8rem; }
/* Fase 50 — arreglo de pantallas "distorsionadas"/cortadas dentro de .form-grid
   (ej. Datos de las Parcelas: fila Código/Nombre/Base/Sector).
   Causa real: por defecto, un elemento dentro de una celda de CSS Grid tiene
   un ancho mínimo automático igual al de SU CONTENIDO más ancho (acá, un
   <select> con una opción de texto largo, como "San Miguel De Los Huarangos"
   en Sector) — ese mínimo puede ser más ancho que los 200px/110px de arriba,
   y entonces la celda (y toda la fila/tarjeta) se estira más de lo que cabe
   en la pantalla. Como el contenedor de la página recorta lo que no cabe
   (en vez de mostrar una barra para deslizar), el resultado visual es
   exactamente el reportado: columnas completas cortadas/invisibles en el
   borde derecho, en vez de acomodarse en menos columnas por fila.
   El arreglo: decirle a cada celda que SÍ puede achicarse por debajo del
   ancho de su contenido (min-width:0) para que el input/select de adentro
   (que ya tiene width:100% desde arriba) realmente ocupe el ancho real que
   le tocó, y sea ese campo el que recorta su propio texto (con "..." si el
   navegador lo hace) — no toda la pantalla. Aplica a TODOS los formularios
   del sistema que usan estas dos clases (son compartidas), pero es un
   cambio seguro: nunca vuelve más angosto de lo que ya se veía bien, solo
   evita que un campo con texto largo rompa el acomodo de los demás. */
.form-grid > *, .form-grid-meses > * { min-width: 0; }
/* Fase 55 — refuerzo adicional al arreglo de arriba: 200px/110px es un
   ANCHO MÍNIMO FIJO por columna, sin importar el min-width:0 del contenido
   — si el espacio real disponible es menor a eso (por ejemplo dentro de una
   tarjeta anidada dentro de otra), la cuadrícula puede seguir exigiendo ese
   mínimo y desbordarse igual. Esta regla aparte cambia ese mínimo fijo por
   "lo que sea más chico entre 200px/110px y el 100% del espacio real", para
   que la columna nunca pida más ancho del que en verdad hay. Se deja como
   regla APARTE (no reemplaza la de arriba) para que, si el navegador es muy
   viejo y no entiende min(), la ignore por completo y se quede con la regla
   de arriba, que sigue funcionando igual — no puede empeorar nada. */
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.form-grid-meses { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }

/* Fase 71 — arreglo de la ventanita "✏️" de editar una pregunta del
   checklist (criterios/index.php), que se veía "aplastada"/desbordada al
   abrirla desde que se agregó el editor de preguntas de seguimiento (más
   grande que el cuadrito de antes, con sus propias opciones). Causa: era un
   <details> forzado a "display:inline-block" (para que el lápiz ✏️ quedara
   en la misma línea que ⏸️/🗑️) DENTRO de una celda de tabla con
   "white-space:nowrap" (para que cada fila quepa en una sola línea) —
   juntos hacían que TODO el formulario abierto, con textos largos adentro,
   quisiera caber en una sola línea gigantesca, desbordando y desalineando
   toda la tabla. Ponerlo en su propio bloque (display:block al abrir)
   arregla el amontonamiento de texto, pero como sigue "adentro" de la
   celda, estira toda la fila a lo alto del formulario completo y además
   puede salirse por la derecha, ya que la tabla se puede desplazar en
   horizontal ("table-wrap" con scroll propio) y eso recorta cualquier
   ventanita flotante que se intente sacar de la celda.
   Solución: la ventanita de editar ahora es un <dialog> (ventana modal real
   del navegador) en vez de un <details> — se abre centrada, por encima de
   todo (no la recorta la tabla ni ningún contenedor con scroll), sin
   estirar la fila ni el ancho de la tabla, y con botón para cerrar. */
.cri-dialog {
  /* Se fuerza la posición (con !important) porque el centrado automático
     que trae el navegador para <dialog> a veces solo centra verticalmente
     y deja el cuadro pegado a donde estaba su fila en la tabla — con esto
     siempre queda centrado en medio de la pantalla, sin importar en qué
     columna de la tabla vivía el botón "✏️" que lo abrió. */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.1rem;
  width: 340px;
  max-width: min(92vw, 400px);
  max-height: 82vh;
  overflow-y: auto;
  white-space: normal;
}
.cri-dialog::backdrop { background: rgba(18, 64, 31, .35); }
.cri-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }

/* Cuadrícula compacta de celdas etiqueta+input (tabla de precios, tabla
   de descuento por humedad) — en vez de una lista larga de una sola
   columna, se acomodan varias "celdas" por fila según el ancho disponible. */
.precio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .55rem; }
.precio-grid .celda {
  background: var(--crema-50); border: 1px solid var(--gris-200); border-radius: 8px;
  padding: .5rem .55rem; text-align: center; transition: all .15s ease;
}
.precio-grid .celda:hover, .precio-grid .celda:focus-within { border-color: var(--verde-600); background: var(--verde-100); }
.precio-grid .celda label { display: block; font-size: .74rem; font-weight: 700; color: var(--verde-800); margin-bottom: .35rem; }
.precio-grid .celda input {
  width: 100%; text-align: center; padding: .4rem .3rem; font-size: .85rem;
  border: 1px solid var(--gris-300); border-radius: 6px; background: var(--blanco);
}
.precio-grid .celda input:focus { outline: none; border-color: var(--verde-600); box-shadow: 0 0 0 2px var(--verde-100); }
.precio-grid .celda.con-valor { border-color: var(--verde-600); background: var(--verde-100); }
.form-actions { display: flex; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gris-200); }
fieldset { border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
/* Fase 56 — mismo arreglo que se hizo en el celular: un <fieldset> se niega,
   por defecto de fábrica del navegador, a achicarse por debajo del ancho de
   su contenido más ancho (a diferencia de un <div> normal). En la
   computadora casi nunca se nota porque la ventana suele ser más ancha que
   ese mínimo, pero es la misma causa de fondo que si dejaba "Parcelas"
   distorsionado en el celular (ver el comentario largo en el styles.css del
   celular) — se agrega acá también por si alguna vez se usa esta pantalla
   en una ventana angosta (una tablet, o una ventana de navegador achicada
   a mano). No afecta a ningún otro fieldset del sistema. */
fieldset { min-width: 0; }
legend { font-weight: 700; color: var(--verde-800); padding: 0 .4rem; font-size: .88rem; }
.help-text { font-size: .76rem; color: var(--gris-500); margin-top: -.6rem; font-weight: 400; }

/* Campos de texto que siempre se guardan en mayúsculas (ver
   aparchActivarMayusculas() en app.js) — esto es solo el reflejo visual
   mientras se escribe; el valor real ya llega en mayúsculas por JS, y el
   servidor lo normaliza igual aunque JS esté desactivado. */
.campo-mayusculas { text-transform: uppercase; }

/* ---------- tables ---------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--radio); border: 1px solid var(--gris-200);
  background: var(--blanco); box-shadow: var(--sombra);
}
table.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; }
table.data-table th {
  text-align: left; background: var(--crema-50); color: var(--verde-900); font-weight: 700;
  padding: .7rem .85rem; border-bottom: 2px solid var(--gris-200); white-space: nowrap; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
}
table.data-table td { padding: .65rem .85rem; border-bottom: 1px solid var(--gris-100); white-space: nowrap; vertical-align: middle; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:nth-child(even) { background: rgba(18, 64, 31, .015); }
table.data-table tbody tr:hover { background: var(--verde-100); }
table.data-table .col-actions { white-space: nowrap; }
table.data-table .col-actions > * { margin-right: .3rem; vertical-align: middle; }
table.data-table .col-actions > *:last-child { margin-right: 0; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ---------- badges / alerts ---------- */
.badge { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-green { background: var(--verde-100); color: var(--verde-800); }
.badge-amber { background: var(--amber-100); color: var(--amber-600); }
.badge-red { background: var(--rojo-100); color: var(--rojo-600); }
.badge-gray { background: var(--gris-100); color: var(--gris-700); }
.badge-gray { background: var(--gris-100); color: var(--gris-700); }
.badge-gold { background: #fdf3dc; color: var(--oro-600); }

.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; font-weight: 500; }
.alert-success { background: var(--verde-100); color: var(--verde-800); }
.alert-error { background: var(--rojo-100); color: var(--rojo-600); }
.alert-info { background: #e5f0fb; color: #1c5a96; }

/* Tabla de revisión de la importación de PDF (guías detectadas antes de
   guardar): cada celda es un input editable en vez de texto plano. */
.tabla-revision-pdf input[type="text"],
.tabla-revision-pdf input[type="date"],
.tabla-revision-pdf input[type="number"] {
  width: 100%; min-width: 90px; margin-top: 0; padding: .35rem .45rem; font-size: .82rem;
}
.tabla-revision-pdf td { vertical-align: top; }
.tabla-revision-pdf .col-check { text-align: center; width: 34px; }
.tabla-revision-pdf .col-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.tabla-revision-pdf .advertencia-fila { font-size: .72rem; color: var(--oro-600); margin-top: .25rem; max-width: 220px; white-space: normal; }

/* ---------- filters bar ---------- */
.filters-bar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: 1rem; }
.filters-bar .field { min-width: 160px; }
.filters-bar label { margin-bottom: .2rem; }

.pagination {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center;
  margin-top: 1.2rem;
}
.pagination a, .pagination span.current, .pagination span.pg-nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.15rem; height: 2.15rem; padding: 0 .55rem;
  border-radius: 8px; border: 1px solid var(--gris-300); font-size: .82rem; font-weight: 600;
  color: var(--gris-700); background: var(--blanco); transition: all .15s ease;
}
.pagination a:hover { background: var(--crema-50); border-color: var(--verde-600); color: var(--verde-800); }
.pagination .current { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }
.pagination .pg-nav { font-weight: 700; }
.pagination .pg-nav.disabled { opacity: .35; pointer-events: none; }
.pagination .pg-ellipsis { color: var(--gris-500); padding: 0 .15rem; min-width: auto; border: none; }
.pagination .pg-total { flex-basis: 100%; text-align: center; font-size: .74rem; color: var(--gris-500); margin-top: .2rem; order: 99; }

/* ---------- login ---------- */
.login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 1.5rem;
  background:
    linear-gradient(160deg, rgba(11,32,20,.78), rgba(23,56,36,.60) 45%, rgba(201,138,62,.34) 100%),
    url('../img/login-bg.svg') center center / cover no-repeat;
  background-color: var(--verde-900);
}
.login-card {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 2.5rem 2.3rem 2.2rem;
  width: 100%; max-width: 396px;
  box-shadow: 0 24px 60px rgba(6,20,12,.45);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-logo {
  width: 64px; height: 64px; margin: 0 auto .65rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-700), var(--verde-900));
  box-shadow: 0 8px 20px rgba(23,56,36,.4);
}
.login-brand h1 { margin: .3rem 0 0; letter-spacing: .08em; color: var(--verde-900); font-size: 1.55rem; }
.login-brand p { color: var(--gris-500); font-size: .84rem; margin-top: .15rem; }
.login-footer { text-align: center; color: var(--gris-500); font-size: .74rem; margin: 1.3rem 0 0; }

/* ---------- documentos de impresión (ticket / guía / comprobante) ---------- */
.doc-page { max-width: 900px; margin: 0 auto; }
.doc {
  position: relative; background: #fff; border: 1px solid #cfcfcf; border-radius: 12px;
  padding: 1.1rem 1.3rem 1.3rem; margin-bottom: 1.5rem; font-size: .88rem; color: #111;
  page-break-inside: avoid;
}
.doc-mini { max-width: 420px; }
.doc-badge-row { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.doc-badge {
  display: inline-block; padding: .3rem .75rem; border-radius: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em; color: #fff; text-transform: uppercase;
}
.doc-badge.productor { background: var(--verde-700); }
.doc-badge.caja { background: var(--oro-600); }

/* Encabezado: el logo va grande en la esquina superior izquierda; el nombre
   de la empresa y el tipo/código de documento van apilados y centrados en el
   espacio restante. El "spacer" invisible a la derecha tiene el mismo ancho
   que el logo para que el bloque de texto quede realmente centrado (no
   corrido hacia la derecha). */
.doc-head {
  display: flex; align-items: flex-start; gap: .8rem;
  border-bottom: 2px solid var(--verde-800); padding-bottom: .8rem; margin-bottom: .9rem;
}
.doc-head img.doc-logo { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; }
.doc-head-center { flex: 1; text-align: center; padding-top: .2rem; }
.doc-head-spacer { width: 84px; flex-shrink: 0; }
.doc-empresa { max-width: 100%; }
.doc-empresa-nombre { font-weight: 800; color: var(--verde-900); font-size: 1.08rem; line-height: 1.3; letter-spacing: .01em; }
.doc-empresa-sub { font-size: .78rem; color: #666; margin-top: .15rem; }
.doc-tipo { text-align: center; margin-top: .25rem; }
.doc-tipo-nombre { font-weight: 800; color: var(--verde-800); font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.doc-tipo-codigo { font-weight: 800; color: var(--verde-900); font-size: 1.3rem; margin-top: .15rem; letter-spacing: .01em; }
.doc-mini .doc-head img.doc-logo { width: 64px; height: 64px; }
.doc-mini .doc-head-spacer { width: 64px; }
.doc-mini .doc-empresa-nombre { font-size: .92rem; }
.doc-mini .doc-tipo-codigo { font-size: 1.1rem; }

.doc-fields { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.doc-fields td { padding: .4rem .5rem; border-bottom: 1px solid #eee; font-size: .86rem; }
.doc-fields td.lbl { color: #667; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap; width: 1%; }
.doc-fields td.val { font-weight: 700; color: #1a1a1a; }
.doc-fields td.val .doc-val-sub { font-weight: 500; font-size: .82em; color: #667; }
.doc-mini .doc-fields td.lbl { width: 42%; }

.doc-total-box {
  display: flex; flex-direction: column; gap: .5rem;
  background: linear-gradient(135deg, var(--verde-100), #eef7ef);
  border: 1px solid var(--verde-600); border-left: 5px solid var(--verde-700); border-radius: 8px;
  padding: .9rem 1.2rem; margin: 1rem 0;
}
.doc-total-cabecera { display: flex; flex-direction: column; }
.doc-total-box .label { font-weight: 700; color: var(--verde-900); font-size: .88rem; }
.doc-total-box .amount { font-size: 1.9rem; font-weight: 800; color: var(--verde-800); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.doc-total-box .doc-total-sub { font-size: .74rem; color: #556; margin-top: .1rem; }
/* "Son: ..." (monto en letras) en su propia línea completa, sin cursiva y
   con buen tamaño — antes iba apretado al costado del monto en una
   columna angosta (240px) en cursiva, lo que lo hacía difícil de leer. */
.doc-total-letras {
  font-weight: 600; color: var(--verde-900); font-size: .84rem;
  border-top: 1px solid rgba(18,64,31,.2); padding-top: .45rem; letter-spacing: .01em;
}
.doc-total-letras-tag { font-weight: 800; color: var(--verde-700); text-transform: uppercase; margin-right: .3rem; }

.doc-cards { display: flex; gap: .6rem; margin: .9rem 0; }
.doc-card { flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: .65rem; text-align: center; background: #fafafa; }
.doc-card.destacada { border-color: var(--verde-700); border-width: 2px; background: linear-gradient(135deg, var(--verde-100), #eef7ef); }
.doc-card .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #667; font-weight: 700; }
.doc-card .v { font-size: 1.2rem; font-weight: 800; margin-top: .15rem; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.doc-card.destacada .v { color: var(--verde-800); font-size: 1.4rem; }

.doc-section-title { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--verde-800); margin: .8rem 0 .35rem; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: .5rem; }
.doc-table th { background: var(--verde-800); color: #fff; padding: .42rem .5rem; text-align: left; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; }
.doc-table td { padding: .42rem .5rem; border-bottom: 1px solid #eee; }
.doc-table tr:last-child td { border-bottom: none; }

.doc-son { font-size: .82rem; margin: .5rem 0; padding: .45rem .65rem; background: #f7f7f5; border-radius: 6px; }
.doc-son.doc-avance { background: var(--verde-100); }
.doc-avance-pct { font-weight: 800; color: var(--verde-800); }
.doc-obs { font-size: .8rem; color: #555; margin: .4rem 0; }

.firma-block { display: flex; justify-content: space-around; margin-top: 1.8rem; text-align: center; font-size: .8rem; gap: .5rem; }
.firma-line { border-top: 1.5px dotted #444; margin-top: 3.2rem; padding-top: .35rem; width: 100%; max-width: 210px; }
.firma-line img { display: block; max-height: 70px; max-width: 100%; margin: 0 auto -.2rem; }
.doc-corte { border: none; border-top: 2px dashed #bbb; margin: 0 0 1.5rem; }

/* Ficha de Inspección (imprimir): barras de sección llenas estilo formulario de
   certificación, filas clave/valor de una sola columna con sombreado alterno, y
   miniaturas de fotos/documentos adjuntos. */
.ficha-bar { background: var(--verde-800); color: #fff; font-weight: 800; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .03em; padding: .5rem .8rem; margin: 1.1rem 0 0; border-radius: 6px 6px 0 0; break-after: avoid; }
.ficha-fields { width: 100%; border-collapse: collapse; margin: 0 0 .2rem; border: 1px solid var(--gris-200); border-top: none; }
.ficha-fields tr:nth-child(even) td { background: #f7f8f6; }
.ficha-fields td { padding: .38rem .7rem; border-bottom: 1px solid #eee; font-size: .82rem; vertical-align: top;
  /* Fase 112: red de seguridad — un valor o una clave sin espacios (raro,
     pero posible) ya no puede "reventar" el ancho de la tabla entera y
     empujar el resto de la fila fuera del área visible/impresa. */
  overflow-wrap: anywhere; word-break: break-word; }
.ficha-fields td.lbl { color: #444; width: 55%; }
.ficha-fields td.val { font-weight: 700; color: #111; text-align: right; }
.ficha-fields tr.ficha-item-no { background: #fdecec !important; }
.ficha-foto-box { display: inline-block; text-align: center; margin: .4rem .6rem .4rem 0; vertical-align: top; }
.ficha-foto-box img { max-width: 220px; max-height: 220px; border: 1px solid var(--gris-200); border-radius: 6px; display: block; }
.ficha-foto-box .cap { font-size: .72rem; color: #667; margin-top: .2rem; }
.ficha-pagina { text-align: center; font-size: .7rem; color: #889; margin-top: .3rem; }
/* Fase 112: ".doc" (arriba) trae "page-break-inside: avoid" pensado para los
   documentos de UNA sola hoja (ticket/guía/comprobante) que también usan esa
   clase — "no partas este recibo a la mitad". La Ficha de Inspección
   (imprimir.php) reutiliza ".doc" pero es un documento LARGO de varias
   páginas: heredar ese "avoid" en un contenedor mucho más alto que una hoja
   es una instrucción imposible de cumplir, y es justo lo que le producía al
   motor de paginación (tanto "🖨️ Imprimir" del navegador como html2pdf.js
   del botón "⬇️ Descargar PDF") esos saltos de página feos, con espacios en
   blanco enormes antes de empujar contenido a la siguiente hoja. Esta clase
   extra, solo en imprimir.php, revierte ese "avoid" para permitir que la
   ficha se corte con normalidad entre sus filas/secciones (que ya tienen su
   propio "avoid" más específico, fila por fila, más abajo).
*/
.doc-largo { page-break-inside: auto; break-inside: auto; }
@media print {
  .ficha-bar { break-inside: avoid; }
  .ficha-fields tr { break-inside: avoid; }
  .ficha-foto-box { break-inside: avoid; }
  /* Fase 112: número de página — soportado en las versiones recientes de
     Chrome/Edge al imprimir o "Guardar como PDF" desde el navegador; en
     navegadores que no lo reconozcan, esta regla simplemente no hace nada
     (no rompe el resto de la hoja). */
  @page { @bottom-center { content: "Página " counter(page) " de " counter(pages); font-size: 8pt; color: #778; } }
}

@media print {
  @page { size: A4; margin: 10mm 8mm; }
  .doc-page { max-width: 100%; }
  .doc { border-color: #999; box-shadow: none; }
  .doc-badge.productor { background: #1a5c2e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-badge.caja { background: #b3822a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-total-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-card.destacada { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- documentos de 2 copias en 1 sola hoja (guía, comprobante) ----------
   Cuando .doc-page trae la clase .doc-page-2up, las dos copias (productor/caja)
   se ajustan para aprovechar bien toda la hoja A4 al imprimir — ni tan grandes
   que la 2da copia se vaya a una segunda página, ni tan chicas que dejen medio
   papel en blanco (que era el problema antes de este ajuste). */
@media print {
  /* Las 2 copias deben repartirse TODA la hoja en partes iguales, con el
     corte exactamente al medio — no quedarse con su tamaño "natural" y
     dejar la mitad de abajo en blanco cuando el documento tiene poco
     contenido (ej. una guía de un solo ticket). .doc-page-2up ocupa el
     alto imprimible completo de la hoja; cada .doc es un ítem flex que
     se reparte ese alto en dos partes EXACTAMENTE iguales (flex:1 con la
     misma base en ambas copias) y centra su contenido dentro de esa
     mitad. El corte (<hr class="doc-corte">) va entre medio y no crece,
     así que siempre queda justo al centro. */
  .doc-page-2up { display: flex; flex-direction: column; min-height: calc(297mm - 20mm); }
  /* El contenido se ancla arriba (no se centra como bloque); el espacio
     que sobra dentro de la mitad se concentra automáticamente encima de
     la firma (ver .firma-block más abajo con margin-top:auto), que es
     justo donde hace falta el espacio en blanco: para poder firmar a
     mano sobre el papel. */
  .doc-page-2up .doc { flex: 1 1 0; display: flex; flex-direction: column; }
  .doc-page-2up .doc-corte { flex: 0 0 auto; }
  /* Este es el tamaño "de siempre" (sin compactar): el más grande,
     pensado para que se vea igual de nítido que en pantalla. Solo se usa
     tal cual cuando el documento es corto; si no entra, print-fit.js baja
     a .compacta y, si hiciera falta, a .muy-compacta (ver más abajo). Con
     el contenido que trae hoy una guía orgánica completa, lo más común es
     que use .compacta — que ahora es prácticamente este mismo tamaño. */
  .doc-page-2up .doc { padding: .68rem 1rem .72rem; margin-bottom: 0; font-size: .98rem; }
  .doc-page-2up .doc-head { padding-bottom: .4rem; margin-bottom: .45rem; gap: .65rem; }
  .doc-page-2up .doc-head img.doc-logo { width: 92px; height: 92px; }
  .doc-page-2up .doc-head-spacer { width: 92px; }
  .doc-page-2up .doc-head-center { padding-top: 0; }
  .doc-page-2up .doc-empresa-nombre { font-size: 1.05rem; }
  .doc-page-2up .doc-empresa-sub { font-size: .78rem; }
  .doc-page-2up .doc-tipo-nombre { font-size: .8rem; }
  .doc-page-2up .doc-tipo-codigo { font-size: 1.18rem; margin-top: .06rem; }
  .doc-page-2up .doc-fields { margin-bottom: .4rem; }
  .doc-page-2up .doc-fields td { padding: .24rem .6rem; font-size: .98rem; }
  .doc-page-2up .doc-total-box { padding: .58rem .95rem; margin: .5rem 0; border-left-width: 4px; }
  .doc-page-2up .doc-total-box .label { font-size: .92rem; }
  .doc-page-2up .doc-total-box .amount { font-size: 1.75rem; }
  .doc-page-2up .doc-total-box .doc-total-sub { font-size: .8rem; }
  .doc-page-2up .doc-total-letras { font-size: .92rem; padding-top: .5rem; }
  .doc-page-2up .doc-cards { margin: .5rem 0; gap: .55rem; }
  .doc-page-2up .doc-card { padding: .4rem; }
  .doc-page-2up .doc-card .k { font-size: .74rem; }
  .doc-page-2up .doc-card .v { font-size: 1.12rem; }
  .doc-page-2up .doc-card.destacada .v { font-size: 1.32rem; }
  .doc-page-2up .doc-son { font-size: .9rem; padding: .4rem .6rem; margin: .36rem 0; }
  .doc-page-2up .doc-obs { font-size: .84rem; margin: .34rem 0; }
  .doc-page-2up .doc-section-title { margin: .45rem 0 .2rem; font-size: .88rem; }
  .doc-page-2up .doc-table th, .doc-page-2up .doc-table td { padding: .26rem .6rem; font-size: 1.02rem; }
  /* margin-top:auto empuja la firma (y el espacio en blanco necesario
     para firmar a mano) hacia el fondo de la mitad de hoja, absorbiendo
     ahí todo el espacio libre — en vez de dejarlo repartido como aire
     desperdiciado arriba del documento. */
  .doc-page-2up .firma-block { margin-top: auto; padding-top: 1.3rem; font-size: .9rem; }
  .doc-page-2up .firma-line { margin-top: 1.85rem; padding-top: .3rem; }
  .doc-page-2up .doc-corte { margin: .4rem 0 .8rem; }
  .doc-page-2up .doc-badge { padding: .32rem .78rem; font-size: .8rem; }
  .doc-page-2up .doc-badge-row { margin-bottom: .36rem; }
}

/* Dos niveles adicionales de compactación, más allá del tamaño de arriba
   (pensado para el caso típico de pocos tickets/guías). Se activan por
   JavaScript (ver print-fit.js) solo cuando un documento en particular
   trae más filas de lo normal y no entraría en una sola hoja A4 con el
   tamaño de siempre. Con todo lo que se le fue agregando a la guía
   orgánica (parcela, aporte/descuento, avance de cosecha, total sin
   ajuste) ya no sobra espacio de verdad como para garantizar 1 sola hoja
   Y letra grande a la vez — se prioriza la letra grande (a pedido
   explícito) y se acepta que un caso más largo de lo normal (ej. una
   guía con varios tickets) pueda llegar a ocupar una segunda hoja. */
@media print {
  .doc-page-2up.compacta .doc { padding: .6rem .9rem .65rem; margin-bottom: 0; font-size: .85rem; }
  .doc-page-2up.compacta .doc-head { padding-bottom: .35rem; margin-bottom: .4rem; gap: .6rem; }
  .doc-page-2up.compacta .doc-head img.doc-logo { width: 86px; height: 86px; }
  .doc-page-2up.compacta .doc-head-spacer { width: 86px; }
  .doc-page-2up.compacta .doc-empresa-nombre { font-size: .95rem; }
  .doc-page-2up.compacta .doc-empresa-sub { font-size: .7rem; }
  .doc-page-2up.compacta .doc-tipo-nombre { font-size: .72rem; }
  .doc-page-2up.compacta .doc-tipo-codigo { font-size: 1.05rem; }
  .doc-page-2up.compacta .doc-fields { margin-bottom: .35rem; }
  .doc-page-2up.compacta .doc-fields td { padding: .2rem .55rem; font-size: .85rem; }
  .doc-page-2up.compacta .doc-total-box { padding: .5rem .85rem; margin: .45rem 0; }
  .doc-page-2up.compacta .doc-total-box .label { font-size: .82rem; }
  .doc-page-2up.compacta .doc-total-box .amount { font-size: 1.48rem; }
  .doc-page-2up.compacta .doc-total-box .doc-total-sub { font-size: .7rem; }
  .doc-page-2up.compacta .doc-total-letras { font-size: .78rem; padding-top: .45rem; }
  .doc-page-2up.compacta .doc-cards { margin: .45rem 0; gap: .5rem; }
  .doc-page-2up.compacta .doc-card { padding: .35rem; }
  .doc-page-2up.compacta .doc-card .k { font-size: .66rem; }
  .doc-page-2up.compacta .doc-card .v { font-size: 1rem; }
  .doc-page-2up.compacta .doc-card.destacada .v { font-size: 1.18rem; }
  .doc-page-2up.compacta .doc-son { font-size: .78rem; padding: .34rem .55rem; margin: .32rem 0; }
  .doc-page-2up.compacta .doc-obs { font-size: .74rem; margin: .3rem 0; }
  .doc-page-2up.compacta .doc-section-title { margin: .4rem 0 .18rem; font-size: .78rem; }
  .doc-page-2up.compacta .doc-table th, .doc-page-2up.compacta .doc-table td { padding: .22rem .55rem; font-size: .9rem; }
  .doc-page-2up.compacta .firma-block { margin-top: auto; padding-top: 1.2rem; font-size: .8rem; }
  .doc-page-2up.compacta .firma-line { margin-top: 1.7rem; padding-top: .28rem; }
  .doc-page-2up.compacta .doc-corte { margin: .35rem 0 .75rem; }
  .doc-page-2up.compacta .doc-badge { padding: .28rem .7rem; font-size: .72rem; }
  .doc-page-2up.compacta .doc-badge-row { margin-bottom: .32rem; }

  .doc-page-2up.muy-compacta .doc { padding: .42rem .68rem .48rem; margin-bottom: 0; font-size: .66rem; }
  .doc-page-2up.muy-compacta .doc-head { padding-bottom: .23rem; margin-bottom: .26rem; gap: .42rem; }
  .doc-page-2up.muy-compacta .doc-head img.doc-logo { width: 52px; height: 52px; }
  .doc-page-2up.muy-compacta .doc-head-spacer { width: 52px; }
  .doc-page-2up.muy-compacta .doc-empresa-nombre { font-size: .8rem; }
  .doc-page-2up.muy-compacta .doc-empresa-sub { font-size: .59rem; }
  .doc-page-2up.muy-compacta .doc-tipo-nombre { font-size: .61rem; }
  .doc-page-2up.muy-compacta .doc-tipo-codigo { font-size: .84rem; }
  .doc-page-2up.muy-compacta .doc-fields { margin-bottom: .23rem; }
  .doc-page-2up.muy-compacta .doc-fields td { padding: .11rem .42rem; font-size: .66rem; }
  .doc-page-2up.muy-compacta .doc-total-box { padding: .34rem .63rem; margin: .32rem 0; }
  .doc-page-2up.muy-compacta .doc-total-box .label { font-size: .66rem; }
  .doc-page-2up.muy-compacta .doc-total-box .amount { font-size: 1.16rem; }
  .doc-page-2up.muy-compacta .doc-total-box .doc-total-sub { font-size: .56rem; }
  .doc-page-2up.muy-compacta .doc-total-letras { font-size: .62rem; padding-top: .3rem; }
  .doc-page-2up.muy-compacta .doc-cards { margin: .32rem 0; gap: .37rem; }
  .doc-page-2up.muy-compacta .doc-card { padding: .23rem; }
  .doc-page-2up.muy-compacta .doc-card .k { font-size: .53rem; }
  .doc-page-2up.muy-compacta .doc-card .v { font-size: .8rem; }
  .doc-page-2up.muy-compacta .doc-card.destacada .v { font-size: .94rem; }
  .doc-page-2up.muy-compacta .doc-son { font-size: .61rem; padding: .25rem .42rem; margin: .25rem 0; }
  .doc-page-2up.muy-compacta .doc-obs { font-size: .58rem; margin: .21rem 0; }
  .doc-page-2up.muy-compacta .doc-section-title { margin: .29rem 0 .13rem; font-size: .61rem; }
  .doc-page-2up.muy-compacta .doc-table th, .doc-page-2up.muy-compacta .doc-table td { padding: .15rem .47rem; font-size: .78rem; }
  .doc-page-2up.muy-compacta .firma-block { margin-top: auto; padding-top: .52rem; font-size: .61rem; }
  .doc-page-2up.muy-compacta .firma-line { margin-top: .95rem; padding-top: .21rem; }
  .doc-page-2up.muy-compacta .doc-corte { margin: .22rem 0 .5rem; }
  .doc-page-2up.muy-compacta .doc-badge { padding: .2rem .55rem; font-size: .56rem; }
  .doc-page-2up.muy-compacta .doc-badge-row { margin-bottom: .22rem; }
}

@media print {
  .no-print { display: none !important; }
}

/* Aviso "guardado, ¿imprimir?" tras crear un documento (ver footer.php).
   Ya no se abre solo — el usuario decide si imprime, con un clic. */
.print-ready-toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 200;
  display: flex; align-items: center; gap: .6rem;
  background: var(--blanco); border: 1px solid var(--verde-600); border-left: 4px solid var(--verde-600);
  border-radius: 10px; box-shadow: var(--sombra-lg); padding: .7rem .9rem;
  font-size: .86rem; color: var(--verde-900); animation: print-toast-in .2s ease;
}
.print-ready-close {
  background: none; border: none; cursor: pointer; color: var(--gris-500); font-size: .9rem; padding: 0 .2rem;
}
.print-ready-close:hover { color: var(--rojo-600); }
@keyframes print-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Desvanecido cuando el aviso se cierra solo (ver footer.php) */
.print-ready-toast--saliendo { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
@media (max-width: 480px) { .print-ready-toast { left: 1rem; right: 1rem; top: .6rem; flex-wrap: wrap; } }

/* ---------- misc ---------- */
.text-muted { color: var(--gris-500); }
.progress { background: var(--gris-200); border-radius: 999px; height: 8px; overflow: hidden; }
.progress > div { height: 100%; background: var(--verde-600); }
.progress.over > div { background: var(--rojo-600); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gris-500); }
.empty-state .icon { font-size: 2.4rem; margin-bottom: .6rem; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar-toggle { display: block; }
  .app-content { padding: 1rem; }
  table.data-table { font-size: .8rem; }
  table.data-table th, table.data-table td { padding: .55rem .6rem; }
  .filters-bar { padding: 1rem !important; }
  .filters-bar .field { flex: 1 1 140px; }
  .filters-bar .btn { width: 100%; }
}

@media (max-width: 480px) {
  .pagination a, .pagination span.current, .pagination span.pg-nav { min-width: 1.9rem; height: 1.9rem; font-size: .76rem; }
}

/* ---------- buscador con lupa (junto a un input) ---------- */
.buscador-lupa { display: flex; gap: .4rem; align-items: stretch; }
.buscador-lupa input { flex: 1; }
.btn-lupa {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; border: 1px solid var(--gris-300); border-radius: 8px; background: var(--crema-50);
  color: var(--verde-800); font-size: 1.05rem; cursor: pointer;
}
.btn-lupa:hover { background: var(--verde-100); border-color: var(--verde-600); }

/* ---------- buscador destacado al inicio de un formulario (Caja: ingreso/
   egreso, Préstamos) — la idea es que la primera acción sea siempre buscar
   a la persona (socio/empresa), y que el resto del formulario se llene solo
   a partir de ahí, en vez de tener el buscador perdido a media pantalla. ---------- */
.buscador-destacado {
  background: var(--crema-50); border: 1px solid var(--gris-200); border-radius: var(--radio);
  padding: .9rem 1rem 1rem; margin-bottom: 1.1rem;
}
.buscador-destacado > label:first-child { margin-bottom: .4rem; }
.buscador-destacado .buscador-lupa input {
  font-size: 1.05rem; padding: .7rem .85rem; border-color: var(--verde-600);
}
.buscador-destacado .help-text { margin-top: .5rem; }
.buscador-destacado .form-grid { margin-top: .7rem; }

/* ---------- campo numérico destacado (monto de un ingreso/egreso/cuota) ---------- */
.campo-destacado {
  display: block; border-radius: var(--radio); border: 1px solid var(--verde-600); border-left-width: 5px;
  background: var(--verde-100); padding: .6rem .9rem .7rem; margin-bottom: .9rem;
}
.campo-destacado.egreso { border-color: var(--oro-600); background: var(--crema-100); }
.campo-destacado > span.etiqueta {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; color: var(--verde-800); margin-bottom: .25rem;
}
.campo-destacado.egreso > span.etiqueta { color: var(--oro-600); }
.campo-destacado input {
  border: none; background: transparent; padding: 0; margin-top: 0;
  font-size: 1.5rem; font-weight: 800; color: var(--verde-900); font-variant-numeric: tabular-nums;
}
.campo-destacado.egreso input { color: #7a5a10; }
.campo-destacado input:focus { box-shadow: none; }

/* ---------- modal genérico (buscador de tickets/guías pendientes) ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(18, 64, 31, .45);
  z-index: 100; align-items: flex-start; justify-content: center; padding: 4vh 1rem;
  overflow-y: auto;
}
.modal-overlay.abierto { display: flex; }
.modal-box {
  background: #fff; border-radius: 12px; width: 100%; max-width: 720px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25); max-height: 92vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--gris-200);
}
.modal-head h3 { margin: 0; font-size: 1.02rem; color: var(--verde-900); }
.modal-cerrar {
  border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--gris-500); padding: .2rem .4rem;
}
.modal-cerrar:hover { color: var(--rojo-600); }
.modal-body { padding: 1rem 1.2rem; overflow-y: auto; }
.modal-foot {
  padding: .8rem 1.2rem; border-top: 1px solid var(--gris-200);
  display: flex; justify-content: flex-end; gap: .6rem;
}
.modal-buscar { width: 100%; margin-bottom: .8rem; }
.modal-body .table-wrap { max-height: 45vh; }
.modal-body table.data-table tbody tr.fila-otro-productor { opacity: .4; }

/* ---------- Panel de Reportes (4 tarjetas) ---------- */
.reportes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.reporte-card {
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
  border-top: 5px solid var(--gris-300); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem;
}
.reporte-card.rc-verde { border-top-color: var(--verde-600); }
.reporte-card.rc-morado { border-top-color: var(--morado-600); }
.reporte-card.rc-azul { border-top-color: var(--azul-600); }
.reporte-card.rc-naranja { border-top-color: var(--naranja-600); }
.reporte-card .rc-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.02rem; color: var(--verde-900); }
.reporte-card .rc-icono {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
}
.reporte-card.rc-verde .rc-icono { background: var(--verde-600); }
.reporte-card.rc-morado .rc-icono { background: var(--morado-600); }
.reporte-card.rc-azul .rc-icono { background: var(--azul-600); }
.reporte-card.rc-naranja .rc-icono { background: var(--naranja-600); }
.reporte-card .rc-desc { font-size: .84rem; color: var(--gris-500); line-height: 1.45; }
.reporte-card .rc-campos { font-size: .74rem; color: var(--gris-500); background: var(--crema-50); border-radius: 8px; padding: .55rem .7rem; line-height: 1.5; }
.reporte-card .rc-stat { font-size: .8rem; font-weight: 700; }
.reporte-card.rc-verde .rc-stat { color: var(--verde-700); }
.reporte-card.rc-morado .rc-stat { color: var(--morado-600); }
.reporte-card.rc-azul .rc-stat { color: var(--azul-600); }
.reporte-card.rc-naranja .rc-stat { color: var(--naranja-600); }
.reporte-card form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: auto; }
.reporte-card form select, .reporte-card form input[type=text] { flex: 1; min-width: 140px; }
.reporte-card .btn-rc {
  border: none; border-radius: 8px; padding: .55rem 1rem; font-weight: 700; font-size: .84rem;
  color: #fff; cursor: pointer; white-space: nowrap;
}
.rc-verde .btn-rc { background: var(--verde-600); }
.rc-verde .btn-rc:hover { background: var(--verde-800); }
.rc-morado .btn-rc { background: var(--morado-600); }
.rc-morado .btn-rc:hover { background: #55337f; }
.rc-azul .btn-rc { background: var(--azul-600); }
.rc-azul .btn-rc:hover { background: #1c4c82; }
.rc-naranja .btn-rc { background: var(--naranja-600); }
.rc-naranja .btn-rc:hover { background: #9c5115; }