*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#1F2943;font-family:Inter,system-ui,sans-serif;color:#fff;min-height:100vh;font-size:13px}
input,select,textarea,button{font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#181f33}
::-webkit-scrollbar-thumb{background:#354270;border-radius:3px}

/* HEADER */
.hdr{background:#E1EA35;border-bottom:3px solid #1F2943;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{background:#1F2943;padding:4px 8px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo img{height:52px;width:auto;display:block}
.hdr-mid{flex:1;text-align:center;padding:0 16px}
.hdr-mid h1{font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:2px;text-align:center;color:#1F2943}
.hdr-mid p{font-size:9px;color:#5A6410;letter-spacing:1px;text-transform:uppercase;margin-top:2px;text-align:center}
.hdr-r{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex-shrink:0}
.clock{font-family:monospace;font-size:19px;font-weight:700;letter-spacing:2px;color:#fff}

/* TABS */
.tabs{display:flex;background:#181f33;border-bottom:1px solid #354270}
.tab{background:transparent;border:none;border-bottom:3px solid transparent;color:#8A96B4;padding:10px 20px;cursor:pointer;transition:all .2s}
.tab.on{border-bottom-color:#E1EA35;color:#E1EA35}
.tab .tl{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.tab .ts{font-size:9px;opacity:.7;margin-top:1px}

/* STATS */
.stats{display:flex;background:#181f33;border-bottom:1px solid #354270;flex-wrap:wrap}
.sc{flex:1 1 100px;padding:9px 16px;border-right:1px solid #354270;cursor:pointer;transition:background .2s}
.sc:last-child{border-right:none;border-left:1px solid #354270;cursor:default}
.sc:hover{background:rgba(255,255,255,.03)}
.sc.on{background:rgba(74,158,219,.1)}
.sc-l{font-size:11px;color:#8A96B4;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.sc-v{font-family:monospace;font-size:22px;font-weight:700;line-height:1}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 20px;background:#1a2238;border-bottom:1px solid #354270}
.toolbar input,.toolbar select{background:#181f33;border:1px solid #354270;border-radius:4px;color:#fff;padding:5px 9px;font-size:13px;outline:none}
.toolbar input{width:220px}
.ot-cnt{font-size:12px;color:#8A96B4;font-family:monospace}

/* BUTTONS */
.btn{border-radius:4px;font-weight:700;cursor:pointer;transition:all .15s;border:none;font-family:inherit}
.btn-y{background:#E1EA35;color:#1F2943;padding:7px 14px;font-size:12px;border-radius:4px}
.btn-y:hover{opacity:.9}
.btn-cierre{background:#1F2943;color:#E1EA35;padding:7px 13px;font-size:11px;font-weight:900;border-radius:4px;cursor:pointer;border:none;display:flex;align-items:center;gap:5px}
.btn-cierre:disabled{background:#2a3050;color:#8A96B4;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid #354270;color:#8A96B4;padding:6px 13px;font-size:11px;border-radius:4px;cursor:pointer}
.btn-ghost:hover{border-color:#4A9EDB;color:#4A9EDB}
.btn-sm{padding:3px 8px;font-size:10px;border-radius:3px;cursor:pointer}
.btn-del{background:transparent;border:1px solid #354270;color:#8A96B4;padding:3px 7px;font-size:11px;border-radius:3px;cursor:pointer}
.btn-del:hover{border-color:#E74C3C;color:#E74C3C}

/* IMPORT */
.imp-panel{background:#1a2238;border-bottom:1px solid #354270;padding:14px 20px}
.imp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dz{border:2px dashed #354270;border-radius:7px;padding:20px;text-align:center;cursor:pointer;background:rgba(0,0,0,.12);transition:all .2s;user-select:none}
.dz:hover,.dz.over{border-color:#E1EA35;background:rgba(245,197,24,.05)}
.dz-ico{font-size:22px;margin-bottom:5px}
.dz-t{font-size:14px;font-weight:700;color:#C4CEEA;margin-bottom:2px}
.dz-s{font-size:12px;color:#8A96B4}
.imp-log{margin-top:8px;padding:7px 11px;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);border-radius:4px;font-size:12px;color:#2ECC71;display:flex;gap:14px;flex-wrap:wrap}

/* OT TABLE */
.ot-wrap{overflow-x:auto;width:100%}
table.ot-tbl{border-collapse:collapse;font-size:14px;width:100%;min-width:1200px;table-layout:fixed}
table.ot-tbl th{
  padding:8px 10px;text-align:left;font-size:11px;color:#E1EA35;
  text-transform:uppercase;letter-spacing:1px;font-weight:700;white-space:nowrap;
  background:#1a2238;border-bottom:2px solid #E1EA35;border-top:1px solid #354270;
}
table.ot-tbl td{padding:8px 10px;border-bottom:1px solid #283550;vertical-align:middle}
table.ot-tbl tr:hover td{background:rgba(255,255,255,.025)}
table.ot-tbl tr.row-rec td{border-left:3px solid #4A9EDB}
table.ot-tbl tr.row-eva td{border-left:3px solid #E1EA35}
table.ot-tbl tr.row-evd td{border-left:3px solid #1ABC9C}
table.ot-tbl tr.row-rep td{border-left:3px solid #E67E22}
table.ot-tbl tr.row-man td{border-left:3px solid #9B59B6}
table.ot-tbl tr.row-com td{border-left:3px solid #2ECC71;opacity:.75}
table.ot-tbl tr.row-cua td{border-left:3px solid #F39C12}
table.ot-tbl tr.row-anu td{border-left:3px solid #7F8C9A;opacity:.7}

/* COLUMN WIDTHS */
.col-codigo{width:120px;min-width:110px}
.col-cliente{width:100px;min-width:90px}
.col-rotulo{width:90px;min-width:80px}
.col-equipo{width:200px;min-width:160px}
.col-estado{width:120px;min-width:110px}
.col-tecnico{width:130px;min-width:120px}
.col-flujo{width:220px;min-width:200px}
.col-fecha{width:90px;min-width:80px}
.col-dias{width:70px;min-width:65px}
.col-obs{width:150px;min-width:120px}
.col-acc{width:65px;min-width:60px}

/* INLINE CONTROLS */
.ot-code{font-family:monospace;font-weight:700;color:#E1EA35;white-space:nowrap;font-size:15px;overflow:hidden;text-overflow:ellipsis;display:block}
.ot-cli{color:#C4CEEA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ot-eq{color:#EAF0FB;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ot-obs{color:#B8C4DE;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;display:block}
.ot-fecha{font-family:monospace;font-size:13px;color:#C4CEEA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dias-badge{display:inline-block;padding:2px 6px;border-radius:3px;font-family:monospace;font-size:11.5px;font-weight:700;white-space:nowrap}
.rotulo-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:700;border:1px solid;white-space:nowrap}

/* ESTADO BADGE */
.est-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:3px;font-size:12px;font-weight:700;white-space:nowrap;font-family:monospace}

/* FLOW BUTTONS */
.flow-btns{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.flow-btn{border:none;border-radius:3px;padding:4px 8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.flow-btn:hover{filter:brightness(1.15)}

/* TECH SELECT */
.tec-sel{background:#1a2238;border:1px solid #354270;border-radius:4px;color:#C4CEEA;padding:3px 5px;font-size:12px;outline:none;width:100%;cursor:pointer}
.tec-sel:focus{border-color:#4A9EDB}

/* EMPTY */
.empty{text-align:center;padding:60px 20px}
.empty-ico{font-size:40px;margin-bottom:12px}
.empty-t{font-size:15px;font-weight:700;color:#C4CEEA;margin-bottom:6px}
.empty-s{font-size:12px;color:#8A96B4;margin-bottom:18px}

/* OVERLAY / MODAL */
.overlay{position:fixed;inset:0;background:rgba(10,14,28,.9);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal{background:#243050;border:1px solid #354270;border-radius:10px;padding:24px 26px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-title{font-size:15px;font-weight:900;color:#E1EA35;font-family:monospace}
.modal-close{background:transparent;border:none;color:#8A96B4;cursor:pointer;font-size:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.f{margin-bottom:12px}
.f label{display:block;font-size:8px;font-weight:700;color:#8A96B4;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:3px}
.f input,.f select,.f textarea{width:100%;background:#181f33;border:1px solid #354270;border-radius:4px;color:#fff;padding:6px 9px;font-size:11px;outline:none}
.f textarea{resize:vertical}
.f-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.modal-cierre{border:2px solid #E1EA35;max-width:520px}
.c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}
.c-cell{text-align:center;padding:8px 4px;border-radius:5px}
.c-num{font-family:monospace;font-size:17px;font-weight:900;line-height:1}
.c-lbl{font-size:8px;margin-top:3px;font-weight:700;text-transform:uppercase}

/* ANALYTICS */
.an{padding:20px}
.an-fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.per-btn{background:transparent;border:1px solid #354270;color:#8A96B4;padding:5px 13px;border-radius:4px;font-size:12px;font-weight:700;cursor:pointer}
.per-btn.on{background:#E1EA35;border-color:#E1EA35;color:#1F2943}
.kpi-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.kpi{background:#243050;border:1px solid #354270;border-radius:7px;padding:14px 18px;flex:1 1 130px}
.kpi-l{font-size:11px;color:#8A96B4;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:5px}
.kpi-v{font-family:monospace;font-size:26px;font-weight:700;line-height:1}
.kpi-s{font-size:11px;color:#8A96B4;margin-top:4px}
.chart-c{background:#243050;border:1px solid #354270;border-radius:7px;padding:18px;margin-bottom:16px}
.sec-t{font-size:12px;font-weight:700;color:#8A96B4;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid #354270}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.bar-name{font-size:13px;color:#C4CEEA;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;background:#354270;border-radius:3px;overflow:hidden}
.bar-fill{border-radius:3px;transition:width .5s}
.bar-val{font-family:monospace;font-size:13px;font-weight:700;color:#E1EA35;min-width:26px;text-align:right;flex-shrink:0}
.ch2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.no-data{color:#8A96B4;font-size:13px;text-align:center;padding:24px 0}
.toast{position:fixed;bottom:20px;right:20px;z-index:2000;padding:9px 18px;border-radius:5px;font-size:12px;font-weight:700;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:opacity .3s;pointer-events:none;opacity:0}

/* ════════════════════════════════════════════════════════════════════════════
   WOS DEV — Authentication Gate
   ════════════════════════════════════════════════════════════════════════════ */
.cot-auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 20% 10%,rgba(225,234,53,.10),transparent 34%),linear-gradient(145deg,#181f33,#1F2943 58%,#243050);font-family:Arial,Helvetica,sans-serif;color:#fff}
.cot-auth-card{width:min(430px,100%);background:rgba(31,41,67,.94);border:1px solid rgba(196,206,234,.17);border-radius:20px;padding:34px;box-shadow:0 24px 70px rgba(0,0,0,.34);backdrop-filter:blur(10px)}
.cot-auth-brand{text-align:center;margin-bottom:28px}.cot-auth-badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#E1EA35;color:#1F2943;font-size:10px;font-weight:900;letter-spacing:.12em}.cot-auth-logo{font-size:46px;font-weight:950;letter-spacing:.08em;color:#E1EA35;margin:14px 0 5px}.cot-auth-brand h1{font-size:18px;margin:0;color:#fff}.cot-auth-brand p{font-size:11px;margin:8px 0 0;color:#8A96B4}
.cot-auth-form{display:grid;gap:10px}.cot-auth-form label{font-size:10px;font-weight:800;letter-spacing:.06em;color:#C4CEEA;text-transform:uppercase}.cot-auth-form input{width:100%;box-sizing:border-box;border:1px solid #354270;border-radius:10px;background:#181f33;color:#fff;padding:13px 14px;font-size:14px;outline:none}.cot-auth-form input:focus{border-color:#E1EA35;box-shadow:0 0 0 3px rgba(225,234,53,.1)}.cot-auth-form button{margin-top:8px;border:0;border-radius:10px;padding:13px 16px;background:#E1EA35;color:#1F2943;font-size:12px;font-weight:950;letter-spacing:.05em;cursor:pointer}.cot-auth-form button:disabled{opacity:.58;cursor:wait}.cot-auth-error{min-height:18px;color:#ff8e84;font-size:11px;line-height:1.4}.cot-auth-foot{text-align:center;margin-top:22px;color:#667294;font-size:10px}
.cot-session-badge{position:fixed;right:14px;bottom:14px;z-index:99999;display:flex;align-items:center;gap:12px;background:rgba(24,31,51,.95);border:1px solid #354270;border-radius:12px;padding:9px 10px 9px 13px;color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.28);font-family:Arial,Helvetica,sans-serif}.cot-session-badge div{display:grid;gap:2px}.cot-session-badge strong{font-size:10px}.cot-session-badge span{font-size:8px;color:#E1EA35;font-weight:800;letter-spacing:.05em}.cot-session-badge button{border:1px solid #354270;background:#243050;color:#C4CEEA;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:800;cursor:pointer}.cot-session-badge button:hover{border-color:#E1EA35;color:#E1EA35}
@media(max-width:640px){.cot-auth-card{padding:26px 20px}.cot-session-badge{left:10px;right:10px;bottom:10px;justify-content:space-between}}

/* WOS v5.2 · Dark Tech structural layer consolidated in this view */
*{box-sizing:border-box}
html,body{background:var(--cot-bg)!important;color:var(--cot-text)!important}
body{min-height:100vh;background:
  radial-gradient(circle at 80% 14%,rgba(0,116,255,.16),transparent 25%),
  linear-gradient(145deg,#010713 0%,#041126 52%,#020817 100%)!important;
}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(0,183,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,183,255,.025) 1px,transparent 1px);background-size:38px 38px;pointer-events:none;z-index:-1}
button,input,select,textarea{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Login */
.cot-auth-shell{min-height:100vh;display:grid!important;grid-template-columns:1.08fr .92fr!important;gap:44px!important;align-items:center!important;padding:54px 7vw!important;background:
 linear-gradient(90deg,rgba(2,8,22,.16),rgba(2,8,22,.70)),
 radial-gradient(circle at 28% 62%,rgba(0,125,255,.22),transparent 32%),
 #020816!important;position:relative;overflow:hidden}
.cot-auth-shell::before{content:"";position:absolute;left:0;bottom:0;width:58%;height:68%;background:url('../assets/technical-support-bg.jpg') center/cover no-repeat;opacity:.58;filter:saturate(1.35) contrast(1.12);mask-image:linear-gradient(to right,black 70%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 70%,transparent 100%)}
.cot-auth-intro{position:relative;z-index:1;align-self:center}
.cot-auth-branding{display:flex;align-items:center;gap:16px;margin-bottom:38px}
.cot-auth-wordmark{font-size:64px!important;line-height:.9!important;font-weight:900!important;letter-spacing:-.05em!important;color:#fff!important;text-shadow:0 0 24px rgba(0,183,255,.18)}
.cot-auth-submark{font-size:16px!important;color:#b6c8df!important;max-width:230px;line-height:1.25}
.cot-auth-rule{display:block;width:64px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--cot-glow),var(--cot-blue));box-shadow:0 0 18px rgba(0,183,255,.65);margin:0 0 24px}
.cot-auth-intro h1{font-size:52px!important;line-height:1.06!important;max-width:620px!important;margin:0!important;color:#fff!important;letter-spacing:-.035em!important}
.cot-auth-benefits{display:none!important}
.cot-auth-card{position:relative;z-index:1;width:min(560px,100%)!important;justify-self:end!important;background:linear-gradient(180deg,rgba(5,22,48,.96),rgba(3,14,34,.98))!important;border:1px solid rgba(40,142,255,.68)!important;border-radius:24px!important;padding:48px!important;box-shadow:0 0 0 1px rgba(0,183,255,.06),0 28px 80px rgba(0,0,0,.42),0 0 38px rgba(0,119,255,.11)!important;backdrop-filter:blur(16px)}
.cot-auth-card::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#13a8ff,transparent);box-shadow:0 0 16px #13a8ff}
.cot-auth-card-head h2,.cot-auth-brand h1{margin:0 0 10px!important;color:#fff!important;font-size:40px!important;text-align:center!important}
.cot-auth-card-head::after{content:"Ingresa tus credenciales para continuar";display:block;text-align:center;color:var(--cot-muted);font-size:16px;margin-bottom:30px}
.cot-auth-form{display:grid;gap:12px!important}
.cot-auth-form label{color:#fff!important;font-size:15px!important;font-weight:650!important;text-transform:none!important;letter-spacing:0!important;margin-top:8px}
.cot-auth-form input{height:58px!important;background:rgba(5,21,48,.92)!important;border:1px solid rgba(75,147,224,.68)!important;border-radius:11px!important;color:#fff!important;padding:0 18px!important;font-size:16px!important;outline:none!important}
.cot-auth-form input:focus{border-color:var(--cot-glow)!important;box-shadow:0 0 0 3px rgba(0,183,255,.12),0 0 18px rgba(0,183,255,.12)!important}
.cot-auth-form button{height:60px!important;margin-top:12px!important;background:linear-gradient(90deg,#078cff,#1c51e8)!important;border:1px solid #19baff!important;border-radius:11px!important;color:#fff!important;font-size:17px!important;font-weight:800!important;box-shadow:0 0 24px rgba(0,126,255,.36)!important}
.cot-auth-error{color:#ff7d8a!important;min-height:18px!important}
.cot-auth-link{display:none!important}
.cot-auth-foot{color:#7ea1c8!important;text-align:center!important;font-size:12px!important;margin-top:18px!important}

/* Shell */
.cot-shell{display:flex;flex-direction:column;min-height:100vh}
.cot-sidebar{position:sticky;top:0;width:100%;height:auto;padding:10px 20px;background:linear-gradient(180deg,rgba(3,13,31,.98),rgba(2,10,24,.99));border-right:none;border-bottom:1px solid rgba(39,132,222,.48);box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:row;align-items:center;gap:18px;z-index:120}
.cot-side-brand{display:flex;align-items:center;gap:14px;padding:0;flex-shrink:0}
.cot-side-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid #1da7ff;background:radial-gradient(circle,rgba(0,132,255,.28),rgba(0,50,110,.12));box-shadow:0 0 20px rgba(0,162,255,.22);font-size:30px;color:#dff7ff}
.cot-side-title{font-size:38px;line-height:.9;font-weight:900;color:#fff;letter-spacing:-.04em}
.cot-side-sub{font-size:12px;color:#9ab1cd;line-height:1.25;margin-top:6px}
.cot-side-nav{display:flex;flex-direction:row;align-items:center;gap:8px;overflow-x:auto}
.cot-side-btn{height:46px;width:auto;white-space:nowrap;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid transparent;border-radius:10px;background:transparent;color:#c6d7ea;font-size:14px;text-align:left;cursor:pointer;transition:.18s;flex-shrink:0}
.cot-side-btn .i{width:24px;text-align:center;color:#84bbf5;font-size:20px}
.cot-side-btn:hover{background:rgba(12,78,139,.22);border-color:rgba(30,142,244,.22)}
.cot-side-btn.on{color:#52ccff;background:linear-gradient(90deg,rgba(7,94,181,.42),rgba(8,70,139,.18));border-color:#19a8ff;box-shadow:inset 0 0 20px rgba(0,130,255,.14),0 0 16px rgba(0,137,255,.13)}
.cot-side-divider{width:1px;align-self:stretch;background:rgba(85,131,180,.25);margin:6px 4px}
.cot-side-footer{margin-top:0;margin-left:auto;padding:0 4px;border-top:none;font-size:11px;color:#6686aa;white-space:nowrap;flex-shrink:0}
.cot-main-shell{min-width:0;position:relative;overflow:hidden}
.cot-main-shell::before{content:"";position:fixed;right:0;top:78px;width:min(58vw,900px);height:330px;background:url('../assets/technical-support-bg.jpg') right top/cover no-repeat;opacity:.24;filter:saturate(1.35) contrast(1.15);mask-image:linear-gradient(to left,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to left,black 50%,transparent 100%);pointer-events:none;z-index:0}
.cot-main-shell>*{position:relative;z-index:1}

/* Header and tabs */
.hdr{min-height:74px!important;background:rgba(2,10,24,.90)!important;border-bottom:1px solid rgba(41,120,196,.35)!important;padding:11px 26px!important;backdrop-filter:blur(14px);position:relative!important;z-index:50!important}
.hdr .logo{display:none!important}.hdr-mid{display:none!important}.hdr-r{margin-left:auto!important;gap:8px!important;flex-wrap:wrap!important}
.clock{font-size:14px!important;color:#a8c2de!important;letter-spacing:1px!important}
.tabs{height:72px!important;display:flex!important;align-items:center!important;gap:20px!important;padding:0 28px!important;background:rgba(2,10,24,.92)!important;border-bottom:1px solid rgba(41,120,196,.35)!important;overflow-x:auto!important}
.tab{height:72px!important;padding:0 16px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:transparent!important;color:#a9bed6!important}
.tab.on{color:#45c9ff!important;border-bottom-color:#19adff!important;background:transparent!important;box-shadow:0 13px 22px -18px #00aaff!important}
.tab .tl{font-size:15px!important;letter-spacing:.4px!important}.tab .ts{display:none!important}
.compact-menu summary,.btn-ghost,.btn-cierre{background:rgba(4,20,44,.84)!important;border:1px solid rgba(67,130,198,.55)!important;color:#b8cde3!important;border-radius:9px!important}
.btn-y{background:linear-gradient(90deg,#068cf8,#194fe1)!important;color:#fff!important;border:1px solid #1db9ff!important;border-radius:9px!important;box-shadow:0 0 15px rgba(0,128,255,.18)!important}

/* Content */
.stats,.toolbar,.imp-panel,.chart-c,.kpi,.ot-wrap,.modal,.info-card,.control-card,.control-health,.control-age,.control-flow{background:linear-gradient(180deg,rgba(5,21,46,.93),rgba(3,15,34,.96))!important;border-color:rgba(40,126,207,.48)!important;color:var(--cot-text)!important;box-shadow:var(--cot-shadow)}
.stats{border-bottom:1px solid rgba(40,126,207,.34)!important}.sc{background:transparent!important;border-color:rgba(40,126,207,.24)!important}.sc:hover,.sc.on{background:rgba(12,75,137,.25)!important}.sc-l{color:#7f9dbc!important}.sc-v{color:#59caff!important}
.toolbar{margin:16px 20px!important;border:1px solid rgba(40,126,207,.42)!important;border-radius:12px!important;padding:12px!important}
.toolbar input,.toolbar select,.f input,.f select,.f textarea,.tec-sel{background:#061731!important;border:1px solid rgba(56,122,195,.55)!important;color:#eaf5ff!important;border-radius:8px!important}
.toolbar input:focus,.toolbar select:focus,.f input:focus,.f select:focus,.f textarea:focus{border-color:#12b9ff!important;box-shadow:0 0 0 3px rgba(0,183,255,.11)!important;outline:none!important}
.ot-wrap{margin:0 20px 20px;border:1px solid rgba(40,126,207,.42)!important;border-radius:12px!important;overflow:auto!important}
table.ot-tbl th{background:#071a36!important;color:#7fb9ef!important;border-color:rgba(40,126,207,.46)!important}
table.ot-tbl td{color:#dbe9f7!important;border-color:rgba(49,102,157,.22)!important}
table.ot-tbl tr:hover td{background:rgba(12,80,148,.18)!important}
.ot-code{color:#45c9ff!important}.ot-eq{color:#eef7ff!important}.ot-cli,.ot-fecha,.ot-obs{color:#8fa8c8!important}
.est-badge,.rotulo-badge,.dias-badge{border-color:rgba(54,151,241,.55)!important;background:rgba(0,112,220,.12)!important;color:#72d8ff!important}

/* Dashboard blocks from stable build */
.control-wrap,.an{color:#eaf5ff!important}.control-wrap h1,.control-wrap h2,.control-wrap h3,.an h1,.an h2,.an h3{color:#fff!important}
.kpi-row{gap:14px!important}.kpi{background:linear-gradient(180deg,rgba(6,28,59,.95),rgba(3,17,38,.97))!important;border:1px solid rgba(37,139,229,.56)!important;border-radius:13px!important}.kpi-l{color:#93aac3!important}.kpi-v{color:#5dcbff!important}.kpi-s{color:#7895b3!important}
.chart-c{border-radius:13px!important}.sec-t{color:#91b8df!important;border-color:rgba(55,119,181,.35)!important}.bar-name{color:#c5d7e8!important}.bar-track{background:#102647!important}

/* Modals */
.overlay{background:rgba(0,5,14,.80)!important;backdrop-filter:blur(8px)!important}.modal{background:linear-gradient(180deg,#071a36,#041024)!important;border:1px solid rgba(31,151,255,.62)!important;border-radius:16px!important;color:#eaf5ff!important}.modal-title{color:#57ceff!important}.f label{color:#7fa8cf!important}.modal-close{color:#91afd0!important}

/* Auth session badge */
.cot-session-badge{display:none!important}

/* Technician and Users generic */
.tech-dark-shell,.users-dark-shell{min-height:100vh;background:linear-gradient(145deg,#010713,#041126 55%,#020817);color:#fff}
.users-shell{max-width:1400px!important;padding:28px!important;color:#fff!important}.users-head h1{color:#fff!important}.users-head p{color:#91aac6!important}.u-card{background:linear-gradient(180deg,rgba(5,22,48,.96),rgba(3,14,34,.98))!important;border:1px solid rgba(40,142,255,.48)!important;border-radius:14px!important}.u-field label,.u-table th{color:#7ea9d4!important}.u-field input,.u-field select{background:#061731!important;color:#fff!important;border:1px solid rgba(56,122,195,.55)!important}.u-primary{background:linear-gradient(90deg,#068cf8,#194fe1)!important;color:#fff!important}.u-ghost{background:#061731!important;color:#dbeaff!important;border-color:rgba(56,122,195,.55)!important}.u-role{background:rgba(0,126,255,.13)!important;color:#5dcfff!important;border:1px solid rgba(48,158,255,.42)!important}.u-note{background:rgba(0,126,255,.10)!important;color:#9ec2e4!important;border-color:rgba(48,158,255,.32)!important}.u-table td{border-color:rgba(52,102,155,.22)!important;color:#d9e9f8!important}

@media(max-width:1100px){.cot-side-brand{padding:0;justify-content:center}.cot-side-title,.cot-side-sub{display:none}.cot-side-icon{width:54px;height:54px}.cot-side-btn{justify-content:center;padding:0;width:46px}.cot-side-btn .i{font-size:20px}.cot-side-btn .label{display:none}.cot-side-footer{display:none}.cot-auth-shell{grid-template-columns:1fr!important;padding:36px 22px!important}.cot-auth-intro{display:none}.cot-auth-card{justify-self:center!important}.cot-main-shell::before{width:78vw}}
@media(max-width:720px){.cot-sidebar{padding:8px 10px;gap:8px}.cot-side-brand,.cot-side-footer,.cot-side-divider{display:none}.cot-side-nav{overflow-x:auto}.cot-side-btn{min-width:44px;width:44px;height:44px;padding:0;justify-content:center}.hdr{padding:8px 12px!important}.tabs{height:58px!important;padding:0 10px!important;gap:8px!important}.tab{height:58px!important;padding:0 8px!important}.tab .tl{font-size:12px!important}.toolbar{margin:10px!important}.ot-wrap{margin:0 10px 14px!important}.cot-main-shell::before{display:none}}

/* Static sidebars on Servicio Técnico and Usuarios */
body.cot-static-page{display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;min-height:100vh!important;background:linear-gradient(145deg,#010713,#041126 55%,#020817)!important}
.cot-static-sidebar{position:sticky;top:0;height:100vh;padding:24px 14px 18px;background:linear-gradient(180deg,rgba(3,13,31,.99),rgba(2,10,24,1));border-right:1px solid rgba(39,132,222,.48);display:flex;flex-direction:column;z-index:120}
.cot-static-sidebar .cot-side-nav{display:grid;gap:8px}
.cot-static-sidebar .cot-side-btn{text-decoration:none}
.cot-static-sidebar .tech-active{color:#52ccff;background:linear-gradient(90deg,rgba(7,94,181,.42),rgba(8,70,139,.18));border-color:#19a8ff;box-shadow:inset 0 0 20px rgba(0,130,255,.14),0 0 16px rgba(0,137,255,.13)}
body.cot-static-page>#app,body.cot-static-page>#users-app{min-width:0;min-height:100vh;position:relative}
body.cot-static-page>#app::before,body.cot-static-page>#users-app::before{content:"";position:fixed;right:0;top:0;width:min(58vw,900px);height:300px;background:url('../assets/technical-support-bg.jpg') right top/cover no-repeat;opacity:.22;filter:saturate(1.4) contrast(1.2);mask-image:linear-gradient(to left,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to left,black 50%,transparent 100%);pointer-events:none;z-index:0}
body.cot-static-page>#app>*,body.cot-static-page>#users-app>*{position:relative;z-index:1}
.tech-page .hdr{display:flex!important;background:rgba(2,10,24,.90)!important;border-bottom:1px solid rgba(41,120,196,.35)!important}.tech-page .hdr-mid{display:block!important;text-align:left!important}.tech-page .hdr-mid h1{color:#fff!important;text-align:left!important;font-size:22px!important;letter-spacing:.4px!important}.tech-page .hdr-mid p{color:#7f9dbc!important;text-align:left!important}.tech-page .hdr-r{display:flex!important}.tech-page .compact-menu{display:none!important}
.tech-page .step,.tech-page .ot-ficha,.tech-page .ot-card,.tech-page .form-opt,.tech-page .info-bar,.tech-page .qc-workspace,.tech-page .evidence-card{background:linear-gradient(180deg,rgba(5,21,46,.95),rgba(3,15,34,.98))!important;border-color:rgba(40,126,207,.48)!important;color:#eaf5ff!important;box-shadow:var(--cot-shadow)!important}
.tech-page .step-title,.tech-page .ot-code,.tech-page .form-opt-name{color:#fff!important}.tech-page .step-sub,.tech-page .ot-card-meta,.tech-page .l{color:#8fa8c8!important}.tech-page .tec-card{background:#061731!important;border-color:rgba(56,122,195,.55)!important;color:#dff2ff!important}.tech-page .tec-card:hover{border-color:#16b7ff!important;box-shadow:0 0 18px rgba(0,183,255,.15)!important}
.tech-page .topTabs,.tech-page .tech-tabs{background:transparent!important}.tech-page input,.tech-page select,.tech-page textarea{background:#061731!important;color:#fff!important;border-color:rgba(56,122,195,.55)!important}

@media(max-width:1100px){body.cot-static-page{grid-template-columns:88px minmax(0,1fr)!important}.cot-static-sidebar .cot-side-brand{justify-content:center;padding:8px 5px 26px}.cot-static-sidebar .cot-side-title,.cot-static-sidebar .cot-side-sub,.cot-static-sidebar .label,.cot-static-sidebar .cot-side-footer{display:none}.cot-static-sidebar .cot-side-btn{justify-content:center;padding:0}.cot-static-sidebar .cot-side-icon{width:54px;height:54px}}
@media(max-width:720px){body.cot-static-page{display:block!important}.cot-static-sidebar{position:static;height:auto;padding:8px;display:block}.cot-static-sidebar .cot-side-brand,.cot-static-sidebar .cot-side-footer,.cot-static-sidebar .cot-side-divider{display:none}.cot-static-sidebar .cot-side-nav{display:flex;overflow-x:auto}.cot-static-sidebar .cot-side-btn{width:54px;min-width:54px;height:46px}}


/* WOS v5.1 · navegación única + salida superior */
.tabs{display:none!important;}
.btn-logout-top{height:38px;padding:0 14px;border-radius:9px;border:1px solid rgba(85,160,230,.62);background:rgba(4,20,44,.86);color:#dceeff;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:.18s ease;}
.btn-logout-top:hover{border-color:#16b7ff;color:#5fd3ff;box-shadow:0 0 14px rgba(0,174,255,.15);}
@media(max-width:720px){.btn-logout-top{height:34px;padding:0 10px;font-size:10px;}}


/* WOS v5.4 · separación de ambientes */
.cot-route-denied,.service-route-denied{max-width:560px;margin:10vh auto;padding:28px;border:1px solid var(--cot-border,#354270);border-radius:18px;background:var(--cot-panel,#1F2943);color:var(--cot-text,#fff);text-align:center}
.cot-route-denied button,.service-route-denied button{margin-top:16px;padding:10px 16px;border:0;border-radius:8px;background:var(--cot-blue,#168cff);color:#fff;font-weight:700;cursor:pointer}
.users-environment-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid #354270;background:#10182a;color:#fff}.users-environment-bar div{display:flex;align-items:baseline;gap:12px}.users-environment-bar strong{font-size:24px;color:#36c8ff}.users-environment-bar span{color:#c4ceea}.users-environment-bar a{color:#36c8ff;font-weight:700}

.qc-plan-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px}.qc-plan-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#36c8ff}.qc-plan-title{font-size:22px;font-weight:900;color:#fff;margin-top:3px}.qc-plan-sub{font-size:11px;color:#8A96B4;margin-top:3px}

#new-commercial-scopes{width:100%;min-height:110px;padding:12px;border:1px solid var(--cot-border,rgba(46,151,255,.28));border-radius:10px;background:var(--cot-panel,#06142a);color:var(--cot-text,#f5f9ff);resize:vertical}#filter-role{height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--cot-border,rgba(46,151,255,.28));background:var(--cot-panel,#06142a);color:var(--cot-text,#f5f9ff)}

/* WOS v5.14 · Recepción restringida a carga inicial Excel */
.cot-reception-only{min-height:100vh;padding:38px;max-width:1180px;margin:0 auto;color:var(--cot-text,#f5f9ff)}
.cot-reception-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}
.cot-reception-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--cot-cyan,#00c8ff);margin-bottom:8px}
.cot-reception-head h1{font-size:38px;line-height:1.1;margin:0 0 10px;color:var(--cot-text,#f5f9ff)}
.cot-reception-head p{max-width:700px;margin:0;color:var(--cot-muted,#8fa8c8);line-height:1.55}
.cot-reception-panel,.cot-reception-summary{background:rgba(5,17,39,.94);border:1px solid rgba(47,128,216,.34);border-radius:18px;padding:24px;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.cot-reception-panel-title{font-size:20px;font-weight:800;color:var(--cot-text,#f5f9ff)}
.cot-reception-panel-sub{margin:7px 0 20px;color:var(--cot-muted,#8fa8c8);font-size:14px;line-height:1.5}
.cot-reception-sync,.cot-reception-success{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:700}
.cot-reception-sync{background:rgba(47,128,216,.14);border:1px solid rgba(47,128,216,.32);color:#8cc8ff}
.cot-reception-success{background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.3);color:#5de29a}
.cot-reception-summary{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cot-reception-summary>div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.cot-reception-count{font-size:36px;font-weight:900;color:var(--cot-cyan,#00c8ff)}
.cot-reception-summary p{margin:0;color:var(--cot-muted,#8fa8c8);font-size:13px;line-height:1.5;max-width:650px}
@media(max-width:760px){.cot-reception-only{padding:20px 14px}.cot-reception-head,.cot-reception-summary{flex-direction:column;align-items:stretch}.cot-reception-head h1{font-size:30px}}


/* WOS v5.15 · Recepción: Control sólo lectura + carga inicial */
.cot-reception-only{min-height:100vh;padding:28px 34px 90px;background:var(--cot-bg,#020816);color:var(--cot-text,#f5f9ff)}
.cot-reception-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;max-width:1480px;margin:0 auto 18px}
.cot-reception-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:var(--cot-cyan,#00b7ff);text-transform:uppercase}
.cot-reception-head h1{margin:6px 0 4px;font-size:34px;color:#fff}.cot-reception-head p{margin:0;color:#8fa8c8}
.cot-reception-nav{max-width:1480px;margin:0 auto 18px;display:flex;gap:8px;border-bottom:1px solid rgba(69,148,210,.22)}
.cot-reception-nav-btn{height:46px;padding:0 18px;border:0;border-bottom:3px solid transparent;background:transparent;color:#8fa8c8;font-weight:800;cursor:pointer}
.cot-reception-nav-btn.on{color:#fff;border-bottom-color:var(--cot-cyan,#00b7ff)}
.cot-reception-control,.cot-reception-panel{max-width:1480px;margin:0 auto;background:rgba(5,20,42,.92);border:1px solid rgba(46,151,255,.25);border-radius:18px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.cot-reception-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.cot-reception-section-head h2{margin:0 0 5px;color:#fff}.cot-reception-section-head p{margin:0;color:#8fa8c8}
.cot-reception-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.cot-reception-kpi{min-height:118px;padding:16px;border-radius:14px;background:rgba(8,30,59,.9);border:1px solid rgba(67,153,220,.2);display:grid;align-content:start;gap:8px}
.cot-reception-kpi-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#8fa8c8}.cot-reception-kpi strong{font-size:32px;color:#fff}.cot-reception-kpi-sub{font-size:12px;color:#6f8ca9}
.cot-reception-live{margin-top:16px;color:#8fa8c8;font-size:12px;display:flex;align-items:center;gap:7px}.cot-live-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px rgba(46,204,113,.7)}
.cot-reception-error{margin-bottom:14px;padding:12px 14px;border:1px solid rgba(231,76,60,.45);background:rgba(231,76,60,.12);border-radius:10px;color:#ffb7b7}
.cot-reception-panel-title{font-size:20px;font-weight:900;color:#fff}.cot-reception-panel-sub{margin:6px 0 18px;color:#8fa8c8;line-height:1.5}.cot-reception-sync,.cot-reception-success{margin-top:14px;padding:12px 14px;border-radius:10px}.cot-reception-sync{background:rgba(74,158,219,.12);color:#9ed6ff}.cot-reception-success{background:rgba(46,204,113,.12);color:#9ce9bb}
.cot-reception-scope{max-width:1480px;margin:14px auto 0;padding:12px 14px;color:#738ca5;font-size:12px;border:1px solid rgba(69,148,210,.14);border-radius:10px;background:rgba(5,20,42,.5)}
@media(max-width:720px){.cot-reception-only{padding:20px 14px 70px}.cot-reception-head{flex-direction:column}.cot-reception-head .btn-logout-top{width:100%}.cot-reception-nav-btn{flex:1}.cot-reception-section-head{flex-direction:column}.cot-reception-section-head .btn-ghost{width:100%}}


/* WOS v5.23 · Identidad WOS + tabla operacional ordenable */
.cot-auth-shell{grid-template-columns:minmax(0,1.25fr) minmax(390px,.75fr)!important;min-height:100vh!important;padding:4vh 3vw!important;gap:34px!important;background:radial-gradient(circle at 42% 58%,rgba(0,121,255,.15),transparent 28%),linear-gradient(145deg,#01050d,#020b19 48%,#01040b)!important}
.cot-auth-logo-stage{min-height:78vh!important;border:1px solid rgba(43,139,240,.28);border-radius:28px;overflow:hidden;padding:0!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;background:#020917!important;box-shadow:0 25px 75px rgba(0,0,0,.42),inset 0 0 45px rgba(0,86,196,.12)}
.cot-auth-logo-image{width:100%;height:100%;min-height:78vh;object-fit:cover;object-position:center;display:block;filter:saturate(1.08) contrast(1.03)}
.cot-auth-card{align-self:center!important;justify-self:stretch!important;max-width:560px!important;width:100%!important;padding:42px 38px!important;border:1px solid rgba(52,145,234,.35)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(4,16,36,.97),rgba(2,10,25,.98))!important;box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 0 28px rgba(0,102,255,.06)!important}
.cot-auth-card-head h2{font-size:28px!important;color:#fff!important;letter-spacing:.2px!important}
.cot-auth-form label{color:#dcecff!important}
.cot-auth-form input{height:56px!important;border-radius:11px!important;background:#06142a!important;border:1px solid rgba(82,147,215,.45)!important;color:#fff!important}
.cot-auth-form button{height:58px!important;border-radius:11px!important;background:linear-gradient(90deg,#087dff,#1358f4)!important;box-shadow:0 0 22px rgba(0,126,255,.18)!important}
.cot-side-logo-brand{padding:0 0 22px!important;display:block!important;overflow:hidden}
.cot-side-logo{display:block;width:100%;height:150px;object-fit:cover;object-position:center 43%;border-radius:12px;border:1px solid rgba(42,132,229,.32);box-shadow:0 0 24px rgba(0,115,255,.12)}
.sortable-th{padding:0!important;user-select:none}
.sort-head-btn{width:100%;min-height:42px;padding:8px 10px;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:flex-start;gap:7px;text-align:left;text-transform:uppercase;letter-spacing:1px;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.sort-head-btn:hover{background:rgba(0,137,255,.10);color:#c9ecff}
.sortable-th.sort-active .sort-head-btn{color:#53d6ff;background:rgba(0,137,255,.08)}
.sort-arrow{font-size:9px;opacity:.72;min-width:11px;text-align:center}
.sort-active .sort-arrow{opacity:1;color:#00c8ff}
.actions-th{min-width:72px}
.estado-acc-cell{vertical-align:middle}
.estado-acc-cell .est-badge{display:inline-block}
.dias-cell{text-align:center!important;background:rgba(0,126,255,.035)}
.dias-cell .dias-badge{min-width:48px;text-align:center;padding:5px 9px!important;font-size:12.5px!important;border-radius:8px!important}
@media(max-width:1100px){.cot-side-logo{height:72px;object-position:center 41%}.cot-auth-shell{grid-template-columns:1fr!important}.cot-auth-logo-stage{display:none!important}}

/* WOS v5.24 · Integración visual logo */
.cot-auth-shell{grid-template-columns:minmax(460px,1.06fr) minmax(390px,.94fr)!important;gap:28px!important;padding:5vh 6vw!important;background:radial-gradient(circle at 34% 46%,rgba(0,118,255,.14),transparent 28%),linear-gradient(145deg,#01050d,#020b19 52%,#01040b)!important}
.cot-auth-shell::before{display:none!important}
.cot-auth-logo-stage{min-height:0!important;height:auto!important;max-height:none!important;border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;padding:24px!important;align-items:center!important;justify-content:center!important}
.cot-auth-logo-image{width:min(680px,100%)!important;height:auto!important;min-height:0!important;max-height:560px!important;object-fit:contain!important;filter:drop-shadow(0 0 18px rgba(0,139,255,.28)) saturate(1.08) contrast(1.04)!important}
.cot-auth-card{max-width:520px!important}
.cot-side-logo-brand{padding:4px 2px 18px!important;border-bottom:1px solid rgba(38,129,229,.16);margin-bottom:10px;background:radial-gradient(circle at 50% 40%,rgba(0,118,255,.10),transparent 68%)}
.cot-side-logo{width:100%!important;height:118px!important;object-fit:contain!important;object-position:center!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 0 11px rgba(0,137,255,.24)) contrast(1.04) saturate(1.05);image-rendering:auto}
@media(max-width:1100px){.cot-side-logo{height:58px!important}.cot-auth-shell{grid-template-columns:1fr!important}.cot-auth-logo-stage{display:none!important}}

/* v5.31 · modales de confirmación visibles arriba del viewport */
.overlay{align-items:flex-start!important;overflow-y:auto!important;padding:6vh 16px 28px!important;box-sizing:border-box!important}.overlay>.modal{margin:0 auto!important;max-height:88vh!important;overflow:auto!important}

/* v6.6 · pantalla de cambio de clave obligatorio (PIN 4 dígitos) — Planificación / Gestión / Portal Cliente */
.service-pin-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:#020816;color:#f5f9ff}
.service-pin-card{width:min(460px,100%);padding:30px;border:1px solid rgba(0,183,255,.32);border-radius:20px;background:#06142a;box-shadow:0 22px 60px rgba(0,0,0,.4)}
.service-pin-kicker{font-size:12px;letter-spacing:.14em;color:#00b7ff;font-weight:800}
.service-pin-card h1{margin:10px 0 8px;font-size:30px}
.service-pin-card p{color:#8fa8c8;line-height:1.55}
.service-pin-card label{display:block;margin:16px 0 7px;font-size:13px;font-weight:700}
.service-pin-card input{width:100%;height:54px;border-radius:12px;border:1px solid rgba(46,151,255,.3);background:#020d20;color:#fff;text-align:center;font-size:26px;letter-spacing:.35em}
.service-pin-card button{width:100%;height:52px;margin-top:18px;border:0;border-radius:12px;background:#137bea;color:#fff;font-weight:800;cursor:pointer}
.service-pin-error{min-height:20px;margin-top:10px;color:#ff8f8f;font-size:13px}
.service-pin-card button:disabled{opacity:.6;cursor:wait}

/* v6.6 · botón de acción destructiva (reseteo masivo de claves) */
.u-danger{background:linear-gradient(90deg,#e0334f,#a3122b)!important;color:#fff!important;border:1px solid rgba(255,90,110,.5)!important}
.u-danger:disabled{opacity:.6!important;cursor:wait!important}

/* v6.9 · Menú lateral reubicado como barra superior, sobre las pestañas de Planificación/Operación */
.cot-shell .cot-side-logo-brand{padding:0!important;border-bottom:0!important;margin-bottom:0!important;background:none!important;flex-shrink:0!important}
.cot-shell .cot-side-logo{width:auto!important;height:40px!important;object-fit:contain!important;border-radius:8px!important}
.cot-shell .cot-side-nav{flex:1 1 auto!important}
@media(max-width:1100px){.cot-shell .cot-side-logo{height:34px!important}}
@media(max-width:720px){.cot-shell .cot-side-logo-brand{display:none!important}}

/* v6.79 · Los ítems de este menú (Control/Operación/Informes/Paneles...) ya no
   llevan ícono — la regla genérica de <1100px que oculta el label y deja solo
   el ícono dejaría los botones vacíos aquí. Se muestra el texto siempre. */
@media(max-width:1100px){
  .cot-shell .cot-side-btn{width:auto!important;padding:0 10px!important;justify-content:flex-start!important}
  .cot-shell .cot-side-btn .label{display:inline!important;font-size:12px!important}
}

/* v6.80 · Los submenús (Control/Operación/Paneles) se dibujan como un panel
   absoluto colgando del botón del grupo. .cot-side-nav tenía overflow-x:auto,
   que en CSS obliga a overflow-y:auto también — eso recortaba el submenú en
   vez de dejarlo sobresalir. Se permite que se salga del contenedor y se
   deja lugar para que quede por encima del contenido de abajo. */
.cot-shell .cot-side-nav{overflow:visible!important;flex-wrap:wrap!important}
.cot-side-menu-wrap{overflow:visible!important}

/* v6.9 · chip de identidad de usuario conectado + indicador de nube en QC/Gestión */
.user-session-chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;background:rgba(0,126,255,.10);color:#bfe0ff;border:1px solid rgba(48,158,255,.32);white-space:nowrap}
.user-session-chip .i{font-size:11px}
.cloud-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;background:rgba(46,204,113,.10);border:1px solid rgba(46,204,113,.3);white-space:nowrap}
@media(max-width:720px){.user-session-chip,.cloud-chip{font-size:9px;padding:3px 8px}}

/* v6.86 · Tabla de OT (Operación, Consolidado, etc.) en celular: en vez de
   forzar scroll horizontal sobre una tabla de 1200px, cada fila pasa a verse
   como una tarjeta apilada, con la etiqueta de columna (data-label, agregado
   en buildOTTable() de app.js) al lado de cada valor. */
/* v6.272 — el corte pasa de 760 a 1024 px: un iPad vertical mide 768 y
   horizontal 1024, y quedaban con la tabla de 1.200 px y scroll de lado. */
@media(max-width:1024px){
  .ot-wrap{overflow-x:visible!important}
  table.ot-tbl{min-width:0!important;width:100%!important;table-layout:auto!important}
  table.ot-tbl colgroup{display:none}
  table.ot-tbl thead{display:none}
  table.ot-tbl,table.ot-tbl tbody,table.ot-tbl tr{display:block;width:100%}
  table.ot-tbl tr{margin-bottom:12px;border:1px solid rgba(40,126,207,.42)!important;border-radius:12px!important;padding:4px 0;background:linear-gradient(180deg,rgba(5,21,46,.93),rgba(3,15,34,.96))}
  table.ot-tbl td{display:flex!important;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:9px 14px!important;border-bottom:1px solid rgba(49,102,157,.22)!important;text-align:right;white-space:normal}
  table.ot-tbl td:last-child{border-bottom:none!important}
  table.ot-tbl td::before{content:attr(data-label);flex-shrink:0;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#7f9dbc;text-align:left}
  table.ot-tbl td.dias-cell{text-align:right!important;background:transparent!important}
  table.ot-tbl .ot-code,table.ot-tbl .ot-eq,table.ot-tbl .ot-cli,table.ot-tbl .ot-fecha,table.ot-tbl .ot-obs{white-space:normal;text-align:right;overflow:visible}
  table.ot-tbl .flow-btns,table.ot-tbl td>div{justify-content:flex-end}
  /* v6.193 — BUG reportado por Cristián: en "Indicadores" (buildAnalytics,
     app.js) las secciones de a pares (.ch2: Por estado, QC, Evaluaciones,
     etc — 5 secciones en total) usaban grid-template-columns:1fr 1fr FIJO,
     sin ningún ajuste para celular — en una pantalla angosta las dos
     columnas se apretaban una contra la otra ("los cajones e información
     una sobre la otra"). Se colapsa a una sola columna bajo 760px. */
  .ch2{grid-template-columns:1fr!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   v6.272 · TABLET Y CELULAR
   Cristián: "necesito optimizar la navegación en tablet y celulares".
   Tres cosas, en este orden de importancia:
    1. Las tarjetas de OT se acomodan en dos columnas cuando hay ancho (tablet),
       así una tablet horizontal no muestra solo tres OT por pantalla.
    2. Todo lo que se toca mide al menos 44 px de alto (la medida mínima
       recomendada para el dedo): botones, selectores y pestañas. En el taller se
       usa con guantes.
    3. Nada obliga a arrastrar la pantalla de lado, y los filtros, los
       indicadores y los formularios se apilan en vez de apretarse.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Dos columnas de tarjetas cuando el ancho alcanza (tablet) ───────── */
@media(min-width:700px) and (max-width:1024px){
  table.ot-tbl tbody{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  table.ot-tbl tr{margin-bottom:0!important}
  /* El número de OT y los botones de avance quedan a lo ancho de su tarjeta. */
  table.ot-tbl td{padding:8px 12px!important}
}

/* ── 2 · Áreas de toque y navegación, hasta 1024 px ──────────────────────── */
@media(max-width:1024px){
  /* Las pestañas de módulo: se deslizan de lado, sin cortar la última, y con
     el dedo se alcanzan cómodas. */
  .tabs{height:auto!important;min-height:56px!important;padding:0 12px!important;gap:10px!important;
        overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{height:56px!important;min-height:56px;padding:0 14px!important;flex-shrink:0}
  /* Los botones y campos de la barra de herramientas: alto de dedo y el
     buscador a todo el ancho, que es lo que más se usa. */
  .toolbar{padding:12px!important;gap:10px!important}
  .toolbar input{width:100%!important;min-width:0}
  .toolbar input,.toolbar select,.toolbar button,.btn,.btn-y,.btn-ghost{min-height:44px}
  .toolbar button,.btn,.btn-y,.btn-ghost{padding-left:14px;padding-right:14px}
  /* Los selectores dentro de una fila de OT (Técnico, estado) también. */
  .tec-sel,table.ot-tbl select,table.ot-tbl button{min-height:40px}
  /* Los indicadores y los filtros se apilan en vez de apretarse. */
  .kpi{flex:1 1 100%!important}
  .an-fbar{flex-direction:column;align-items:stretch}
  .an-fbar select,.an-fbar input,.an-fbar button{width:100%;min-height:44px}
  /* Nada de arrastrar la pantalla de lado. */
  html,body{overflow-x:hidden}
  /* Las tablas que NO son de OT (Indicadores, Consolidado por cliente) se
     dejan desplazar solas dentro de su caja, sin mover la página. */
  .chart-c table,.an-tbl-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── 3 · Celular: los formularios y las ventanas ─────────────────────────── */
@media(max-width:760px){
  /* Las ventanas emergentes ocupan la pantalla en vez de quedar en un recuadro
     chico con scroll doble. */
  .modal{max-width:100%!important;padding:18px 16px!important;max-height:calc(100vh - 24px)!important;border-radius:14px!important}
  .overlay{padding:12px!important;align-items:flex-start!important}
  /* Un campo por línea: dos columnas en un celular no se pueden llenar. */
  .f-row,.f-row3{grid-template-columns:1fr!important}
  .f input,.f select,.f textarea{font-size:16px!important;min-height:44px}   /* 16px evita que el iPhone haga zoom al tocar */
  .f-actions{flex-direction:column-reverse;gap:10px}
  .f-actions button{width:100%;min-height:46px}
  /* Los indicadores, de a uno. */
  .kpi-row{flex-direction:column}
  .ch2{grid-template-columns:1fr!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   v6.272 · MENOS CROMO ANTES DE LA PRIMERA OT (celular y tablet)
   Medido en un celular de 390 px: había que bajar 831 px antes de ver la
   primera OT, porque el menú de módulos ocupaba 3 filas (165 px), las
   sub-pestañas 6 filas (219 px) y los filtros 6 líneas (232 px).
   No se saca ninguna opción: el menú y las sub-pestañas pasan a una sola línea
   que se desliza con el dedo, y los filtros se pliegan detrás de un botón.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* El menú de módulos se compacta. NO se le pone scroll horizontal a
     propósito: sus desplegables cuelgan de él en posición absoluta y un
     overflow los cortaría (es el bug que arregló la regla de más arriba). */
  .cot-sidebar{padding:6px 8px!important}
  .cot-shell .cot-side-nav{gap:6px!important}
  .cot-side-menu-wrap>.cot-side-btn,.cot-side-nav>.cot-side-btn{
    height:40px!important;min-height:40px;padding:0 10px!important;font-size:12px!important;white-space:nowrap}
  /* Las sub-pestañas de etapa SÍ: no tienen desplegables, así que pasan a una
     sola línea que se desliza con el dedo. */
  .cot-subtabs{flex-wrap:nowrap!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 12px!important}
  .cot-subtabs::-webkit-scrollbar{display:none}
  .cot-subtabs>button{flex:0 0 auto!important;white-space:nowrap;min-height:40px}
  /* La cabecera con el nombre del módulo y el reloj: más compacta. */
  .hdr{padding:6px 12px!important}
}

/* ── Los filtros plegables (ver buildToolbar en app.js) ──────────────────── */
.toolbar-filtros{display:contents}          /* en PC: los filtros se ven siempre, en la misma barra */
.toolbar-filtros-btn{display:none}          /* en PC: el botón no hace falta */
@media(max-width:1024px){
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar>input#search-inp{width:100%!important;order:1}
  .toolbar-filtros-btn{display:block;order:2;width:100%;min-height:44px}
  .toolbar-filtros{display:none;order:3;flex-direction:column;gap:10px;width:100%}
  .toolbar-filtros.abierto{display:flex}
  .toolbar-filtros select,.toolbar-filtros button{width:100%;min-height:44px}
  .toolbar>.ot-cnt{order:4;margin-left:0!important;text-align:center}
  .toolbar>button:not(.toolbar-filtros-btn){order:5;width:100%}
}

/* ── v6.272 · Altura del encabezado en celular ───────────────────────────── */
/* Medido a 390 px: la primera OT arrancaba a los 831 px, o sea una pantalla
   entera de menús antes del trabajo. Con estos ajustes el contenido empieza
   arriba de los 550 px y se ven OT sin desplazarse. */
@media(max-width:600px){
  /* La cabecera: el nombre del módulo y el estado de la nube bastan; la fecha
     completa en letras ocupaba una línea entera. */
  .hdr{padding:5px 12px!important;gap:8px!important}
  .hdr .hdr-fecha,.hdr .hdr-sub,.hdr p{display:none!important}
  /* El menú de módulos, lo más apretado que sigue siendo legible. */
  .cot-side-menu-wrap>.cot-side-btn,.cot-side-nav>.cot-side-btn{
    height:38px!important;min-height:38px;padding:0 8px!important;font-size:11.5px!important}
  .cot-sidebar{padding:5px 6px!important}
  /* La barra de búsqueda y filtros: menos aire y el contador junto al botón de
     Excel, en la misma línea. */
  .toolbar{padding:10px!important;gap:8px!important;margin:10px!important}
  .toolbar>.ot-cnt{order:4;flex:1 1 auto;text-align:left;align-self:center}
  .toolbar>button:not(.toolbar-filtros-btn){order:5;width:auto!important;flex:0 0 auto}
  /* La barra vuelve a ser horizontal para que el contador y el botón de Excel
     compartan línea; el buscador y los filtros ocupan el ancho completo. */
  .toolbar{flex-direction:row!important;flex-wrap:wrap}
  .toolbar>input#search-inp,.toolbar>.toolbar-filtros-btn,.toolbar>.toolbar-filtros{flex:1 1 100%}
}
/* v6.301 — WOS: inicio de sesión a pantalla completa. La imagen (16:9) trae el
   logo a la izquierda; el formulario va a la derecha, sobre el piso del taller.
   En pantallas angostas la imagen queda arriba (se ve el logo) y el formulario debajo. */
.cot-auth-shell.wos-login{display:flex!important;align-items:center!important;justify-content:flex-end!important;grid-template-columns:none!important;gap:0!important;min-height:100vh!important;padding:4vh 6vw!important;background:#01050d url('../assets/wos-login-bg.jpg') center center/cover no-repeat!important}
.cot-auth-shell.wos-login::before,.cot-auth-shell.wos-login::after{display:none!important}
.wos-login .cot-auth-card{width:min(440px,100%)!important;max-width:440px!important;margin:0!important;background:rgba(2,10,25,.80)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Pantallas menos anchas que 16:10 (4:3, 5:4): la imagen ocupa el ancho completo arriba
   y se funde hacia abajo, así el logo nunca queda tapado ni cortado. */
@media(min-width:901px) and (max-aspect-ratio:8/5) and (min-aspect-ratio:1/1){
  .cot-auth-shell.wos-login{background:linear-gradient(to bottom,transparent 0,transparent calc(56.25vw - 140px),#01050d 56.25vw),#01050d url('../assets/wos-login-bg.jpg') left top/100% auto no-repeat!important;padding-right:3vw!important}
  .wos-login .cot-auth-card{width:min(400px,100%)!important;max-width:400px!important}
}
@media(max-width:900px),(max-aspect-ratio:1/1){
  .cot-auth-shell.wos-login{flex-direction:column!important;justify-content:flex-start!important;padding:0 0 28px!important;background:#01050d!important}
  .cot-auth-shell.wos-login::before{display:block!important;content:""!important;position:static!important;width:100%!important;height:auto!important;aspect-ratio:16/10;background:url('../assets/wos-login-bg.jpg') 30% 52%/cover no-repeat!important;margin-bottom:18px;opacity:1!important;filter:none!important;mask-image:linear-gradient(#000 78%,transparent);-webkit-mask-image:linear-gradient(#000 78%,transparent)}
  .wos-login .cot-auth-card{width:calc(100% - 32px)!important;padding:26px 20px!important}
}