/* MIXIT PY — hoja de estilos, portada 1:1 desde el mockup aprobado
   (proyectos-medida/mixit-py/03-mockups/estilo-mockup.css), paleta y componentes
   clonados de PRIMATE (ver DESIGN.md del repo primate). No modificar sin motivo —
   este archivo ya fue validado visualmente por el dueño de NODO. */

*{margin:0;padding:0;box-sizing:border-box;}
.hidden{display:none !important;}
body{font-family:'Segoe UI',Tahoma,sans-serif;font-size:12px;background:#ababab;height:100vh;display:flex;flex-direction:column;overflow:hidden;color:#1a1a1a;}

/* TITLE BAR */
#titlebar{background:linear-gradient(180deg,#f0f0f0 0%,#d8d8d8 100%);border-bottom:1px solid #aaa;height:32px;display:flex;align-items:center;padding:0 10px;flex-shrink:0;gap:8px;}
#titlebar .logo{width:20px;height:20px;border-radius:3px;background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#appTitle{flex:1;font-size:11px;color:#333;}
#appTitle b{color:#1a1a1a;}
.mockup-badge{background:#ffc107;color:#333;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;letter-spacing:.3px;}

/* TOP TABS (equivalente simplificado a ribbon-tabs) */
#top-tabs{display:flex;align-items:flex-end;background:linear-gradient(180deg,#e8e8e8,#d8d8d8);padding:0 6px;border-bottom:2px solid #3d3d3d;height:28px;flex-shrink:0;gap:2px;}
#top-tabs .rtab{display:inline-flex;align-items:center;gap:5px;padding:0 14px;height:24px;border:none;border-radius:3px 3px 0 0;background:transparent;cursor:pointer;font-size:11px;font-weight:600;color:#555;}
#top-tabs .rtab:hover{background:#e0e8f4;}
#top-tabs .rtab.active{background:#3d3d3d;color:#fff;height:26px;}

/* ICONOS SVG inline estilo Feather — contorno, sin relleno, mismo stroke-width en todo el sistema.
   NUNCA emojis. */
.ico{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:inline-block;vertical-align:-2px;}
.ico-lg{width:16px;height:16px;}
.ico-sm{width:11px;height:11px;stroke-width:2;}

/* DOC TABS */
#doc-tabs{background:#d8d8d8;border-bottom:1px solid #aaa;display:flex;align-items:flex-end;padding:4px 4px 0;height:28px;flex-shrink:0;gap:2px;}
.dtab{display:flex;align-items:center;gap:6px;padding:3px 12px;background:#d8d8d8;border:1px solid #aaa;border-bottom:none;border-radius:3px 3px 0 0;cursor:pointer;font-size:11px;color:#555;height:24px;}
.dtab.active{background:#fff;color:#1a1a1a;border-color:#999;height:26px;}

/* WORKSPACE */
#workspace{flex:1;background:#e8e8e8;overflow:hidden;display:flex;flex-direction:column;}
.screen{display:none;flex-direction:column;height:100%;overflow:hidden;}
.screen.active{display:flex;}

/* FORM TOOLBAR */
.form-toolbar{background:#f5f5f5;border-bottom:1px solid #d0d0d0;padding:3px 6px;display:flex;gap:2px;flex-shrink:0;align-items:center;}
.tbtn{display:flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid #b8b8b8;border-radius:2px;background:linear-gradient(180deg,#fafafa,#eaeaea);cursor:pointer;font-size:11px;color:#1a1a1a;}
.tbtn:hover{background:linear-gradient(180deg,#e0e8f4,#d8e8f8);border-color:#90b4d8;}
.tbtn.btn-primary{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;border-color:#2b2b2b;}
.tbtn.btn-success{background:linear-gradient(180deg,#3cb85a,#28a745);color:#fff;border-color:#1e7e34;}
.tbtn.btn-warning{background:linear-gradient(180deg,#ffce3a,#e0a800);color:#333;border-color:#c69500;}
.tbtn:disabled{opacity:.5;cursor:not-allowed;}
.tbtn-sep{width:1px;background:#aaa;margin:2px 4px;}
.tbtn .tk{font-size:9px;color:#999;margin-left:2px;}

/* SEARCH BAR */
.search-bar{display:flex;align-items:center;gap:6px;padding:5px 6px;background:#f5f5f5;border-bottom:1px solid #d0d0d0;flex-shrink:0;}
.search-bar input{border:1px solid #aaa;border-radius:2px;padding:2px 6px;font-size:11px;width:220px;height:22px;}
.search-bar .cant{margin-left:auto;font-size:11px;color:#666;}
.search-bar select{border:1px solid #aaa;border-radius:2px;height:22px;font-size:11px;padding:0 4px;}

/* GRID */
.grid-container{flex:1;overflow:auto;background:#fff;}
.data-grid{width:100%;border-collapse:collapse;font-size:11px;}
.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;white-space:nowrap;}
.data-grid tbody tr{cursor:pointer;}
.data-grid tbody tr:nth-child(even){background:#f0f6fc;}
.data-grid tbody tr:hover{background:#ececec;}
.data-grid tbody tr.selected{background:#3d3d3d;color:#fff;}
.data-grid tbody tr.selected td{color:#fff;}
.data-grid tbody td{border:1px solid #e4e4e4;padding:3px 8px;white-space:nowrap;}
.data-grid td.num, .data-grid th.num{text-align:right;}

/* SECTION TITLE */
.section-title{background:#2b2b2b;color:#fff;padding:3px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;}

/* GROUPBOX */
.form-content{flex:1;overflow:auto;padding:8px;}
.groupbox{border:1px solid #ccc;border-radius:3px;margin-bottom:8px;}
.groupbox-title{background:linear-gradient(180deg,#e0e8f4,#d0e0f0);padding:3px 10px;font-weight:600;font-size:11px;color:#1a1a1a;border-bottom:1px solid #ccc;display:flex;align-items:center;justify-content:space-between;}
.groupbox-body{padding:8px 10px;background:#fff;}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.form-label{font-size:11px;color:#333;min-width:100px;text-align:right;flex-shrink:0;}
.form-input{border:1px solid #aaa;border-radius:2px;padding:3px 6px;font-size:11px;background:#fff;color:#1a1a1a;height:22px;}
.form-input:focus{outline:none;border-color:#3d3d3d;box-shadow:0 0 0 2px #3d3d3d20;}
.form-input[readonly],.form-input:disabled{background:#fffbcc !important;color:#5a5230 !important;border-color:#e6d980 !important;}
.form-input.w60{width:60px;} .form-input.w80{width:80px;} .form-input.w100{width:100px;}
.form-input.w120{width:120px;} .form-input.w140{width:140px;} .form-input.w160{width:160px;}
.form-input.w200{width:200px;} .form-input.w300{width:300px;} .form-input.w100p{width:100%;}
.form-link{color:#3d3d3d;text-decoration:underline;cursor:pointer;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap;}
.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;}

/* INFO BOXES */
.info-box{border-radius:3px;padding:6px 10px;font-size:11px;margin-bottom:8px;display:flex;align-items:flex-start;gap:6px;}
.info-box.info{background:#f0f0f0;border:1px solid #cccccc;color:#1a1a1a;}
.info-box.warn{background:#fff3cd;border:1px solid #ffc107;color:#856404;}
.info-box.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24;}
.info-box.ok{background:#d4edda;border:1px solid #a5d6a7;color:#155724;}

/* MODAL */
.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:#fff;border:1px solid #999;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.3);width:460px;max-width:90vw;}
.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;display:flex;align-items:center;padding:2px;}
.modal-body{padding:12px;}
.modal-footer{padding:8px 12px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:6px;background:#f5f5f5;border-radius:0 0 3px 3px;}
.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-secondary{background:linear-gradient(180deg,#fafafa,#eaeaea);color:#333;border-color:#bbb;}
.btn-warning{background:linear-gradient(180deg,#ffce3a,#e0a800);color:#333;border-color:#c69500;}

/* STATUS BAR */
#statusbar{background:linear-gradient(180deg,#e8e8e8,#d8d8d8);border-top:1px solid #aaa;height:22px;display:flex;align-items:center;padding:0 10px;gap:14px;font-size:11px;color:#555;flex-shrink:0;}
.sb-sep{width:1px;height:14px;background:#aaa;}

/* KARDEX ESPECIFICO */
.kx-disp-real{font-weight:700;}
.kx-disp-real.bajo{color:#c82020;}
.kx-fila-vencido{background:#fff0e0 !important;}
.kx-mini-tag{font-size:9px;color:#888;}
.util-right{text-align:right;}
.util-muted{color:#888;}
.util-mono{font-family:'Consolas','Segoe UI',monospace;}

/* LOGIN — pantalla nueva, no estaba en el mockup (el mockup arrancaba directo en
   Lista de Eventos). Mismo lenguaje visual: gradientes, sin sombras grandes. */
#login-screen{position:fixed;inset:0;background:#ababab;display:flex;align-items:center;justify-content:center;z-index:2000;}
#login-screen.hidden{display:none;}
.login-box{background:#fff;border:1px solid #999;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.3);width:320px;}
.login-box .login-header{background:linear-gradient(180deg,#3d3d3d,#2b2b2b);color:#fff;padding:14px 16px;border-radius:3px 3px 0 0;text-align:center;font-size:14px;font-weight:700;}
.login-box .login-body{padding:16px;}
.login-box .form-row{flex-direction:column;align-items:stretch;gap:4px;}
.login-box .form-label{text-align:left;min-width:0;}
.login-box .form-input{width:100%;}
.login-error{color:#721c24;font-size:11px;margin-top:6px;min-height:14px;}