/* PRIMATE — Hoja de estilos principal v1.0.0 */

/* ══════════════════════════════════════════════════════════════
   VARIABLES DE TEMA (claro por defecto, oscuro via [data-theme=dark])
   Solo las superficies estructurales (fondos/texto/bordes) usan
   variables — badges, acentos de color y gradientes de marca quedan
   hardcodeados a proposito, ya se leen bien en los dos temas.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg-page:#ababab;
  --bg-chrome-1:#f0f0f0;
  --bg-chrome-2:#d8d8d8;
  --bg-chrome-3:#e8e8e8;
  --bg-panel:#ffffff;
  --bg-panel-alt:#f5f5f5;
  --bg-panel-alt2:#f3f3f3;
  --bg-panel-alt3:#fafafa;
  --bg-hover:#e0e8f4;
  --bg-hover-2:#d8e8f8;
  --border-1:#aaaaaa;
  --border-2:#cccccc;
  --border-3:#d0d0d0;
  --border-4:#e0e0e0;
  --border-5:#e8e8e8;
  --text-1:#1a1a1a;
  --text-2:#333333;
  --text-3:#555555;
  --text-4:#666666;
  --text-muted:#888888;
  --text-faint:#999999;
  --ink-accent:#3d3d3d;
  --shadow-color:rgba(0,0,0,.35);
  --shadow-elev1:0 6px 18px rgba(0,0,0,.18);
  --shadow-elev2:0 8px 24px rgba(0,0,0,.22);
  --bg-readonly:#fffbcc;
  --border-readonly:#e6d980;
  --text-readonly:#5a5230;
}
:root[data-theme="dark"]{
  --bg-page:#1c1c1c;
  --bg-chrome-1:#2a2a2a;
  --bg-chrome-2:#1f1f1f;
  --bg-chrome-3:#242424;
  --bg-panel:#232323;
  --bg-panel-alt:#2a2a2a;
  --bg-panel-alt2:#2c2c2c;
  --bg-panel-alt3:#303030;
  --bg-hover:#2e4258;
  --bg-hover-2:#35506b;
  --border-1:#4a4a4a;
  --border-2:#444444;
  --border-3:#3f3f3f;
  --border-4:#3a3a3a;
  --border-5:#363636;
  --text-1:#cfcfcf;
  --text-2:#c2c2c2;
  --text-3:#b0b0b0;
  --text-4:#a6a6a6;
  --text-muted:#969696;
  --text-faint:#8a8a8a;
  --ink-accent:#c9c9c9;
  --shadow-color:rgba(0,0,0,.6);
  --shadow-elev1:0 6px 18px rgba(0,0,0,.55);
  --shadow-elev2:0 8px 24px rgba(0,0,0,.6);
  --bg-readonly:#4a4420;
  --border-readonly:#6b5f2a;
  --text-readonly:#e8dfa0;
}
/* "Clasico" -- escritorio estilo Windows 98/2000, gris plata con acento azul,
   sin curvas ni degrades saturados. Mismo mecanismo que el tema oscuro:
   solo redefine tokens + un puñado de detalles que quedan hardcodeados
   arriba (headers de grilla, groupbox-title). */
:root[data-theme="clasico"]{
  --bg-page:#808080;
  --bg-chrome-1:#d4d0c8;
  --bg-chrome-2:#b8b3a8;
  --bg-chrome-3:#ece9d8;
  --bg-panel:#ffffff;
  --bg-panel-alt:#ece9d8;
  --bg-panel-alt2:#f0efe4;
  --bg-panel-alt3:#f7f6ef;
  --bg-hover:#cddef2;
  --bg-hover-2:#a8c8ec;
  --border-1:#6b6b6b;
  --border-2:#999990;
  --border-3:#b0ab9f;
  --border-4:#c8c4bb;
  --border-5:#d8d5cb;
  --text-1:#000000;
  --text-2:#1a1a1a;
  --text-3:#3d3d3d;
  --text-4:#555550;
  --text-muted:#6e6e68;
  --text-faint:#888880;
  --ink-accent:#2b2b2b;
  --shadow-color:rgba(0,0,0,.5);
  --shadow-elev1:2px 2px 0 rgba(0,0,0,.35);
  --shadow-elev2:3px 3px 0 rgba(0,0,0,.4);
  --bg-readonly:#fff6c0;
  --border-readonly:#d4c76a;
  --text-readonly:#4a4420;
}
/* "Java" -- estilo Swing Metal Look & Feel (el look por defecto de las
   apps de escritorio Java clasicas): gris con acento violeta/azulado,
   igual de plano que "Clasico" pero con otra paleta. Mismo mecanismo:
   solo tokens + los mismos overrides puntuales. */
:root[data-theme="java"]{
  --bg-page:#999999;
  --bg-chrome-1:#c0c0c0;
  --bg-chrome-2:#9999cc;
  --bg-chrome-3:#ccccff;
  --bg-panel:#ffffff;
  --bg-panel-alt:#eeeeee;
  --bg-panel-alt2:#e4e4ee;
  --bg-panel-alt3:#f5f5fa;
  --bg-hover:#ccccff;
  --bg-hover-2:#9999cc;
  --border-1:#666699;
  --border-2:#999999;
  --border-3:#adadc2;
  --border-4:#c6c6dc;
  --border-5:#dcdcee;
  --text-1:#000000;
  --text-2:#262626;
  --text-3:#444444;
  --text-4:#5c5c5c;
  --text-muted:#6e6e6e;
  --text-faint:#888888;
  --ink-accent:#666699;
  --shadow-color:rgba(0,0,0,.4);
  --shadow-elev1:0 3px 8px rgba(51,51,102,.35);
  --shadow-elev2:0 5px 14px rgba(51,51,102,.4);
  --bg-readonly:#fff6c0;
  --border-readonly:#d4c76a;
  --text-readonly:#4a4420;
}
/* "Java Oscuro" -- variante oscura de "Java": mismos neutros que el tema
   Oscuro comun, pero con el acento violeta de Swing Metal en vez de azul
   (recuerda a los IDEs Java oscuros tipo Darcula) para que se note que es
   la version nocturna de Java y no una simple recoloreada de "Oscuro". */
:root[data-theme="java-oscuro"]{
  --bg-page:#1c1c1c;
  --bg-chrome-1:#2a2a2a;
  --bg-chrome-2:#1f1f1f;
  --bg-chrome-3:#242424;
  --bg-panel:#232323;
  --bg-panel-alt:#2a2a2a;
  --bg-panel-alt2:#2c2c2c;
  --bg-panel-alt3:#303030;
  --bg-hover:#3a3a5e;
  --bg-hover-2:#4a4a7a;
  --border-1:#5c5c8f;
  --border-2:#444444;
  --border-3:#3f3f3f;
  --border-4:#3a3a3a;
  --border-5:#363636;
  --text-1:#cfcfcf;
  --text-2:#c2c2c2;
  --text-3:#b0b0b0;
  --text-4:#a6a6a6;
  --text-muted:#969696;
  --text-faint:#8a8a8a;
  --ink-accent:#9999cc;
  --shadow-color:rgba(0,0,0,.6);
  --shadow-elev1:0 3px 8px rgba(60,50,110,.45);
  --shadow-elev2:0 5px 14px rgba(60,50,110,.5);
  --bg-readonly:#4a4420;
  --border-readonly:#6b5f2a;
  --text-readonly:#e8dfa0;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',Tahoma,sans-serif;font-size:12px;background:var(--bg-page);height:100vh;display:flex;flex-direction:column;overflow:hidden;user-select:none;color:var(--text-1);}

/* TITLE BAR */
#titlebar{background:linear-gradient(180deg,var(--bg-chrome-1) 0%,var(--bg-chrome-2) 100%);border-bottom:1px solid var(--border-1);height:32px;display:flex;align-items:center;padding:0 8px;flex-shrink:0;}
#titlebar .qa-btns{display:flex;gap:2px;align-items:center;}
#titlebar .qa-btns button{background:none;border:1px solid transparent;border-radius:2px;width:22px;height:22px;cursor:pointer;color:var(--text-2);font-size:13px;display:flex;align-items:center;justify-content:center;}
#titlebar .qa-btns button:hover{background:var(--bg-hover);border-color:#b0c4de;}
#titlebar .qa-btns button#btnNotifPush.activo{color:#2e7d32;}
#appTitle{flex:1;text-align:center;font-size:11px;color:var(--text-2);}
#titlebar .win-btns{display:flex;gap:1px;}
.wbtn{background:none;border:none;width:28px;height:28px;cursor:pointer;font-size:11px;color:var(--text-2);}
.wbtn:hover{background:var(--bg-chrome-3);}
.wbtn.close:hover{background:#e81123;color:#fff;}
.wbtn.theme-toggle{font-size:13px;}

/* Aviso de version nueva (ver verificarVersionServidor en app.html) */
#avisoVersionNueva{display:none;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#1976d2,#125a9c);color:#fff;font-size:11px;padding:5px 12px;flex-shrink:0;}
#avisoVersionNueva button{background:#fff;color:#125a9c;border:none;border-radius:3px;padding:3px 12px;font-size:11px;font-weight:600;cursor:pointer;}
#avisoVersionNueva button:hover{background:#e8f0fe;}
:root[data-theme="dark"] .wbtn.theme-toggle{color:#fff;}
:root[data-theme="java-oscuro"] .wbtn.theme-toggle{color:#fff;}

/* RIBBON */
#ribbon{background:var(--bg-chrome-1);border-bottom:1px solid #b0b0b0;flex-shrink:0;}
#ribbon-tabs{display:flex;align-items:flex-end;background:linear-gradient(180deg,var(--bg-chrome-3),var(--bg-chrome-2));padding:0 4px;border-bottom:2px solid #3d3d3d;height:28px;}
#ribbon-tabs .rtab{padding:0 12px;height:24px;border:none;border-radius:3px 3px 0 0;background:transparent;cursor:pointer;font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:0.3px;}
#ribbon-tabs .rtab:hover{background:var(--bg-hover);}
#ribbon-tabs .rtab.active{background:#3d3d3d;color:#fff;height:26px;}
#ribbon-panel{background:var(--bg-panel);border-bottom:1px solid var(--border-3);display:flex;align-items:stretch;padding:4px 8px;height:88px;}
.rgroup{display:flex;flex-direction:column;justify-content:space-between;padding:0 8px;border-right:1px solid var(--border-3);}
.rgroup:last-child{border-right:none;}
/* rg-body: fuerza fila sin wrap → los rbtn-large siempre van lado a lado, nunca apilados */
.rg-body{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;flex:1;}
.rg-label{font-size:10px;color:var(--text-muted);text-align:center;padding:2px 0;border-top:1px solid var(--border-4);margin-top:2px;width:100%;}
.rsmall-list{display:flex;flex-direction:column;gap:1px;justify-content:center;height:62px;}
.rbtn-large{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:62px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;color:var(--text-1);gap:2px;padding:4px 2px;flex-shrink:0;}
.rbtn-large:hover{background:var(--bg-hover);border-color:#b0cce8;}
.rbtn-large .ri{font-size:28px;color:var(--ink-accent);}
/* min-height reserva siempre el alto de 2 lineas -- si no, un boton con
   etiqueta de 1 sola linea (ej. "Comprobantes") y otro con etiqueta de 2
   (ej. "Gastos de Servicios") dentro del mismo grupo terminan con bloques
   de distinta altura, y el centrado vertical de .rbtn-large deja sus
   iconos a distinta altura entre si -- se ve "desalineado" aunque cada
   boton este bien centrado individualmente. */
.rbtn-large span{font-size:10px;text-align:center;line-height:1.2;min-height:24px;}
.rbtn-small{display:flex;align-items:center;gap:5px;height:19px;padding:0 6px;border:1px solid transparent;border-radius:2px;background:none;cursor:pointer;color:var(--text-1);white-space:nowrap;font-size:11px;}
.rbtn-small:hover{background:var(--bg-hover);border-color:#b0cce8;}
.rbtn-small .ri{font-size:13px;color:var(--ink-accent);width:16px;text-align:center;}

/* DOCUMENT TABS */
#doc-tabs{background:var(--bg-chrome-2);border-bottom:1px solid var(--border-1);display:flex;align-items:flex-end;padding:4px 4px 0;height:28px;flex-shrink:0;gap:2px;overflow-x:auto;}
.dtab{display:flex;align-items:center;gap:6px;padding:3px 12px 3px 10px;background:var(--bg-chrome-2);border:1px solid var(--border-1);border-bottom:none;border-radius:3px 3px 0 0;cursor:pointer;font-size:11px;color:var(--text-3);height:24px;}
.dtab.active{background:var(--bg-panel);color:var(--text-1);border-color:#999;height:26px;z-index:1;}
.dtab:hover:not(.active){background:var(--bg-hover-2);}
.dtab-x{color:var(--text-muted);font-size:10px;padding:1px 2px;border-radius:2px;}
.dtab-x:hover{background:#e81123;color:#fff;}

/* WORKSPACE */
#workspace{flex:1;background:var(--bg-chrome-3);overflow:hidden;display:flex;flex-direction:column;}

/* FORM TOOLBAR */
.form-toolbar{background:var(--bg-panel-alt);border-bottom:1px solid var(--border-3);padding:3px 6px;display:flex;gap:2px;flex-shrink:0;}
.tbtn{display:flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid #b8b8b8;border-radius:2px;background:linear-gradient(180deg,var(--bg-panel-alt3),var(--bg-hover-2, #eaeaea));cursor:pointer;font-size:11px;color:var(--text-1);}
.tbtn:hover{background:linear-gradient(180deg,var(--bg-hover),var(--bg-hover-2));border-color:#90b4d8;}
/* .tbtn es el boton mas usado del sistema (toda barra de herramientas) y
   se deshabilita todo el tiempo (Editar/Eliminar hasta elegir una fila,
   Guardar mientras se manda al servidor, etc.) pero nunca tuvo un estilo
   :disabled propio -- se veia identico a uno habilitado, sin ninguna pista
   de por que no respondia al click. Mismo criterio que .btn:disabled. */
.tbtn:disabled{opacity:.5;cursor:not-allowed;}
.tbtn:disabled:hover{background:linear-gradient(180deg,var(--bg-panel-alt3),var(--bg-hover-2, #eaeaea));border-color:#b8b8b8;}
.tbtn.btn-primary{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;border-color:#2b2b2b;}
.tbtn.btn-primary:hover{background:linear-gradient(180deg,#4d4d4d,#1f1f1f);}
.tbtn .ti{font-size:13px;color:var(--ink-accent);}
.tbtn .tk{font-size:9px;color:var(--text-faint);margin-left:1px;}

/* Toggle Material/Servicio en Compras de la OT */
.ot-comp-tipo-btn{border:1px solid var(--border-1);background:var(--bg-panel-alt3);color:var(--text-3);font-size:10px;padding:2px 9px;border-radius:2px;cursor:pointer;}
.ot-comp-tipo-btn:hover{background:var(--bg-chrome-3);}
.ot-comp-tipo-btn.active{background:#3d3d3d;color:#fff;border-color:#2b2b2b;}
.tbtn-sep{width:1px;background:var(--border-1);margin:2px 3px;}

/* GRID */
.grid-container{flex:1;overflow:auto;background:var(--bg-panel);}
.data-grid{width:100%;border-collapse:collapse;font-size:11px;}
/* cursor:default (no "pointer") a proposito -- ninguna grilla del sistema
   tiene click-para-ordenar implementado en ningun modulo (se verifico: cero
   listeners sobre <th> en todo src/js), asi que el cursor de mano + el
   :hover que cambiaba de color venian prometiendo una interaccion que no
   existe en ningun lado. Si el dia de mañana se agrega ordenamiento real,
   recien ahi vuelve el cursor:pointer. */
.data-grid thead th{background:linear-gradient(180deg,#dce8f4,#c8d8ec);border:1px solid #a8c0d8;padding:4px 8px;text-align:left;font-weight:600;color:#1a1a1a;position:sticky;top:0;cursor:default;white-space:nowrap;}
:root[data-theme="dark"] .data-grid thead th{background:linear-gradient(180deg,#334456,#2a3849);border-color:#3d5266;color:#e0e6ec;}
:root[data-theme="java-oscuro"] .data-grid thead th{background:linear-gradient(180deg,#3a3a5e,#2e2e4a);border-color:#54548a;color:#e0e0f0;}
:root[data-theme="clasico"] .data-grid thead th{background:linear-gradient(180deg,#e4e0d4,#d4d0c8);border-color:#8a8578;color:#000;}
:root[data-theme="java"] .data-grid thead th{background:linear-gradient(180deg,#ccccff,#9999cc);border-color:#666699;color:#000;}
.data-grid tbody tr{cursor:pointer;color:var(--text-1);}
.data-grid tbody tr:nth-child(even){background:var(--bg-panel-alt2);}
.data-grid tbody tr:hover{background:var(--bg-panel-alt);}
.data-grid tbody tr.selected{background:#3d3d3d;color:#fff;}
.data-grid tbody tr.selected td{color:#fff;}
.data-grid tbody td{border:1px solid var(--border-4);padding:3px 8px;white-space:nowrap;}

/* GRILLA EDITABLE ESTILO EXCEL (Costeo de Presupuesto) — cada celda es un
   input/select sin borde propio, que ocupa toda la celda; el borde de la
   celda del data-grid ya delimita visualmente, como en una planilla. */
.cc-tabla tbody tr:hover{background:none;}
.cc-tabla tbody td{padding:0;white-space:normal;}
.cc-tabla tbody td input, .cc-tabla tbody td select{
    width:100%;height:24px;border:1px solid transparent;background:transparent;color:var(--text-1);
    font-size:11px;font-family:'Segoe UI',Tahoma,sans-serif;padding:2px 6px;box-sizing:border-box;
}
.cc-tabla tbody td input:read-only{color:var(--text-3);}
.cc-tabla tbody td input:focus, .cc-tabla tbody td select:focus{
    outline:none;border-color:#5b8dd6;background:var(--bg-panel);box-shadow:inset 0 0 0 1px #5b8dd6;
}
.cc-tabla tbody tr.cc-fila-nueva{background:var(--bg-panel-alt2);}
.cc-tabla tbody tr.cc-fila-nueva td input::placeholder{color:var(--text-faint);}

/* FORM CONTENT */
.form-content{flex:1;overflow:auto;padding:8px;}
.form-tabs{display:flex;border-bottom:2px solid #3d3d3d;margin-bottom:8px;}
.ftab{padding:4px 16px;border:1px solid var(--border-2);border-bottom:none;border-radius:3px 3px 0 0;background:var(--bg-chrome-1);cursor:pointer;font-size:11px;color:var(--text-3);margin-right:2px;}
.ftab.active{background:#3d3d3d;color:#fff;border-color:#3d3d3d;}
.ftab:hover:not(.active){background:var(--bg-hover);}
.groupbox{border:1px solid var(--border-2);border-radius:3px;margin-bottom:8px;}
.groupbox-title{background:linear-gradient(180deg,var(--bg-hover),#d0e0f0);padding:3px 10px;font-weight:600;font-size:11px;color:#1a1a1a;border-bottom:1px solid var(--border-2);}
:root[data-theme="dark"] .groupbox-title{background:linear-gradient(180deg,var(--bg-hover-2),var(--bg-hover));color:var(--text-1);}
:root[data-theme="clasico"] .groupbox-title{background:linear-gradient(180deg,var(--bg-hover),var(--bg-hover-2));color:var(--text-1);}
:root[data-theme="java"] .groupbox-title{background:linear-gradient(180deg,var(--bg-hover),var(--bg-hover-2));color:var(--text-1);}
:root[data-theme="java-oscuro"] .groupbox-title{background:linear-gradient(180deg,var(--bg-hover-2),var(--bg-hover));color:var(--text-1);}
/* Esquinas sin curvar en los temas retro (Clasico/Java/Java Oscuro) -- ni
   Windows 98/2000 ni Swing Metal redondeaban ventanas, menus ni controles.
   Regla aditiva, no toca el resto de las propiedades de cada clase. */
:root[data-theme="clasico"] .modal, :root[data-theme="java"] .modal, :root[data-theme="java-oscuro"] .modal,
:root[data-theme="clasico"] .docwin, :root[data-theme="java"] .docwin, :root[data-theme="java-oscuro"] .docwin,
:root[data-theme="clasico"] .ot-form-modal, :root[data-theme="java"] .ot-form-modal, :root[data-theme="java-oscuro"] .ot-form-modal,
:root[data-theme="clasico"] .kb-docwin, :root[data-theme="java"] .kb-docwin, :root[data-theme="java-oscuro"] .kb-docwin,
:root[data-theme="clasico"] .pdlg-box, :root[data-theme="java"] .pdlg-box, :root[data-theme="java-oscuro"] .pdlg-box,
:root[data-theme="clasico"] .chat-modal, :root[data-theme="java"] .chat-modal, :root[data-theme="java-oscuro"] .chat-modal,
:root[data-theme="clasico"] .kb-mas-pop, :root[data-theme="java"] .kb-mas-pop, :root[data-theme="java-oscuro"] .kb-mas-pop,
:root[data-theme="clasico"] .kb-etq-popover, :root[data-theme="java"] .kb-etq-popover, :root[data-theme="java-oscuro"] .kb-etq-popover,
:root[data-theme="clasico"] .tbtn, :root[data-theme="java"] .tbtn, :root[data-theme="java-oscuro"] .tbtn,
:root[data-theme="clasico"] .form-input, :root[data-theme="java"] .form-input, :root[data-theme="java-oscuro"] .form-input,
:root[data-theme="clasico"] .groupbox, :root[data-theme="java"] .groupbox, :root[data-theme="java-oscuro"] .groupbox{border-radius:1px;}
/* Bisel 3D -- el detalle mas caracteristico de WinForms/Swing clasico:
   botones "elevados" (claro arriba-izquierda, oscuro abajo-derecha) e
   inputs "hundidos" (al reves). Cada tema con su propio par de colores. */
:root[data-theme="clasico"] .tbtn{border-top-color:#fff;border-left-color:#fff;border-right-color:#6b6b6b;border-bottom-color:#6b6b6b;}
:root[data-theme="clasico"] .form-input{border-top-color:#6b6b6b;border-left-color:#6b6b6b;border-right-color:#fff;border-bottom-color:#fff;}
:root[data-theme="java"] .tbtn{border-top-color:#fff;border-left-color:#fff;border-right-color:#666699;border-bottom-color:#666699;}
:root[data-theme="java"] .form-input{border-top-color:#666699;border-left-color:#666699;border-right-color:#fff;border-bottom-color:#fff;}
:root[data-theme="java-oscuro"] .tbtn{border-top-color:#6b6b9c;border-left-color:#6b6b9c;border-right-color:#141414;border-bottom-color:#141414;}
:root[data-theme="java-oscuro"] .form-input{border-top-color:#141414;border-left-color:#141414;border-right-color:#6b6b9c;border-bottom-color:#6b6b9c;}
.groupbox-body{padding:8px 10px;background:var(--bg-panel);}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.form-label{font-size:11px;color:var(--text-2);min-width:100px;text-align:right;flex-shrink:0;}

/* IMPRESION PREIMPRESA — lienzo de calibracion (Diseno Preimpreso) */
.pf-hoja-wrap{display:grid;grid-template-columns:16px auto;grid-template-rows:16px auto;flex-shrink:0;}
.pf-ruler-corner{grid-column:1;grid-row:1;background:#e4e4e4;border:1px solid #999;}
.pf-ruler{position:relative;background:#f2f2f2;border:1px solid #999;overflow:hidden;}
.pf-ruler-x{grid-column:2;grid-row:1;border-left:none;}
.pf-ruler-y{grid-column:1;grid-row:2;border-top:none;}
.pf-ruler-tick{position:absolute;background:#777;}
.pf-ruler-x .pf-ruler-tick{bottom:0;width:1px;}
.pf-ruler-x .pf-ruler-tick.major{height:9px;}
.pf-ruler-x .pf-ruler-tick.minor{height:4px;}
.pf-ruler-y .pf-ruler-tick{right:0;height:1px;}
.pf-ruler-y .pf-ruler-tick.major{width:9px;}
.pf-ruler-y .pf-ruler-tick.minor{width:4px;}
.pf-ruler-label{position:absolute;font-size:7px;color:#444;line-height:1;white-space:nowrap;pointer-events:none;}
.pf-ruler-x .pf-ruler-label{top:1px;transform:translateX(-50%);}
.pf-ruler-y .pf-ruler-label{left:1px;top:0;transform:translateY(-50%);}
.pf-hoja{position:relative;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3);flex-shrink:0;grid-column:2;grid-row:2;}
.pf-hoja.pf-grid{background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 5mm),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 5mm),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 10mm),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 10mm);}
.pf-campo{position:absolute;white-space:nowrap;cursor:grab;padding:1px 3px;border:1px dashed rgba(21,101,192,.5);
    background:rgba(255,255,255,.75);border-radius:2px;user-select:none;touch-action:none;color:#000;outline:none;}
.pf-campo:hover{border-color:#1565c0;background:rgba(227,242,253,.9);}
.pf-campo.selected{border:1px solid #1565c0;background:rgba(187,222,251,.95);box-shadow:0 0 0 2px #1565c033;cursor:grabbing;}
.pf-campo.ghost{border-style:dotted;opacity:.45;pointer-events:none;}
.pf-campo-tag{position:absolute;left:0;top:-14px;font-size:8px;font-weight:700;color:#1565c0;
    background:#fff;padding:0 3px;border-radius:2px;white-space:nowrap;pointer-events:none;}
.pf-copia-tag{position:absolute;font-size:9px;font-weight:700;color:#8a5a00;background:#fff3e0;
    border:1px solid #ffcc80;padding:1px 5px;border-radius:2px;white-space:nowrap;
    pointer-events:none;transform:translateY(-100%);}
.form-input{border:1px solid var(--border-1);border-radius:2px;padding:3px 6px;font-size:11px;background:var(--bg-panel);color:var(--text-1);height:22px;}
.form-input:focus{outline:none;border-color:#3d3d3d;box-shadow:0 0 0 2px #3d3d3d20;}
/* Solo lectura — convencion clasica de escritorio: fondo amarillo claro para
   que se note a simple vista que el campo no se puede editar. !important
   porque muchos campos de solo lectura ya traen un fondo gris inline
   (background:var(--bg-panel-alt)) puesto antes de esta regla existir.
   OJO: ":read-only" se restringe a input/textarea a proposito — un
   <select> siempre matchea ":read-only" (asi lo define la spec de CSS,
   no tiene que ver con si esta disabled o no), asi que si se deja el
   selector generico ".form-input:read-only" TODOS los <select> del
   sistema quedan amarillos aunque esten perfectamente habilitados. El
   estado real de un <select> se refleja con :disabled, no :read-only. */
input.form-input:read-only,
textarea.form-input:read-only,
.form-input[readonly],
.form-input:disabled{background:var(--bg-readonly) !important;color:var(--text-readonly) !important;border-color:var(--border-readonly) !important;cursor:default;}
.form-input.w60{width:60px;}
.form-input.w80{width:80px;}
.form-input.w90{width:90px;}
.form-input.w100{width:100px;}
.form-input.w110{width:110px;}
.form-input.w120{width:120px;}
.form-input.w130{width:130px;}
.form-input.w140{width:140px;}
.form-input.w160{width:160px;}
.form-input.w200{width:200px;}
.form-input.w300{width:300px;}
.form-input.w400{width:400px;}
.form-input.w100p{width:100%;}
select.form-input{cursor:pointer;}
textarea.form-input{height:auto;resize:vertical;}

/* STATUS BAR */
#statusbar{background:linear-gradient(180deg,var(--bg-chrome-3),var(--bg-chrome-2));border-top:1px solid var(--border-1);height:22px;display:flex;align-items:center;padding:0 8px;gap:16px;font-size:11px;color:var(--text-3);flex-shrink:0;}
#statusbar span{display:flex;align-items:center;gap:4px;}
.sb-sep{width:1px;height:14px;background:var(--border-1);}

/* SCREENS */
.screen{display:none;flex-direction:column;height:100%;}
.screen.active{display:flex;}

/* DASHBOARD */
.dashboard{padding:12px;overflow:auto;}
.dash-bienvenida{background:var(--bg-panel);border:1px solid #c8d8e8;border-radius:3px;padding:8px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);}
.dash-row{display:flex;gap:12px;margin-bottom:12px;}
.dash-card{background:var(--bg-panel);border:1px solid #c8d8e8;border-radius:4px;padding:12px;flex:1;}
.dash-card-title{font-size:11px;font-weight:600;color:var(--ink-accent);border-bottom:1px solid var(--bg-hover);padding-bottom:6px;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.dash-kpi{display:flex;justify-content:space-around;}
.dash-kpi-item{text-align:center;}
.dash-kpi-item .val{font-size:22px;font-weight:700;color:var(--ink-accent);}
.dash-kpi-item .lbl{font-size:10px;color:var(--text-muted);}

/* KANBAN */
.kanban-board{display:flex;gap:8px;padding:8px;overflow-x:auto;height:100%;}
/* .kanban-col NO va acá -- redeclarada mas abajo como "Columna kanban
   base" (ver esa seccion) con ancho:200px fijo y borde sin variable de
   tema, pisando en parte a esa version mas nueva por orden de cascada.
   Se verificó que ninguna variante real (kcol-com/colapsada/kcol-cancelado/
   kcol-rechazado/kcol-terminado/kcol-entregado/kcol-facturado, las únicas
   que usan OTKanban.js y Cuadrillas.js) dependía del ancho de 200px de
   acá -- todas traen su propio ancho. */
.kanban-col-title{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:6px 10px;font-weight:600;font-size:11px;border-radius:3px 3px 0 0;text-align:center;}
.kanban-cards{padding:6px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.kanban-card{background:var(--bg-panel);border:1px solid #c8d8e8;border-radius:3px;padding:8px;cursor:pointer;font-size:11px;color:var(--text-1);}
.kanban-card:hover{border-color:#3d3d3d;box-shadow:0 1px 4px #3d3d3d30;}
.kanban-card .kc-num{font-weight:700;color:var(--ink-accent);font-size:10px;}
.kanban-card .kc-client{font-weight:600;margin:2px 0;}
.kanban-card .kc-desc{color:var(--text-4);font-size:10px;}
.kanban-card .kc-date{color:var(--text-faint);font-size:10px;margin-top:4px;}
/* Tablero de OTs — acentos de columna + drag & drop */
.kanban-col.col-pendiente .kanban-col-title{background:linear-gradient(180deg,#4472c4,#2a5298);}
.kanban-col.col-compra    .kanban-col-title{background:linear-gradient(180deg,#8a6d00,#6b5400);}
.kanban-col.col-enproceso .kanban-col-title{background:linear-gradient(180deg,#e65100,#bf360c);}
.kanban-col.col-terminado .kanban-col-title{background:linear-gradient(180deg,#1565c0,#0d47a1);}
.kanban-col.col-entregado .kanban-col-title{background:linear-gradient(180deg,#2e7d32,#1b5e20);}
.kanban-col.col-cancelado .kanban-col-title{background:linear-gradient(180deg,#880e4f,#560027);}
.kanban-col-title .kc-count{opacity:.85;font-weight:400;}
.kanban-card.dragging{opacity:.5;border-style:dashed;}
.kanban-card[draggable="false"]{cursor:default;opacity:.9;}
.kanban-cards.drag-over{background:#eef4fb;outline:2px dashed #3d3d3d;outline-offset:-4px;}
.kanban-card .kc-lock{float:right;color:var(--text-faint);}
.kanban-card .kc-monto{color:#1a6a3a;font-weight:700;font-size:10px;margin-top:2px;}
.kanban-card .kc-producto{color:var(--text-4);font-size:10px;font-style:italic;margin:1px 0;}
.kanban-card .kc-usuario{color:var(--text-faint);font-size:10px;margin-top:3px;}
.kanban-board-empty{color:var(--text-muted);font-size:12px;padding:24px;text-align:center;width:100%;}

/* SEARCH BAR */
.search-bar{display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--bg-panel-alt);border-bottom:1px solid var(--border-3);}
.search-bar input{border:1px solid var(--border-1);border-radius:2px;padding:2px 6px;font-size:11px;width:200px;height:22px;background:var(--bg-panel);color:var(--text-1);}
.search-bar button{display:flex;align-items:center;gap:3px;padding:2px 8px;border:1px solid #b8b8b8;border-radius:2px;background:linear-gradient(180deg,var(--bg-panel-alt3),#eaeaea);cursor:pointer;font-size:11px;color:var(--text-1);}
.search-bar button:hover{background:linear-gradient(180deg,var(--bg-hover),var(--bg-hover-2));border-color:#90b4d8;}

/* BADGES — colores propios, no cambian con el tema (mismo criterio en ambos) */
.badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;}
.badge-green{background:#d4edda;color:#155724;}
.badge-blue{background:#d0e8f8;color:#0c4a7a;}
.badge-yellow{background:#fff3cd;color:#856404;}
.badge-red{background:#f8d7da;color:#721c24;}
.badge-gray{background:#e2e3e5;color:#383d41;}
.badge-orange{background:#ffe5cc;color:#8a3800;}
.badge-purple{background:#e8d5f8;color:#4a0080;}

/* ESTADO RESULTADOS */
.er-table{width:100%;font-size:11px;border-collapse:collapse;color:var(--text-1);}
.er-table tr:hover{background:var(--bg-panel-alt2);cursor:pointer;}
.er-table tr.er-section td{background:#dce8f4;font-weight:700;color:#1a1a1a;padding:4px 8px;}
.er-table tr.er-row td{padding:3px 8px;border-bottom:1px solid var(--border-4);}
.er-table tr.er-subtotal td{background:var(--bg-panel-alt);font-weight:600;border-top:1px solid var(--border-2);}
.er-table tr.er-total td{background:#3d3d3d;color:#fff;font-weight:700;}
.er-table td.indent{padding-left:24px;}
.er-table td.num{text-align:right;}
.er-table .drill-hint{color:var(--ink-accent);text-decoration:underline;cursor:pointer;font-size:10px;}

/* PLAN CUENTAS */
.cuenta-nivel1{background:#dce8f4;font-weight:700;color:#1a1a1a;}
.cuenta-nivel2{background:var(--bg-panel-alt2);font-weight:600;padding-left:20px!important;}
.cuenta-nivel3{padding-left:40px!important;}

/* DRILLDOWN BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--bg-chrome-1);border-bottom:1px solid #c8d8e8;font-size:11px;}
.breadcrumb a{color:var(--ink-accent);cursor:pointer;text-decoration:underline;}
.breadcrumb .sep{color:var(--text-faint);}

/* MODAL / DIALOGO */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:1000;}
.modal-overlay.hidden{display:none;}
.modal{background:var(--bg-panel);border:1px solid #999;border-radius:4px;box-shadow:var(--shadow-elev2);min-width:300px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;}
.modal-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-radius:3px 3px 0 0;}
.modal-header span{font-size:12px;font-weight:600;}
.modal-header button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.modal-header button:hover{color:#ffd;}
.modal-body{padding:12px;overflow:auto;flex:1;color:var(--text-1);}
.modal-footer{padding:8px 12px;border-top:1px solid var(--border-4);display:flex;justify-content:flex-end;gap:6px;background:var(--bg-panel-alt);}

/* Novedades / Registro de cambios (ver Changelog.js) */
.chl-version{border-bottom:1px solid var(--border-4);padding:10px 0;}
.chl-version:first-child{padding-top:0;}
.chl-version:last-child{border-bottom:none;}
.chl-version-hdr{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.chl-version-num{font-size:13px;font-weight:700;color:var(--text-1);}
.chl-version-fecha{font-size:11px;color:var(--text-4);}
.chl-badge{font-size:9px;font-weight:700;letter-spacing:.3px;padding:2px 6px;border-radius:8px;margin-left:auto;}
.chl-badge-prod{background:#2e7d32;color:#fff;}
.chl-badge-prueba{background:#e65100;color:#fff;}
.chl-cambios{margin:0;padding-left:18px;color:var(--text-2);font-size:11px;line-height:1.6;}
.chl-copiar-uno{background:none;border:none;cursor:pointer;color:var(--text-4);font-size:11px;padding:1px 3px;flex-shrink:0;}
.chl-copiar-uno:hover{color:var(--text-1);}
.chl-filtros{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--border-4);background:var(--bg-panel-alt);}
.chl-periodo-btn{background:var(--bg-panel);border:1px solid var(--border-1);border-radius:10px;padding:2px 10px;font-size:10.5px;color:var(--text-2);cursor:pointer;}
.chl-periodo-btn:hover{background:var(--bg-panel-alt2);}
.chl-periodo-btn.active{background:#3d3d3d;border-color:#3d3d3d;color:#fff;font-weight:600;}
.chl-resumen{margin-left:auto;font-size:10.5px;color:var(--text-4);white-space:nowrap;}
.chl-total-historico{padding:5px 12px;font-size:10px;color:var(--text-4);font-style:italic;border-bottom:1px solid var(--border-4);background:var(--bg-panel-alt);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:4px 14px;border:1px solid #bbb;border-radius:2px;cursor:pointer;font-size:11px;font-family:inherit;}
.btn-primary{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;border-color:#2b2b2b;}
.btn-primary:hover{background:linear-gradient(180deg,#4d4d4d,#1f1f1f);}
.btn-secondary{background:linear-gradient(180deg,var(--bg-panel-alt3),#eaeaea);color:var(--text-2);border-color:#bbb;}
.btn-secondary:hover{background:linear-gradient(180deg,var(--bg-hover),var(--bg-hover-2));border-color:#90b4d8;}
.btn-danger{background:linear-gradient(180deg,#e05555,#c82020);color:#fff;border-color:#c82020;}
.btn-danger:hover{background:linear-gradient(180deg,#f06565,#d83030);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

/* PAGINACION */
.pager{display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--bg-panel-alt);border-top:1px solid var(--border-3);font-size:11px;}
.pager button{padding:1px 7px;border:1px solid #bbb;border-radius:2px;background:var(--bg-panel);color:var(--text-1);cursor:pointer;font-size:11px;}
.pager button:hover:not(:disabled){background:var(--bg-hover);border-color:#90b4d8;}
.pager button:disabled{opacity:0.4;cursor:default;}
.pager .pager-info{color:var(--text-4);margin:0 6px;}

/* LOADING SPINNER */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #ccc;border-top-color:#3d3d3d;border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* UTIL */
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-muted{color:var(--text-muted);}
.fw600{font-weight:600;}
.flex-1{flex:1;}
.nowrap{white-space:nowrap;}

/* SECTION TITLE — encabezado de sección estilo Form (fondo azul, uppercase) */
.section-title{background:#2b2b2b;color:#fff;padding:3px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;user-select:none;flex-shrink:0;}

/* FORM LINK — labels clickables estilo Form (Cliente:, Producto:) */
.form-link{color:var(--ink-accent);text-decoration:underline;cursor:pointer;}
.form-link:hover{color:#2b2b2b;}

/* BOTONES CON COLOR — Guardar=verde, Anular=amarillo (misma convención que PRIMATE Form) */
.tbtn.btn-success{background:linear-gradient(180deg,#3cb85a,#28a745);color:#fff;border-color:#1e7e34;}
.tbtn.btn-success:hover{background:linear-gradient(180deg,#4cc86a,#38b855);}
.tbtn.btn-warning{background:linear-gradient(180deg,#ffce3a,#e0a800);color:#333;border-color:#c69500;}
.tbtn.btn-warning:hover{background:linear-gradient(180deg,#ffd84a,#f0b800);}
.btn.btn-success{background:linear-gradient(180deg,#3cb85a,#28a745);color:#fff;border-color:#1e7e34;}
.btn.btn-success:hover{background:linear-gradient(180deg,#4cc86a,#38b855);}
.btn.btn-warning{background:linear-gradient(180deg,#ffce3a,#e0a800);color:#333;border-color:#c69500;}
.btn.btn-warning:hover{background:linear-gradient(180deg,#ffd84a,#f0b800);}

/* FORM SPLIT — contenedor de 2 columnas para cabecera de documentos */
.form-split{display:flex;flex-shrink:0;border-bottom:2px solid var(--border-2);}
.form-split-col{overflow:hidden;}
.form-split-col+.form-split-col{border-left:1px solid var(--border-4);}
.form-split-body{padding:6px 12px 10px;}

/* ACTION BAR inferior — barra de acciones al pie del formulario (estilo Form) */
.action-bar{background:var(--bg-hover);border-top:2px solid var(--border-2);padding:4px 8px;display:flex;gap:2px;flex-shrink:0;}

/* DOCWIN — ventana flotante estilo Windows sobre la lista (generico, todos los modulos) */
.docwin-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding-top:18px;}
.docwin{width:880px;height:88vh;max-width:95vw;max-height:92vh;min-width:520px;min-height:400px;display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev2);resize:both;overflow:hidden;}
.docwin-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:5px 10px;display:flex;align-items:center;justify-content:space-between;border-radius:3px 3px 0 0;flex-shrink:0;cursor:move;user-select:none;}
.docwin-header span{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.docwin-header button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1;padding:1px 4px;border-radius:2px;flex-shrink:0;}
.docwin-header button:hover{background:#c0392b;}
.docwin-body{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg-panel);color:var(--text-1);}
/* Aliases OT (compatibilidad hacia atras — OT migrado a docwin pero clases antiguas siguen) */
.ot-form-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding-top:18px;}
.ot-form-modal{width:1040px;max-width:95vw;max-height:92vh;min-width:520px;min-height:260px;display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev2);resize:both;overflow:hidden;}
.ot-form-modal-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:5px 10px;display:flex;align-items:center;justify-content:space-between;border-radius:3px 3px 0 0;flex-shrink:0;cursor:move;user-select:none;}
.ot-form-modal-header span{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ot-form-modal-header button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;line-height:1;padding:1px 4px;border-radius:2px;flex-shrink:0;}
.ot-form-modal-header button:hover{background:#c0392b;}
.ot-form-modal-body{display:flex;flex-direction:column;flex:1;overflow:hidden;background:var(--bg-panel);color:var(--text-1);}

/* ── TABLERO KANBAN v3 (OTKanban — layout dual comerciales + cierre) ──────── */

/* Wrapper principal — flex column con toolbar / board / statusbar */
.kb-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}

/* Toolbar del tablero */
.kb-toolbar{background:var(--bg-panel-alt2);border-bottom:1px solid var(--border-3);padding:4px 8px;display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;}
.kb-toolbar .tbtn{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1px solid var(--border-1);border-radius:2px;background:var(--bg-panel-alt3);cursor:pointer;font-size:11px;color:var(--text-2);height:24px;}
.kb-toolbar .tbtn:hover{background:var(--bg-chrome-3);border-color:#999;}
.kb-toolbar .tbtn.btn-primary{background:#3d3d3d;color:#fff;border-color:#2b2b2b;}
.kb-toolbar .tbtn.btn-primary:hover{background:#4d4d4d;}
.kb-toolbar .tbtn-sep{width:1px;background:var(--border-3);height:18px;margin:0 2px;}
/* Separador de GRUPO -- espacio en blanco mas ancho, sin linea, para
   marcar los 4 bloques logicos del toolbar (accion principal | busqueda
   y filtros | gestion de vista | comunicacion/sistema) solo con
   espaciado, sin agregar mas lineas -- pedido de simplificar el Tablero
   sin sacar ningun boton. */
.kb-toolbar .tbtn-sep-grupo{width:1px;background:transparent;margin:0 8px;}
.kb-toolbar input[type=text]{border:1px solid var(--border-1);border-radius:2px;padding:2px 6px;font-size:11px;height:24px;width:160px;background:var(--bg-panel);color:var(--text-1);outline:none;}
.kb-toolbar input[type=text]:focus{border-color:#888;}
.kb-toolbar select{border:1px solid var(--border-1);border-radius:2px;padding:2px 4px;font-size:11px;height:24px;background:var(--bg-panel);color:var(--text-1);cursor:pointer;}
.kb-toolbar label{font-size:11px;color:var(--text-3);}

/* Menu "Mas" de la toolbar -- agrupa Colapsar todos/Seleccionar/Canceladas
   (uso ocasional) para que la barra entre en un solo renglon. */
.kb-mas-pop{position:absolute;top:28px;right:0;min-width:150px;background:var(--bg-panel);border:1px solid #888;border-radius:3px;box-shadow:var(--shadow-elev1);z-index:400;padding:3px;}
.kb-mas-pop.hidden{display:none;}
.kb-mas-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:none;padding:5px 8px;font-size:11px;color:var(--text-1);cursor:pointer;border-radius:2px;}
.kb-mas-item:hover{background:var(--bg-chrome-3);}
.kb-mas-item i{width:13px;color:var(--text-3);}

/* Contenedor principal de las dos zonas */
.kb-board{display:flex;flex-direction:row;flex:1;overflow:hidden;}

/* Wrapper de cada zona (Comerciales / Estados) -- columna vertical: un
   titulo fijo arriba (.kb-zona-titulo) y la fila de columnas propiamente
   dicha abajo (.kb-zona-com/.kb-zona-cierre, sin cambios en como reparten
   sus propias columnas hijas). El wrapper es el que ahora recibe el ancho
   fijo al arrastrar el separador (ver __kbSepMouseDown/__kbSepCierreMouseDown)
   -- antes ese estilo inline iba directo en .kb-zona-com/.kb-zona-cierre. */
.kb-zona-wrap{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
#kbZonaComWrap{flex:1;}
/* flex-shrink:0 (intento anterior: flex:0 1 auto) todavia no alcanzaba --
   con flex-basis:auto (ancho segun contenido) el reparto de espacio
   negativo de flexbox termina siendo asimetrico contra ComWrap (que usa
   basis:0%): en la practica la zona de cierre seguia sin achicarse lo
   suficiente para que su propio overflow-x:auto (.kb-zona-cierre)
   llegara a activarse, y lo que no entraba se seguia cortando contra el
   overflow:hidden de .kb-board sin scroll (confirmado por el usuario
   2026-09-04 con Facturado cortado y sin poder scrollear). Ahora usa
   EXACTAMENTE el mismo flex que Comerciales (flex:1 = 1 1 0%) -- misma
   formula ya probada funcionando en esa zona. */
#kbZonaCierreWrap{flex:1;}
/* Con comerciales oculto, la zona de cierre pasa a ocupar todo el ancho
   libre en vez de quedar con su ancho compacto de siempre. */
.kb-zona-wrap.kb-zona-cierre-expandida{flex:1 1 auto;}

.kb-zona-titulo{flex-shrink:0;padding:3px 10px;font-size:10px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:.04em;}

/* Zona izquierda: columnas de comerciales, scroll horizontal */
.kb-zona-com{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 6px 10px 10px;flex:1;min-width:0;min-height:0;}
.kb-zona-com::-webkit-scrollbar{height:5px;}
.kb-zona-com::-webkit-scrollbar-track{background:#cecece;}
.kb-zona-com::-webkit-scrollbar-thumb{background:#b0b0b0;border-radius:3px;}
.kb-zona-com::-webkit-scrollbar-thumb:hover{background:#909090;}

/* Zona derecha: columnas de cierre -- mismo comportamiento que
   .kb-zona-com (scroll horizontal, columnas de ancho fijo): antes las
   columnas usaban flex-grow para repartirse el ancho de la zona, pero
   sin overflow-x quedaban cortadas sin ningun scroll para verlas cuando
   no entraban todas (bug real reportado por el usuario 2026-09-04, con
   la zona ademas "muy ancha" porque las 3-4 columnas visibles se
   estiraban para llenar todo el espacio libre). */
.kb-zona-cierre{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 10px 10px 4px;flex:1;min-width:0;min-height:0;}
.kb-zona-cierre::-webkit-scrollbar{height:5px;}
.kb-zona-cierre::-webkit-scrollbar-track{background:#cecece;}
.kb-zona-cierre::-webkit-scrollbar-thumb{background:#b0b0b0;border-radius:3px;}
.kb-zona-cierre::-webkit-scrollbar-thumb:hover{background:#909090;}

/* Separador vertical entre zonas */
.kb-sep{position:relative;width:1px;background:var(--border-1);align-self:stretch;flex-shrink:0;margin:10px 10px;}
/* Separador arrastrable: franja invisible mas ancha que el borde de 1px
   para que sea facil de agarrar con el mouse, sin correr el layout. */
.kb-sep-resize{cursor:col-resize;}
.kb-sep-resize::before{content:'';position:absolute;top:0;bottom:0;left:-5px;right:-5px;}
.kb-sep-resize:hover{background:#909090;}
.kb-sep-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:28px;border-radius:8px;border:1px solid #b0b0b0;background:var(--bg-panel-alt2);color:var(--text-4);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.kb-sep-toggle:hover{background:var(--bg-chrome-3);color:var(--text-1);}

/* Columna kanban base */
.kanban-col{background:var(--bg-panel-alt2);border:1px solid var(--border-3);border-radius:4px;flex-shrink:0;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.07);}

/* Columnas de comerciales */
.kanban-col.kcol-com{width:232px;min-width:232px;}
.kanban-col.colapsada{width:34px;min-width:34px;}
.kanban-col.colapsada .kcol-cards{display:none;}
.kanban-col.colapsada .kcol-header{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.5px;padding:10px 6px;min-height:80px;justify-content:flex-start;border-radius:3px;}

/* Columnas de zona cierre -- ancho fijo, igual que las de comerciales
   (kcol-com): la zona scrollea en vez de estirar las columnas. */
/* Cuadrillas.js -- panel de instalación */
#cqRosterPop.hidden{display:none;}
#cqHistPop.hidden{display:none;}
/* Trabajos Terminados por Cuadrilla -- botones bulk "Aprobar"/"Recargar a
   Cuadrilla" (ver PATCH_RecargarCuadrillaDesdeTerminados_v1.sql). Sin esta
   regla ".hidden" no ocultaba nada -- quedaban visibles siempre, incluso
   con 0 seleccionados (bug real detectado el 2026-08-28: en este proyecto
   ".hidden" no es generica, cada componente necesita su propia regla). */
#cqTermBtnRecargar.hidden, #cqTermBtnAprobar.hidden{display:none;}
/* Panel de personas del mapa de Ubicaciones -- filas ocultadas por el
   buscador (ver _filtrarUbicaciones en Cuadrillas.js). */
.cq-ubic-item.hidden{display:none;}
/* Trabajos Terminados por Cuadrilla -- fila clickeable (abre el modal de
   detalle, ver __cqTermVerDetalle en Cuadrillas.js). */
.cqterm-row:hover{background:var(--bg-hover);}
/* Cliente/Producto truncados con "..." en vez de estirar la fila -- el
   texto completo va en el title (tooltip) y en el modal de detalle. */
.cqterm-truncado{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.kanban-col.kcol-rechazado{width:200px;min-width:200px;}
.kanban-col.kcol-terminado{width:232px;min-width:232px;}
.kanban-col.kcol-entregado{width:200px;min-width:200px;}
.kanban-col.kcol-facturado{width:180px;min-width:180px;}

/* Cancelado: colapsada por default */
.kanban-col.kcol-cancelado{width:34px;min-width:34px;}
.kanban-col.kcol-cancelado .kcol-header{background:#5a5a5a;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.5px;padding:10px 6px;min-height:80px;justify-content:flex-start;border-radius:3px;cursor:pointer;}
.kanban-col.kcol-cancelado .kcol-header:hover{background:#666;}
.kanban-col.kcol-cancelado .kcol-cards{display:none;}
.kanban-col.kcol-cancelado.expandida{width:232px;min-width:232px;}
.kanban-col.kcol-cancelado.expandida .kcol-header{writing-mode:horizontal-tb;text-orientation:initial;padding:6px 10px;min-height:unset;justify-content:center;border-radius:3px 3px 0 0;}
.kanban-col.kcol-cancelado.expandida .kcol-cards{display:flex;}

/* Header de columna */
.kcol-header{padding:6px 10px;font-weight:600;font-size:11px;color:#fff;border-radius:3px 3px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;cursor:pointer;letter-spacing:.01em;user-select:none;}
.kcol-header:hover{filter:brightness(1.1);}
/* Mover columna de comercial a izq/der -- pedido de Anderson, para poder
   acomodar el orden de las columnas a su gusto (ver __kbMoverCom en
   OTKanban.js). Se guarda en localStorage, ya no se pierde al volver a
   entrar al Tablero. */
.kcol-mover{background:none;border:none;color:#fff;opacity:.55;cursor:pointer;padding:0 2px;font-size:11px;line-height:1;}
.kcol-mover:hover{opacity:1;}

/* Headers de comercial: grafito */
.kcol-com .kcol-header{background:#4a4a4a;cursor:pointer;}
.kcol-com .kcol-header:hover{background:#555;}

/* Headers de cierre */
.kcol-rechazado .kcol-header{background:#c62828;} /* "Rechazado" = Falta Información -- rojo distinto al de Reclamos */
.kcol-terminado .kcol-header{background:#3a7d44;}
.kcol-entregado .kcol-header{background:#a01818;} /* "Entregado" = Reclamos, en rojo */
.kcol-facturado .kcol-header{background:#1e6e35;}

/* Badge de count en header */
.kcol-count{background:rgba(255,255,255,.18);border-radius:10px;padding:0 6px;font-size:10px;font-weight:500;opacity:.9;}

/* Area scrollable de cards */
.kcol-cards{padding:6px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.kcol-cards.drop-allowed{background:#e4f0e6;outline:2px dashed #3a7d44;outline-offset:-3px;}
.kcol-cards.drop-blocked{background:#f5e8e8;}

/* ── TARJETA OT ── */
.ot-card{background:var(--bg-panel);border:1px solid var(--border-4);border-radius:3px;padding:9px 10px 8px 14px;cursor:pointer;font-size:11px;position:relative;transition:box-shadow .12s,border-color .12s;}
.ot-card:hover{border-color:#b0b0b0;box-shadow:0 2px 5px rgba(0,0,0,.09);}
/* Resaltado de teclado (Flechas en el Tablero) -- distinto del hover (que
   es pasajero, se va al sacar el mouse) y de la seleccion para Fusionar
   (que usa un checkbox propio, ver _htmlCheckboxSeleccion), asi no se
   confunden los tres estados entre si. */
.ot-card.kb-foco{outline:2px solid #1565c0;outline-offset:-1px;}
.ot-card.dragging{opacity:.42;border-style:dashed;}
.ot-card[draggable="false"]{cursor:default;opacity:.85;}
/* Alarma visual: verde = la cuadrilla esta trabajando ahora mismo (En
   curso), amarillo = arranco pero esta pausada, sin resaltar = todavia no
   inicio -- asi el jefe de produccion distingue los 3 estados de un
   vistazo (pedido del usuario). */
.ot-card.kc-iniciada{background:rgba(34,197,94,.22);border:1px solid rgba(22,163,74,.55);border-left:4px solid #16a34a;padding-left:10px;box-shadow:0 0 0 1px rgba(22,163,74,.18);}
.ot-card.kc-iniciada:hover{border-color:rgba(22,163,74,.55);border-left-color:#16a34a;box-shadow:0 2px 6px rgba(22,163,74,.28);}
.ot-card.kc-pausada{background:rgba(234,179,8,.22);border:1px solid rgba(202,138,4,.55);border-left:4px solid #ca8a04;padding-left:10px;box-shadow:0 0 0 1px rgba(202,138,4,.18);}
.ot-card.kc-pausada:hover{border-color:rgba(202,138,4,.55);border-left-color:#ca8a04;box-shadow:0 2px 6px rgba(202,138,4,.28);}
.ot-card.kc-reclamo{background:rgba(220,38,38,.14);border:1px solid rgba(160,24,24,.55);border-left:4px solid #a01818;padding-left:10px;box-shadow:0 0 0 1px rgba(160,24,24,.18);}
.ot-card.kc-reclamo:hover{border-color:rgba(160,24,24,.55);border-left-color:#a01818;box-shadow:0 2px 6px rgba(160,24,24,.28);}

/* Boton "quien inicio / historial" -- info complementaria de solo lectura
   sobre la tarjeta, junto al chip de estado (pedido del usuario). */
.cq-hist-btn{background:none;border:none;color:var(--text-faint);font-size:10px;padding:1px 3px;cursor:pointer;flex-shrink:0;}
.cq-hist-btn:hover{color:var(--text-1);}

/* Boton "Confirmar terminado" -- Jefe de Produccion/Admin cierran a mano
   el cronometro (trabajos de antes del sistema de marcacion, o que el
   operario nunca marco desde el celular). Pedido del usuario. */
.cq-confirmar-btn{background:none;border:none;color:#2e7d32;font-size:11px;padding:1px 3px;cursor:pointer;flex-shrink:0;}
.cq-confirmar-btn:hover{color:#1b5e20;}
.cq-pausar-btn{background:none;border:none;color:#e65100;font-size:11px;padding:1px 3px;cursor:pointer;flex-shrink:0;}
.cq-pausar-btn:hover{color:#bf360c;}

/* Aviso de comentario de chat sin leer, referenciado a esta OT puntual
   (pedido del usuario) -- arranca oculto, lo prende/apaga el poll de no
   leidos (ver _renderBadgesNoLeidos en Cuadrillas.js). */
.cq-badge-comentario{color:#e65100;font-size:10.5px;flex-shrink:0;animation:cqComentarioPulse 1.6s ease-in-out infinite;}
@keyframes cqComentarioPulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* Mismo aviso, en el Tablero de OTs (panel Actividad -- pedido del
   usuario, ver PATCH_ComentarioOTHistorialNoLeido_v1.sql). */
.kc-badge-comentario{color:#e65100;font-size:10.5px;flex-shrink:0;animation:cqComentarioPulse 1.6s ease-in-out infinite;}

/* Boton "Personal Libre" en modo alerta: en vez de un badge estatico,
   va mostrando el nombre de cada persona sin tarea, titilando, en loop
   -- para que se note sin tener que entrar a mirar (pedido del usuario,
   2026-09-01: "sino es lo mismo que entrar en rendimiento y ver"). */
.cq-personal-libre-alerta{color:#e65100;font-weight:700;animation:cqComentarioPulse 1.6s ease-in-out infinite;}

/* Numeros dentro de los pines del mapa de Recorrido de Moviles (Rpt
   RecorridoVehiculos.js) -- marca el orden de los 4 checkpoints. */
.rv-mapa-tt{background:transparent !important;border:none !important;box-shadow:none !important;color:#fff;font-weight:700;font-size:10px;}

/* Fila superior — padding-right reserva lugar para los botones flotantes
   (Abrir/Facturar/Reclamo, position:absolute arriba a la derecha) para que
   un numero de OT o nombre de comercial largo no quede tapado debajo. */
.kc-top{display:flex;align-items:center;gap:5px;margin-bottom:6px;padding-right:44px;}
.kc-boceto{width:100%;height:64px;object-fit:cover;border-radius:3px;margin-bottom:6px;display:block;border:1px solid var(--border-5);}
.kc-num{font-weight:800;color:var(--text-1);font-size:11.5px;letter-spacing:.02em;}
.kc-com-label{font-size:9px;color:var(--text-faint);font-style:italic;}
.kc-badges{display:flex;gap:3px;margin-left:auto;align-items:center;}

/* Avatar de iniciales */
.kc-avatar{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:0;opacity:.85;}

/* Miembros asignados (avatares apilados, estilo Trello) */
.kc-miem-row{display:flex;margin-left:auto;flex-shrink:0;}
.kc-avatar-miem{margin-left:-5px;border:1.5px solid var(--bg-panel);}

/* Identidad — Nro OT + Cliente + Trabajo, los 3 en negrita para que la
   tarjeta se lea de un vistazo (pedido explicito del usuario) */
.kc-client{font-weight:800;font-size:12.5px;color:var(--text-1);margin-bottom:2px;line-height:1.3;}
.kc-producto{font-weight:700;font-size:10.5px;color:var(--text-2);font-style:normal;margin-bottom:4px;}
.kc-desc{color:var(--text-4);font-size:10px;line-height:1.4;margin-bottom:6px;}
/* En oscuro, texto blanco+negrita a pleno queda muy fuerte — se afloja el peso */
:root[data-theme="dark"] .kc-num{font-weight:600;}
:root[data-theme="dark"] .kc-client{font-weight:600;}
:root[data-theme="java-oscuro"] .kc-num{font-weight:600;}
:root[data-theme="java-oscuro"] .kc-client{font-weight:600;}
:root[data-theme="dark"] .kc-producto{font-weight:500;}

/* Barra PROM */
.kc-prom{margin-bottom:5px;}
.kc-prom-top{display:flex;justify-content:space-between;font-size:9px;color:var(--text-faint);margin-bottom:3px;}
.kc-prom-bar{height:3px;background:var(--border-5);border-radius:2px;overflow:hidden;}
.kc-prom-fill{height:100%;border-radius:2px;transition:width .3s;}
.kc-prom-fill.pct-low{background:#c05050;}
.kc-prom-fill.pct-mid{background:#c47020;}
.kc-prom-fill.pct-high{background:#3a7d44;}

/* Fila inferior */
.kc-bottom{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.kc-date{font-size:9px;color:#bbb;}
.kc-date.vencida{color:#b94040;font-weight:600;}
.kc-date.proxima{color:#e65100;font-weight:600;}
.kc-ubi{color:#1565c0;font-size:11px;line-height:1;text-decoration:none;flex-shrink:0;}
.kc-ubi:hover{color:#0d47a1;}
.kc-taller-sel{display:flex;align-items:center;gap:4px;margin-top:6px;padding-top:6px;border-top:1px dashed #ddd;}
.kc-taller-sel select{flex:1;min-width:0;font-size:9.5px;border:1px solid #d8c5a8;border-radius:2px;background:#fbf5ec;color:#6d4c1f;padding:1px 3px;}
.kc-taller-sel select:disabled{opacity:.65;}
.kc-encurso-nombres{font-size:9.5px;color:#8a6d00;margin-top:3px;display:flex;align-items:center;gap:4px;}
/* Boton "info" consolidado de la tarjeta -- reemplaza los badges sueltos
   de impreso/materiales listos/cuadrilla/taller/anticipo (pedido de
   simplificacion del usuario, ver _htmlInfoBtn en OTKanban.js). Las
   etiquetas (kc-etq-row) NO forman parte de esto, siguen siempre visibles. */
.kc-info-btn{background:none;border:none;padding:0;margin:0;color:#1565c0;font-size:11px;line-height:1;flex-shrink:0;cursor:pointer;}
.kc-info-btn:hover{color:#0d47a1;}
.kc-info-pop-body{padding:8px 10px;display:flex;flex-direction:column;gap:7px;max-width:280px;}
.kc-info-pop-item{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--text-1);line-height:1.35;}
.kc-info-pop-item i{font-size:10px;margin-top:2px;flex-shrink:0;color:#1565c0;}
.kc-info-pop-item.kc-info-pop-warn{color:#a67c00;}
.kc-info-pop-item.kc-info-pop-warn i{color:#a67c00;}

/* Boton abrir OT */
.kc-abrir-btn{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:2px;color:#bbb;font-size:10px;opacity:0;transition:opacity .15s;line-height:1;}
.ot-card:hover .kc-abrir-btn{opacity:1;}
.kc-abrir-btn:hover{background:var(--bg-chrome-3);color:var(--text-2);}
.kc-facturar-btn{right:46px;opacity:1;background:linear-gradient(180deg,#3cb85a,#28a745);border:1px solid #1e7e34;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:3px 5px;border-radius:3px;}
.kc-facturar-btn:hover{background:linear-gradient(180deg,#4cc86a,#38b855);color:#fff;}
.kc-comentar-btn{opacity:1;background:rgba(21,101,192,.14);color:#1565c0;border:1px solid rgba(21,101,192,.3);border-radius:3px;padding:3px 5px;}
.kc-comentar-btn:hover{background:rgba(21,101,192,.26);color:#0d47a1;}
/* Chat interno del Tablero -- posicion propia (right:26px) para no pisar
   "Abrir OT" (right:6px, comparten esquina superior derecha de la tarjeta).
   Siempre visible (opacity:1, no depende del hover de la tarjeta como
   "Abrir OT") para que se note que la OT se puede compartir al chat. */
.kc-chat-btn{right:26px;opacity:1;background:rgba(21,101,192,.14);color:#1565c0;border:1px solid rgba(21,101,192,.3);border-radius:3px;padding:3px 5px;}
.kc-chat-btn:hover{background:#1565c0;color:#fff;}
.kc-reclamo-btn{right:46px;opacity:1;background:linear-gradient(180deg,#e05555,#a01818);border:1px solid #7a1212;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:3px 5px;border-radius:3px;cursor:help;}
.kc-reclamo-btn:hover{background:linear-gradient(180deg,#f06565,#b82020);color:#fff;}
.kc-rechazo-btn{right:46px;opacity:1;background:linear-gradient(180deg,#e57373,#c62828);border:1px solid #9a1f1f;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:3px 5px;border-radius:3px;cursor:help;}
.kc-rechazo-btn:hover{background:linear-gradient(180deg,#ef8383,#d43535);color:#fff;}

.vt-pres-badge{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:1px 4px;margin-left:4px;border-radius:2px;color:#1565c0;font-size:10px;vertical-align:middle;}
.vt-pres-badge:hover{background:#e3edfa;}
.vt-popover-pres{position:fixed;width:230px;background:var(--bg-panel);border:1px solid #888;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.35);z-index:2000;font-family:'Segoe UI',sans-serif;}

/* Checkbox de seleccion (modo "Fusionar tarjetas") */
.kc-sel-check{position:absolute;top:6px;left:6px;width:16px;height:16px;cursor:pointer;z-index:2;}
.kc-sel-check input{width:16px;height:16px;cursor:pointer;margin:0;}

/* Tarjeta agrupada (varias OTs del mismo Presupuesto) */
.ot-card-grupo{background:var(--bg-panel-alt3,var(--bg-panel));}
.kc-grupo-badge{display:inline-block;font-size:9px;font-weight:700;color:#6a1b9a;background:#f3e5f5;border-radius:3px;padding:1px 6px;margin-bottom:5px;}
.kc-grupo-lista{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;border-top:1px dashed var(--border-5);border-bottom:1px dashed var(--border-5);padding:4px 0;}
.kc-grupo-item{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--text-3);padding:1px 2px;border-radius:2px;cursor:pointer;}
.kc-grupo-item:hover{background:var(--bg-chrome-3);}
.kc-grupo-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.kc-grupo-item-num{font-weight:700;color:var(--text-2);flex-shrink:0;}
.kc-grupo-item-desc{color:var(--text-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Estado de instalacion (Cuadrillas -- vista del Jefe de Produccion: que
   trabajos ya arrancaron, cuales estan pausados, cuales terminaron. Es un
   eje distinto al Estado de negocio de la OT -- viene de OTCuadrillaTiempo). */
.kc-inst-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:8.5px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.kc-inst-chip.kc-inst-Pendiente{background:#e2e3e5;color:#5a5f66;}
.kc-inst-chip.kc-inst-EnCurso{background:#d0e8f8;color:#0c4a7a;}
.kc-inst-chip.kc-inst-Pausado{background:#ffe5cc;color:#8a3800;}
.kc-inst-chip.kc-inst-Terminado{background:#d4edda;color:#155724;}
.kc-grupo-item-inst{flex-shrink:0;font-size:9px;}
.kc-grupo-item-inst.kc-inst-Pendiente{color:#9aa0a6;}
.kc-grupo-item-inst.kc-inst-EnCurso{color:#0c6dd8;}
.kc-grupo-item-inst.kc-inst-Pausado{color:#c56a00;}
.kc-grupo-item-inst.kc-inst-Terminado{color:#1e8a3e;}
.kc-grupo-item-cuad{flex-shrink:0;max-width:62px;font-size:8.5px;border:1px solid var(--border-2);border-radius:2px;background:var(--bg-panel);color:var(--text-2);padding:0 1px;height:15px;}
.kc-grupo-item-cuad:disabled{opacity:.5;}
.kc-inst-resumen{display:flex;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.kc-inst-resumen span{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;}
.kc-inst-resumen .kc-inst-Pendiente{color:#9aa0a6;}
.kc-inst-resumen .kc-inst-EnCurso{color:#0c6dd8;}
.kc-inst-resumen .kc-inst-Pausado{color:#c56a00;}
.kc-inst-resumen .kc-inst-Terminado{color:#1e8a3e;}
.kcol-inst-resumen{display:flex;gap:10px;padding:3px 10px;font-size:9.5px;background:rgba(0,0,0,.14);flex-shrink:0;}
.kcol-inst-resumen span{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:rgba(255,255,255,.92);}

/* Badges de tarjeta del Tablero (b-urgente/b-parcial/b-vallado/b-cancelada
   -- hoy sin uso en ningun modulo, se dejan tal cual por si se retoman).
   OJO: este bloque redeclaraba ".badge" con otro tamaño (8.5px/5px en vez
   del 10px/6px de la definicion real en la seccion "BADGES" mas arriba)
   -- por orden de cascada esta segunda definicion le ganaba a la
   primera y la pisaba en TODO el sistema (los badgeEstado() de los 14
   modulos que la usan). Sacada la redeclaracion; los .b-* quedan sin base
   propia hasta que alguien los use de nuevo. */
.b-urgente{background:#fdf0f0;color:#b94040;border:1px solid #f0cccc;}
.b-parcial{background:#fdf8ee;color:#8a6800;border:1px solid #edd890;}
.b-vallado{background:#f2f0fa;color:#5a40a0;border:1px solid #d0c8ee;}
.b-cancelada{background:#f5f5f5;color:#999;border:1px solid #ddd;}

/* Toast de bloqueo de drag */
.kb-toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);background:#2b2b2b;color:#fff;padding:7px 18px;border-radius:4px;font-size:12px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .2s;z-index:9999;white-space:nowrap;}
.kb-toast.visible{opacity:1;}

/* Status bar del modulo */
.kb-statusbar{background:linear-gradient(180deg,var(--bg-chrome-3),var(--bg-chrome-2));border-top:1px solid var(--border-1);height:22px;display:flex;align-items:center;padding:0 8px;gap:16px;font-size:11px;color:var(--text-3);flex-shrink:0;}
.kb-sb-sep{width:1px;height:14px;background:#bbb;}

/* ── Correo (bandeja de entrada) ── */
.co-item:hover{background:var(--bg-panel-alt2);}
.co-item-sel{background:var(--bg-panel-alt2);border-left:3px solid #3d3d3d;}
.co-item-nuevo{background:rgba(46,125,50,0.05);}
.co-buzon-item{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11.5px;color:var(--text-2);cursor:pointer;border-left:3px solid transparent;}
.co-buzon-item:hover{background:var(--bg-panel-alt2);}
.co-buzon-item-sel{background:var(--bg-panel-alt2);color:var(--text-1);font-weight:700;border-left:3px solid #3d3d3d;}
.co-buzon-item i{color:var(--text-4);flex-shrink:0;}
.co-buzon-item-sel i{color:var(--text-1);}
.co-buzon-cant{background:#2e7d32;color:#fff;font-size:9.5px;font-weight:700;border-radius:8px;padding:1px 6px;flex-shrink:0;}
.co-buzon-agregar{color:var(--text-4);font-style:italic;}
.co-sidebar-label{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:.03em;padding:12px 10px 4px;}
.co-sidebar-label button{background:none;border:none;color:var(--text-4);cursor:pointer;font-size:11px;padding:0 2px;}
.co-sidebar-label button:hover{color:var(--text-1);}

/* ── MODAL DETALLE OT (docwin completo) ── */
.kb-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;z-index:8000;padding-top:18px;}
.kb-modal-overlay.hidden{display:none;}
.kb-docwin{position:relative;width:960px;max-width:98vw;max-height:92vh;display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev2);overflow:hidden;font-size:11px;color:var(--text-1);}
.kb-dw-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:5px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.kb-dw-header span{font-size:12px;font-weight:600;}
.kb-dw-header .kb-dw-hx{background:none;border:none;color:#ccc;cursor:pointer;font-size:15px;padding:1px 5px;border-radius:2px;line-height:1;}
.kb-dw-header .kb-dw-hx:hover{background:#c0392b;color:#fff;}
.kb-dw-header .kb-dw-hot{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1px solid #888;border-radius:2px;background:#4a4a4a;color:#fff;cursor:pointer;font-size:11px;height:22px;white-space:nowrap;}
.kb-dw-header .kb-dw-hot:hover{background:#555;}
.kb-dw-header-btns{display:flex;align-items:center;gap:6px;}
.kb-dw-body{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.kb-dw-info{display:flex;border-bottom:2px solid var(--border-3);flex-shrink:0;flex-wrap:wrap;}
.kb-dw-info-col{flex:1;min-width:200px;padding:5px 12px 6px;border-right:1px solid var(--border-4);}
.kb-dw-info-col:last-child{border-right:none;}
.kb-dw-info-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:3px;}
.kb-dw-info-label{font-size:11px;color:var(--text-4);min-width:80px;text-align:right;flex-shrink:0;padding-top:1px;}
.kb-dw-info-val{font-size:11px;color:var(--text-1);font-weight:600;flex:1;}
.kb-dw-info-val.muted{font-weight:400;color:var(--text-3);}
.kb-dw-info-val a{color:#1565c0;text-decoration:none;}
.kb-dw-info-val a:hover{text-decoration:underline;}

/* Preview de foto (boceto) de la OT enfocada — solo tarjetas agrupadas */
.kb-dw-preview-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 10px 6px;}
.kb-dw-preview{display:flex;align-items:center;gap:4px;}
.kb-dw-preview-nav{background:none;border:1px solid var(--border-4);border-radius:3px;color:var(--text-3);width:22px;height:96px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;}
.kb-dw-preview-nav:hover:not(:disabled){background:var(--bg-chrome-3);color:var(--text-1);}
.kb-dw-preview-nav:disabled{opacity:.3;cursor:default;}
.kb-dw-preview-img-wrap{width:150px;height:96px;border:1px solid var(--border-4);border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-panel-alt3);cursor:pointer;flex-shrink:0;}
.kb-dw-preview-img-wrap img{width:100%;height:100%;object-fit:cover;}
.kb-dw-preview-placeholder{color:var(--text-faint);font-size:28px;}
.kb-dw-preview-label{font-size:9px;font-weight:700;color:var(--text-3);white-space:nowrap;}
.kb-dw-ubi-edit{background:none;border:none;cursor:pointer;color:var(--text-faint);padding:0 3px;flex-shrink:0;}
.kb-dw-ubi-edit:hover{color:var(--text-2);}
/* Content row: main area + history sidebar */
.kb-dw-content-row{display:flex;flex-direction:row;flex:1;overflow:hidden;}
.kb-dw-main{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0;}
.kb-grupo-pills{display:flex;flex-wrap:wrap;gap:4px;padding:5px 8px;background:#f6eef8;border-bottom:1px solid #d8b8de;flex-shrink:0;max-height:80px;overflow-y:auto;}
.kb-grupo-pill{display:inline-flex;align-items:center;border:1px solid #c99bd1;background:#fff;color:#4a148c;border-radius:10px;padding:2px 9px;font-size:10px;font-weight:400;cursor:pointer;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;transition:background .12s,border-color .12s,color .12s;}
.kb-grupo-pill:hover{background:#f3e5f5;border-color:#a855c9;}
.kb-grupo-pill.active{background:linear-gradient(180deg,#8e24aa,#6a1b9a);color:#fff;border-color:#6a1b9a;font-weight:600;}
.kb-grupo-pill-x{display:inline-block;margin-left:5px;opacity:.6;cursor:pointer;flex-shrink:0;}
.kb-grupo-pill-x:hover{opacity:1;}
/* Estas pills tienen su propio acento de marca (violeta = "grupo
   fusionado") a proposito hardcodeado, igual que otros acentos de color
   del sistema -- pero los temas OSCUROS si necesitan su propia paleta,
   sino queda un recuadro blanco/lila brillante en medio de una UI oscura. */
:root[data-theme="dark"] .kb-grupo-pills, :root[data-theme="java-oscuro"] .kb-grupo-pills{background:#2e1f38;border-bottom-color:#4a2f5c;}
:root[data-theme="dark"] .kb-grupo-pill, :root[data-theme="java-oscuro"] .kb-grupo-pill{background:#3a2748;border-color:#5c3d70;color:#dbb8ec;}
:root[data-theme="dark"] .kb-grupo-pill:hover, :root[data-theme="java-oscuro"] .kb-grupo-pill:hover{background:#4a3258;border-color:#8452a0;}
:root[data-theme="dark"] .kb-grupo-pill.active, :root[data-theme="java-oscuro"] .kb-grupo-pill.active{background:linear-gradient(180deg,#9c4dcc,#7b2fa6);color:#fff;border-color:#9c4dcc;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.kb-dw-tabs{display:flex;border-bottom:2px solid #3d3d3d;padding:0 8px;background:var(--bg-panel-alt);flex-shrink:0;}
.kb-ftab{padding:4px 13px;border:1px solid var(--border-2);border-bottom:none;border-radius:3px 3px 0 0;background:var(--bg-chrome-1);cursor:pointer;font-size:11px;color:var(--text-3);margin-right:2px;margin-top:4px;}
.kb-ftab.active{background:#3d3d3d;color:#fff;border-color:#3d3d3d;}
.kb-ftab:hover:not(.active){background:var(--bg-chrome-3);}
.kb-dw-scroll{flex:1;overflow:auto;padding:8px;background:var(--bg-panel);}
/* History sidebar */
.kb-dw-hist-sidebar{width:230px;flex-shrink:0;border-left:1px solid var(--border-3);display:flex;flex-direction:column;background:var(--bg-panel-alt);overflow:hidden;}
.kb-dw-hist-sb-title{padding:6px 10px 5px;background:var(--bg-chrome-3);border-bottom:1px solid var(--border-3);font-size:11px;font-weight:700;color:var(--ink-accent);display:flex;align-items:center;gap:6px;flex-shrink:0;}
.kb-dw-hist-sb-body{flex:1;overflow-y:auto;padding:4px 8px;}
/* Groupbox dentro del docwin */
.kb-gb{border:1px solid var(--border-2);border-radius:3px;margin-bottom:8px;}
.kb-gb-title{background:linear-gradient(180deg,var(--bg-chrome-3),var(--bg-chrome-2));padding:3px 10px;font-weight:600;font-size:11px;color:var(--text-1);border-bottom:1px solid var(--border-2);display:flex;align-items:center;justify-content:space-between;}
.kb-gb-body{padding:7px 10px;background:var(--bg-panel);}
/* Badge proceso activo en la tarjeta */
.kc-proceso{display:inline-flex;align-items:center;gap:3px;font-size:9px;padding:1px 6px 1px 5px;border-radius:2px;background:#e8f1fd;color:#1a5fa0;border:1px solid #b4d0f5;font-weight:700;white-space:nowrap;margin-bottom:4px;}
.kc-proceso.completo{background:#eef7ee;color:#2e7d32;border-color:#a5d6a7;}
/* Plantilla row */
.kb-prom-tpl-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.kb-prom-tpl-label{font-size:11px;color:var(--text-3);white-space:nowrap;flex-shrink:0;}
.kb-prom-tpl-select{border:1px solid #bbb;border-radius:2px;padding:2px 6px;font-size:11px;background:var(--bg-panel);color:var(--text-1);cursor:pointer;height:26px;}
.kb-prom-tpl-btn{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border:1px solid #b8b8b8;border-radius:2px;background:linear-gradient(180deg,var(--bg-panel-alt3),#eaeaea);cursor:pointer;font-size:11px;color:var(--text-1);height:26px;}
.kb-prom-tpl-btn:hover{background:linear-gradient(180deg,var(--bg-chrome-3),#d8d8d8);border-color:#888;}
/* Barra de progreso global del PROM */
.kb-prom-fraccion{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-bottom:3px;}
.kb-prom-prog-bar{height:6px;background:var(--border-4);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.kb-prom-prog-fill{height:100%;border-radius:3px;background:#3a7d44;transition:width .3s;}
/* Categoria (proceso) */
.kb-prom-cat{border:1px solid var(--border-4);border-radius:3px;margin-bottom:5px;overflow:hidden;}
.kb-prom-cat-hdr{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg-panel-alt);border-bottom:1px solid var(--border-4);cursor:pointer;user-select:none;}
.kb-prom-cat-hdr:hover{background:var(--bg-chrome-3);}
.kb-prom-cat-toggle{font-size:8px;color:var(--text-muted);width:10px;flex-shrink:0;text-align:center;}
.kb-prom-cat-name{font-weight:700;font-size:11px;color:var(--text-1);flex:1;text-transform:uppercase;letter-spacing:.02em;}
.kb-prom-cat-count{font-size:10px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;}
.kb-prom-cat-minibar{width:52px;height:4px;background:var(--border-4);border-radius:2px;overflow:hidden;flex-shrink:0;}
.kb-prom-cat-minifill{height:100%;border-radius:2px;transition:width .2s;}
.kb-prom-cat-minifill.pct-low{background:#c05050;}
.kb-prom-cat-minifill.pct-mid{background:#c47020;}
.kb-prom-cat-minifill.pct-high{background:#3a7d44;}
.kb-prom-cat-del{background:none;border:none;cursor:pointer;color:#ccc;font-size:11px;padding:1px 3px;border-radius:2px;flex-shrink:0;line-height:1;}
.kb-prom-cat-del:hover{color:#b94040;background:#ffeaea;}
.kb-prom-cat-body{padding:4px 8px 6px;}
.kb-prom-cat-body.colapsada{display:none;}
/* Items dentro de categoria */
.kb-prom-item{display:flex;align-items:center;gap:6px;padding:4px 2px;border-bottom:1px solid var(--border-5);font-size:11px;min-height:26px;}
.kb-prom-item:last-child{border-bottom:none;}
.kb-prom-item input[type=checkbox]{cursor:pointer;width:13px;height:13px;flex-shrink:0;}
.kb-prom-item .pi-txt{flex:1;line-height:1.35;word-break:break-word;color:var(--text-2);}
.kb-prom-item .pi-txt.done{color:var(--text-faint);text-decoration:line-through;}
.kb-prom-item .pi-del{background:none;border:1px solid transparent;border-radius:2px;cursor:pointer;color:#bbb;padding:1px 3px;font-size:10px;opacity:0;transition:opacity .1s;flex-shrink:0;}
.kb-prom-item:hover .pi-del{opacity:1;}
.kb-prom-item .pi-del:hover{background:#ffeaea;border-color:#f0c0c0;color:#b94040;}
/* Fila agregar paso dentro de categoria */
.kb-prom-cat-add-row{display:flex;gap:4px;margin-top:5px;align-items:center;}
.kb-prom-cat-add-inp{flex:1;border:1px solid #bbb;border-radius:2px;padding:2px 6px;font-size:11px;font-family:inherit;outline:none;height:24px;background:var(--bg-panel);color:var(--text-1);}
.kb-prom-cat-add-inp:focus{border-color:#3d3d3d;}
.kb-prom-cat-add-btn{display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border:1px solid #b8b8b8;border-radius:2px;background:linear-gradient(180deg,var(--bg-panel-alt3),#eaeaea);cursor:pointer;font-size:10px;color:var(--text-1);height:24px;white-space:nowrap;}
.kb-prom-cat-add-btn:hover{background:linear-gradient(180deg,var(--bg-chrome-3),#d8d8d8);}
/* Fila nueva categoria */
.kb-prom-nueva-cat-row{display:flex;gap:4px;margin-top:10px;padding-top:8px;border-top:2px dashed #ddd;align-items:center;}
.kb-prom-nueva-cat-inp{flex:1;border:1px solid #bbb;border-radius:2px;padding:3px 7px;font-size:11px;font-family:inherit;outline:none;height:26px;background:var(--bg-panel);color:var(--text-1);}
.kb-prom-nueva-cat-inp:focus{border-color:#3d3d3d;}
.kb-prom-nueva-cat-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid #3a7d44;border-radius:2px;background:linear-gradient(180deg,#4caf50,#3a7d44);color:#fff;cursor:pointer;font-size:11px;height:26px;white-space:nowrap;}
.kb-prom-nueva-cat-btn:hover{background:linear-gradient(180deg,#3a7d44,#2a5f32);}

/* ── Badges de proceso en tarjetas (actualizan en vivo) ──────── */
.kc-proc-badges{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0 1px;}
.kc-proc-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;padding:1px 5px;border-radius:2px;border:1px solid #ddd;white-space:nowrap;line-height:1.4;}
.kc-proc-badge.done{background:#eef7ee;color:#2e7d32;border-color:#a5d6a7;}
.kc-proc-badge.active{background:#e8f1fd;color:#1a5fa0;border-color:#b4d0f5;font-weight:700;}
.kc-proc-badge.pending{background:#f5f5f5;color:#aaa;border-color:#e0e0e0;}

/* ── Etiquetas: chips en la tarjeta ──────────────────────────── */
.kc-etq-row{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 5px;}
.kc-etq{display:inline-flex;align-items:center;font-size:9px;font-weight:700;color:#fff;padding:2px 7px;border-radius:3px;line-height:1.3;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.25);}

/* ── Etiquetas: popover de asignacion/edicion (docwin) ─────────── */
/* position/top/left/max-height se fijan por JS (ver _posicionarPopover en
   OTKanban.js) con position:fixed -- el docwin tiene overflow:hidden (lo
   necesita para su layout flex-column) y con position:absolute el popover
   quedaba recortado por ese overflow apenas la lista+form de edicion no
   entraban en el espacio restante del docwin, sin forma de scrollear para
   ver el resto. Con fixed, el popover se posiciona relativo al viewport y
   ya no lo recorta ningun ancestro. */
.kb-etq-popover{position:fixed;width:280px;overflow-y:auto;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev1);z-index:8100;font-size:11px;color:var(--text-1);}
.kb-etq-popover.hidden{display:none;}
.kb-etq-pop-hdr{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;font-weight:600;font-size:11px;}
.kb-etq-pop-x{background:none;border:none;color:#ccc;cursor:pointer;font-size:14px;line-height:1;padding:0 3px;}
.kb-etq-pop-x:hover{color:#fff;}
.kb-etq-pop-search{margin:8px 10px 4px;width:calc(100% - 20px);}
.kb-etq-pop-list{padding:2px 8px;}
.kb-etq-pop-item{display:flex;align-items:center;gap:4px;padding:3px 0;}
.kb-etq-pop-check{flex:1;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;cursor:pointer;color:#fff;font-weight:600;min-height:22px;text-shadow:0 1px 1px rgba(0,0,0,.25);}
.kb-etq-pop-check input{cursor:pointer;}
.kb-etq-pop-edit{background:var(--bg-chrome-3);border:1px solid var(--border-2);border-radius:3px;cursor:pointer;color:var(--text-3);width:26px;height:26px;flex-shrink:0;}
.kb-etq-pop-edit:hover{background:var(--bg-chrome-2);}
.kb-etq-pop-nueva{display:flex;align-items:center;gap:5px;width:calc(100% - 20px);margin:6px 10px 10px;padding:5px 8px;border:1px solid #bbb;border-radius:3px;background:var(--bg-panel-alt);cursor:pointer;font-size:11px;color:var(--text-2);}
.kb-etq-pop-nueva:hover{background:var(--bg-chrome-3);}
.kb-etq-edit-box{padding:8px 10px;border-top:1px dashed #ddd;margin:2px 0;}
.kb-etq-edit-preview{height:30px;border-radius:3px;margin-bottom:8px;}
.kb-etq-edit-box .form-input{margin-bottom:8px;}
.kb-etq-edit-swatches{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.kb-etq-swatch{width:22px;height:22px;border-radius:3px;cursor:pointer;border:2px solid transparent;}
.kb-etq-swatch.selected{border-color:var(--text-1);}
.kb-etq-edit-btns{display:flex;gap:6px;flex-wrap:wrap;}

/* ── Historial tab ───────────────────────────────────────────── */
.kb-hist-list{display:flex;flex-direction:column;padding:4px 0;}
.kb-hist-item{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-5);align-items:flex-start;}
.kb-hist-item:last-child{border-bottom:none;}
.kb-hist-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:10px;margin-top:1px;}
.kb-hist-ico.ev-cat-add{background:#6a8fc8;}
.kb-hist-ico.ev-cat-del,.kb-hist-ico.ev-item-del,.kb-hist-ico.ev-arch-del{background:#c87878;}
.kb-hist-ico.ev-item-add{background:#5a9870;}
.kb-hist-ico.ev-item-ok{background:#4caf50;}
.kb-hist-ico.ev-item-pend{background:#aaa;}
.kb-hist-ico.ev-tpl{background:#9070c8;}
.kb-hist-ico.ev-arch-add{background:#c88050;}
.kb-hist-ico.ev-fusion{background:#4a148c;}
.kb-hist-ico.ev-default{background:#999;}
.kb-hist-body{flex:1;min-width:0;}
.kb-hist-desc{font-size:11px;color:var(--text-2);line-height:1.4;}
.kb-hist-meta{font-size:10px;color:var(--text-faint);margin-top:2px;}
.kb-hist-empty{color:#bbb;font-size:11px;font-style:italic;text-align:center;padding:24px 0;}

/* ── Comentarios como burbujas de chat (WhatsApp-style) ──────── */
.kb-chat-msg{display:flex;align-items:flex-end;gap:6px;margin:10px 0;}
.kb-chat-msg.own{flex-direction:row-reverse;}
.kb-chat-avatar{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;}
.kb-chat-bubble{max-width:78%;background:var(--bg-panel);border:1px solid var(--border-4);border-radius:12px 12px 12px 3px;padding:6px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.kb-chat-msg.own .kb-chat-bubble{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);border-color:#2b2b2b;border-radius:12px 12px 3px 12px;color:#fff;}
.kb-chat-autor{font-size:9.5px;font-weight:700;color:#2c64a8;margin-bottom:2px;}
.kb-chat-texto{font-size:11.5px;line-height:1.4;color:inherit;white-space:pre-wrap;word-break:break-word;}
.kb-chat-hora{font-size:9px;color:var(--text-faint);text-align:right;margin-top:2px;}
.kb-chat-msg.own .kb-chat-hora{color:#bbb;}

/* ── Caja para escribir comentarios, debajo del historial ────── */
.kb-dw-coment-box{flex-shrink:0;border-top:1px solid var(--border-3);padding:8px;background:var(--bg-panel);}
.kb-dw-coment-box textarea{width:100%;resize:vertical;font-size:11px;font-family:inherit;}

/* ── Trazabilidad timeline ───────────────────────────────────── */
.kb-traz-timeline{padding:4px 0 8px;}
.kb-traz-item{display:flex;gap:0;align-items:flex-start;margin-bottom:0;}
.kb-traz-line-wrap{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0;}
.kb-traz-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0;z-index:1;}
.kb-traz-connector{width:2px;background:var(--border-4);flex:1;min-height:10px;}
.kb-traz-body{flex:1;padding:2px 0 12px 8px;}
.kb-traz-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;line-height:1.4;}
.kb-traz-desc{font-size:11px;color:var(--text-2);line-height:1.4;margin-top:1px;}
.kb-traz-meta{font-size:10px;color:var(--text-faint);margin-top:2px;}
.kb-traz-monto{display:inline-block;margin-left:6px;background:#e8f5e9;color:#2e7d32;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700;}

/* ── Archivos tab ────────────────────────────────────────────── */
.kb-arch-upload{border:2px dashed #ccc;border-radius:4px;padding:18px 12px;text-align:center;cursor:pointer;color:var(--text-faint);font-size:11px;transition:border-color .15s,background .15s;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.kb-arch-upload:hover,.kb-arch-upload.drag-over{border-color:#6a8fc8;background:#f4f7fd;color:#3d3d3d;}
.kb-arch-upload i{font-size:22px;margin-bottom:2px;}
.kb-arch-upload .arch-hint{font-size:10px;color:#bbb;}
.kb-arch-list{display:flex;flex-direction:column;gap:4px;}
.kb-arch-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border-5);border-radius:3px;background:var(--bg-panel-alt3);}
.kb-arch-item:hover{background:var(--bg-chrome-3);}
.kb-arch-ico{width:28px;height:28px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.kb-arch-ico.img{background:#fff3e0;color:#e65100;}
.kb-arch-ico.pdf{background:#fce4ec;color:#c62828;}
.kb-arch-ico.doc{background:#e3f2fd;color:#1565c0;}
.kb-arch-ico.gen{background:#f3e5f5;color:#6a1b9a;}
.kb-arch-thumb{width:28px;height:28px;border-radius:3px;object-fit:cover;flex-shrink:0;border:1px solid #ddd;cursor:pointer;}
.kb-arch-body{flex:1;min-width:0;}
.kb-arch-name{font-size:11px;color:var(--text-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kb-arch-rename-inp{width:100%;font-size:11px;font-weight:600;color:var(--text-2);border:1px solid #3d3d3d;border-radius:2px;padding:1px 4px;font-family:inherit;background:var(--bg-panel);}
.kb-arch-meta{font-size:10px;color:var(--text-faint);margin-top:1px;}
.kb-arch-btns{display:flex;gap:4px;flex-shrink:0;}
.kb-arch-btn{width:22px;height:22px;border:1px solid #ddd;border-radius:2px;background:var(--bg-panel);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;}
.kb-arch-btn:hover{background:var(--bg-chrome-3);}
.kb-arch-btn.del:hover{background:#fdecea;border-color:#f5c6c2;color:#c62828;}
.kb-arch-empty{color:#bbb;font-size:11px;font-style:italic;text-align:center;padding:18px 0;}

/* ══════════════════════════════════════════════════════════════
   Dialogs.js — reemplazo de alert()/confirm()/prompt() nativos
   ══════════════════════════════════════════════════════════════ */
.pdlg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:10000;}
.pdlg-overlay.hidden{display:none;}
.pdlg-box{width:360px;max-width:92vw;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev2);overflow:hidden;font-size:11px;}
.pdlg-hdr{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:6px 12px;font-size:12px;font-weight:600;}
.pdlg-body{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 6px;}
.pdlg-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.pdlg-icon.info{background:#e3f2fd;color:#1565c0;}
.pdlg-icon.error{background:#fdecea;color:#c62828;}
.pdlg-icon.confirm{background:#fff8e1;color:#e65100;}
.pdlg-icon.prompt{background:#eef7ee;color:#2e7d32;}
.pdlg-msg{flex:1;font-size:12px;line-height:1.5;color:var(--text-1);padding-top:4px;white-space:pre-line;word-break:break-word;}
.pdlg-input-wrap{padding:2px 16px 4px 56px;}
.pdlg-input-wrap.hidden{display:none;}
.pdlg-input-wrap input{width:100%;}
.pdlg-btns{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 16px;}

/* ── CHAT DE CUADRILLA (Producción <-> instaladores) — layout tipo cliente
   de correo: lista de cuadrillas a la izquierda (mismas clases .co-buzon-*
   que usa Correo.js para sus buzones) + la conversación de la cuadrilla
   seleccionada a la derecha. ── */
.chat-modal{position:relative;width:820px;max-width:96vw;height:600px;max-height:90vh;display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid #888;border-radius:4px;box-shadow:var(--shadow-elev2);overflow:hidden;transition:width .15s,height .15s;}
.chat-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
/* Chat interno del Tablero de OTs -- dockeado abajo a la derecha,
   superpuesto sobre el tablero SIN bloquearlo (no es un modal: no hay
   fondo oscurecido y se puede seguir trabajando atras), estilo Facebook
   Messenger. Ver OTKanban.js (_construirShell + __kbChat*). El wrapper es
   pointer-events:none para que el area vacia a su alrededor deje pasar
   los clics al tablero; solo el propio recuadro del chat los capta. */
.kb-chat-dock{position:fixed;right:24px;bottom:0;z-index:8000;pointer-events:none;display:flex;align-items:flex-end;}
.kb-chat-dock.hidden{display:none;}
.kb-chat-dock .chat-modal{position:relative;pointer-events:auto;width:370px;max-width:92vw;height:520px;max-height:80vh;border-radius:8px 8px 0 0;box-shadow:0 4px 18px rgba(0,0,0,.4);}
/* Variante ancha -- Chat de Producción (Cuadrillas.js), que necesita
   lugar para la lista de cuadrillas a la izquierda + la conversación,
   estilo cliente de correo (no cabe en el ancho angosto del Chat interno
   del Tablero, canal unico sin lista lateral). */
.kb-chat-dock.kb-chat-dock-wide .chat-modal{width:640px;max-width:94vw;}
/* Agrandado a pantalla completa (boton "Maximizar" del chat -- ver
   __kbChatToggleMax en OTKanban.js). */
.kb-chat-dock .chat-modal.chat-modal-max{width:96vw;height:92vh;max-width:96vw;max-height:92vh;}
/* Achicado -- clic en el encabezado o en el boton dedicado (ver
   __kbChatToggleColapsar): colapsa el cuerpo y deja solo la franja de
   titulo dockeada, como la cabecera de un chat de Messenger minimizado. */
.kb-chat-dock .chat-modal.chat-modal-colapsado{height:auto;}
.kb-chat-dock .chat-modal.chat-modal-colapsado .chat-body{display:none;}
.kb-chat-dock .chat-header{cursor:pointer;border-radius:8px 8px 0 0;}
.kb-chat-dock-badge{background:#c62828;color:#fff;border-radius:8px;font-size:9.5px;font-weight:700;padding:1px 6px;margin-left:5px;}
.kb-chat-dock-badge.hidden{display:none;}
.chat-header span{font-size:12px;font-weight:600;}
.chat-header button{background:none;border:none;color:#ccc;cursor:pointer;font-size:15px;padding:1px 5px;}
.chat-header button:hover{color:#fff;}
.chat-body{display:flex;flex:1;overflow:hidden;}
.chat-lista{width:210px;min-width:210px;border-right:1px solid var(--border-1);background:var(--bg-panel-alt);overflow-y:auto;padding:8px 0;flex-shrink:0;}
.chat-lista .co-buzon-item{gap:8px;}
.chat-thread{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.chat-thread-header{padding:8px 12px;border-bottom:1px solid var(--border-1);font-size:12px;font-weight:700;color:var(--text-1);flex-shrink:0;display:flex;align-items:center;gap:6px;}
/* Buscador de mensajes -- pedido del usuario (chat interno de la
   empresa, tiene que poder buscarse texto/fecha en todo el historial,
   no solo en los ultimos 50 mensajes cargados). */
.chat-buscar-bar{display:flex;flex-wrap:nowrap;gap:3px;padding:6px 8px;border-bottom:1px solid var(--border-3);background:var(--bg-panel-alt);flex-shrink:0;}
.chat-buscar-bar input[type="text"]{flex:1;min-width:44px;height:22px;border:1px solid var(--border-1);border-radius:2px;padding:2px 5px;font-size:11px;background:var(--bg-panel);color:var(--text-1);}
.chat-buscar-bar input[type="date"]{height:22px;border:1px solid var(--border-1);border-radius:2px;padding:1px 2px;font-size:10px;background:var(--bg-panel);color:var(--text-1);width:88px;flex-shrink:0;}
.chat-buscar-bar button{height:22px;width:22px;flex-shrink:0;border:1px solid var(--border-1);border-radius:2px;background:var(--bg-panel-alt3);color:var(--text-2);cursor:pointer;padding:0;}
.chat-buscar-bar button:hover{background:var(--bg-hover);}
.chat-buscar-resultados-hdr{padding:6px 10px 2px;font-size:10px;color:var(--text-muted);font-weight:600;}
.chat-buscar-item{padding:7px 10px;border-bottom:1px solid var(--border-4);}
.chat-buscar-item:hover{background:var(--bg-panel-alt);}
.chat-buscar-item-hdr{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--text-4);margin-bottom:2px;}
.chat-buscar-item-autor{font-weight:700;color:var(--text-2);}
.chat-buscar-item-txt{font-size:11.5px;color:var(--text-1);line-height:1.4;word-break:break-word;white-space:pre-wrap;}
.chat-buscar-item-txt mark{background:#ffe58a;color:#000;border-radius:2px;padding:0 1px;}
.chat-buscar-item-ot{font-size:10px;color:var(--ink-accent);margin-top:3px;}
/* #cqChatVacio y #cqChatThread traen display inline (flex) en el HTML para
   su estado visible -- un inline style le gana a cualquier regla de hoja
   de estilos SIN !important, asi que la clase ".hidden" (que en este
   proyecto no es generica, cada componente necesita su propia regla, ver
   .kb-modal-overlay.hidden, #cqRosterPop.hidden, etc) necesita el
   !important aca para poder ganarle al inline y ocultar de verdad. Sin
   esto el JS togglea la clase bien pero el placeholder queda tapando la
   conversacion ya cargada debajo. */
#cqChatVacio.hidden, #cqChatThread.hidden{display:none !important;}
.chat-msgs{flex:1;overflow-y:auto;padding:10px;background:var(--bg-chrome-2);display:flex;flex-direction:column;gap:6px;}
.chat-bubble{position:relative;max-width:78%;padding:6px 10px;border-radius:10px;background:var(--bg-panel);border:1px solid var(--border-4);align-self:flex-start;transition:outline .15s;}
.chat-bubble.mine{align-self:flex-end;background:#1565c0;color:#fff;border-color:#1565c0;}
.chat-bubble.mencionado{border:1px solid #f5a623;box-shadow:0 0 0 1px #f5a623 inset;}
.chat-bubble.chat-bubble-sistema{background:#eef2fb;border:1px dashed #6d84c7;}
.chat-bubble.chat-bubble-sistema .chat-autor{color:#3a4f9c;}
.chat-mencion-tag{color:#a6740a;}
.chat-bubble.mine .chat-mencion-tag{color:#ffe9b3;}
.chat-bubble .chat-autor{font-size:9.5px;font-weight:700;opacity:.75;margin-bottom:2px;}
.chat-bubble .chat-texto{font-size:11.5px;white-space:pre-wrap;word-break:break-word;}
.chat-bubble .chat-hora{font-size:9px;opacity:.65;margin-top:3px;text-align:right;}
.chat-leido{font-size:9px;opacity:.8;}
.chat-leido-visto{color:#4fc3f7;opacity:1;font-weight:600;}
.chat-bubble.mine .chat-leido{color:inherit;}
.chat-bubble.mine .chat-leido-visto{color:#8be0ff;}
.chat-bubble img{max-width:100%;border-radius:6px;display:block;margin-top:3px;cursor:pointer;}
.chat-vacio{margin:auto;color:var(--text-4);font-size:11px;text-align:center;padding:20px;}
/* Responder mensaje (estilo WhatsApp/Telegram): boton de responder en la
   esquina de cada burbuja, cita del original arriba del texto nuevo, y
   la barra de "Respondiendo a..." sobre el input mientras se redacta. */
.chat-reply-btn{position:absolute;top:2px;right:2px;background:none;border:none;color:var(--text-4);opacity:.4;cursor:pointer;font-size:9.5px;padding:2px 4px;border-radius:2px;}
.chat-bubble:hover .chat-reply-btn{opacity:.9;}
.chat-bubble .chat-reply-btn:hover{background:rgba(0,0,0,.08);}
.chat-bubble.mine .chat-reply-btn{color:rgba(255,255,255,.85);}
.chat-bubble.mine .chat-reply-btn:hover{background:rgba(255,255,255,.18);}
.chat-quote{background:rgba(0,0,0,.05);border-left:3px solid #1565c0;border-radius:4px;padding:4px 8px;margin:2px 16px 4px 0;font-size:10px;cursor:pointer;max-width:220px;}
.chat-bubble.mine .chat-quote{background:rgba(255,255,255,.18);border-left-color:#fff;}
.chat-quote-autor{font-weight:700;opacity:.85;}
.chat-quote-txt{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-ot-chip{display:flex;align-items:center;gap:5px;background:rgba(109,76,31,.08);border-left:3px solid #6d4c1f;border-radius:4px;padding:4px 8px;margin:0 16px 4px 0;font-size:10px;font-weight:600;cursor:pointer;max-width:220px;}
.chat-ot-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-ot-chip:hover{background:rgba(109,76,31,.16);}
.chat-bubble.mine .chat-ot-chip{background:rgba(255,255,255,.18);border-left-color:#fff;}
.chat-bubble.mine .chat-ot-chip:hover{background:rgba(255,255,255,.28);}
/* Boton "Sin novedad" -- responde un check-in pendiente con un clic, sin
   tener que escribir/mandar foto (mismo patron que cuadrilla-app.html
   .cb-sinnovedad-btn, adaptado a la estetica de boton del escritorio). Solo
   aparece en el mensaje de pedido, mientras siga pendiente y sea del
   usuario que esta mirando el chat (CheckinPendienteID, ver
   SPListarMensajesCuadrilla). */
.chat-sinnovedad-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:5px 8px;border:1px solid #1e7e34;border-radius:3px;background:linear-gradient(180deg,#3cb85a,#28a745);color:#fff;font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:11px;font-weight:600;cursor:pointer;}
.chat-sinnovedad-btn:hover{background:linear-gradient(180deg,#4cc86a,#38b855);}
.chat-sinnovedad-btn:disabled{opacity:.55;cursor:default;}
.chat-reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-panel-alt2);border-top:1px solid var(--border-3);border-left:3px solid #1565c0;font-size:11px;flex-shrink:0;}
.chat-reply-bar.hidden{display:none;}
.chat-reply-bar-txt{flex:1;overflow:hidden;}
.chat-reply-bar-txt > div:last-child{color:var(--text-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-reply-bar-autor{font-weight:700;color:#1565c0;}
.chat-reply-bar-close{background:none;border:none;color:var(--text-4);cursor:pointer;font-size:13px;padding:2px 6px;flex-shrink:0;}
.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border-3);flex-shrink:0;background:var(--bg-panel);}
.chat-input-row input[type="text"]{flex:1;}
.chat-input-row button{width:32px;height:32px;flex-shrink:0;border-radius:3px;border:1px solid #999;background:var(--bg-panel-alt2);cursor:pointer;}
.chat-input-row button:hover{background:var(--bg-chrome-3);}
/* Popover de stickers -- se abre justo arriba de la fila de escribir. */
.chat-sticker-pop{position:absolute;left:8px;right:8px;bottom:48px;z-index:20;background:var(--bg-panel);border:1px solid #999;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.25);padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:220px;overflow-y:auto;}
.chat-sticker-pop.hidden{display:none;}
.chat-sticker-item{background:var(--bg-panel-alt2);border:1px solid var(--border-3);border-radius:6px;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;}
.chat-sticker-item:hover{background:var(--bg-chrome-3);border-color:#1565c0;}
.chat-sticker-item img{width:100%;height:52px;object-fit:contain;}
.chat-sticker-item span{font-size:8.5px;color:var(--text-3);text-align:center;line-height:1.1;}
.chat-sticker-img{width:190px;max-width:100%;display:block;margin-top:2px;}
.chat-preview-img{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--bg-panel-alt2);border-top:1px solid var(--border-3);font-size:10.5px;}
.chat-preview-img.hidden{display:none;}
.chat-preview-img img{height:36px;border-radius:4px;}
#kbChatBadge.hidden{display:none;}

.chat-mencion-pop{display:block;max-height:180px;overflow-y:auto;}
.chat-mencion-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text-1);}
.chat-mencion-item:hover, .chat-mencion-item.activo{background:var(--bg-panel-alt2);}
.chat-mencion-item .chat-mencion-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;}
.chat-mencion-avatar-grupo{background:linear-gradient(180deg,#5b7fa6,#3d5c80);font-size:11px;}
.chat-mencion-item span > .chat-mencion-sub{display:block;font-size:9.5px;font-weight:400;color:var(--text-faint);}

/* Tutorial guiado del modulo Cuadrillas (coach marks propios, mismo
   criterio que el tutorial de cuadrilla-app.html) */
#cqTourOverlay{position:fixed;inset:0;z-index:9500;}
#cqTourOverlay.hidden{display:none;}
#cqTourHueco{position:fixed;border-radius:5px;box-shadow:0 0 0 2000px rgba(20,20,20,.55);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;}
#cqTourCard, #ptTourCard, #vtTourCard, #kbTourCard{position:fixed;width:280px;background:var(--bg-panel);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.4);border:1px solid #888;transition:left .2s ease,top .2s ease;}
.cqtour-titulo{background:linear-gradient(180deg,#2b2b2b,#1a1a1a);color:#fff;padding:6px 12px;font-size:12px;font-weight:600;}
.cqtour-texto{padding:10px 12px;font-size:11.5px;color:var(--text-2);line-height:1.5;}
.cqtour-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 10px;}
.cqtour-contador{font-size:10.5px;color:var(--text-4);font-weight:600;}
.cqtour-btns{display:flex;gap:4px;}
.cqtour-btns button{border:1px solid var(--border-1);border-radius:2px;font-size:11px;cursor:pointer;padding:4px 10px;background:var(--bg-panel-alt3);color:var(--text-2);}
.cqtour-btns button.cqtour-siguiente{background:#3d3d3d;color:#fff;border-color:#2b2b2b;}
#cqTourSaltar, #ptTourSaltar, #vtTourSaltar, #kbTourSaltar{position:absolute;top:-24px;right:0;background:none;border:none;color:#fff;opacity:.85;font-size:11px;font-weight:600;text-decoration:underline;padding:4px;cursor:pointer;}

/* Tutorial guiado del formulario de Presupuestos -- misma estructura que
   el de Cuadrillas (#cqTour*) de arriba, comparte las clases .cqtour-*. */
#ptTourOverlay{position:fixed;inset:0;z-index:9500;}
#ptTourOverlay.hidden{display:none;}
#ptTourHueco{position:fixed;border-radius:5px;box-shadow:0 0 0 2000px rgba(20,20,20,.55);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;}

/* Guía guiada de "Facturar Anticipo" en Ventas -- misma estructura que
   el de Cuadrillas (#cqTour*) de arriba, comparte las clases .cqtour-*. */
#vtTourOverlay{position:fixed;inset:0;z-index:9500;}
#vtTourOverlay.hidden{display:none;}
#vtTourHueco{position:fixed;border-radius:5px;box-shadow:0 0 0 2000px rgba(20,20,20,.55);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;}

/* Tutorial guiado del Tablero de OTs -- misma estructura que el de
   Cuadrillas (#cqTour*) de arriba, comparte las clases .cqtour-*. */
#kbTourOverlay{position:fixed;inset:0;z-index:9500;}
#kbTourOverlay.hidden{display:none;}
#kbTourHueco{position:fixed;border-radius:5px;box-shadow:0 0 0 2000px rgba(20,20,20,.55);pointer-events:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO -- pedido del usuario (2026-08-27): Anderson entra a
   veces desde el celular/tablet y el "marco" general (ribbon + tabs de
   documento + modales) quedaba desorganizado -- no clipeado del todo,
   pero con partes invisibles sin ninguna pista de que se podian
   deslizar, y botones chicos para el dedo. PRIMATE sigue siendo un
   sistema pensado para escritorio (ver DESIGN.md) -- este bloque NO
   toca el layout de PC (todo va adentro de @media), solo hace que el
   marco general sea usable en pantallas chicas. El contenido interno
   de cada modulo (grillas anchas, formularios largos) queda tal cual
   por ahora -- alcance acordado con el usuario: shell general +
   Cuadrillas, no el sistema entero pantalla por pantalla.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  /* Ribbon: las pestañas (INICIO/COMERCIAL/...) y los botones de cada
     panel se cortaban invisibles fuera de la pantalla, sin scroll --
     ahora se puede deslizar el dedo para llegar a todo. */
  #ribbon-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #ribbon-tabs .rtab{flex-shrink:0;padding:0 14px;}
  #ribbon-panel{overflow-x:auto;-webkit-overflow-scrolling:touch;height:auto;min-height:88px;}
  .rgroup{flex-shrink:0;}

  /* Documentos (Tablero de OTs / Cuadrillas / etc.) -- ya tenia scroll,
     solo se agranda un poco el tap target de cada pestaña. */
  #doc-tabs{padding-top:6px;}

  /* Botones de barra de herramientas de cualquier modulo -- mas altos,
     mas faciles de tocar sin agrandar el texto (que rompería el resto
     del diseño denso). */
  .tbtn{min-height:30px;padding:5px 10px;}

  /* Modales tipo .kb-modal-overlay (Avisos, Ubicaciones, Rendimiento,
     etc.): muchos traen un ancho fijo en px por estilo inline -- se
     fuerza que quepan en la pantalla sin scroll horizontal. */
  .kb-modal-overlay{align-items:center;padding:10px;}
  .kb-modal-overlay > div{width:96vw !important;max-width:96vw !important;}

  /* Tablero kanban (Cuadrillas y Tablero de OTs comparten .kanban-col):
     220px fijo dejaba ver menos de dos columnas sin ninguna pista de
     que habia mas -- una columna casi a pantalla completa (con un
     pedacito de la siguiente asomando) se entiende mejor al deslizar. */
  .kanban-col{width:82vw !important;}

  /* Chat flotante de Cuadrillas (dock abajo a la derecha): con
     right:24px + ancho en vw, en una pantalla angosta la suma se pasaba
     del borde izquierdo -- se centra en vez de anclarlo a la derecha. */
  .kb-chat-dock{right:0;left:0;justify-content:center;}

  /* Barra de estado inferior: varios <span> con gap fijo sin overflow
     declarado -- en pantalla angosta empujaban el ancho de toda la
     pagina en vez de recortarse o desplazarse solos. */
  #statusbar{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #statusbar span{flex-shrink:0;}
}