/* Gestión 3Brotes — estilos. 5.1.1 (aspecto): la referencia es maqueta/aspecto/ (inicio_con_figuras y lista_ordenes), aprobada por Felipe.
   Barra verde arriba con los módulos, fondo gris muy claro, paneles blancos con borde suave, una figura por módulo, etiquetas de color para los estados,
   filtros en una fila (se toca uno para cambiarlo), un solo estilo sobrio para los avisos. Primero la computadora; en el celular las tres tareas puntuales. */
/* 5.1.2: una sola letra en todo el programa, IBM Plex Sans, la misma de los PDF (archivos propios en lib/fuentes, licencia OFL; sin pedir nada a otro sitio).
   El SemiBold cubre 600 y 700 para que la negrita no se dibuje "engordada". */
@font-face{font-family:"IBM Plex Sans";src:url(lib/fuentes/IBMPlexSans_400Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(lib/fuentes/IBMPlexSans_500Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(lib/fuentes/IBMPlexSans_600SemiBold.ttf) format("truetype");font-weight:600 700;font-style:normal;font-display:swap}
:root{
  --verde:#23812b; --verde-osc:#1b6a22; --verde2:#eaf4ea; --texto:#1b1e1b; --texto2:#667066; --texto3:#8a938a;
  --borde:#dfe4df; --borde2:#edf0ed; --gris:#f0f2ef; --gris2:#fafbfa; --alt:#f8faf7; --fondo:#f5f7f4;
  --rojo:#b3261e; --ambar:#a86a00; --azul:#1d4f8a; --ancho:1200px; --radio:8px;   /* 5.1.2 (Felipe: "centrado con márgenes"): una columna centrada de 1.200; sólo cuando una tabla no entra, la pantalla se ensancha (body.ancha) */
}
body.ancha{--ancho:1600px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo)}
body{font-family:"IBM Plex Sans","Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;color:var(--texto);line-height:1.4;font-variant-numeric:tabular-nums}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:22px;font-weight:700;margin:0;color:var(--texto)}
h2{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--texto)}
h3{font-size:12.5px;font-weight:600;color:var(--texto2);margin:0 0 8px}
.mut{color:var(--texto2)} .mut3{color:var(--texto3)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.neg{color:var(--rojo)} .pos{color:var(--verde)}
svg.fig{stroke:var(--verde);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== barra verde: marca, módulos, buscador, campaña, empresa, configuración, usuario ===== */
#cab{background:var(--verde);color:#fff;position:sticky;top:0;z-index:20}
/* 5.1.8, tanda A.2: la franja de la app del ensayo, arriba de todo y siempre a la vista (la barra verde queda debajo) */
#cartelEnsayo{position:sticky;top:0;z-index:70;height:28px;line-height:28px;background:#f2c200;color:#111;font-weight:700;font-size:13px;letter-spacing:.02em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;border-bottom:2px solid #111}
body.ensayo #cab{top:28px}
@media print{#cartelEnsayo{position:static}}
#cab .fila1{max-width:1600px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 20px;min-height:50px}   /* 5.1.2: la barra es una banda de borde a borde (hasta 1.600); el contenido va centrado en 1.200 */
#cab .marca{font-size:19px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px;white-space:nowrap;margin-right:6px}
#cab .marca svg{width:22px;height:22px}
#cab .marca span{display:none}
#cab .hamb{display:none;border:0;background:none;font-size:24px;cursor:pointer;padding:0 6px;color:#fff}
#cab nav{display:flex;gap:1px;flex-wrap:wrap}
#cab nav a{padding:6px 5px;color:#fff;opacity:.9;border-radius:5px;font-size:13px;white-space:nowrap}
#cab nav a:hover{text-decoration:none;opacity:1;background:rgba(255,255,255,.14)}
#cab nav a.activo{background:#fff;color:var(--verde);opacity:1;font-weight:700}
body.en-inicio #cab nav{display:none}
#cab .der{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap;margin-left:auto}
#cab .der .buscar{border:0;border-radius:4px;padding:6px 9px;width:86px;font-size:13px;background:rgba(255,255,255,.95);color:var(--texto)}
#cab .der select{border:0;padding:6px 2px;background:rgba(255,255,255,.95);border-radius:4px;font-size:13px;color:var(--texto);max-width:150px}
#cab .der select#empSel{max-width:148px}
#cab .der label{display:flex}
#cab .der .lbl{display:none}
#cab .der .conf{display:flex;padding:4px;border-radius:5px;color:#fff;opacity:.9}
#cab .der .conf svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cab .der .conf:hover,#cab .der .conf.activo{opacity:1;background:rgba(255,255,255,.18);text-decoration:none}
#cab .der .usr{display:flex;align-items:center;gap:6px;color:#fff;font-weight:600}
#cab .der .usr i{display:none}
#cab .red{width:8px;height:8px;border-radius:50%;background:#bfe6bf;display:inline-block}
#cab .red.off{background:#ffb4ab}
#sub{background:#fff;border-bottom:1px solid var(--borde)}
#sub div{max-width:var(--ancho);margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:0 20px}   /* si no entra en el ancho, pasa abajo (no se corta) */
#sub a{padding:10px 0;font-size:13.5px;color:var(--texto2);white-space:nowrap;border-bottom:3px solid transparent}
#sub a.activo{color:var(--verde);border-bottom-color:var(--verde);font-weight:700}
#sub a:hover{text-decoration:none;color:var(--verde)}
main{max-width:var(--ancho);margin:0 auto;padding:18px 20px 40px}

/* ===== título de cada pantalla: la figura del módulo, el título, un resumen en una línea y las acciones principales a la derecha ===== */
.titulo{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.titulo .fig{width:40px;height:40px;flex:none;display:block}
.titulo .tx{margin-right:auto;min-width:0;flex:1 1 0}
.titulo .sub{display:block;color:var(--texto2);font-size:13.5px;margin-top:2px}
.titulo .acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ===== filtros ===== */
.filtros-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filtros-fila .f{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--borde);border-radius:5px;padding:4px 6px 4px 11px;font-size:13.5px;cursor:pointer;max-width:100%}
.filtros-fila .f b{font-weight:600;color:var(--texto2);white-space:nowrap}
.filtros-fila .aviso-fechas{margin-left:8px;color:var(--rojo,#b3261e);font-weight:500;white-space:normal}   /* 5.1.2 (punto 5): "desde" posterior a "hasta" */
.filtros-fila .f:hover,.filtros-fila .f:focus-within{border-color:var(--verde)}
.filtros-fila .f select,.filtros-fila .f input{border:0;background:none;font:inherit;font-size:13.5px;color:var(--verde);font-weight:600;padding:2px 2px;cursor:pointer;min-width:0;max-width:170px}
.filtros-fila .f input[type=date]{width:124px}
.filtros-fila .f input[type=text]{width:120px}
td input[type=date],.grilla input[type=date]{min-width:132px}   /* 5.1.8 (B, revisión visual 11): la fecha entera en las tablas de renglones (pesadas, gasoil), no "11/03/2" */
.tabla-desliza{max-width:100%;overflow-x:auto}   /* 5.1.8 (B): una tabla de renglones ancha se desliza dentro de su recuadro */
.filtros-fila .f span.sep{color:var(--texto3);padding:0 2px}
.filtros-fila .ayu{color:var(--texto3);font-size:13px;margin-left:4px}
.filtros-fila .quitar{font-size:13px;padding:4px 6px}
.bnd-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}   /* auditoría 5.1.1 (6): el botón de subir no tapa el texto */
/* el panel de filtros de antes (las pantallas que todavía no pasaron a la fila) */
.filtros{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);margin-bottom:14px}
.filtros .enc{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;cursor:pointer;color:var(--texto2);font-size:12.5px;font-weight:600}
.filtros .enc span:last-child{font-size:14px;color:var(--texto3)}
.filtros .cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 40px;padding:6px 14px 14px}
.filtros.plegado .cuerpo,.filtros.plegado .pie{display:none}
.filtros .grupo{border-bottom:1px solid var(--borde2);padding:6px 0}
.filtros .grupo b{display:block;font-size:13px;margin-bottom:4px;color:var(--texto)}
.filtros .grupo label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto2);margin:3px 0}
.filtros .grupo label span{width:90px;flex:none}
.filtros select,.filtros input[type=date],.filtros input[type=text]{border:1px solid var(--borde);padding:5px 7px;background:#fff;border-radius:5px;min-width:140px;font-size:13px}
.filtros .pie{text-align:center;padding:4px 0 14px}

/* ===== botones ===== */
.btn{border:1px solid var(--borde);background:#fff;padding:7px 14px;cursor:pointer;font-size:13.5px;border-radius:5px;color:var(--texto);white-space:nowrap;font-family:inherit}
.btn:hover{background:var(--gris2);border-color:#c5cec5}
.btn.verde{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:700;padding:7px 16px}
.btn.verde:hover{background:var(--verde-osc)}
.btn.chico{padding:3px 9px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:default}

/* ===== consulta: grilla + opciones ===== */
.consulta{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:16px;align-items:start}
.consulta.sin-opciones{grid-template-columns:1fr}
.consulta>*{min-width:0}
.grilla{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;overflow-x:auto;
  /* auditoría 5.1.1 (3): si la tabla no entra, una sombra en el borde muestra que sigue */
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0,linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),rgba(0,0,0,0)) 0 0,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll;background-color:#fff}
.grilla th,.grilla tfoot td,.grilla .pie{background-color:transparent}
.grilla thead,.grilla .pie,.grilla tfoot{background:rgba(250,251,250,.9)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--borde2)}
.grilla td{white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.grilla td br{display:none}
.envuelve .grilla td{white-space:normal;max-width:none}
.grilla td .det{display:block;color:var(--texto2);font-size:12.5px;white-space:normal}
.grilla td .texto{display:block;white-space:normal;min-width:260px}   /* 5.1.5 bis (10): lo que no cierra se lee entero, con renglones */
th{font-weight:600;font-size:12.5px;color:var(--texto2);white-space:nowrap;background:var(--gris2);border-bottom:1px solid var(--borde)}
tbody tr.link{cursor:pointer}
tbody tr.link:hover{background:#f1f6f1}
tbody tr:last-child td{border-bottom:0}
tfoot td{font-weight:700;border-top:1px solid var(--borde);background:var(--gris2)}
td.num,th.num{text-align:right}
.grilla .pie{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--texto2);font-size:13px;padding:9px 12px;border-top:1px solid var(--borde);background:var(--gris2)}
/* 5.1.6.1 (tanda A bis): la lista larga cortada en 500 lo dice arriba y abajo, con el mismo renglón gris del pie (aviso sobrio, REGLAS §37/§38) */
.grilla .pie.recorte.arriba{border-top:0;border-bottom:1px solid var(--borde)}
.inicio .grilla .pie.recorte{display:flex}
.opciones{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:8px 0}
.opciones h3{padding:4px 14px;margin:2px 0}
.opciones a,.opciones button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 14px;color:var(--texto);cursor:pointer;font-size:14px;font-family:inherit;border-radius:0}
.opciones a:hover,.opciones button:hover{background:var(--gris2);text-decoration:none;color:var(--verde)}
.opciones .sep{border-top:1px solid var(--borde2);margin:6px 0}
.ref{font-weight:700;color:var(--texto);white-space:nowrap}
/* etiquetas de estado */
.estado{display:inline-block;font-size:12.5px;line-height:1.5;padding:2px 9px;border-radius:10px;background:#eef1ee;color:var(--texto2);white-space:nowrap}
.estado.hecha,.estado.cobrado,.estado.pagado,.estado.cerrado,.estado.liquidado,.estado.activo,.estado.ok,.estado.completa,.estado.pagada,.estado.cobrada,.estado.cumplida,.estado.vigente{background:#e6f3e6;color:var(--verde)}
.estado.por-facturar,.estado.parcial,.estado.por-vincular,.estado.vence,.estado.a-fijar,.estado.por-confirmar{background:#fdf1e2;color:#8a4b00}
.estado.facturado,.estado.fijado,.estado.forward,.estado.disponible{background:#e8eff8;color:var(--azul)}
.estado.anulada,.estado.vencido,.estado.falta,.estado.inactivo,.estado.atrasada,.estado.anulado,.estado.rechazado{background:#fbe9e7;color:var(--rojo)}
.tarjetas{display:none}

/* ===== formularios y fichas ===== */
.solapas{display:flex;gap:18px;background:#fff;border:1px solid var(--borde);border-bottom:0;border-radius:var(--radio) var(--radio) 0 0;padding:0 18px;overflow-x:auto}
.solapas a,.solapas button{padding:11px 2px;border:0;border-bottom:3px solid transparent;background:none;color:var(--texto2);font-size:13.5px;white-space:nowrap;cursor:pointer;font-family:inherit;border-radius:0}
.solapas a.activo,.solapas button.activo{color:var(--verde);font-weight:700;border-bottom-color:var(--verde);position:static}
.solapas a:hover,.solapas button:hover{text-decoration:none;color:var(--verde)}
.hoja{border:1px solid var(--borde);padding:18px 20px;background:#fff;margin-bottom:16px;border-radius:0 0 var(--radio) var(--radio)}
.solapas+.hoja{border-top:1px solid var(--borde)}
.hoja.sola{border-radius:var(--radio)}
.form{display:grid;grid-template-columns:170px minmax(0,1fr);gap:9px 14px;align-items:center;max-width:900px}
.form label{color:var(--texto2);font-size:13.5px}
.form .in{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form input,.form select,.form textarea{border:1px solid var(--borde);padding:6px 9px;background:#fff;border-radius:5px;font-size:13.5px;min-width:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--verde2);border-color:var(--verde)}
.form input[type=text],.form textarea{width:100%;max-width:420px}
.form input.corto{width:120px;max-width:120px} .form input.medio{width:220px;max-width:220px}
.form input[readonly]{background:var(--gris2);color:var(--texto2)}
.form select{max-width:300px}
.form .ayuda{font-size:12px;color:var(--texto3)}
/* 5.1.2: la "i" (PENDIENTES 5.1.2, punto 3): la explicación de un casillero o de un título no queda a la vista; se abre al tocar la "i" (o con Enter desde el teclado) */
.i{display:inline-flex;width:17px;height:17px;border-radius:50%;border:1.4px solid #98a29a;color:#6b756d;font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-left:6px;font-style:normal;vertical-align:1px;background:#fff;cursor:pointer;padding:0;line-height:1;font-family:inherit;flex:none}
.i::before{content:"i"}
.i:hover,.i:focus,.i.abierta{border-color:var(--verde);color:var(--verde);outline:none}
.i-glo{position:absolute;z-index:40;background:#1c211d;color:#fff;border-radius:6px;padding:8px 12px;font-size:12.5px;line-height:1.45;max-width:340px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.i-glo b{color:#fff}
h1 .i,h2 .i{font-size:11px;vertical-align:middle}
.form .radios{display:flex;gap:14px;flex-wrap:wrap}
.form .radios label{display:flex;align-items:center;gap:4px}
.form .sep{grid-column:1/-1;border-top:1px solid var(--borde2);margin:4px 0}
.form .sec{grid-column:1/-1;font-weight:700;color:var(--texto);margin-top:6px}
.form.dos{max-width:none;grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr)}
.pie-form{display:flex;gap:8px;justify-content:flex-end;padding:8px 0 0}
.ficha{display:grid;grid-template-columns:170px minmax(0,1fr);gap:7px 14px;max-width:780px;font-size:13.5px}
.ficha .d{color:var(--texto2)} .ficha .v{color:var(--texto)}
.sub-grilla{margin-top:6px}
.sub-grilla .enc{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.sub-grilla .enc h2{margin:0}
.hoja .grilla{border-radius:5px}
/* avisos: un solo estilo sobrio para "aviso", "error" y "sin señal" (sin recuadros de colores), con la acción al lado */
.aviso-conflicto,.aviso-ia,.aviso,.nota,.regla-ia{background:#fff;border:1px solid var(--borde);border-left:3px solid var(--ambar);border-radius:5px;padding:8px 12px;margin:0 0 12px;font-size:13.5px;color:var(--texto)}
.aviso-conflicto{display:flex;justify-content:space-between;align-items:center;gap:10px}
.aviso-ia,.regla-ia,.nota{border-left-color:var(--verde)}
.aviso-ia ul{margin:6px 0 0 18px;padding:0} .aviso-ia li{margin:2px 0} .aviso-ia .neg{color:var(--rojo)}
.aviso-ia .ia-revise{display:block;margin-top:8px;font-weight:600}
.ok-ia{color:var(--verde);font-weight:600} .mal-ia{color:var(--rojo);font-weight:600}
.error,.aviso-error{color:var(--rojo);font-size:13.5px;margin:0;padding:6px 0}
.aviso-error:empty{display:none}
.nt-ref-ok{font-size:13.5px;margin:0;padding:6px 0;color:var(--texto)}   /* 5.1.8: la pregunta de la nota por el total, ya contestada (sin rojo) */

/* ===== reportes (en pantalla) ===== */
.reporte{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:20px 24px;font-size:13px;overflow-x:auto}
.reporte .enc{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.reporte .enc .emp{font-size:16px;font-weight:700}
.reporte .enc .emi{text-align:right;color:var(--texto2);font-size:12px}
.reporte h1{font-size:20px;font-weight:600;margin:0 0 10px}
.reporte .cond{display:grid;grid-template-columns:130px 1fr;gap:6px;font-size:12px;margin-bottom:18px}
.reporte .cond b{font-weight:700}
.reporte h2{font-size:13.5px;margin:18px 0 6px}
.reporte table{font-size:12.5px}
.reporte th{border-bottom:2px solid #444;border-top:1px solid #444;background:#fff;color:var(--texto)}
.reporte td{border-bottom:0;padding:4px 8px}
.reporte tfoot td{border-top:1px solid #444;border-bottom:2px solid #444;background:#fff}
.reporte.matriz th,.reporte.matriz td{border:1px solid #666;padding:3px 6px;font-size:11.5px}
.reporte.matriz th{background:#f0f0f0;text-align:center}
.reporte.matriz td{white-space:nowrap}
.reporte .kv{display:grid;grid-template-columns:repeat(3,auto);gap:4px 40px;justify-content:start;margin:10px 0 18px;font-size:12.5px}
.reporte .kv div{display:grid;grid-template-columns:170px 90px}
.reporte .kv b{font-weight:700}
.reporte .kv span{text-align:right;font-variant-numeric:tabular-nums}
.barra-rep{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.barra-rep select,.barra-rep input{border:1px solid var(--borde);padding:6px 8px;border-radius:5px;font-size:13.5px;background:#fff}

/* ===== Inicio: las cargas de todos los días, una figura por módulo, "Para resolver" y "Cómo estamos" ===== */
.ini-fecha{color:var(--texto2);font-size:14px}
.ini-acc{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.ini-mods{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ini-mod{position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:16px 10px 12px;text-align:center;color:inherit;display:block;cursor:pointer}
.ini-mod:hover{border-color:var(--verde);text-decoration:none}
.ini-mod svg{width:54px;height:54px;display:block;margin:0 auto 8px}
.ini-mod b{display:block;font-size:14.5px}
.ini-mod span{display:block;color:var(--texto2);font-size:12.5px;margin-top:2px;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-mod i{position:absolute;top:8px;right:8px;min-width:22px;height:22px;border-radius:11px;background:var(--rojo);color:#fff;font:700 12.5px/22px Arial,sans-serif;font-style:normal;padding:0 6px}
.ini-mod i.am{background:var(--ambar)}
.ini-dos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin:16px 0 30px;align-items:start}
.ini-caja{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:6px 16px 10px}
.ini-caja h2{font-size:15px;margin:10px 0 2px}
.ini-t{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--borde)}
.ini-t:first-of-type{border-top:0}
.ini-t .q{font-weight:600}.ini-t .d{color:var(--texto2);font-size:13px;overflow:hidden;text-overflow:ellipsis}.ini-t .venc{color:var(--rojo)}
.ini-t .imp{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--texto2)}
.ini-t .btn{min-width:84px;text-align:center}
.ini-t .ini-bs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ini-mas{font-size:13px;color:var(--texto2);padding:10px 0 2px;border-top:1px solid var(--borde)}
.ini-mas .enlace{font-size:13px}
.ini-dato{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--borde);font-size:14px}
.ini-dato:first-of-type{border-top:0}
.ini-dato b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ini-nada{color:var(--texto2);font-size:13.5px;padding:10px 0}
/* Inicio › ver todo (los controles enteros, sólo los que tienen algo) */
.inicio h2{font-size:14px;font-weight:600;margin:18px 0 6px}
.inicio h2 small{font-weight:400;color:var(--texto3);margin-left:6px}
.inicio table td{padding:6px 10px}
.inicio .nada{color:var(--texto3);font-size:13px;padding:6px 8px}
.inicio .pie{display:none}

/* ===== Cosecha de hoy: el camión a mano, en un renglón ===== */
.ch-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:12px 16px 14px;margin-bottom:12px}
.ch-form .ch-t{width:100%;font-weight:700;font-size:14px;margin-bottom:-2px}
.ch-form label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--texto2)}
.ch-form input,.ch-form select{border:1px solid var(--borde);padding:7px 9px;border-radius:5px;font-size:14px;background:#fff;color:var(--texto)}
.ch-form input.corto{width:130px}
.ch-form select{max-width:260px}
.ch-form .num-leido{display:none}
.ch-form .btn.verde{padding:8px 18px}

/* ===== impreso (planilla de OT) y láminas ===== */
.impreso{background:#fff;border:1px solid #bbb;padding:22px 26px;max-width:900px;font-size:12px}
.impreso .cab{display:grid;grid-template-columns:120px 1fr;gap:3px 10px;margin-bottom:14px}
.impreso .cab b{font-weight:700}
.impreso table{font-size:11.5px}
.impreso th{background:#e6e6e6;border:1px solid #999;color:var(--texto)}
.impreso td{border:1px solid #999}
.impreso .firma{margin-top:36px;display:flex;justify-content:space-between}
.impreso .firma span{border-top:1px solid #000;padding-top:4px;width:180px;text-align:center}
.wa{border:1px solid var(--borde);padding:10px 12px;white-space:pre-wrap;max-width:520px;background:var(--gris2);border-radius:5px}
.lamina{max-width:720px;font-size:13px}
.lamina div{display:grid;grid-template-columns:1fr 60px 90px 110px 80px;gap:8px;padding:5px 10px;border-bottom:1px solid var(--borde2)}
.lamina div.enc{font-weight:700;border-bottom:2px solid #444}
.lamina div.grupo{font-weight:700;background:var(--gris)}
.lamina div.final{font-weight:700;border-top:2px solid #444;border-bottom:2px solid #444}
.lamina div.det{padding-left:26px}
.lamina div span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--texto);color:#fff;padding:9px 16px;border-radius:5px;font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:90vw}
#toast.ver{opacity:1}

/* ===== varios ===== */
.enlace{border:0;background:none;color:var(--verde);cursor:pointer;padding:0;font:inherit}
/* 5.1.6 (PENDIENTES 5.1.6, "Prácticas de empresas de software", punto 2): "Algo no anda", abajo de todo en todas las pantallas, discreto (gris, como un pie);
   el formulario chico es un aviso sobrio como los demás (borde ámbar a la izquierda). También en el celular. */
#pie{max-width:var(--ancho);margin:0 auto;padding:0 20px 28px;text-align:center;font-size:12.5px}
#pie>.enlace{color:var(--texto3)}
#pie>.enlace:hover,#pie>.enlace:focus{color:var(--verde);text-decoration:underline}
#reporte{max-width:560px;margin:10px auto 0;text-align:left;background:#fff;border:1px solid var(--borde);border-left:3px solid var(--ambar);border-radius:5px;padding:10px 12px;font-size:13.5px}
#reporte[hidden]{display:none}
#reporte textarea{display:block;width:100%;box-sizing:border-box;margin:6px 0 8px;border:1px solid var(--borde);padding:6px 9px;background:#fff;border-radius:5px;font-size:13.5px;resize:vertical}
#reporte textarea:focus{outline:2px solid var(--verde2);border-color:var(--verde)}
#reporte .rep-pie{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.adjuntar{color:var(--verde);cursor:pointer}
.adjuntar input{display:none}
table.confirmar td,table.confirmar th{padding:6px 8px;vertical-align:middle}
table.confirmar input.corto{width:90px}
table.confirmar input,table.confirmar select{border:1px solid var(--borde);padding:5px 8px;border-radius:5px;background:#fff;font-size:13.5px}
.confirmar-hoja h2{font-size:13.5px}
.lotes-chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px}
.chat{margin-top:16px;max-width:760px}
.chat .pregunta{background:var(--verde2);padding:8px 12px;border-radius:12px 12px 2px 12px;margin:10px 0 4px 60px;font-size:13.5px}
.chat .respuesta{border:1px solid var(--borde);background:#fff;padding:8px 12px;border-radius:12px 12px 12px 2px;margin:0 60px 0 0;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.chat .fuente{display:block;margin-top:6px;font-size:12px;color:var(--texto2)}
.foto-fac{border:1px dashed var(--borde);border-radius:var(--radio);min-height:120px;display:grid;place-items:center;text-align:center;color:var(--texto2);font-size:13px;background:#fff;padding:8px;overflow:hidden}
.foto-fac img{max-width:100%;max-height:360px}
.fac-ia{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px}
.num-leido{display:inline-block;margin-left:6px;font-size:12px;color:var(--texto3);white-space:nowrap}
.num-leido:empty{display:none}
.num-leido.mal{color:var(--rojo);white-space:normal}
.num-leido.raro{color:var(--ambar);white-space:normal}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 2px 1px 8px;margin:1px 2px;border:1px solid var(--borde);border-radius:12px;font-size:12.5px;background:var(--gris2)}
.chip .btn.chico{padding:0 6px;font-size:11px}
.mini-barra{display:inline-block;height:8px;background:var(--verde);vertical-align:middle;margin-right:6px}
.sub-lista{margin:0;padding-left:18px;font-size:13px}
.pie-form .izq{margin-right:auto}
.grilla tr.total td{font-weight:600;background:var(--gris2)}
.dosgrillas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
.opciones button[disabled]{opacity:.45;cursor:default}
.form .in .btn.chico{margin-left:6px}
.form input[type=number]{width:120px;max-width:120px}
.form input.medio[type=number]{width:220px;max-width:220px}
.form .campo-error{color:var(--rojo);font-size:12px}
.grilla tbody tr.sel{background:#e8f4e8}

/* ===== entrada, carga, solo lectura ===== */
.pantalla{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--fondo)}
.login-caja{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:26px 28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.login-caja .marca-login{font-size:22px;font-weight:700;color:var(--verde)}
.login-caja .marca-login span{font-weight:400;color:var(--texto2);font-size:14px;margin-left:6px}
.login-caja label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--texto2)}
.login-caja input{border:1px solid var(--borde);padding:8px;border-radius:5px;font-size:14px}
.login-caja .btn.verde{margin-top:6px}
.login-caja .dp-qr{display:flex;justify-content:center}.login-caja .dp-qr img{width:180px;height:180px;border:1px solid var(--borde);background:#fff}.login-caja .dp-codigos{columns:2;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:1px;margin:0;padding-left:22px}.login-caja code{font-size:13px;word-break:break-all}
#cargando{position:fixed;inset:0;background:rgba(245,247,244,.75);display:grid;place-items:center;z-index:60}
#cargando[hidden]{display:none}
#cargando .caja{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:14px 22px;font-size:14px}
[hidden]{display:none!important}
.solo-lectura [data-escribe]{display:none}

/* ===== celular (390 de ancho): nada se rompe en las tres tareas puntuales; el resto se revisa después ===== */
@media (max-width:1400px){#cab .fila1{max-width:none}}   /* en una notebook (1366) la barra usa todo el ancho para que los módulos entren en un renglón */
@media (max-width:1240px){#cab .fila1{flex-wrap:wrap} #cab nav{order:3;flex-basis:100%;border-top:1px solid rgba(255,255,255,.25);padding-top:4px;margin-top:2px}}
@media (max-width:860px){
  #cab .fila1{padding:6px 12px;gap:6px}
  #cab .hamb{display:block}
  #cab nav{display:none;position:absolute;top:100%;left:0;right:0;border-top:0;margin-top:0;padding:6px 0;background:#fff;border-bottom:1px solid var(--borde);flex-direction:column;z-index:30;box-shadow:0 6px 14px rgba(0,0,0,.08)}
  body.en-inicio #cab nav.abierto,#cab nav.abierto{display:flex}
  #cab nav a{padding:10px 18px;color:var(--texto);opacity:1;border-radius:0;border-left:3px solid transparent}
  #cab nav a.activo{background:var(--verde2);color:var(--verde);border-left-color:var(--verde)}
  #cab .marca{font-size:17px;margin-right:0;flex:none}   /* auditoría 5.1.1 (5): la marca no se tapa */
  #cab .der{gap:6px;flex:1 1 auto;justify-content:flex-end;min-width:0}
  #cab .der .usr span{display:none}
  #cab .der .buscar{display:none}
  #cab .der select{padding:5px 2px;max-width:70px} #cab .der select#campSel{max-width:none;min-width:66px}   /* 5.1.8 (B): la campaña entera ("2026/27", no "2026/2") */
  #cab .der .conf{padding:2px}
  #sub div{padding:0 12px;gap:0 16px}   /* auditoría 5.0: si no entra, la solapa pasa abajo (no se corta ni se esconde) */
  #sub a{padding:9px 0;font-size:13px}
  main{padding:12px 12px 40px}
  h1{font-size:19px}
  .titulo{gap:10px}
  .titulo .fig{width:32px;height:32px}
  .titulo .acciones{width:100%}
  .filtros-fila .f{padding:4px 6px 4px 9px;font-size:13px}
  .filtros .grupo{min-width:0}
  .filtros select,.filtros input[type=date],.filtros input[type=text]{min-width:0;flex:1;width:auto}
  .filtros .cuerpo{grid-template-columns:1fr;gap:4px}
  .filtros .grupo label span{width:80px}
  .consulta{grid-template-columns:1fr}
  .opciones{display:flex;flex-wrap:wrap;gap:6px;padding:8px}
  .opciones h3{display:none} .opciones .sep{display:none}
  .opciones a,.opciones button{width:auto;border:1px solid var(--borde);border-radius:5px;padding:6px 10px;font-size:13px}
  .grilla table{display:none}
  .grilla .pie{display:none}
  .grilla .pie.recorte{display:flex}   /* 5.1.6.1: el aviso de la lista cortada sí se ve en el celular */
  .tarjetas{display:block}
  .tarjeta{padding:10px 12px;border-bottom:1px solid var(--borde2)}
  .tarjeta .t{font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
  .tarjeta .l{display:grid;grid-template-columns:110px 1fr;gap:2px 8px;font-size:12.5px}
  .tarjeta .l span:nth-child(odd){color:var(--texto3)}
  .tarjeta .l span:nth-child(even){text-align:left}
  .tarjeta .det{display:block;color:var(--texto2)}   /* auditoría 5.1.1 (5): el detalle en su renglón */
  .form{grid-template-columns:1fr;gap:2px 0}
  .form label{margin-top:8px}
  .form.dos{grid-template-columns:1fr}
  .form .in{min-width:0}
  .form .in>*{max-width:100%}
  .form input.corto{width:90px}
  .form input[type=date]{width:160px;max-width:160px}   /* auditoría 5.1.1 (5): la fecha entera */
  .form input.medio{width:100%;max-width:none}
  .form input[type=text],.form select,.form textarea{max-width:none;width:100%}
  .form .sep{margin:6px 0}
  .ficha{grid-template-columns:1fr;gap:0}
  .ficha .d{margin-top:6px}
  .hoja{padding:12px;overflow-x:auto}
  .solapas{padding:0 12px;gap:14px}
  .impreso{overflow-x:auto;padding:12px}
  .reporte{padding:12px;overflow-x:auto}
  .reporte .kv{grid-template-columns:1fr}
  .lamina div{grid-template-columns:1fr 80px 90px}
  .lamina div span:nth-child(2),.lamina div span:nth-child(5){display:none}
  .pie-form{flex-wrap:wrap}.pie-form .izq{width:100%;margin:0 0 6px}
  .dosgrillas{grid-template-columns:1fr}
  .fac-ia{grid-template-columns:1fr}
  .lotes-chk{grid-template-columns:1fr}
  .chat .pregunta{margin-left:20px} .chat .respuesta{margin-right:20px}
  table.confirmar{display:table} table.confirmar td,table.confirmar th{white-space:normal;padding:5px 4px;font-size:12.5px}
  table.confirmar input.corto{width:70px}
  table.confirmar select{max-width:120px}
  table.confirmar.ins td:nth-child(4),table.confirmar.ins th:nth-child(4),table.confirmar.ins td:nth-child(5),table.confirmar.ins th:nth-child(5){display:none}
  table.confirmar.lab td:nth-child(5),table.confirmar.lab th:nth-child(5),table.confirmar.lab td:nth-child(6),table.confirmar.lab th:nth-child(6){display:none}
  .barra-rep{gap:6px} .barra-rep .btn{padding:6px 10px;font-size:12.5px}
  .ini-mods{grid-template-columns:repeat(3,1fr);gap:8px}
  .ini-mod{padding:12px 4px 9px}
  .ini-mod svg{width:44px;height:44px;margin-bottom:5px}
  .ini-mod b{font-size:13px}
  .ini-mod span{display:none}
  .ini-dos{grid-template-columns:1fr}
  .ini-t{grid-template-columns:minmax(0,1fr) auto}
  .ini-t .imp{display:none}
  .ini-t .btn{grid-row:1 / span 2;grid-column:2}
  .ini-t .ini-bs{grid-row:1 / span 2;grid-column:2}.ini-t .ini-bs .btn{grid-row:auto;grid-column:auto}
  .ch-form{padding:10px 12px 12px;gap:8px}
  .ch-form label{flex:1 1 44%}
  .ch-form input.corto,.ch-form select{width:100%;max-width:none}
  .ch-form .btn.verde{width:100%}
}
@media (max-width:600px){#sub div{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}}   /* auditoría 5.1.1 (5): en el celular el submenú se desliza en un renglón (a 700 sigue pasando abajo, auditoría 5.0) */
@media print{#pie,#cab,#sub,.filtros,.filtros-fila,.opciones,.pie-form,.barra-rep,.titulo .acciones{display:none!important} main{padding:0;max-width:none} body{background:#fff}}