:root {
  --verde: #388848;
  --verde-osc: #1e5631;
  --verde-claro: #e3efe2;
  --crema: #f5efe0;
  --crema-osc: #e9dfc6;
  --fondo: #faf8f2;
  --tarjeta: #ffffff;
  --texto: #1f2a22;
  --suave: #5f6b62;
  --borde: #e2ddd0;
  --rojo: #b3261e;
  --rojo-claro: #f9e3e1;
  --ambar: #8a5a00;
  --ambar-claro: #fbefd5;
  --presu: #c9a227;
  --sombra: 0 1px 2px rgba(30, 50, 35, .06), 0 2px 8px rgba(30, 50, 35, .05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141a16; --tarjeta: #1c241f; --texto: #e8ece7; --suave: #a3ada5; --borde: #2f3a33;
    --verde-claro: #23362a; --crema: #2a2c24; --crema-osc: #3a3b30;
    --rojo-claro: #3d2120; --ambar-claro: #3a2f17; --ambar: #e0b45c; --rojo: #f08a82;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Marca */
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; white-space: nowrap; }
.marca small { font-weight: 400; color: var(--crema); opacity: .85; font-size: 13px; }
.marca.grande { font-size: 28px; color: var(--verde-osc); justify-content: center; }
.logo { width: 26px; height: auto; display: block; }
.marca.grande .logo { width: 44px; }

/* Entrada */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(160deg, var(--crema), var(--fondo)); }
.entrar-caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 36px 28px;
  max-width: 400px; width: 100%; text-align: center; box-shadow: var(--sombra); }
.entrar-caja p { color: var(--suave); margin: 12px 0 24px; }
.error { color: var(--rojo) !important; }

/* Botones */
.btn { border: 1px solid var(--borde); background: var(--tarjeta); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.btn:hover { border-color: var(--verde); }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--verde-osc); }
.btn.chico { padding: 5px 11px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: default; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--verde-osc); color: #fff; }
.pestanas { display: flex; gap: 4px; }
.pestana { background: transparent; border: 0; color: #fff; opacity: .75; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.pestana:hover { opacity: 1; background: rgba(255,255,255,.08); }
.pestana.activa { opacity: 1; background: var(--verde); font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.usuario .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.actualizado { opacity: .8; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 20px;
  background: var(--crema); border-bottom: 1px solid var(--crema-osc); position: sticky; top: 50px; z-index: 15; }
.campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); }
.campo input { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 9px; width: 130px; background: var(--tarjeta); }
.campo.fecha input { width: 140px; }
.campo input:focus, .ms-boton:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: transparent; }

/* Selector múltiple */
.ms { position: relative; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); }
.ms-boton { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 28px 6px 9px; min-width: 130px; max-width: 200px;
  background: var(--tarjeta) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%235f6b62' fill='none' stroke-width='1.4'/></svg>") right 8px center/12px no-repeat;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.ms-boton.con-valor { border-color: var(--verde); background-color: var(--verde-claro); font-weight: 600; }
.ms-panel { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 30; width: 270px; max-height: 360px; display: flex; flex-direction: column;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); color: var(--texto); font-size: 13px; }
.ms-panel input { margin: 8px; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 7px; background: var(--fondo); }
.ms-lista { overflow: auto; padding: 0 4px 6px; }
.ms-op { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.ms-op:hover { background: var(--verde-claro); }
.ms-op span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-op small { color: var(--suave); font-variant-numeric: tabular-nums; }
.ms-pie { display: flex; justify-content: space-between; padding: 6px 8px; border-top: 1px solid var(--borde); }
.ms-pie button { background: none; border: 0; color: var(--verde); cursor: pointer; font-weight: 600; }

/* Contenido */
main { padding: 18px 20px 40px; max-width: 1600px; margin: 0 auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .t { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--suave); margin-top: 2px; }
.kpi.real .v { color: var(--verde); }
.kpi.presu .v { color: var(--presu); }
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); min-width: 0; }
.tarjeta.ancha { grid-column: 1 / -1; }
.tarjeta h2 { margin: 0 0 12px; font-size: 15px; }
.tarjeta h2 small { font-weight: 400; color: var(--suave); font-size: 12px; margin-left: 6px; }

/* Barras horizontales */
.barras { display: flex; flex-direction: column; gap: 7px; }
.barra-f { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barra-f .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-f .pista { height: 14px; background: var(--fondo); border-radius: 4px; display: flex; overflow: hidden; }
.barra-f .r { background: var(--verde); }
.barra-f .p { background: var(--presu); }
.barra-f .m { font-variant-numeric: tabular-nums; color: var(--suave); min-width: 90px; text-align: right; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Columnas por mes */
.columnas { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding-top: 10px; overflow-x: auto; }
.col { flex: 1 0 26px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.col .pila { width: 70%; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.col .pila .r { background: var(--verde); }
.col .pila .p { background: var(--presu); }
.col small { font-size: 10px; color: var(--suave); margin-top: 4px; white-space: nowrap; }

/* Tablas */
.tabla-caja { overflow: auto; max-height: 460px; border: 1px solid var(--borde); border-radius: 8px; }
.tabla-caja.alta { max-height: calc(100vh - 230px); background: var(--tarjeta); }
.tabla { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabla th { position: sticky; top: 0; background: var(--crema); text-align: left; font-weight: 600; padding: 7px 10px;
  border-bottom: 1px solid var(--crema-osc); white-space: nowrap; cursor: pointer; user-select: none; z-index: 1; }
.tabla th.num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla th .flecha { color: var(--verde); margin-left: 4px; }
.tabla td { padding: 6px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tabla tbody tr:hover { background: var(--verde-claro); }
.tabla tr.clic { cursor: pointer; }
.tabla tfoot td { font-weight: 700; background: var(--crema); position: sticky; bottom: 0; }
.estado { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.estado.ok { background: var(--verde-claro); color: var(--verde); }
.estado.con_problemas { background: var(--ambar-claro); color: var(--ambar); }
.estado.error, .estado.sin_hoja { background: var(--rojo-claro); color: var(--rojo); }

.acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.acciones .paginas { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.acciones input { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; width: 260px; background: var(--tarjeta); margin-left: auto; }
.vacio { color: var(--suave); padding: 18px; text-align: center; }

/* Cargando / avisos */
.cargando { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; overflow: hidden; }
.cargando span { position: absolute; height: 100%; width: 30%; background: var(--presu); animation: ir 1s infinite ease-in-out; }
@keyframes ir { from { left: -30%; } to { left: 100%; } }
.aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--fondo);
  padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: var(--sombra); }

/* Gráficos */
.ayuda { color: var(--suave); font-size: 13px; margin: -4px 0 14px; }
.grafico { height: 300px; width: 100%; }
.grafico.alto { height: 380px; }
.grafico.muy-alto { height: 520px; }

/* Avance de siembra */
.siembra-resumen { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: -2px 0 8px; font-size: 13px; color: var(--suave); }
.siembra-resumen b { color: var(--texto); font-size: 18px; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.siembra-resumen .avance b { color: var(--verde); }

/* Para revisar */
.auditar-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.auditar h3 { font-size: 13px; margin: 0 0 8px; color: var(--suave); font-weight: 600; }
.auditar h3 small { font-weight: 400; }
.item-a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; }
.item-a:hover { background: var(--verde-claro); border-color: var(--borde); }
.item-a .p { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-a .m { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.item-a .d { color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-a .x { font-size: 12px; text-align: right; color: var(--ambar); font-weight: 600; }

/* Botón de origen: discreto, aparece al pasar el mouse por el renglón */
.ir-origen { visibility: hidden; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--verde);
  border-radius: 6px; padding: 1px 7px; font-size: 12px; cursor: pointer; white-space: nowrap; }
tr:hover .ir-origen, .mov:hover .ir-origen, .ir-origen:focus { visibility: visible; }
.tabla td.col-origen { width: 1%; padding: 2px 8px; }
@media (hover: none) { .ir-origen { visibility: visible; } }

/* Panel lateral */
.velo { position: fixed; inset: 0; background: rgba(15, 25, 18, .28); z-index: 40; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 41; background: var(--fondo);
  box-shadow: -8px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; animation: entrar-panel .18s ease-out; }
@keyframes entrar-panel { from { transform: translateX(40px); opacity: 0; } }
.panel-cab { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.panel-titulos { flex: 1; min-width: 0; }
.panel-titulos h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.panel-titulos p { margin: 3px 0 0; color: var(--suave); font-size: 13px; }
.panel-cuerpo { overflow: auto; padding: 12px 16px 24px; flex: 1; }
.mov { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 10px; border-bottom: 1px solid var(--borde); }
.mov:hover { background: var(--verde-claro); }
.mov .p { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .m { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mov .d { color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .acc { text-align: right; }
.rp { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-right: 4px; }
.rp.R { background: var(--verde-claro); color: var(--verde); }
.rp.P { background: var(--ambar-claro); color: var(--ambar); }
.mas { display: block; margin: 12px auto 0; }

/* Origen */
.ruta-origen { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.miga { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--suave); margin-bottom: 10px; }
.miga b { color: var(--texto); }
.celda-origen { display: flex; gap: 10px; align-items: center; margin: 10px 0 14px; }
.celda-origen .hoja-x { background: var(--verde); color: #fff; font-weight: 700; border-radius: 8px; padding: 8px 12px; font-size: 15px; }
.celda-origen .detalle-x { font-size: 13px; color: var(--suave); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.botones a.btn { text-decoration: none; display: inline-block; }
.campos { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.campos th { text-align: left; color: var(--suave); font-weight: 500; padding: 5px 10px; width: 42%; border-bottom: 1px solid var(--borde); }
.campos td { padding: 5px 10px; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.campos tr.mal td, .campos tr.mal th { background: var(--rojo-claro); }
.nota { font-size: 12px; color: var(--suave); margin: 10px 0 0; }
.problemas-fila { background: var(--rojo-claro); color: var(--rojo); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .grilla, .auditar-grilla { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .barra { padding: 8px 16px; }
  main { padding: 14px 16px 30px; }
  .usuario { margin-left: 0; width: 100%; justify-content: space-between; }
  .campo input, .ms-boton { width: 100%; min-width: 0; max-width: none; }
  .campo, .ms { flex: 1 1 140px; }
}

/* Problemas de un archivo (panel lateral desde Archivos) */
.ver-probl { color: var(--ambar); font-weight: 600; }
.tabla tr.clic:hover .ver-probl { text-decoration: underline; }
.prob-avisos { background: var(--rojo-claro); border-radius: 10px; padding: 4px 12px; margin-bottom: 14px; font-size: 13px; }
.prob-avisos p { margin: 8px 0; }
.prob-grupo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.prob-cab { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.prob-n { margin-left: auto; background: var(--ambar-claro); color: var(--ambar); border-radius: 99px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.prob-ayuda { margin: 4px 0; color: var(--suave); font-size: 13px; }
.prob-valores { margin: 4px 0; font-size: 12px; color: var(--suave); }
.prob-valores code { background: var(--fondo); border: 1px solid var(--borde); color: var(--texto); border-radius: 4px; padding: 0 4px; margin-right: 2px; }
.prob-filas { font-size: 12px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.chip { border: 1px solid var(--borde); background: var(--fondo); color: var(--verde-osc); border-radius: 99px; padding: 1px 9px; font: inherit; font-weight: 600; cursor: pointer; }
.chip:hover { background: var(--verde-claro); }
.suave { color: var(--suave); }