:root{--bg:#000;--panel:#191919;--soft:#222;--text:#fff;--muted:#bfc7cd;--line:#2e4c50;--brand:#3b747b;--brand2:#69d3d1;--paper:#f2f2f2;--warn:#ffe05d;--danger:#e96073;--ok:#26d98b;--shadow:0 20px 70px rgba(0,0,0,.35)} :root.light{--bg:#f2f2f2;--panel:#fff;--soft:#f7f7f7;--text:#111;--muted:#5b6268;--line:#d7e1e3;--brand:#3b747b;--brand2:#2f8e96;--paper:#fff;--shadow:0 15px 45px rgba(0,0,0,.08)} *{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}a{color:inherit}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,rgba(59,116,123,.35),transparent 35%),var(--bg)}.login-card{width:min(92vw,430px);padding:34px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#111);border-radius:28px;box-shadow:var(--shadow)}.brand,.logo{display:flex;gap:12px;align-items:center}.brand img,.logo img{width:46px;height:46px;border-radius:13px}.brand span,.logo span{color:var(--warn);font-size:.78rem;letter-spacing:2px}.login-card h1{font-size:34px}.login-card label{display:block;margin:18px 0 8px}.login-card input,.field input,.field select,.field textarea,.search{width:100%;background:#111b2a;color:var(--text);border:1px solid var(--line);border-radius:14px;padding:13px}.light .login-card input,.light .field input,.light .field select,.light .field textarea,.light .search{background:#fff;color:#111}.btn,.iconbtn{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer}.btn.primary,.btn.yellow{background:var(--brand);border-color:var(--brand);color:#fff}.btn.yellow{background:var(--warn);color:#000}.hidden{display:none!important}.sidebar{position:fixed;inset:0 auto 0 0;width:292px;background:linear-gradient(180deg,var(--panel),#050808);border-right:1px solid var(--line);padding:22px;z-index:10;transition:.25s}.sidebar.collapsed{width:88px}.sidebar.collapsed nav span,.sidebar.collapsed .logo strong,.sidebar.collapsed .session{display:none}.logo{cursor:pointer;margin-bottom:24px}.logo strong{line-height:1.05}.sidebar nav{display:grid;gap:8px}.navitem{display:flex;align-items:center;gap:13px;padding:14px;border-radius:14px;color:var(--muted);font-weight:800;cursor:pointer}.navitem.active,.navitem:hover{background:rgba(59,116,123,.25);color:var(--text);outline:1px solid var(--brand)}.navitem svg,.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}.session{position:absolute;left:22px;right:22px;bottom:110px;border:1px solid var(--line);border-radius:20px;padding:18px;background:rgba(255,255,255,.03);display:grid;gap:8px}.session small{color:var(--ok)}.app{margin-left:292px;min-height:100vh;transition:.25s}.sidebar.collapsed+.app{margin-left:88px}.topbar{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.84);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}.light .topbar{background:rgba(242,242,242,.88)}.topbar h1{font-size:42px;margin:0 0 8px}.topbar p{margin:0;color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.iconbtn{width:48px;height:48px;padding:0;display:grid;place-items:center}.bell{position:relative}.bell:after{content:attr(data-count);position:absolute;right:-5px;top:-8px;background:#ff4d74;color:#fff;border-radius:50%;font-size:12px;width:22px;height:22px;display:grid;place-items:center}.avatar{display:block;position:relative;cursor:pointer}.avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--brand2)}.avatar input{display:none}.notif-wrap{position:relative}.notif-preview{display:none;position:absolute;right:0;top:58px;width:360px;max-height:360px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px}.notif-wrap:hover .notif-preview{display:block}.notif-item{padding:12px;border-bottom:1px solid var(--line)}.notif-item b{display:block}.notif-item small{color:var(--muted)}main{padding:28px 30px 120px}.grid{display:grid;gap:18px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card,.panel{background:linear-gradient(180deg,var(--panel),rgba(25,25,25,.82));border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.light .card,.light .panel{background:#fff}.card span{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase}.card strong{display:block;font-size:30px;margin-top:12px}.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;align-items:center}.actions{display:flex;gap:10px;flex-wrap:wrap}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:15px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{color:#a9dfe3;text-transform:uppercase;font-size:.78rem}tr:hover{background:rgba(59,116,123,.12)}.badge{padding:7px 10px;border-radius:999px;border:1px solid var(--brand);color:var(--brand2);font-weight:800;font-size:.8rem}.badge.danger{border-color:var(--danger);color:var(--danger)}.badge.warn{border-color:var(--warn);color:var(--warn)}.rowbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--text);display:inline-grid;place-items:center;margin-right:6px;cursor:pointer}.rowbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}.switch{width:54px;height:28px;border-radius:99px;background:#34484d;border:1px solid var(--line);position:relative;display:inline-block;cursor:pointer}.switch i{position:absolute;width:22px;height:22px;border-radius:50%;background:#94a3ad;left:3px;top:2px;transition:.2s}.switch.on{background:#245d60}.switch.on i{left:27px;background:#69d3d1}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field label{font-weight:800;font-size:.9rem}.field.full{grid-column:1/-1}.wa-float{position:fixed;right:22px;bottom:22px;background:#25d366;color:#041008;border-radius:999px;padding:17px 24px;font-weight:900;z-index:20;box-shadow:var(--shadow);cursor:pointer}.wa-menu{position:fixed;right:22px;bottom:82px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:10px;display:grid;gap:8px;z-index:21;box-shadow:var(--shadow)}.wa-menu a{padding:11px 14px;text-decoration:none;border-radius:12px;background:var(--soft)}footer{text-align:center;color:var(--muted);padding:28px;border-top:1px solid var(--line)}@media(max-width:900px){.sidebar{transform:translateX(-100%);width:290px}.sidebar.open{transform:translateX(0)}.app,.sidebar.collapsed+.app{margin-left:0}.topbar{padding:18px;align-items:flex-start}.topbar h1{font-size:30px}.top-actions{position:fixed;left:12px;right:12px;bottom:12px;background:var(--panel);padding:10px;border:1px solid var(--line);border-radius:22px;justify-content:center;z-index:30}.cards{grid-template-columns:1fr}.toolbar{display:grid}.form-grid{grid-template-columns:1fr}.notif-preview{right:-80px;width:300px}main{padding:18px 14px 120px}.card,.panel{padding:16px}.session{display:none}} /* Refactor visual: modo claro profesional, scrollbars y perfil */ html{scrollbar-color:var(--brand) var(--soft);scrollbar-width:thin}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--soft);border-radius:20px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:20px;border:2px solid var(--soft)}::-webkit-scrollbar-thumb:hover{background:var(--brand2)} :root.light{--bg:#f4f6f7;--panel:#ffffff;--soft:#eef3f4;--text:#172022;--muted:#536369;--line:#cddbdd;--brand:#3b747b;--brand2:#23666d;--paper:#fff;--warn:#f2c94c;--shadow:0 16px 50px rgba(18,38,45,.08)} .light body{background:var(--bg);color:var(--text)}.light .sidebar{background:linear-gradient(180deg,#ffffff,#eef3f4);box-shadow:10px 0 30px rgba(0,0,0,.04)}.light .session{background:#fff;color:var(--text);box-shadow:0 10px 25px rgba(0,0,0,.06)}.light .navitem{color:#536369}.light .navitem.active,.light .navitem:hover{background:#dcebec;color:#111;outline-color:#8dbabd}.light .topbar{background:rgba(244,246,247,.92);color:#111}.light .card,.light .panel,.light .login-card{background:#fff;color:#111;box-shadow:var(--shadow)}.light table{color:#111}.light tr:hover{background:#edf7f8}.light th{color:#2d676d}.light .btn,.light .iconbtn,.light .rowbtn{background:#fff;color:#111;border-color:#cddbdd}.light .search,.light .field input,.light .field select,.light .field textarea{background:#fff;color:#111;border-color:#c7d5d8}.light .notif-preview,.light .wa-menu{background:#fff;color:#111}.light .swal2-popup{background:#fff!important;color:#111!important}.swal2-popup{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important}.swal2-input,.swal2-select,.swal2-textarea{background:var(--soft)!important;color:var(--text)!important;border-color:var(--line)!important}.chart-panel{margin-top:18px;min-height:360px}.chart-panel canvas{width:100%;height:310px;display:block}.profile-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:18px}.profile-card{background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;text-align:center;padding-bottom:26px}.profile-cover{height:120px;background:linear-gradient(120deg,var(--brand),#312b7a)}.profile-avatar{width:112px;height:112px;margin:-56px auto 10px;border-radius:32px;background:var(--soft);border:8px solid var(--panel);display:grid;place-items:center;box-shadow:var(--shadow)}.profile-avatar img{width:100%;height:100%;border-radius:24px;object-fit:cover}.profile-card h2{margin:12px 0 8px;font-size:30px}.profile-info{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left;padding:22px}.profile-info div{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--soft)}.profile-info b{display:block;color:var(--muted);text-transform:uppercase;font-size:.78rem;letter-spacing:.04em}.profile-info p{margin:.45rem 0 0;font-weight:800}.btn.small{padding:8px 12px;border-radius:999px}.quick{display:block;width:100%;margin:10px 0;text-align:center}.role-matrix table{min-width:1200px}.role-matrix td{vertical-align:top}.check{display:block;line-height:1.8;color:var(--text);font-size:.86rem}.check input{accent-color:var(--brand)} @media(max-width:900px){.profile-grid{grid-template-columns:1fr}.profile-info{grid-template-columns:1fr}.profile-card h2{font-size:24px}.chart-panel{min-height:300px}.chart-panel canvas{height:260px}.topbar{padding-bottom:88px}.cards{grid-template-columns:1fr}.sidebar.open{transform:translateX(0)}} /* vFinal dashboard profesional */ .dashboard-filters{margin-bottom:18px;padding:18px 22px}.filter-row{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr)) auto;gap:14px;align-items:end}.filter-row label{display:block;color:var(--muted);font-weight:900;text-transform:uppercase;font-size:.75rem;margin-bottom:6px}.filter-row input,.filter-row select{width:100%;background:var(--soft);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:12px}.light .filter-row input,.light .filter-row select{background:#fff;color:#111}.card{position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:auto 18px 0 18px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2));opacity:.8;border-radius:99px}.chart-panel .toolbar{margin-bottom:4px}.chart-panel h2{margin:.1rem 0}.chart-panel p{margin:.2rem 0;color:var(--muted)}footer{line-height:1.8}.footer-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:12px}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{color:var(--brand2)}@media(max-width:1100px){.filter-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.filter-row{grid-template-columns:1fr}.filter-row .btn{width:100%}.top-actions .btn{padding:10px 12px}.avatar img{width:42px;height:42px}.notif-preview{max-height:60vh}.footer-links{gap:12px;display:grid}} /* Ajustes finales Master Profe */ .module-note{border:1px solid var(--line);background:rgba(59,116,123,.12);border-radius:18px;padding:16px 18px;margin-bottom:18px}.module-note b{font-size:1.05rem}.module-note p{margin:.35rem 0 0;color:var(--muted);line-height:1.45}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}.detail-grid div{border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:12px}.detail-grid b{display:block;color:var(--brand2);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.detail-grid span{display:block;margin-top:5px;color:var(--text);font-weight:700}.pager-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;flex-wrap:wrap}.pager-row select{background:var(--soft);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px}.module-toolbar{align-items:flex-start}.top-export{justify-content:flex-end}.distribuciones-panel .table-wrap{box-shadow:inset 0 0 0 1px rgba(105,211,209,.08)} .light .module-note{background:#edf7f8}.light .detail-grid div{background:#fff}.light .pager-row select{background:#fff;color:#111} @media(max-width:650px){.detail-grid{grid-template-columns:1fr}.module-toolbar{display:grid}.top-export .btn{width:100%}.pager-row{display:grid}.pager-row>div{display:flex;gap:8px}.pager-row .btn{flex:1}} /* Fix sidebar session overlap and responsive spacing */ .sidebar{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sidebar nav{flex:1;min-height:0;padding-bottom:18px}.session{position:static;left:auto;right:auto;bottom:auto;margin-top:auto;flex-shrink:0}.sidebar.collapsed .session{display:none}.sidebar.collapsed nav{padding-bottom:0}.data-panel{overflow:hidden}.swal2-popup .module-note{text-align:left}.swal2-popup select option{background:#111b2a;color:#fff}.light .swal2-popup select option{background:#fff;color:#111}.btn:disabled{opacity:.45;cursor:not-allowed}.badge{white-space:nowrap}.badge.warn{background:rgba(255,224,93,.08)}.badge.danger{background:rgba(233,96,115,.08)} @media(max-height:760px){.navitem{padding:10px 12px}.logo{margin-bottom:14px}.session{padding:14px}} /* ========================================================= MOBILE FIRST REFACTOR - HEADER STICKY + BOTTOM NAV ========================================================= */ .page-heading{padding:28px 30px 0}.page-heading h1{font-size:42px;margin:0 0 8px}.page-heading p{margin:0;color:var(--muted)}.desktop-title{display:block}.header-session{display:grid;line-height:1.05;min-width:120px}.header-session b{font-size:.95rem}.header-session small{color:var(--ok);font-weight:800;text-transform:capitalize}.mobile-bottom-nav,.more-sheet{display:none} @media(min-width:901px){.page-heading{display:none}.topbar{padding:28px 30px}.sidebar{overflow:hidden}.sidebar nav{max-height:calc(100vh - 120px);overflow:auto;padding-bottom:20px}.sidebar .session{display:none!important}.top-actions{flex-wrap:nowrap}.header-session{border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:8px 12px}} @media(max-width:900px){ body{padding-bottom:calc(104px + env(safe-area-inset-bottom));overflow-x:hidden}.sidebar{display:none!important}.app,.sidebar.collapsed+.app{margin-left:0}.desktop-title{display:none!important}.topbar{position:sticky;top:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-top));background:rgba(0,0,0,.86);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);display:flex;justify-content:center}.light .topbar{background:rgba(244,246,247,.92)}.top-actions{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:var(--shadow)}.iconbtn{width:48px;height:48px;min-width:48px;border-radius:16px}.avatar img{width:52px;height:52px}.header-session{display:grid;flex:1;min-width:0;line-height:1.05}.header-session b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-session small{font-size:.72rem;color:var(--ok);font-weight:900;text-transform:capitalize}.top-actions .btn{height:48px;border-radius:16px;padding:0 14px}.top-actions #installBtn{display:none!important}.page-heading{position:relative;z-index:5;padding:22px 20px 0}.page-heading h1{font-size:38px;line-height:1.05;margin:0 0 8px}.page-heading p{font-size:1rem;line-height:1.35;max-width:95%}main{padding:22px 20px 112px}.cards{grid-template-columns:1fr}.card,.panel{border-radius:24px;padding:22px}.card strong{font-size:36px}.toolbar{display:grid;gap:14px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions .btn{width:100%;min-height:48px}.table-wrap{border-radius:20px}.wa-float{right:22px;bottom:126px;padding:18px 28px;border-radius:999px}.wa-menu{right:20px;bottom:190px}.notif-preview{position:fixed;left:12px;right:12px;top:96px;width:auto;max-height:min(60vh,460px);border-radius:22px;z-index:90}.notif-item{font-size:.95rem}.mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:84px;background:rgba(13,21,28,.94);border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;z-index:80;box-shadow:0 18px 60px rgba(0,0,0,.45);backdrop-filter:blur(18px)}.light .mobile-bottom-nav{background:rgba(255,255,255,.96)}.bottom-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:var(--muted);border-radius:22px;font-weight:900;min-width:0;padding:6px 4px}.bottom-item svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2}.bottom-item span{font-size:.76rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bottom-item.active{background:linear-gradient(145deg,var(--brand),#27494f);color:#fff;box-shadow:0 10px 30px rgba(59,116,123,.35)}.bottom-item.more{color:var(--text)}.more-sheet{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:100;display:grid;place-items:end center;padding:16px}.more-sheet.hidden{display:none}.more-sheet-card{width:min(560px,100%);max-height:72vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:var(--shadow)}.more-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.more-head b{font-size:1.1rem}.more-links{display:grid;gap:8px}.more-link{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--soft);border:1px solid var(--line);color:var(--text);font-weight:900}.more-link svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}.filter-row{grid-template-columns:1fr!important}.filter-row .btn{width:100%}.profile-grid{grid-template-columns:1fr!important}.profile-info{grid-template-columns:1fr!important}.swal2-popup{width:min(94vw,760px)!important}.form-grid{grid-template-columns:1fr}.footer-links{display:grid;gap:8px}.chart-panel{min-height:360px}.chart-panel canvas{height:300px!important}.btn:disabled{opacity:.45} } @media(max-width:390px){.page-heading h1{font-size:34px}.top-actions{gap:6px}.iconbtn{width:44px;height:44px;min-width:44px}.avatar img{width:48px;height:48px}.top-actions .btn{padding:0 10px}.header-session b{font-size:.92rem}.bottom-item span{font-size:.68rem}.mobile-bottom-nav{height:80px}.card strong{font-size:32px}} /* ========================================================= Ajustes vEntrega: desktop compacto, configuraciones, login ========================================================= */ @media(min-width:901px){ .sidebar nav{align-content:start;display:grid;grid-auto-rows:min-content;gap:6px;max-height:calc(100vh - 130px)} .navitem{padding:11px 14px;min-height:46px} .sidebar{padding:22px 18px} .logo{margin-bottom:18px} } .success-card{border-color:#26d98b!important}.success-card:before{background:#26d98b!important}.global-card{border-color:#69d3d1!important}.global-card:before{background:#69d3d1!important} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-grid .field small{display:block;color:var(--muted);margin-top:6px;word-break:break-all}.settings-grid input[type=color]{height:48px;padding:4px}.settings-panel .module-note{margin-top:18px}.login-actions{display:grid;gap:10px;margin-top:14px}.btn.google{background:#fff;color:#111}.btn.ghost{background:transparent}.login-card small{color:var(--muted)} @media(max-width:900px){.settings-grid{grid-template-columns:1fr}.header-session b{line-height:1.05}.header-session small{display:block;margin-top:3px}.notif-preview{overflow-x:hidden}.notif-item p{overflow-wrap:anywhere}.login-card{width:min(92vw,380px);padding:28px}.login-page{align-items:start;padding-top:56px}.topbar{position:sticky!important}.page-heading{padding-top:18px}.page-heading h1{font-size:34px}.top-actions{align-items:center}.top-actions .btn#logoutBtn{font-size:0}.top-actions .btn#logoutBtn:after{content:'Salir';font-size:14px}.top-actions .header-session{max-width:105px}.top-actions .header-session b{white-space:normal;font-size:.9rem}.top-actions .header-session small{font-size:.7rem}} /* Ajustes finales 2026-06-11: mobile first, filtros flotantes, WhatsApp circular */ .cards:has(.broker-card){grid-template-columns:repeat(5,minmax(0,1fr));} .filter-float{position:fixed;right:22px;bottom:92px;width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:var(--brand);color:#fff;display:grid;place-items:center;z-index:29;box-shadow:var(--shadow);cursor:pointer} .filter-float svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2.2} .wa-float{width:58px;height:58px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:0;border:0} .wa-float svg{width:29px;height:29px;stroke:#041008;fill:none;stroke-width:2.1} .settings-grid small{color:var(--muted);display:block;margin-top:6px;word-break:break-word} @media(max-width:1200px){.cards:has(.broker-card){grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:900px){ .cards:has(.broker-card){grid-template-columns:1fr;} #dashStats{order:1}.dashboard-filters{order:2}.chart-panel{order:3} .dashboard-filters.mobile-collapsed{display:none} .filter-float{right:18px;bottom:84px} .wa-float{right:18px;bottom:154px} } /* Login interactivo inversión + ajustes finales 2026-06-11 */ .login-page{overflow:hidden;background:radial-gradient(circle at 10% 10%,rgba(105,211,209,.20),transparent 28%),radial-gradient(circle at 85% 20%,rgba(255,224,93,.13),transparent 25%),linear-gradient(135deg,#050708,#101b1d 55%,#05100d)!important;} .login-shell{width:min(1120px,94vw);min-height:680px;display:grid;grid-template-columns:.95fr 1.05fr;border:1px solid rgba(105,211,209,.28);border-radius:34px;overflow:hidden;background:rgba(10,14,16,.76);box-shadow:0 30px 90px rgba(0,0,0,.52);backdrop-filter:blur(18px)} .login-panel{padding:44px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))} .login-panel h1{font-size:48px;line-height:1;margin:18px 0 12px}.login-copy,.google-help{color:var(--muted);line-height:1.55}.login-badge{display:inline-flex;width:max-content;margin-top:28px;padding:8px 12px;border-radius:999px;background:rgba(105,211,209,.12);border:1px solid rgba(105,211,209,.34);font-weight:900;color:var(--brand2)} .login-form label{display:block;font-weight:900;margin:14px 0 8px}.login-form input{width:100%;border:1px solid var(--line);border-radius:16px;background:#0f1b24;color:var(--text);padding:15px}.login-form .btn{width:100%;margin-top:16px}.login-actions{display:grid;gap:10px;margin-top:16px}.btn.google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#172033;border-color:#e5e7eb}.btn.google svg{width:22px;height:22px}.btn.ghost{background:transparent} .investment-hero{position:relative;min-height:680px;background:radial-gradient(circle at 35% 20%,rgba(105,211,209,.55),transparent 16%),linear-gradient(140deg,#245d60,#102025 45%,#020304);overflow:hidden}.investment-hero:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.035) 53px 54px),repeating-linear-gradient(0deg,transparent 0 52px,rgba(255,255,255,.03) 53px 54px);transform:perspective(500px) rotateX(55deg) translateY(160px);animation:gridMove 8s linear infinite}.ticker{position:absolute;top:28px;left:28px;right:28px;display:flex;gap:12px;flex-wrap:wrap}.ticker span{padding:9px 12px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);font-weight:900}.coin{position:absolute;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-weight:1000;background:linear-gradient(135deg,#ffe05d,#b68b00);color:#111;box-shadow:0 12px 38px rgba(255,224,93,.25);animation:float 4.5s ease-in-out infinite}.coin-a{right:84px;top:150px}.coin-b{left:70px;bottom:160px;animation-delay:1s}.chart-lines{position:absolute;left:70px;right:70px;bottom:78px;height:250px}.chart-lines i{position:absolute;left:0;right:0;height:2px;background:rgba(105,211,209,.18)}.chart-lines i:nth-child(1){bottom:30px}.chart-lines i:nth-child(2){bottom:90px}.chart-lines i:nth-child(3){bottom:150px}.chart-lines i:nth-child(4){bottom:210px}.chart-lines:after{content:"";position:absolute;left:0;right:0;bottom:35px;height:170px;background:linear-gradient(135deg,transparent 0 18%,rgba(105,211,209,.25) 19% 45%,rgba(255,224,93,.35) 46% 70%,rgba(105,211,209,.32) 71%);clip-path:polygon(0 82%,18% 62%,37% 70%,55% 38%,72% 50%,100% 12%,100% 100%,0 100%);animation:pulse 3s ease-in-out infinite}.hero-card{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(390px,74%);padding:32px;border-radius:28px;border:1px solid rgba(255,255,255,.18);background:rgba(5,9,10,.62);backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.35)}.hero-card small{color:var(--brand2);font-weight:900;text-transform:uppercase}.hero-card strong{display:block;font-size:34px;line-height:1.05;margin:10px 0}.hero-card em{color:#d7e7e8;font-style:normal}.light .login-page{background:linear-gradient(135deg,#edf7f8,#fff7d7)!important}.light .login-shell{background:rgba(255,255,255,.84)}.light .login-panel{background:rgba(255,255,255,.72)}.light .login-form input{background:#fff;color:#111}.light .investment-hero{background:linear-gradient(140deg,#e8fbfb,#fff1a6 55%,#d6f1f1)}.light .hero-card{background:rgba(255,255,255,.72);color:#111}.light .hero-card em{color:#334155}.light .ticker span{background:rgba(255,255,255,.65);color:#111}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes pulse{0%,100%{opacity:.75;transform:scaleY(.96)}50%{opacity:1;transform:scaleY(1.03)}}@keyframes gridMove{to{transform:perspective(500px) rotateX(55deg) translateY(212px)}} @media(max-width:850px){.login-shell{display:block;min-height:auto}.investment-hero{display:none}.login-panel{padding:28px}.login-panel h1{font-size:36px}} .login-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52;filter:saturate(1.1) contrast(1.05)}.investment-hero>*:not(.login-bg-video){position:absolute}.investment-hero .ticker{position:absolute}.login-brand-card{z-index:2}.notif-item{cursor:pointer;border-radius:12px}.notif-item:hover{background:rgba(105,211,209,.10)}.notif-item.is-read{opacity:.62}.notification-row{cursor:pointer}.notification-row.is-read{opacity:.72} /* V06: Login derecho controlado estrictamente por Configuraciones. - css: solo animación CSS propia. - image: solo imagen configurada/subida, sin cards ni overlays informativos. - video: solo video configurado, sin cards ni overlays informativos. */ .investment-hero.bg-image, .investment-hero.bg-video{background:#020304!important;} .investment-hero.bg-image:before, .investment-hero.bg-video:before{display:none!important;content:none!important;} .investment-hero.bg-image .ticker, .investment-hero.bg-image .coin, .investment-hero.bg-image .chart-lines, .investment-hero.bg-video .ticker, .investment-hero.bg-video .coin, .investment-hero.bg-video .chart-lines, .investment-hero .hero-card, .investment-hero .login-brand-card{display:none!important;} .investment-hero.bg-video .login-bg-video{opacity:1!important;filter:none!important;z-index:0;} .investment-hero.bg-css .login-bg-video{display:none!important;} /* V07: Fondo de login exclusivo y compatible con YouTube/direct video/imagen subida */ .investment-hero{overflow:hidden;position:relative;background-color:#061415;} .login-bg-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important;border:0!important;opacity:1!important;filter:none!important;pointer-events:none!important;} .login-bg-video.youtube{width:177.78%!important;height:177.78%!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;max-width:none!important;max-height:none!important;} .investment-hero.bg-css .login-bg-video{display:none!important;} .investment-hero.bg-image::before,.investment-hero.bg-video::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.16));pointer-events:none;} .investment-hero.bg-image .ticker,.investment-hero.bg-image .coin,.investment-hero.bg-image .chart-lines,.investment-hero.bg-video .ticker,.investment-hero.bg-video .coin,.investment-hero.bg-video .chart-lines{display:none!important;} .investment-hero.bg-image,.investment-hero.bg-video{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;} /* v14: pestañas, actualizador, footer sticky y login mobile */ .app{display:flex;flex-direction:column}.app main{flex:1}footer{position:sticky;bottom:0;z-index:4;background:rgba(5,8,9,.96);border-top:1px solid var(--line);padding:14px 24px;backdrop-filter:blur(14px)}.light footer{background:rgba(255,255,255,.96)} .settings-tabs{display:flex;gap:6px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:18px;overflow:auto}.settings-tab{border:0;background:transparent;color:var(--muted);font-weight:900;padding:12px 18px;border-radius:12px;cursor:pointer;white-space:nowrap}.settings-tab.active{background:var(--brand);color:#fff}.version-pill{padding:10px 15px;border-radius:999px;background:rgba(37,211,102,.13);border:1px solid #25d366;color:#25d366;font-weight:900}.update-drop{min-height:180px;border:2px dashed #25d366;border-radius:22px;display:grid;place-items:center;text-align:center;padding:30px;cursor:pointer;background:rgba(37,211,102,.04)}.update-drop b,.update-drop span{display:block}.update-drop span{color:var(--muted);margin-top:8px}.update-drop input{margin-top:18px;max-width:100%}.update-btn{width:100%;margin-top:16px}.update-history>div{display:grid;grid-template-columns:100px 1fr auto;gap:15px;padding:16px 4px;border-bottom:1px solid var(--line)}.update-history span,.update-history small{color:var(--muted)} @media(max-width:850px){.login-page{overflow:auto!important;align-items:start;padding:12px}.login-shell{width:100%;min-height:calc(100dvh - 24px);border-radius:24px}.login-panel{padding:22px!important;min-height:auto}.login-panel h1{font-size:30px;margin:18px 0 8px}.login-copy{margin-bottom:14px}.login-form label{margin:10px 0}.login-form input{padding:12px}.login-actions{gap:8px}.login-actions .btn{min-height:46px}.brand img{width:40px;height:40px}.login-badge{margin-top:12px}.update-history>div{grid-template-columns:1fr}.app footer{position:relative;padding-bottom:110px}} @media(max-height:700px) and (max-width:850px){.login-panel{padding:16px!important}.login-panel h1{font-size:26px;margin:10px 0 4px}.login-copy{font-size:.88rem}.login-badge{display:none}.login-form label{margin:6px 0}.login-actions .btn{min-height:42px;padding:9px}.brand img{width:36px;height:36px}} /* v1.6.0 · Configuraciones por pestañas tipo slider */ .settings-shell{width:100%;min-width:0}.settings-tabs{position:sticky;top:74px;z-index:8;display:flex;gap:6px;padding:6px;background:rgba(25,25,25,.94);border:1px solid var(--line);border-radius:16px;margin-bottom:18px;overflow-x:auto;scrollbar-width:thin;backdrop-filter:blur(16px)}.light .settings-tabs{background:rgba(255,255,255,.94)}.settings-tab{min-height:42px;border:0;background:transparent;color:var(--muted);font-weight:900;padding:10px 18px;border-radius:11px;cursor:pointer;white-space:nowrap;transition:.2s ease}.settings-tab:hover{color:var(--text);background:rgba(105,211,209,.08)}.settings-tab.active{background:var(--brand);color:#fff;box-shadow:0 8px 24px rgba(59,116,123,.28)}.settings-pane{display:none;animation:settingsFade .18s ease}.settings-pane.active{display:block}.settings-panel{padding:26px}.settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.settings-heading h2{margin:4px 0 7px}.settings-heading p{margin:0;color:var(--muted)}.eyebrow{display:block;color:var(--brand2);font-size:.74rem;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.settings-grid .field{min-width:0}.settings-grid .field.full{grid-column:1/-1}.settings-grid .field label{display:block;font-weight:850;margin:0 0 7px}.settings-grid .field small{display:block;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}.settings-grid input,.settings-grid select,.settings-grid textarea{transition:border-color .2s,box-shadow .2s}.settings-grid input:focus,.settings-grid select:focus,.settings-grid textarea:focus{outline:0;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(105,211,209,.12)}.settings-grid input[type=color]{height:48px;padding:5px;cursor:pointer}.module-note{border:1px solid var(--line);background:rgba(105,211,209,.055);border-radius:16px;padding:15px 17px}.module-note p{margin:7px 0 0;color:var(--muted);line-height:1.55}.test-action .btn{width:100%;min-height:47px}.save-settings:disabled{opacity:.6;cursor:wait}@keyframes settingsFade{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}} @media(max-width:900px){.settings-tabs{top:62px;margin-left:-2px;margin-right:-2px}.settings-panel{padding:18px}.settings-heading{display:grid;gap:14px}.settings-heading .save-settings{width:100%}.settings-grid{grid-template-columns:1fr}.settings-grid .field.full{grid-column:auto}.settings-tab{padding:10px 14px}} @media(max-width:520px){.settings-tabs{border-radius:14px}.settings-panel{padding:15px;border-radius:18px}.settings-heading h2{font-size:1.35rem}.settings-grid{gap:14px}} /* v1.6.1 · Progreso real del actualizador */ .crm-update-progress{min-width:min(520px,82vw);padding:8px 2px}.crm-progress-track{height:16px;background:#202b2f;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:12px 0 14px}.crm-progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#25d366);transition:width .35s ease;box-shadow:0 0 20px rgba(37,211,102,.35)}.crm-update-progress strong{display:block;font-size:1.65rem;color:#25d366}.crm-update-progress p{margin:10px 0 5px;font-weight:800}.crm-update-progress small{color:var(--muted)} /* v1.6.3 · Modal de actualización completamente responsive y sin scroll horizontal */ .crm-update-modal{ box-sizing:border-box!important; width:min(560px,calc(100vw - 32px))!important; max-width:calc(100vw - 32px)!important; padding:24px!important; overflow:hidden!important; } .crm-update-modal .swal2-html-container{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; } .crm-update-progress{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:100%!important; padding:8px 0!important; overflow:hidden!important; } .crm-progress-track{ box-sizing:border-box!important; width:100%!important; max-width:100%!important; } .crm-update-progress p, .crm-update-progress small{ max-width:100%!important; overflow-wrap:anywhere!important; word-break:normal!important; } @media(max-width:520px){ .crm-update-modal{ width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; padding:18px 14px!important; border-radius:18px!important; } .crm-update-modal .swal2-title{ padding:0!important; font-size:1.45rem!important; line-height:1.2!important; } .crm-update-progress strong{font-size:1.45rem!important} .crm-update-progress p{font-size:.96rem!important;line-height:1.35!important} .crm-update-progress small{display:block;font-size:.82rem!important;line-height:1.35!important} .crm-progress-track{height:13px!important;margin:12px 0!important} } @media(max-width:360px){ .crm-update-modal{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; padding:16px 10px!important; } } /* v1.7.0 · Base de datos y backups */ .database-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.db-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.db-card h3{margin:0 0 8px}.db-card p{margin:0 0 16px;color:var(--muted)}.db-card form{display:grid;gap:12px}.db-card input[type=file]{width:100%;max-width:100%;min-width:0;padding:12px;border:1px dashed var(--brand);border-radius:12px;background:var(--input)}.security-note{margin-top:18px;padding:14px 16px;border:1px solid rgba(255,190,45,.38);border-radius:13px;background:rgba(255,190,45,.1);overflow-wrap:anywhere}.copy-row{display:flex;gap:10px;min-width:0}.copy-row input{min-width:0;flex:1}.backup-list{display:grid;gap:10px}.backup-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--line);border-radius:13px;min-width:0}.backup-row>div:first-child{display:grid;gap:4px;min-width:0}.backup-row b,.backup-row span{overflow-wrap:anywhere}.backup-row span{color:var(--muted);font-size:.86rem}.backup-row .actions{display:flex;gap:8px;flex:0 0 auto} @media(max-width:760px){.database-actions{grid-template-columns:1fr}.backup-row{align-items:stretch;flex-direction:column}.backup-row .actions{display:grid;grid-template-columns:1fr 1fr}.copy-row{flex-direction:column}.settings-tabs{overflow-x:auto;scrollbar-width:none}.settings-tabs::-webkit-scrollbar{display:none}} .diagnostic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.diag-card{padding:16px;border:1px solid var(--border,#ddd);border-radius:16px;display:flex;flex-direction:column;gap:6px}.diag-card.ok{box-shadow:inset 4px 0 #22c55e}.diag-card.bad{box-shadow:inset 4px 0 #ef4444}.log-box{max-height:320px;overflow:auto;white-space:pre-wrap;background:#0f172a;color:#d1fae5;padding:16px;border-radius:14px}.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}.kanban-col{background:var(--soft,#f5f7f8);border-radius:18px;padding:12px;min-height:360px}.kanban-card{background:var(--card,#fff);border:1px solid var(--border,#ddd);border-radius:14px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:6px;cursor:grab}.settings-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}.settings-tab{flex:0 0 auto}@media(max-width:700px){.kanban-board{grid-template-columns:repeat(4,82vw)}.settings-shell,.settings-pane,.settings-panel{max-width:100%;min-width:0}.crm-update-modal{width:min(94vw,580px)!important}.crm-update-progress{max-width:100%;overflow:hidden}} /* v2.1.0 · Pipeline técnico estilo GitHub Projects */ .pipeline-shell{display:grid;gap:16px}.pipeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pipeline-tools{display:flex;gap:8px;flex-wrap:wrap}.pipeline-filter{flex:1;min-width:220px}.pipeline-filter input{width:100%;min-height:44px}.gh-board{display:grid;grid-template-columns:repeat(4,minmax(290px,1fr));gap:12px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}.gh-column{scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);min-height:520px;padding:10px}.gh-column-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 10px}.gh-column-title{display:flex;align-items:center;gap:8px}.gh-dot{width:12px;height:12px;border:2px solid currentColor;border-radius:50%}.gh-count{font-size:.75rem;border:1px solid var(--line);border-radius:99px;padding:1px 7px;color:var(--muted)}.gh-add{width:100%;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:9px;text-align:left;cursor:pointer}.gh-add:hover{background:rgba(255,255,255,.05);color:var(--text)}.gh-card{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:12px;margin:8px 0;cursor:pointer;display:grid;gap:9px}.gh-card:hover{border-color:var(--brand2);transform:translateY(-1px)}.gh-card-title{font-weight:800}.gh-card-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.78rem}.gh-label{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:99px;padding:2px 7px;font-size:.72rem;font-weight:700}.gh-priority{font-size:.72rem;border-radius:99px;padding:3px 7px;background:rgba(255,255,255,.07)}.pipeline-drawer-backdrop{position:fixed;inset:0;background:#0008;z-index:19990;opacity:0;pointer-events:none;transition:.2s}.pipeline-drawer-backdrop.open{opacity:1;pointer-events:auto}.pipeline-drawer{position:fixed;z-index:20000;top:0;right:0;width:min(760px,100vw);height:100dvh;background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s ease;display:grid;grid-template-rows:auto 1fr;box-shadow:-24px 0 70px #0009}.pipeline-drawer.open{transform:none}.pipeline-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.pipeline-drawer-body{overflow:auto;padding:20px}.issue-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px}.issue-main,.issue-side{display:grid;gap:14px;align-content:start}.issue-description,.issue-comments{border:1px solid var(--line);border-radius:12px;padding:15px}.issue-comment{border-top:1px solid var(--line);padding:12px 0}.pipeline-empty{color:var(--muted);text-align:center;padding:28px 8px}.pipeline-first{border:1px dashed var(--brand);border-radius:16px;padding:20px;background:rgba(59,116,123,.08)} @media(max-width:800px){.gh-board{grid-template-columns:repeat(4,86vw)}.issue-layout{grid-template-columns:1fr}.pipeline-drawer{width:100vw}.pipeline-drawer-body{padding:14px}} /* v2.1.3 Pipeline UI, overlays and dark controls */ .settings-tabs{z-index:20!important} .topbar,.app-header,.header-actions{position:relative;z-index:500!important} .notifications-popover,.notification-popover,.notif-menu,.notifications-menu,[data-notifications-panel]{z-index:5000!important} .swal2-container{z-index:30000!important} .pipeline-drawer-backdrop{z-index:21000!important}.pipeline-drawer{z-index:21010!important} .issue-label-picker{display:flex;flex-wrap:wrap;gap:9px;padding:8px 0}.issue-label-option{--label-color:#58a6ff;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid color-mix(in srgb,var(--label-color) 55%,var(--line));border-radius:999px;padding:5px 10px;background:color-mix(in srgb,var(--label-color) 10%,transparent);transition:.18s}.issue-label-option:hover{background:color-mix(in srgb,var(--label-color) 18%,transparent);transform:translateY(-1px)}.issue-label-option input{position:absolute;opacity:0;pointer-events:none}.issue-label-check{width:17px;height:17px;border-radius:5px;border:1px solid color-mix(in srgb,var(--label-color) 70%,#fff);display:grid;place-items:center;font-size:11px;color:transparent;background:transparent}.issue-label-option input:checked+.issue-label-check{background:var(--label-color);color:#081014;border-color:var(--label-color)}.issue-label-option .gh-label{color:var(--label-color);border:0;padding:0;background:transparent;max-width:180px;overflow-wrap:anywhere} .swal2-popup input[type=date]{color-scheme:dark}.light .swal2-popup input[type=date]{color-scheme:light}.swal2-popup input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.65);opacity:.9;cursor:pointer}.light .swal2-popup input[type=date]::-webkit-calendar-picker-indicator{filter:none} .pipeline-drawer{width:min(980px,100vw);background:#0d1117}.light .pipeline-drawer{background:var(--bg)}.pipeline-drawer-head{background:#0d1117;position:sticky;top:0;z-index:2}.light .pipeline-drawer-head{background:var(--bg)}.issue-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.issue-hero h2{font-size:1.7rem;margin:10px 0 0}.issue-hero h2 small{color:var(--muted);font-weight:500}.issue-state{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-weight:800;font-size:.83rem}.issue-state.open{background:#238636;color:#fff}.issue-state.closed{background:#8957e5;color:#fff}.issue-layout{grid-template-columns:minmax(0,1fr) 270px;gap:24px}.issue-description,.issue-comments{background:#0d1117;border-color:#30363d}.light .issue-description,.light .issue-comments{background:var(--card)}.issue-description header{padding-bottom:12px;border-bottom:1px solid #30363d}.issue-content{padding:16px 0;line-height:1.65}.issue-side{border-left:1px solid #30363d;padding-left:20px}.issue-side section{padding:12px 0;border-bottom:1px solid #21262d}.issue-side section>b{font-size:.82rem;color:var(--muted)}.issue-side section p{margin:7px 0 0}.issue-side-labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.issue-timeline{display:grid;gap:12px;margin:14px 0}.issue-comment{display:grid;grid-template-columns:36px 1fr;gap:10px;border:0;padding:0}.issue-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);font-weight:900}.issue-comment>div:last-child{border:1px solid #30363d;border-radius:10px;overflow:hidden}.issue-comment header{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;background:#161b22;border-bottom:1px solid #30363d}.issue-comment p{padding:12px;margin:0}.comment-editor textarea{min-height:130px;background:#0d1117}.comment-actions{display:flex;justify-content:flex-end;margin-top:9px} @media(max-width:800px){.issue-layout{grid-template-columns:1fr}.issue-side{border-left:0;border-top:1px solid #30363d;padding-left:0}.issue-hero{display:grid}.pipeline-drawer{width:100vw}.issue-label-option .gh-label{max-width:120px}} /* v2.2.2 - selección masiva y Pipeline avanzado */ .bulk-delete-btn{display:inline-flex;align-items:center;gap:.45rem;background:#b4232f!important;border-color:#e5484d!important;color:#fff!important} .bulk-delete-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2} .bulk-delete-btn:disabled{opacity:.45;cursor:not-allowed} .gh-card-labels,.issue-side-labels{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .gh-label.color{display:inline-flex;align-items:center;border:1px solid var(--label-color);border-radius:999px;padding:2px 7px;font-size:.72rem;font-weight:700;line-height:1.25;max-width:100%;overflow-wrap:anywhere} .gh-card-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.72rem;margin-top:7px} .assignee-picker{display:grid;gap:6px;max-height:145px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:9px;background:var(--input)} .assignee-picker label{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer} .assignee-picker input{width:17px;height:17px;accent-color:var(--brand2);flex:0 0 auto} .assignee-chip{display:inline-flex;padding:4px 8px;margin:3px 4px 3px 0;border:1px solid var(--border);border-radius:999px;background:var(--input);font-size:.78rem} .pipeline-report-filters{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;margin:14px 0} .pipeline-report-filters label{display:grid;gap:5px;font-size:.8rem;color:var(--muted)} .pipeline-report-filters input,.pipeline-report-filters select{width:100%;background:var(--input);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px} .issue-label-option{display:inline-flex!important;align-items:center!important;gap:5px!important;border:1px solid var(--label-color)!important;border-radius:999px!important;padding:4px 8px!important;background:color-mix(in srgb,var(--label-color) 12%,transparent)!important;cursor:pointer} .issue-label-option input{position:absolute;opacity:0;pointer-events:none} .issue-label-check{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;border:1px solid var(--label-color);color:transparent;background:transparent;font-size:11px} .issue-label-option input:checked+.issue-label-check{background:var(--label-color);color:#fff} .issue-label-option .gh-label{border:0!important;background:transparent!important;padding:0!important;color:var(--label-color)!important} @media(max-width:780px){.pipeline-report-filters{grid-template-columns:1fr}.pipeline-tools{display:flex;overflow-x:auto;max-width:100%;padding-bottom:4px}.pipeline-tools .btn{white-space:nowrap}.swal2-popup{max-width:calc(100vw - 18px)!important}.assignee-picker{max-height:120px}} /* v2.2.3 - Restauración de Integraciones / Google OAuth */ .integration-toggle{display:inline-flex!important;align-items:center!important;gap:10px!important;cursor:pointer;font-weight:700;line-height:1.2;min-height:34px} .integration-toggle input{position:absolute;opacity:0;pointer-events:none} .integration-toggle-box{width:22px;height:22px;border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--input);color:transparent;flex:0 0 22px;transition:.18s ease} .integration-toggle input:checked + .integration-toggle-box{background:var(--accent);border-color:var(--accent);color:#07110d} .integration-toggle input:focus-visible + .integration-toggle-box{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:600px){.integration-toggle{width:100%;align-items:flex-start}.integration-toggle-box{margin-top:1px}} /* v2.2.4 · Configuraciones accesibles y actualizador Mobile First */ .settings-mobile-nav{display:none} @media(max-width:700px){ .settings-shell{width:100%;max-width:100%;min-width:0;overflow:hidden} .settings-tabs{position:relative!important;top:auto!important;z-index:8!important;width:100%;max-width:100%;margin:0 0 10px!important;padding:5px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .settings-tab{scroll-snap-align:center;flex:0 0 auto;max-width:78vw} .settings-mobile-nav{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-weight:900} .settings-mobile-nav span{font-size:.84rem;color:var(--muted)} .settings-mobile-nav select{width:100%;min-width:0;height:44px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:11px;background:var(--soft);color:var(--text);font-weight:900} .settings-panel,.updater-panel,.settings-pane>.panel{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .updater-panel .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:12px!important} .version-pill{width:100%;box-sizing:border-box;text-align:center} .update-drop{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:22px 12px;overflow:hidden} .update-drop b,.update-drop span{max-width:100%;overflow-wrap:anywhere} .update-drop input[type=file]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-size:.88rem} .update-history>div{grid-template-columns:1fr!important;gap:7px!important;min-width:0} .update-history span,.update-history small{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word} } .crm-update-container{box-sizing:border-box!important;padding:10px!important;overflow:hidden!important} .crm-update-modal{box-sizing:border-box!important;max-width:calc(100vw - 20px)!important;overflow:hidden!important;margin:0 auto!important} .crm-update-title{box-sizing:border-box!important;max-width:100%!important;padding:0!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.18!important} .crm-update-html{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important} .crm-update-progress{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important} .crm-progress-track{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important} @media(max-width:600px){ .swal2-container.crm-update-container{align-items:center!important;padding:10px!important} .crm-update-modal{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;padding:18px 12px!important;border-radius:18px!important} .crm-update-title{font-size:1.35rem!important} .crm-update-progress strong{font-size:1.45rem!important} .crm-update-progress p{font-size:.95rem!important;line-height:1.35!important;margin:10px 0 6px!important} .crm-update-progress small{font-size:.8rem!important;line-height:1.35!important} } /* ============================================================ v2.2.6 · Reparación definitiva de Modo Escritorio Evita que la interfaz móvil se active con DevTools o ventanas intermedias y mantiene el contenido fuera de la barra lateral. ============================================================ */ @media (min-width: 901px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; } body { padding-bottom: 0 !important; } .sidebar { display: flex !important; position: fixed !important; inset: 0 auto 0 0 !important; width: 250px !important; transform: none !important; visibility: visible !important; z-index: 400 !important; padding: 20px 16px !important; overflow-y: auto !important; overflow-x: hidden !important; } .sidebar.collapsed { width: 82px !important; } .app { margin-left: 250px !important; width: calc(100% - 250px) !important; max-width: calc(100% - 250px) !important; min-width: 0 !important; overflow-x: clip !important; } .sidebar.collapsed + .app { margin-left: 82px !important; width: calc(100% - 82px) !important; max-width: calc(100% - 82px) !important; } .topbar { position: sticky !important; top: 0 !important; z-index: 300 !important; width: 100% !important; min-width: 0 !important; padding: 22px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; } .desktop-title { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; } .desktop-title h1 { font-size: clamp(30px, 3vw, 42px) !important; overflow-wrap: anywhere; } .top-actions { position: static !important; flex: 0 0 auto !important; max-width: 62% !important; min-width: 0 !important; display: flex !important; flex-wrap: nowrap !important; } .header-session { min-width: 132px !important; max-width: 210px !important; } .header-session b { white-space: normal !important; overflow-wrap: anywhere !important; } .page-heading { display: none !important; } main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 24px 24px 110px !important; overflow-x: hidden !important; } main > *, #content, .settings-shell, .settings-pane, .settings-panel, .panel, .card { min-width: 0 !important; max-width: 100% !important; } .settings-tabs { position: sticky !important; top: 108px !important; z-index: 120 !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; } .settings-mobile-nav { display: none !important; } .mobile-bottom-nav, .more-sheet { display: none !important; } footer { width: 100% !important; max-width: 100% !important; } .notif-preview { z-index: 650 !important; } } /* Portátiles y escritorio angosto: conserva estructura desktop compacta. */ @media (min-width: 901px) and (max-width: 1250px) { .sidebar { width: 220px !important; } .app { margin-left: 220px !important; width: calc(100% - 220px) !important; max-width: calc(100% - 220px) !important; } .sidebar.collapsed + .app { margin-left: 76px !important; width: calc(100% - 76px) !important; max-width: calc(100% - 76px) !important; } .topbar { padding: 18px !important; } .top-actions { gap: 7px !important; max-width: 68% !important; } .iconbtn { width: 44px !important; min-width: 44px !important; height: 44px !important; } .avatar img { width: 44px !important; height: 44px !important; } .top-actions .btn { padding: 10px 12px !important; } main { padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================================== v2.2.7 · Pipeline con columnas contenidas + Base de datos Mobile First ========================================================================== */ /* Pipeline: las cuatro columnas mantienen una altura visual uniforme. El desplazamiento ocurre dentro del listado de tareas, no en toda la página. */ .gh-column { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; min-height: 0 !important; height: clamp(440px, 64vh, 720px) !important; max-height: calc(100dvh - 285px) !important; overflow: hidden !important; } .gh-column-head { flex: 0 0 auto !important; } .gh-cards { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-gutter: stable !important; padding: 0 5px 8px 0 !important; scroll-behavior: smooth; } /* Scrollbar minimalista: Firefox */ .gh-cards { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand2) 58%, transparent) color-mix(in srgb, var(--line) 72%, transparent); } /* Scrollbar minimalista: Chromium, Edge y Safari */ .gh-cards::-webkit-scrollbar { width: 7px; } .gh-cards::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 32%, transparent); border-radius: 999px; margin-block: 5px; } .gh-cards::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, color-mix(in srgb, var(--brand2) 82%, transparent), color-mix(in srgb, var(--brand) 82%, transparent) ); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .gh-cards::-webkit-scrollbar-thumb:hover { background: var(--brand2); background-clip: padding-box; } .gh-add { position: relative !important; z-index: 2 !important; flex: 0 0 auto !important; margin-top: 4px !important; border-top: 1px solid var(--line) !important; border-radius: 0 0 9px 9px !important; background: color-mix(in srgb, var(--card) 94%, transparent) !important; } /* Evita que textos, responsables o labels ensanchen las tarjetas. */ .gh-card, .gh-card-title, .gh-card-meta, .gh-card-labels, .gh-card-footer { min-width: 0 !important; max-width: 100% !important; } .gh-card-title, .gh-card-meta span, .gh-card-footer span { overflow-wrap: anywhere !important; word-break: break-word !important; } /* Base de datos: todos los controles se mantienen dentro de la card. */ #settings-database, #settings-database *, .settings-pane[data-pane="database"], .settings-pane[data-pane="database"] * { box-sizing: border-box; } #settings-database, .settings-pane[data-pane="database"] { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } #settings-database .database-actions, .settings-pane[data-pane="database"] .database-actions, #settings-database .db-card, .settings-pane[data-pane="database"] .db-card, #settings-database form, .settings-pane[data-pane="database"] form { min-width: 0 !important; max-width: 100% !important; } #settings-database input, #settings-database select, #settings-database textarea, #settings-database button, .settings-pane[data-pane="database"] input, .settings-pane[data-pane="database"] select, .settings-pane[data-pane="database"] textarea, .settings-pane[data-pane="database"] button { max-width: 100% !important; min-width: 0 !important; } #settings-database select, .settings-pane[data-pane="database"] select { display: block !important; width: 100% !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; } #settings-database input[type="file"], .settings-pane[data-pane="database"] input[type="file"] { display: block !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; padding: 10px !important; font-size: .92rem !important; line-height: 1.25 !important; color: var(--text) !important; } #settings-database input[type="file"]::file-selector-button, .settings-pane[data-pane="database"] input[type="file"]::file-selector-button { max-width: 58% !important; margin-right: 10px !important; padding: 9px 11px !important; border: 1px solid var(--line) !important; border-radius: 9px !important; background: var(--card) !important; color: var(--text) !important; font: inherit !important; font-weight: 800 !important; white-space: normal !important; } #settings-database .security-note, .settings-pane[data-pane="database"] .security-note { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; } /* Móviles y tablets */ @media (max-width: 900px) { .gh-board { align-items: stretch !important; } .gh-column { height: min(62dvh, 610px) !important; max-height: min(62dvh, 610px) !important; } .gh-cards { padding-right: 4px !important; } #settings-database .settings-panel, .settings-pane[data-pane="database"] .settings-panel, #settings-database .db-card, .settings-pane[data-pane="database"] .db-card { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } #settings-database .database-actions, .settings-pane[data-pane="database"] .database-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } #settings-database .db-card form, .settings-pane[data-pane="database"] .db-card form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } #settings-database .db-card .btn, .settings-pane[data-pane="database"] .db-card .btn { width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } } @media (max-width: 520px) { .gh-column { height: 58dvh !important; max-height: 560px !important; min-height: 390px !important; } #settings-database .db-card, .settings-pane[data-pane="database"] .db-card { padding: 15px !important; border-radius: 16px !important; } #settings-database input[type="file"], .settings-pane[data-pane="database"] input[type="file"] { font-size: .82rem !important; } #settings-database input[type="file"]::file-selector-button, .settings-pane[data-pane="database"] input[type="file"]::file-selector-button { max-width: 52% !important; padding: 8px !important; font-size: .82rem !important; } } /* ========================================================================== v2.2.8 · Card flotante de Notificaciones siempre por encima de la interfaz ========================================================================== */ /* El header debe crear la capa visual superior y permitir que el popover sobresalga sin ser recortado por contenedores, pestañas o cards. */ .topbar, .app-header, .header-actions, .top-actions, .notif-wrap { overflow: visible !important; } .topbar, .app-header { isolation: isolate !important; z-index: 50000 !important; } .top-actions, .header-actions, .notif-wrap { position: relative !important; z-index: 50010 !important; } /* Regla principal: el panel de notificaciones queda por encima de tabs, drawers de contenido, cards, títulos, footers y navegación inferior. */ #notifPreview, .notif-preview, .notifications-popover, .notification-popover, .notif-menu, .notifications-menu, [data-notifications-panel] { z-index: 60000 !important; isolation: isolate !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .34), 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent) !important; } /* Escritorio: conserva anclaje a la campana. */ @media (min-width: 901px) { #notifPreview, .notif-preview { position: absolute !important; top: calc(100% + 12px) !important; right: 0 !important; left: auto !important; width: min(380px, calc(100vw - 32px)) !important; max-height: min(66dvh, 520px) !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* Mobile First: se desacopla del stacking context del header y se fija debajo de la cabecera, ocupando el ancho útil de la pantalla. */ @media (max-width: 900px) { .topbar, .app-header { z-index: 50000 !important; } #notifPreview, .notif-preview { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 174px) !important; left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; max-height: min(54dvh, 480px) !important; margin: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 20px !important; background: var(--panel) !important; } /* Ninguna sección de contenido puede competir con la capa de notificaciones. */ main, .page-heading, .settings-tabs, .settings-mobile-nav, .settings-panel, .settings-pane, .card, .panel, footer, .mobile-bottom-nav, .wa-float, .wa-menu { z-index: auto; } .mobile-bottom-nav { z-index: 1000 !important; } .wa-float, .wa-menu { z-index: 1100 !important; } } /* Teléfonos de poca altura: el popover comienza un poco más arriba. */ @media (max-width: 900px) and (max-height: 740px) { #notifPreview, .notif-preview { top: calc(env(safe-area-inset-top, 0px) + 142px) !important; max-height: 50dvh !important; } } /* Modo claro: contraste y separación del panel flotante. */ .light #notifPreview, .light .notif-preview { background: #ffffff !important; color: #172126 !important; border-color: #cbd7da !important; box-shadow: 0 24px 60px rgba(18, 35, 42, .24), 0 0 0 1px rgba(92, 119, 128, .20) !important; } /* ========================================================================== v2.2.9 · Módulo Documentación Oficial ========================================================================== */ .settings-tab[data-stab="documentation"]{display:inline-flex;align-items:center;gap:8px} .settings-tab[data-stab="documentation"] svg{width:18px;height:18px} .docs-module{display:grid;gap:18px;min-width:0;color:var(--text)} .docs-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:24px;background: radial-gradient(circle at 90% 0,color-mix(in srgb,var(--brand2) 20%,transparent),transparent 38%), linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--panel) 92%,transparent));box-shadow:0 18px 46px rgba(0,0,0,.12)} .docs-hero-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 14px 30px color-mix(in srgb,var(--brand) 28%,transparent)} .docs-hero-icon svg{width:34px;height:34px} .docs-hero-copy h2{margin:5px 0 7px;font-size:clamp(1.65rem,3vw,2.4rem)} .docs-hero-copy>p{margin:0;color:var(--muted);max-width:780px;line-height:1.65} .docs-author{display:flex;align-items:center;gap:10px;margin-top:16px} .docs-author-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--brand2) 18%,var(--card));color:var(--brand2)} .docs-author-avatar svg{width:21px;height:21px}.docs-author strong,.docs-author small{display:block}.docs-author small{color:var(--muted);margin-top:2px} .docs-hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:190px} .docs-hero-actions .btn{display:flex;align-items:center;justify-content:center;gap:8px}.docs-hero-actions svg{width:17px;height:17px} .docs-version{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--brand2) 55%,var(--line));border-radius:999px;color:var(--brand2);font-weight:900;background:color-mix(in srgb,var(--brand2) 9%,transparent)} .docs-version svg{width:16px;height:16px} .docs-toolbar{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--card);min-width:0} .docs-search{display:flex;align-items:center;gap:10px;flex:1;min-width:180px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:var(--input)} .docs-search svg{width:19px;height:19px;color:var(--muted)}.docs-search input{width:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:13px 0!important} .docs-tags{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin} .docs-tags button{border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:800;border-radius:999px;padding:9px 13px;white-space:nowrap;cursor:pointer} .docs-tags button.active,.docs-tags button:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .docs-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:18px;align-items:start;min-width:0} .docs-index{position:sticky;top:172px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--card);max-height:calc(100dvh - 200px);overflow-y:auto} .docs-index-title{display:flex;align-items:center;gap:9px;padding:5px 7px 12px;border-bottom:1px solid var(--line)}.docs-index-title svg{width:19px;height:19px;color:var(--brand2)} .docs-index nav{display:grid;gap:5px;margin-top:10px}.docs-index a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;color:var(--muted);text-decoration:none;font-weight:750} .docs-index a:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--text)}.docs-index a svg{width:17px;height:17px} .docs-content{display:grid;gap:18px;min-width:0;padding:0!important;overflow:visible!important} .docs-card{scroll-margin-top:185px;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 98%,transparent),color-mix(in srgb,var(--panel) 94%,transparent));box-shadow:0 12px 34px rgba(0,0,0,.07);min-width:0} .docs-card[hidden]{display:none!important}.docs-card>p{line-height:1.7;color:var(--muted)} .docs-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.docs-card-head h3{margin:2px 0 0;font-size:1.45rem} .docs-card-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;flex:0 0 auto}.docs-card-icon svg{width:23px;height:23px} .docs-card-icon.cyan{color:#18a9ad;background:rgba(24,169,173,.13)}.docs-card-icon.violet{color:#9b71f4;background:rgba(155,113,244,.13)}.docs-card-icon.blue{color:#3182f6;background:rgba(49,130,246,.13)}.docs-card-icon.orange{color:#ee8d35;background:rgba(238,141,53,.13)}.docs-card-icon.green{color:#20b36b;background:rgba(32,179,107,.13)}.docs-card-icon.red{color:#ef5b62;background:rgba(239,91,98,.13)}.docs-card-icon.yellow{color:#d7a815;background:rgba(215,168,21,.13)} .docs-label{font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;color:var(--brand2);font-weight:950} .docs-badge-grid{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.docs-badge-grid span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--brand2) 7%,var(--card));font-size:.82rem;font-weight:850} .docs-callout{display:flex;gap:12px;padding:15px;border:1px solid color-mix(in srgb,var(--brand2) 45%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--brand2) 8%,transparent)}.docs-callout svg{width:22px;height:22px;color:var(--brand2);flex:0 0 auto}.docs-callout p{margin:4px 0 0;color:var(--muted);line-height:1.55}.docs-callout.warning{border-color:rgba(226,171,32,.45);background:rgba(226,171,32,.08)}.docs-callout.warning svg{color:#d8a51e} .docs-architecture-grid,.docs-install-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0} .docs-architecture-grid>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:15px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--panel) 90%,transparent)} .docs-architecture-grid svg{grid-row:1/3;width:22px;height:22px;color:var(--brand2)}.docs-architecture-grid small{color:var(--muted);margin-top:4px} .docs-card details{border:1px solid var(--line);border-radius:15px;overflow:hidden}.docs-card summary{display:flex;align-items:center;gap:9px;padding:14px;cursor:pointer;font-weight:900;background:color-mix(in srgb,var(--panel) 92%,transparent)}.docs-card summary svg{width:18px;height:18px} .docs-code{position:relative;background:#0d1419;color:#dce7eb;padding:18px;overflow:auto}.docs-code pre{margin:0;font:500 .88rem/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}.docs-copy-code{position:absolute;top:10px;right:10px;border:1px solid #39464d;background:#172127;color:#dce7eb;border-radius:9px;padding:7px;cursor:pointer}.docs-copy-code svg{width:16px;height:16px} .docs-diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.docs-diagram-grid>section{min-width:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}.docs-diagram-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.docs-copy-mermaid{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);padding:7px 9px;cursor:pointer}.docs-copy-mermaid svg{width:15px;height:15px}.docs-diagram-grid .mermaid{display:grid;place-items:center;min-height:230px;padding:18px;overflow:auto} .docs-install-grid section{padding:18px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 92%,transparent)}.docs-install-grid h4{display:flex;align-items:center;gap:9px;margin:0 0 12px}.docs-install-grid h4 svg{width:21px;height:21px;color:var(--brand2)}.docs-install-grid ol{margin:0;padding-left:22px;color:var(--muted);line-height:1.75}.docs-install-grid code,.docs-api-table code{padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--brand2) 10%,var(--panel));color:var(--text)} .docs-api-table{overflow:auto;border:1px solid var(--line);border-radius:16px}.docs-api-table table{width:100%;border-collapse:collapse;min-width:650px}.docs-api-table th,.docs-api-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}.docs-api-table th{background:color-mix(in srgb,var(--panel) 95%,transparent);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.docs-api-table tr:last-child td{border:0} .method{display:inline-block;padding:5px 8px;border-radius:7px;font-size:.72rem;font-weight:950}.method.post{color:#ee675f;background:rgba(238,103,95,.12)}.method.get{color:#25a86a;background:rgba(37,168,106,.12)}.method.both{color:#8f69e8;background:rgba(143,105,232,.12)} .docs-subtitle{display:flex;align-items:center;gap:9px;margin:22px 0 12px}.docs-subtitle svg{width:20px;height:20px;color:var(--brand2)} .docs-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.docs-module-grid span{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;font-weight:780;min-width:0}.docs-module-grid svg{width:17px;height:17px;color:var(--brand2);flex:0 0 auto} .docs-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.docs-check-list>div{display:flex;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px}.docs-check-list svg{width:18px;height:18px;color:#27b56f;flex:0 0 auto} .docs-timeline{display:grid;gap:0}.docs-timeline>div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}.docs-timeline>div:not(:last-child):before{content:"";position:absolute;left:23px;top:34px;bottom:0;width:2px;background:var(--line)}.docs-timeline>div>span{display:grid;place-items:center;width:46px;height:32px;border-radius:999px;background:color-mix(in srgb,var(--brand2) 15%,var(--panel));color:var(--brand2);font-size:.76rem;font-weight:950}.docs-timeline section{padding:2px 0}.docs-timeline p{margin:5px 0 0;color:var(--muted)} .docs-author-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px}.docs-author-card h3{margin:2px 0 6px}.docs-author-card p{margin:0}.docs-signature{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;color:#1fa967;background:rgba(31,169,103,.1);font-weight:900}.docs-signature svg{width:18px;height:18px} @media(max-width:1100px){.docs-layout{grid-template-columns:1fr}.docs-index{position:static;max-height:none}.docs-index nav{display:flex;overflow-x:auto}.docs-index a{white-space:nowrap}.docs-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.docs-hero{grid-template-columns:auto minmax(0,1fr)}.docs-hero-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.docs-version{grid-column:1/-1}.docs-toolbar{align-items:stretch;flex-direction:column}.docs-diagram-grid,.docs-architecture-grid,.docs-install-grid,.docs-check-list{grid-template-columns:1fr}.docs-card{padding:18px}.docs-index{overflow:hidden}.docs-index nav{padding-bottom:4px}.docs-content{padding-bottom:100px!important}} @media(max-width:560px){.docs-hero{grid-template-columns:1fr;padding:18px}.docs-hero-icon{width:58px;height:58px;border-radius:18px}.docs-hero-actions{grid-template-columns:1fr}.docs-hero-actions .btn,.docs-version{grid-column:auto}.docs-author{align-items:flex-start}.docs-card-head{align-items:flex-start}.docs-module-grid{grid-template-columns:1fr}.docs-author-card{grid-template-columns:auto 1fr}.docs-signature{grid-column:1/-1;justify-content:center}.docs-diagram-grid .mermaid{min-height:190px;padding:10px}.docs-api-table table{min-width:560px}} @media print{ body *{visibility:hidden!important}.docs-module,.docs-module *{visibility:visible!important}.docs-module{position:absolute!important;inset:0!important;background:#fff!important;color:#111!important}.docs-hero-actions,.docs-toolbar,.docs-index,.docs-copy-mermaid,.docs-copy-code,.sidebar,.topbar,.mobile-bottom-nav,.wa-float,footer{display:none!important}.docs-layout{display:block!important}.docs-card{break-inside:avoid;box-shadow:none!important;background:#fff!important;border-color:#bbb!important}.docs-content{display:block!important}.docs-card{margin-bottom:14px}.mermaid{background:#fff!important} } /* ========================================================================== v2.3.0 · Header Mobile First compacto, centrado y sin separación residual ========================================================================== */ @media (max-width: 900px) { /* El header ocupa solamente la altura real de sus controles. */ .topbar { position: sticky !important; top: 0 !important; z-index: 50000 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important; overflow: visible !important; border-bottom: 1px solid var(--line) !important; } /* El bloque visual queda centrado y limitado al ancho útil del teléfono. */ .topbar .top-actions { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: 48px 48px 48px 52px minmax(0, 1fr) auto !important; align-items: center !important; justify-content: center !important; width: min(100%, 650px) !important; max-width: 650px !important; min-width: 0 !important; min-height: 68px !important; height: auto !important; margin: 0 auto !important; padding: 8px !important; gap: 8px !important; border: 1px solid var(--line) !important; border-radius: 22px !important; background: var(--panel) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .10) !important; overflow: visible !important; } .topbar .iconbtn { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; border-radius: 15px !important; } .topbar .notif-wrap { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; } .topbar .notif-wrap .iconbtn { width: 100% !important; height: 100% !important; } .topbar .avatar { display: grid !important; place-items: center !important; width: 52px !important; min-width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; } .topbar .avatar img { display: block !important; width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; margin: 0 !important; object-fit: cover !important; border-radius: 50% !important; } .topbar .header-session { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; line-height: 1.04 !important; overflow: hidden !important; } .topbar .header-session b { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; font-size: clamp(.92rem, 4vw, 1.06rem) !important; line-height: 1.05 !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: anywhere !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } .topbar .header-session small { display: block !important; width: 100% !important; margin-top: 3px !important; font-size: .72rem !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .topbar #logoutBtn { width: auto !important; min-width: 72px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 15px !important; white-space: nowrap !important; } .topbar #installBtn { display: none !important; } /* El título inicia inmediatamente después del header. */ .page-heading { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 14px 20px 0 !important; } .page-heading h1 { margin: 0 0 8px !important; } .page-heading p { margin: 0 !important; } main#content { margin-top: 0 !important; padding-top: 16px !important; } /* El panel de notificaciones sigue por encima y ahora se ancla inmediatamente debajo del header compacto. */ #notifPreview, .notif-preview { top: calc(env(safe-area-inset-top, 0px) + 92px) !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; z-index: 60000 !important; } } /* Teléfonos angostos: se compacta el ancho sin romper el centrado. */ @media (max-width: 430px) { .topbar { padding-left: 8px !important; padding-right: 8px !important; } .topbar .top-actions { grid-template-columns: 44px 44px 44px 48px minmax(0, 1fr) auto !important; gap: 5px !important; padding: 7px !important; border-radius: 20px !important; } .topbar .iconbtn, .topbar .notif-wrap { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } .topbar .avatar { width: 48px !important; min-width: 48px !important; height: 48px !important; } .topbar .avatar img { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; } .topbar #logoutBtn { min-width: 64px !important; height: 44px !important; min-height: 44px !important; padding: 0 11px !important; font-size: .9rem !important; } .topbar .header-session b { font-size: .94rem !important; } .page-heading { padding: 12px 18px 0 !important; } main#content { padding-top: 14px !important; } #notifPreview, .notif-preview { top: calc(env(safe-area-inset-top, 0px) + 84px) !important; left: 8px !important; right: 8px !important; } } /* Pantallas extremadamente angostas: se oculta pantalla completa, conservando tema, notificaciones, usuario y salida. */ @media (max-width: 355px) { .topbar #fullBtn { display: none !important; } .topbar .top-actions { grid-template-columns: 44px 44px 48px minmax(0, 1fr) auto !important; } } /* ========================================================================== v2.3.1 · Menú “Más módulos” Mobile First con scroll interno ========================================================================== */ @media (max-width: 900px) { /* * La lámina ocupa el viewport completo, pero deja libre el área segura * inferior y la navegación fija. El contenido nunca queda oculto detrás * del footer móvil. */ .more-sheet { position: fixed !important; inset: 0 !important; z-index: 70000 !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; width: 100% !important; height: 100dvh !important; margin: 0 !important; padding: 16px 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important; overflow: hidden !important; overscroll-behavior: contain !important; background: rgba(7, 12, 15, .58) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .more-sheet.hidden { display: none !important; } /* * Card responsive. La altura máxima contempla: * - barra superior del navegador; * - header del CRM; * - navegación inferior; * - safe area. */ .more-sheet-card { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; width: min(100%, 590px) !important; max-width: 590px !important; min-width: 0 !important; height: auto !important; max-height: min( 74dvh, calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)) ) !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--line) !important; border-radius: 28px !important; background: var(--panel) !important; box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent) !important; } /* Encabezado fijo de la card. */ .more-head { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 72px !important; margin: 0 !important; padding: 14px 16px !important; border-bottom: 1px solid var(--line) !important; background: color-mix(in srgb, var(--panel) 96%, transparent) !important; } .more-head b { min-width: 0 !important; margin: 0 !important; font-size: clamp(1.2rem, 5vw, 1.55rem) !important; line-height: 1.1 !important; } #closeMore { flex: 0 0 auto !important; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; border-radius: 15px !important; } /* * Solo la lista se desplaza. El título y el botón cerrar permanecen * visibles en todo momento. */ .more-links { display: grid !important; align-content: start !important; gap: 10px !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; scroll-behavior: smooth !important; scrollbar-gutter: stable !important; -webkit-overflow-scrolling: touch !important; } .more-link { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; min-height: 70px !important; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--line) !important; border-radius: 20px !important; background: var(--soft) !important; color: var(--text) !important; box-shadow: none !important; text-align: left !important; cursor: pointer !important; transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important; } .more-link:hover, .more-link:focus-visible { transform: translateY(-1px) !important; border-color: color-mix(in srgb, var(--brand2) 55%, var(--line)) !important; background: color-mix(in srgb, var(--brand2) 9%, var(--soft)) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important; outline: none !important; } .more-link:active { transform: scale(.992) !important; } .more-link svg { width: 28px !important; height: 28px !important; min-width: 28px !important; color: currentColor !important; stroke: currentColor !important; stroke-width: 1.9 !important; } .more-link span { display: block !important; min-width: 0 !important; overflow: hidden !important; color: inherit !important; font-size: clamp(.96rem, 4.2vw, 1.08rem) !important; font-weight: 850 !important; line-height: 1.22 !important; overflow-wrap: anywhere !important; text-overflow: ellipsis !important; } /* * Scrollbar minimalista y visible solamente cuando hace falta. */ .more-links { scrollbar-width: thin !important; scrollbar-color: color-mix(in srgb, var(--brand2) 66%, transparent) transparent !important; } .more-links::-webkit-scrollbar { width: 7px !important; } .more-links::-webkit-scrollbar-track { margin: 10px 0 !important; background: transparent !important; } .more-links::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 999px !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 88%, white 12%), color-mix(in srgb, var(--brand2) 82%, transparent) ) padding-box !important; } .more-links::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, var(--brand), var(--brand2) ) padding-box !important; } /* Evita que el fondo se mueva cuando la lámina está abierta. */ body.more-sheet-open { overflow: hidden !important; touch-action: none !important; } /* El menú debe quedar por encima del WhatsApp y del footer móvil. */ .more-sheet ~ .wa-float, body.more-sheet-open .wa-float, body.more-sheet-open .mobile-bottom-nav { pointer-events: none !important; } } /* Teléfonos de poca altura: utiliza casi todo el espacio útil. */ @media (max-width: 900px) and (max-height: 760px) { .more-sheet { padding-top: 8px !important; padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important; } .more-sheet-card { max-height: calc( 100dvh - 116px - env(safe-area-inset-bottom, 0px) ) !important; border-radius: 24px !important; } .more-head { min-height: 62px !important; padding: 9px 12px !important; } #closeMore { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } .more-links { gap: 8px !important; padding: 10px 12px 14px !important; } .more-link { min-height: 60px !important; padding: 11px 14px !important; border-radius: 17px !important; } } /* Teléfonos angostos. */ @media (max-width: 390px) { .more-sheet { padding-left: 8px !important; padding-right: 8px !important; } .more-sheet-card { border-radius: 22px !important; } .more-link { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 11px !important; } .more-link svg { width: 25px !important; height: 25px !important; min-width: 25px !important; } } /* Modo claro: contraste limpio y sombra suave. */ .light .more-sheet { background: rgba(22, 35, 40, .34) !important; } .light .more-sheet-card { background: #ffffff !important; border-color: #cbd7da !important; box-shadow: 0 26px 65px rgba(26, 46, 54, .24), 0 0 0 1px rgba(105, 134, 143, .13) !important; } .light .more-head { background: rgba(255, 255, 255, .98) !important; } .light .more-link { background: #f4f8f9 !important; border-color: #cbd7da !important; color: #172126 !important; } .light .more-link:hover, .light .more-link:focus-visible { background: #eaf4f5 !important; } /* ========================================================================== v2.3.2 · Footer fijo en escritorio + pestañas de Configuraciones sin solape ========================================================================== */ /* Escritorio y tablets horizontales */ @media (min-width: 901px) { /* * El contenido reserva la altura necesaria para que el footer fijo * nunca tape formularios, tablas, botones ni columnas del Pipeline. */ .app { min-height: 100vh !important; padding-bottom: 92px !important; } .app main, main#content { min-height: calc(100vh - 210px) !important; padding-bottom: 118px !important; } /* * Footer realmente fijo en la parte inferior. * Su posición acompaña el ancho actual del sidebar. */ .app > footer, .app footer { position: fixed !important; left: 292px !important; right: 0 !important; bottom: 0 !important; z-index: 1500 !important; width: auto !important; min-width: 0 !important; min-height: 76px !important; margin: 0 !important; padding: 13px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: rgba(5, 8, 9, .97) !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -12px 30px rgba(0, 0, 0, .22) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } .light .app > footer, .light .app footer { background: rgba(255, 255, 255, .97) !important; box-shadow: 0 -12px 30px rgba(28, 49, 57, .12) !important; } /* Sidebar contraído: el footer recupera el espacio liberado. */ .sidebar.collapsed + .app > footer, .sidebar.collapsed + .app footer { left: 88px !important; } .app footer .footer-links { margin-top: 5px !important; gap: 24px !important; } /* * En escritorio las pestañas dejan de ser sticky. * Esto elimina la superposición sobre títulos, botones y filtros del panel. */ .settings-shell { position: relative !important; isolation: isolate !important; width: 100% !important; min-width: 0 !important; } .settings-tabs { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 3 !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 0 18px !important; padding: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth !important; scrollbar-width: thin !important; background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .settings-panel, .settings-pane, .settings-pane.active { position: relative !important; z-index: 1 !important; min-width: 0 !important; overflow: visible !important; } .settings-panel { padding-top: 26px !important; } .settings-heading { position: relative !important; z-index: 2 !important; margin-top: 0 !important; padding-top: 0 !important; } /* * Evita que controles superiores del Pipeline queden debajo de la barra. */ .pipeline-toolbar, .pipeline-actions, .settings-pane .toolbar, .settings-pane .actions { position: relative !important; z-index: 2 !important; } /* Cuando el viewport es angosto, las pestañas desplazan horizontalmente. */ .settings-tab { flex: 0 0 auto !important; min-width: max-content !important; } } /* Escritorio pequeño: footer y pestañas mantienen el layout sin cortes. */ @media (min-width: 901px) and (max-width: 1180px) { .app > footer, .app footer { padding-left: 16px !important; padding-right: 16px !important; } .app footer .footer-links { gap: 15px !important; } .settings-tab { padding-left: 14px !important; padding-right: 14px !important; } } /* * Mobile conserva su navegación inferior y el footer normal del documento. * Se neutralizan reglas antiguas de footer sticky/fixed que puedan heredarse. */ @media (max-width: 900px) { .app { padding-bottom: 0 !important; } .app > footer, .app footer { position: relative !important; inset: auto !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 24px 18px calc(118px + env(safe-area-inset-bottom, 0px)) !important; box-shadow: none !important; } } /* ========================================================================== v2.3.3 · Adaptación exacta del ancho del footer en escritorio ========================================================================== */ /* * El footer fijo debe comenzar exactamente donde termina el sidebar. * La versión anterior utilizaba 292 px, pero el layout desktop actual usa * 250 px, 220 px en portátiles y anchos menores cuando el sidebar se contrae. */ @media (min-width: 1251px) { .app > footer, .app footer { left: 250px !important; right: 0 !important; width: calc(100vw - 250px) !important; max-width: calc(100vw - 250px) !important; } .sidebar.collapsed + .app > footer, .sidebar.collapsed + .app footer { left: 82px !important; width: calc(100vw - 82px) !important; max-width: calc(100vw - 82px) !important; } } /* Portátiles y escritorio angosto: coincide con el sidebar de 220 px. */ @media (min-width: 901px) and (max-width: 1250px) { .app > footer, .app footer { left: 220px !important; right: 0 !important; width: calc(100vw - 220px) !important; max-width: calc(100vw - 220px) !important; } .sidebar.collapsed + .app > footer, .sidebar.collapsed + .app footer { left: 76px !important; width: calc(100vw - 76px) !important; max-width: calc(100vw - 76px) !important; } } /* * Evita cualquier borde, margen o transformación heredada que genere * una franja vacía entre el sidebar y el footer. */ @media (min-width: 901px) { .app > footer, .app footer { box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; overflow-x: hidden !important; } } /* ========================================================================== v2.3.4 · Header sticky en escritorio y Mobile First ========================================================================== */ /* * El encabezado permanece visible durante el desplazamiento sin salirse del * ancho de la aplicación ni tapar el contenido. Se mantiene por encima de * tarjetas, gráficos y pestañas, pero por debajo de modales y notificaciones. */ .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { position: sticky !important; top: 0 !important; z-index: 4200 !important; isolation: isolate !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-top: 0 !important; box-sizing: border-box !important; background: color-mix(in srgb, var(--bg) 94%, transparent) !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important; backdrop-filter: blur(18px) saturate(125%) !important; -webkit-backdrop-filter: blur(18px) saturate(125%) !important; } /* Evita que reglas heredadas conviertan el header en fixed o absolute. */ .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* * El área principal debe permitir que position: sticky funcione. * Ningún ancestro directo puede recortar verticalmente el encabezado. */ .app, .app main, main#content, .main-content, .content-shell { overflow-x: clip !important; } .app, .app main, main#content, .main-content { overflow-y: visible !important; } /* El encabezado no debe quedar detrás de las pestañas de Configuraciones. */ .settings-tabs { z-index: 3200 !important; } /* Dropdown de notificaciones siempre por encima del header y las pestañas. */ .notifications-dropdown, .notification-dropdown, .notification-popover, #notificationDropdown, #notificationsDropdown { z-index: 90000 !important; } /* Modales, drawers y SweetAlert continúan por encima del header sticky. */ .swal2-container, .modal, .drawer, .task-drawer, .more-sheet { z-index: 95000 !important; } /* -------------------------------------------------------------------------- Escritorio -------------------------------------------------------------------------- */ @media (min-width: 901px) { .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { min-height: 112px !important; padding-top: 18px !important; padding-bottom: 18px !important; } /* * Cuando se navega mediante anclas o se activa una pestaña, el bloque * aparece debajo del header sticky. */ .settings-panel, .settings-pane, section[id], [data-section] { scroll-margin-top: 132px !important; } } /* -------------------------------------------------------------------------- Mobile First -------------------------------------------------------------------------- */ @media (max-width: 900px) { .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { top: 0 !important; min-height: 0 !important; padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 14px 30px rgba(0, 0, 0, .14) !important; } /* * Mantiene centrado el conjunto de controles y evita que sobresalga * del viewport en dispositivos angostos. */ .app-header .header-actions, .main-header .header-actions, .app > header .header-actions { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; justify-content: center !important; } .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { scroll-margin-top: 0 !important; } .page-title, .module-title, main h1:first-of-type { scroll-margin-top: 126px !important; } /* * El menú inferior y el header sticky conviven sin modificar el alto útil * de la pantalla ni generar doble scroll. */ .mobile-bottom-nav { z-index: 5000 !important; } } /* Teléfonos muy angostos */ @media (max-width: 390px) { .app-header, .main-header, header.app-header, .app > header, .app main > header:first-child { padding-left: 8px !important; padding-right: 8px !important; border-radius: 0 0 20px 20px !important; } } /* Modo claro */ .light .app-header, .light .main-header, .light header.app-header, .light .app > header, .light .app main > header:first-child { background: rgba(255, 255, 255, .94) !important; box-shadow: 0 10px 28px rgba(28, 49, 57, .12) !important; } /* ========================================================================== v2.3.5 · Logo corporativo en impresión/PDF de Documentación ========================================================================== */ .docs-brand-logo { display: grid !important; place-items: center !important; overflow: hidden !important; padding: 6px !important; background: #fff !important; } .docs-brand-logo img { display: block !important; width: 100% !important; height: 100% !important; max-width: 64px !important; max-height: 64px !important; object-fit: contain !important; object-position: center !important; border-radius: 12px !important; } .docs-brand-logo svg { width: 28px !important; height: 28px !important; } /* * Reglas específicas de impresión: * - fuerza la descarga/renderización del logo configurado; * - evita que visibility:hidden heredado lo oculte; * - conserva colores e imágenes de fondo en PDF; * - mantiene proporciones y resolución. */ @media print { html, body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .docs-module, .docs-module * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .docs-brand-logo, .docs-brand-logo img { display: grid !important; visibility: visible !important; opacity: 1 !important; } .docs-brand-logo { width: 72px !important; height: 72px !important; min-width: 72px !important; padding: 5px !important; border: 1px solid #d8dde0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; } .docs-brand-logo img { display: block !important; width: 62px !important; height: 62px !important; max-width: 62px !important; max-height: 62px !important; object-fit: contain !important; filter: none !important; } .docs-brand-logo img[hidden] { display: none !important; } .docs-brand-logo i:not([hidden]), .docs-brand-logo svg:not([hidden]) { display: block !important; visibility: visible !important; } .docs-hero { grid-template-columns: 78px minmax(0, 1fr) !important; align-items: center !important; } .docs-hero-copy { min-width: 0 !important; } } /* ========================================================================== v2.3.6 · Reparación definitiva del Header fijo Selector real del CRM: .topbar ========================================================================== */ :root { --desktop-header-height: 120px; --mobile-header-height: 104px; } /* * Se utiliza position: fixed porque position: sticky estaba siendo * neutralizado por reglas y contenedores heredados del layout. */ .topbar { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; z-index: 12000 !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; background: rgba(0, 0, 0, .94) !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important; backdrop-filter: blur(20px) saturate(130%) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; } .light .topbar { background: rgba(244, 246, 247, .96) !important; box-shadow: 0 12px 32px rgba(28, 49, 57, .14) !important; } /* -------------------------------------------------------------------------- Escritorio -------------------------------------------------------------------------- */ @media (min-width: 1251px) { .topbar { left: 292px !important; width: calc(100vw - 292px) !important; min-height: var(--desktop-header-height) !important; padding: 22px 30px !important; } .sidebar.collapsed + .app .topbar { left: 88px !important; width: calc(100vw - 88px) !important; } .app { padding-top: var(--desktop-header-height) !important; } } @media (min-width: 901px) and (max-width: 1250px) { .topbar { left: 220px !important; width: calc(100vw - 220px) !important; min-height: var(--desktop-header-height) !important; padding: 20px 24px !important; } .sidebar.collapsed + .app .topbar { left: 76px !important; width: calc(100vw - 76px) !important; } .app { padding-top: var(--desktop-header-height) !important; } } @media (min-width: 901px) { .topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } .topbar .desktop-title { min-width: 0 !important; } .topbar .top-actions { flex: 0 0 auto !important; } main { padding-top: 28px !important; } .page-heading { margin-top: 0 !important; } .settings-tabs, section[id], [data-section] { scroll-margin-top: calc(var(--desktop-header-height) + 18px) !important; } } /* -------------------------------------------------------------------------- Mobile First -------------------------------------------------------------------------- */ @media (max-width: 900px) { .topbar { left: 0 !important; right: 0 !important; width: 100vw !important; min-height: var(--mobile-header-height) !important; padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 0 0 24px 24px !important; } .app, .sidebar.collapsed + .app { padding-top: var(--mobile-header-height) !important; } .topbar .top-actions { position: static !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .topbar .desktop-title { display: none !important; } .page-heading { padding-top: 22px !important; margin-top: 0 !important; } main { padding-top: 18px !important; } .notif-preview { position: fixed !important; top: calc(var(--mobile-header-height) + 8px) !important; left: 12px !important; right: 12px !important; z-index: 90000 !important; } .page-heading, .settings-tabs, section[id], [data-section] { scroll-margin-top: calc(var(--mobile-header-height) + 12px) !important; } } /* Teléfonos pequeños */ @media (max-width: 390px) { :root { --mobile-header-height: 96px; } .topbar { padding-left: 8px !important; padding-right: 8px !important; border-radius: 0 0 20px 20px !important; } .topbar .top-actions { gap: 5px !important; } .topbar .iconbtn { width: 43px !important; min-width: 43px !important; height: 43px !important; } .topbar .avatar img { width: 47px !important; height: 47px !important; } .topbar .header-session b { font-size: .88rem !important; } .topbar .header-session small { font-size: .68rem !important; } .topbar #logoutBtn { padding-left: 9px !important; padding-right: 9px !important; } } /* * El header debe estar por debajo de modales y drawers, pero por encima * de contenido, gráficos y pestañas. */ .settings-tabs { z-index: 3000 !important; } .notifications-dropdown, .notification-dropdown, .notification-popover, #notificationDropdown, #notificationsDropdown, .notif-preview { z-index: 90000 !important; } .swal2-container, .modal, .drawer, .task-drawer, .more-sheet { z-index: 95000 !important; } /* Impresión: el header no debe aparecer fijo ni ocupar espacio. */ @media print { .topbar { position: static !important; width: 100% !important; min-height: 0 !important; box-shadow: none !important; } .app { padding-top: 0 !important; } } /* ========================================================================== v2.3.7 · Shell fijo real: sidebar + header + footer Solo el contenido central realiza scroll ========================================================================== */ :root{ --eg-sidebar-desktop: 250px; --eg-sidebar-collapsed: 82px; --eg-header-desktop: 122px; --eg-footer-desktop: 78px; } /* El documento deja de desplazarse en escritorio. */ @media (min-width: 901px){ html, body{ width:100% !important; height:100% !important; min-height:100% !important; overflow:hidden !important; } body{ position:fixed !important; inset:0 !important; } /* Menú lateral completamente independiente del contenido. */ .sidebar{ position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important; width:var(--eg-sidebar-desktop) !important; height:100vh !important; max-height:100vh !important; overflow-y:auto !important; overflow-x:hidden !important; z-index:13000 !important; } .sidebar.collapsed{ width:var(--eg-sidebar-collapsed) !important; } /* * La aplicación ocupa exclusivamente el rectángulo situado a la derecha * del menú lateral. No se desplaza junto con el contenido. */ .app{ position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:var(--eg-sidebar-desktop) !important; width:auto !important; max-width:none !important; height:100vh !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .sidebar.collapsed + .app{ left:var(--eg-sidebar-collapsed) !important; width:auto !important; max-width:none !important; margin:0 !important; } /* Header fijo dentro del área derecha. */ .topbar{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; width:100% !important; height:var(--eg-header-desktop) !important; min-height:var(--eg-header-desktop) !important; margin:0 !important; padding:22px 30px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; overflow:visible !important; z-index:12000 !important; } /* * El título alternativo no participa del layout de escritorio porque el * título ya está dentro del header. */ .page-heading{ display:none !important; } /* * ÚNICA zona desplazable: * queda debajo del header, encima del footer y a la derecha del sidebar. */ main#content{ position:absolute !important; top:var(--eg-header-desktop) !important; right:0 !important; bottom:var(--eg-footer-desktop) !important; left:0 !important; width:auto !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:28px 30px 42px !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; scrollbar-gutter:stable !important; -webkit-overflow-scrolling:touch !important; z-index:1 !important; } /* Footer fijo dentro del área derecha. */ .app > footer{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; height:var(--eg-footer-desktop) !important; min-height:var(--eg-footer-desktop) !important; margin:0 !important; padding:10px 24px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; z-index:11000 !important; } .app > footer .footer-links{ margin-top:4px !important; } /* Las pestañas se mantienen dentro del contenido desplazable. */ .settings-tabs{ position:sticky !important; top:0 !important; z-index:3500 !important; } /* Elementos flotantes respetan el footer fijo. */ .wa-float, .filter-float{ bottom:calc(var(--eg-footer-desktop) + 16px) !important; } /* Notificaciones por encima de todo el shell. */ .notif-preview, .notifications-dropdown, .notification-dropdown, .notification-popover, #notificationDropdown, #notificationsDropdown{ z-index:90000 !important; } } /* Portátiles con sidebar más angosto. */ @media (min-width: 901px) and (max-width: 1250px){ :root{ --eg-sidebar-desktop:220px; --eg-sidebar-collapsed:76px; --eg-header-desktop:112px; --eg-footer-desktop:76px; } .topbar{ padding:18px 24px !important; } main#content{ padding:24px 24px 38px !important; } } /* * Mobile First: * se conserva el header fijo y el contenido se desplaza entre el header y * la navegación inferior. El footer corporativo queda dentro del contenido. */ @media (max-width:900px){ html, body{ min-height:100% !important; } body{ overflow-x:hidden !important; } .app{ position:relative !important; inset:auto !important; width:100% !important; min-height:100vh !important; margin:0 !important; padding-top:var(--mobile-header-height,104px) !important; overflow:visible !important; } .topbar{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:12000 !important; } main#content{ position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding-bottom:150px !important; } .app > footer{ position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:0 !important; margin-bottom:110px !important; } } /* Impresión: layout normal, sin regiones fijas. */ @media print{ html, body{ position:static !important; width:auto !important; height:auto !important; overflow:visible !important; } .app, .topbar, main#content, .app > footer{ position:static !important; inset:auto !important; width:auto !important; height:auto !important; min-height:0 !important; overflow:visible !important; } } /* ========================================================================== v2.3.8 · Notificaciones clicables y accesibles ========================================================================== */ #notifPreview .notif-item[data-notif-id]{ appearance:none !important; -webkit-appearance:none !important; display:block !important; width:100% !important; margin:0 !important; padding:12px 14px !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:12px !important; background:transparent !important; color:inherit !important; font:inherit !important; text-align:left !important; cursor:pointer !important; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important; } #notifPreview .notif-item[data-notif-id]:hover{ background:color-mix(in srgb, var(--accent) 11%, transparent) !important; transform:translateX(2px) !important; } #notifPreview .notif-item[data-notif-id]:focus-visible{ outline:2px solid var(--accent) !important; outline-offset:-2px !important; background:color-mix(in srgb, var(--accent) 13%, transparent) !important; } #notifPreview .notif-item[data-notif-id]:active{ transform:scale(.995) !important; } #notifPreview .notif-item b, #notifPreview .notif-item small, #notifPreview .notif-item p{ pointer-events:none !important; } #notifPreview .notif-item small{ display:block !important; margin-top:3px !important; opacity:.72 !important; } #notifPreview .notif-item p{ margin:5px 0 0 !important; } #notifPreview .notif-item.is-read{ opacity:.72 !important; } #notifPreview .notif-empty{ cursor:default !important; } .light #notifPreview .notif-item[data-notif-id]:hover, .light #notifPreview .notif-item[data-notif-id]:focus-visible{ background:rgba(72,136,145,.10) !important; } /* ========================================================================== v2.3.9 · Shell Mobile First fijo e independiente IMPORTANTE: limitado exclusivamente a <= 900px para no alterar escritorio. ========================================================================== */ @media (max-width: 900px) { :root { --eg-mobile-header-h: 112px; --eg-mobile-nav-h: 112px; } /* * En móvil tampoco se desplaza el documento completo. * El único scroll pertenece al contenido central. */ html, body { width: 100% !important; height: 100% !important; min-height: 100% !important; overflow: hidden !important; overscroll-behavior: none !important; } body { position: fixed !important; inset: 0 !important; margin: 0 !important; padding: 0 !important; } .app, .sidebar.collapsed + .app { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; transform: none !important; } /* * Header fijo desde el borde superior real de la aplicación. * Se eliminan márgenes, offsets o transforms heredados. */ .topbar { position: absolute !important; inset: 0 0 auto 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: var(--eg-mobile-header-h) !important; min-height: var(--eg-mobile-header-h) !important; max-height: var(--eg-mobile-header-h) !important; margin: 0 !important; padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; translate: none !important; border-radius: 0 0 24px 24px !important; overflow: visible !important; z-index: 12000 !important; } .topbar .desktop-title { display: none !important; } .topbar .top-actions { position: static !important; inset: auto !important; width: 100% !important; max-width: 680px !important; min-width: 0 !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; transform: none !important; } /* * Única región desplazable: * debajo del header y encima de la navegación inferior. */ main#content { position: absolute !important; top: var(--eg-mobile-header-h) !important; right: 0 !important; bottom: var(--eg-mobile-nav-h) !important; left: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 24px max(18px, env(safe-area-inset-right, 0px)) 34px max(18px, env(safe-area-inset-left, 0px)) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain !important; scrollbar-gutter: auto !important; -webkit-overflow-scrolling: touch !important; z-index: 1 !important; } .page-heading { display: block !important; margin: 0 0 24px !important; padding: 0 !important; } /* * Navegación inferior siempre fija e independiente del contenido. */ .mobile-bottom-nav { position: absolute !important; left: max(18px, env(safe-area-inset-left, 0px)) !important; right: max(18px, env(safe-area-inset-right, 0px)) !important; bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: 680px !important; height: 94px !important; margin: 0 auto !important; z-index: 13000 !important; } /* * El footer corporativo forma parte del contenido central y no puede * desplazar ni tapar la navegación inferior. */ .app > footer { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 30px 0 10px !important; padding: 18px 12px !important; overflow: visible !important; } .wa-float, .filter-float { position: fixed !important; bottom: calc(var(--eg-mobile-nav-h) + 18px) !important; z-index: 12500 !important; } .notif-preview, .notifications-dropdown, .notification-dropdown, .notification-popover, #notificationDropdown, #notificationsDropdown { position: fixed !important; top: calc(var(--eg-mobile-header-h) - 4px) !important; left: 14px !important; right: 14px !important; width: auto !important; max-height: calc(100dvh - var(--eg-mobile-header-h) - var(--eg-mobile-nav-h) - 12px) !important; overflow-y: auto !important; z-index: 90000 !important; } .settings-tabs, section[id], [data-section] { scroll-margin-top: 12px !important; } } /* Ajuste específico para teléfonos angostos. */ @media (max-width: 390px) { :root { --eg-mobile-header-h: 104px; --eg-mobile-nav-h: 106px; } .topbar { padding-left: 8px !important; padding-right: 8px !important; border-radius: 0 0 20px 20px !important; } .topbar .top-actions { gap: 5px !important; } .topbar .iconbtn { width: 43px !important; min-width: 43px !important; height: 43px !important; } .topbar .avatar img { width: 48px !important; height: 48px !important; } .topbar .header-session b { font-size: .88rem !important; } .topbar .header-session small { font-size: .68rem !important; } main#content { padding-left: 14px !important; padding-right: 14px !important; } .mobile-bottom-nav { left: 10px !important; right: 10px !important; } } /* ========================================================================== v2.3.10 · Pestañas de Configuraciones en flujo normal de escritorio No modifica header, sidebar ni footer fijos. ========================================================================== */ @media (min-width: 901px){ /* * Las pestañas dejan de ser sticky/fixed en escritorio. * Permanecen dentro del flujo natural de main#content y se desplazan * junto con el contenido, evitando superponerse al drawer del Pipeline. */ .settings-tabs{ position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 0 18px !important; transform: none !important; translate: none !important; z-index: auto !important; isolation: auto !important; } /* * El contenedor general tampoco debe generar una nueva capa pegajosa. */ .settings-shell, .settings-tabs-wrap, .settings-navigation, .settings-header-tabs{ position: relative !important; top: auto !important; z-index: auto !important; } /* * El drawer de la tarea y sus overlays permanecen por encima de las * pestañas, sin alterar la jerarquía del header global. */ .pipeline-drawer, .task-drawer, .issue-drawer, .drawer-overlay, .pipeline-drawer-backdrop{ z-index: 60000 !important; } /* * Se anula cualquier margen de compensación creado para pestañas sticky. */ .settings-panel, .settings-pane, .settings-content{ scroll-margin-top: 0 !important; } } /* ========================================================================== v2.4.0 · Configuración regional y zonas horarias por usuario ========================================================================== */ .timezone-panel,.timezone-global-panel{overflow:visible} .timezone-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 24px} .timezone-status-grid article{border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 10%,transparent),transparent)} .timezone-status-grid span{display:block;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px} .timezone-status-grid strong{display:block;overflow-wrap:anywhere;font-size:1rem} .timezone-form select:disabled{opacity:.7;cursor:not-allowed} .timezone-actions{display:flex;gap:12px;flex-wrap:wrap} .timezone-actions .btn{min-width:220px} @media(max-width:900px){.timezone-status-grid{grid-template-columns:1fr}.timezone-actions{display:grid;grid-template-columns:1fr}.timezone-actions .btn{width:100%;min-width:0}.timezone-panel .settings-heading,.timezone-global-panel .settings-heading{display:block}} /* ========================================================================== v2.4.3 · Detalle de Usuarios y Socios con diseño de perfil ========================================================================== */ .swal2-popup.record-profile-popup{ overflow:hidden!important; border-radius:28px!important; max-height:min(92vh,900px); background:var(--panel)!important; } .record-profile-popup .swal2-html-container{ margin:0!important; padding:0!important; overflow:auto!important; color:var(--text)!important; } .record-profile-popup .swal2-actions{ margin:0!important; padding:0 24px 24px!important; background:var(--panel); } .record-profile-close{ min-width:130px; border-radius:14px!important; } .record-profile-card{ position:relative; overflow:hidden; width:100%; text-align:center; background:var(--panel); color:var(--text); } .record-profile-cover{ height:142px; background: radial-gradient(circle at 18% 15%,rgba(105,211,209,.34),transparent 34%), linear-gradient(120deg,var(--brand),#312b7a); } .record-profile-avatar{ width:132px; height:132px; margin:-66px auto 12px; padding:0; display:grid; place-items:center; overflow:hidden; border:8px solid var(--panel); border-radius:36px; background:var(--soft); box-shadow:var(--shadow); } .record-profile-avatar img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:27px; } .record-profile-heading{ padding:0 24px 8px; } .record-profile-heading h2{ margin:10px 0 8px; font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.15; } .record-profile-heading p{ margin:9px 0 0; color:var(--muted); overflow-wrap:anywhere; } .record-profile-badges{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; } .record-profile-info{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:22px 26px 26px; text-align:left; } .record-profile-field{ min-width:0; padding:15px; border:1px solid var(--line); border-radius:16px; background:var(--soft); } .record-profile-field b{ display:block; color:var(--brand2); font-size:.76rem; font-weight:900; letter-spacing:.045em; text-transform:uppercase; } .record-profile-field p{ margin:.45rem 0 0; color:var(--text); font-weight:800; line-height:1.4; overflow-wrap:anywhere; } .light .record-profile-card, .light .record-profile-popup .swal2-actions{ background:#fff; } .light .record-profile-avatar{ border-color:#fff; background:#eef4f5; } .light .record-profile-field{ background:#f8fbfb; } @media(max-width:650px){ .swal2-popup.record-profile-popup{ width:calc(100% - 24px)!important; max-height:88vh; border-radius:22px!important; } .record-profile-cover{height:104px} .record-profile-avatar{ width:104px; height:104px; margin-top:-52px; border-width:6px; border-radius:29px; } .record-profile-avatar img{border-radius:22px} .record-profile-heading{padding-inline:16px} .record-profile-info{ grid-template-columns:1fr; gap:9px; padding:16px; } .record-profile-field{padding:13px} .record-profile-popup .swal2-actions{padding:0 16px 18px!important} .record-profile-close{width:100%} } /* v2.4.4 · Email y notificaciones por perfil */ .communication-panel,.communication-history{max-width:1180px;margin-inline:auto} .eyebrow{display:block;color:var(--brand2);font-size:.78rem;font-weight:900;letter-spacing:.12em} .communication-form{display:grid;gap:18px;margin-top:20px} .communication-grid{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(280px,1.3fr);gap:14px} .communication-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .mail-editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border:1px solid var(--line);border-bottom:0;border-radius:15px 15px 0 0;background:var(--soft)} .mail-editor-toolbar button,.mail-upload-button{min-height:38px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-weight:800;cursor:pointer} .mail-editor{min-height:300px;max-height:560px;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:0 0 15px 15px;background:var(--input);color:var(--text);line-height:1.65;text-align:left} .mail-editor:empty:before{content:attr(data-placeholder);color:var(--muted)} .mail-editor img{display:block;max-width:100%;height:auto;margin:14px auto;border-radius:12px} #emailHistory{display:grid;gap:10px} .email-history-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)} .email-history-item b,.email-history-item span{display:block} .email-history-item span{margin-top:5px;color:var(--muted);font-size:.88rem} .email-history-counters{display:flex;gap:8px;flex-wrap:wrap} .email-history-counters span{margin:0;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--text)} .danger-text{color:#ff727c!important;border-color:#a83b45!important} .notification-composer{display:grid;gap:14px;text-align:left} .notification-composer textarea{min-height:170px} @media(max-width:720px){.communication-grid{grid-template-columns:1fr}.communication-actions .btn{flex:1}.mail-editor{min-height:250px}.email-history-item{align-items:flex-start;flex-direction:column}} /* v2.4.5 · Progreso de envío y destinatario individual */ .communication-grid-three{ grid-template-columns:minmax(190px,.65fr) minmax(260px,1fr) minmax(280px,1.2fr); } .email-send-progress{display:grid;gap:14px;text-align:center;padding:8px 4px} .email-send-progress-track{ width:100%;height:13px;overflow:hidden;border-radius:999px; background:var(--soft);border:1px solid var(--line); } .email-send-progress-track span{ display:block;width:8%;height:100%;border-radius:inherit; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .45s ease;box-shadow:0 0 16px color-mix(in srgb,var(--brand2) 55%,transparent); } .email-send-progress strong{font-size:2rem;color:var(--brand2)} .email-send-progress p{margin:0;font-weight:800;color:var(--text)} .email-send-progress small{color:var(--muted)} .email-send-result{display:grid;gap:7px;text-align:left;padding:4px 12px} .email-send-result>strong{display:block;text-align:center;color:var(--brand2);margin-bottom:5px} .email-send-result p{margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--soft)} @media(max-width:980px){.communication-grid-three{grid-template-columns:1fr 1fr}.communication-grid-three .field:last-child{grid-column:1/-1}} @media(max-width:720px){.communication-grid-three{grid-template-columns:1fr}.communication-grid-three .field:last-child{grid-column:auto}} /* v2.4.6 · Estados robustos del historial de emails */ .email-history-loading, .email-history-empty, .email-history-error{ display:grid; justify-items:center; gap:9px; padding:30px 18px; text-align:center; border:1px dashed var(--line); border-radius:15px; background:var(--soft); } .email-history-loading span{ width:32px;height:32px; border:3px solid var(--line); border-top-color:var(--brand2); border-radius:50%; animation:emailHistorySpin .8s linear infinite; } .email-history-loading p, .email-history-empty p, .email-history-error p{margin:0;color:var(--muted)} .email-history-item small{display:block;margin-top:5px;color:var(--muted)} @keyframes emailHistorySpin{to{transform:rotate(360deg)}} /* ========================================================================== v2.4.12 · Corrección definitiva de apilamiento Mobile First El contenido queda siempre debajo del encabezado/título del módulo y nunca se superpone al footer corporativo ni a la navegación inferior. ========================================================================== */ @media (max-width: 900px) { /* * Único contexto de apilamiento para el contenido móvil. * Evita que cards, gráficos o paneles heredados queden por encima * del título del módulo. */ main#content { isolation: isolate !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding-top: 22px !important; padding-bottom: 42px !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 1 !important; } /* * El encabezado del módulo siempre ocupa la primera posición visual. */ main#content > .page-heading { order: -1000 !important; position: relative !important; inset: auto !important; z-index: 20 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 0 24px !important; padding: 0 !important; transform: none !important; translate: none !important; opacity: 1 !important; overflow: visible !important; } main#content > .page-heading h1 { position: relative !important; z-index: 1 !important; margin: 0 0 9px !important; padding: 0 !important; transform: none !important; line-height: 1.08 !important; } main#content > .page-heading p { position: relative !important; z-index: 1 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* * Todos los módulos, cards y paneles continúan después del título, * sin márgenes negativos, desplazamientos o posiciones absolutas. */ main#content > :not(.page-heading) { order: 0 !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: auto !important; float: none !important; margin-top: 0 !important; transform: none !important; translate: none !important; } main#content > :not(.page-heading) + :not(.page-heading) { margin-top: 18px !important; } #dashStats, .cards, .dashboard-filters, .chart-panel, .panel, .settings-shell, .settings-content, .settings-pane { position: relative !important; inset: auto !important; transform: none !important; translate: none !important; } /* * El footer corporativo del escritorio no debe quedar detrás del contenido * móvil. La navegación inferior ya cumple la función de footer móvil. */ .app > footer { display: none !important; position: static !important; inset: auto !important; z-index: auto !important; } /* * Reserva real para la barra inferior fija. */ .mobile-bottom-nav { z-index: 30000 !important; } .wa-float, .filter-float { z-index: 29000 !important; } } /* Teléfonos angostos: conserva separación legible sin desperdiciar espacio. */ @media (max-width: 390px) { main#content { padding-top: 18px !important; padding-bottom: 34px !important; } main#content > .page-heading { margin-bottom: 20px !important; } main#content > .page-heading h1 { font-size: 34px !important; } } /* ========================================================================== v2.5.0 · Refactorización estructural del Layout Mobile First -------------------------------------------------------------------------- Se abandona el parche por z-index. El título del módulo y el contenido pertenecen ahora a una única región desplazable: .content-stack. ========================================================================== */ /* Escritorio: el wrapper no altera el layout fijo ya estabilizado. */ @media (min-width: 901px) { .content-stack { display: contents !important; } } /* Login: conserva el formulario estable y muestra siempre un logo válido. */ .login-page .brand img { display: block !important; width: 74px !important; height: 74px !important; min-width: 74px !important; object-fit: contain !important; border-radius: 16px !important; background: transparent !important; } /* Layout móvil completamente independiente del modo escritorio. */ @media (max-width: 900px) { :root { --v250-header-h: 112px; --v250-nav-h: 112px; } html, body { width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; overflow: hidden !important; overscroll-behavior: none !important; } body { position: fixed !important; inset: 0 !important; padding: 0 !important; } .app, .sidebar.collapsed + .app { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; transform: none !important; } /* Header fijo y fuera del flujo desplazable. */ .topbar { position: absolute !important; inset: 0 0 auto 0 !important; width: 100% !important; height: var(--v250-header-h) !important; min-height: var(--v250-header-h) !important; max-height: var(--v250-header-h) !important; margin: 0 !important; padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; transform: none !important; z-index: 12000 !important; } .topbar .desktop-title { display: none !important; } .topbar .top-actions { position: static !important; inset: auto !important; width: 100% !important; max-width: 680px !important; min-width: 0 !important; margin: 0 auto !important; transform: none !important; } /* * ÚNICO scroll móvil: * incluye el título y las cards en el mismo flujo real. */ .content-stack { position: absolute !important; top: var(--v250-header-h) !important; right: 0 !important; bottom: var(--v250-nav-h) !important; left: 0 !important; display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 22px max(18px, env(safe-area-inset-right, 0px)) 34px max(18px, env(safe-area-inset-left, 0px)) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-gutter: auto !important; isolation: isolate !important; z-index: 1 !important; } /* Título siempre primero, dentro del mismo flujo del contenido. */ .content-stack > .page-heading { display: block !important; position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; margin: 0 0 24px !important; padding: 0 !important; overflow: visible !important; opacity: 1 !important; transform: none !important; translate: none !important; z-index: 2 !important; } .content-stack > .page-heading h1 { position: relative !important; margin: 0 0 9px !important; padding: 0 !important; font-size: 38px !important; line-height: 1.08 !important; transform: none !important; } .content-stack > .page-heading p { position: relative !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; transform: none !important; } /* El main ya no es scroll, fixed ni absolute. */ .content-stack > main#content { display: block !important; position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 0 34px !important; overflow: visible !important; transform: none !important; translate: none !important; isolation: auto !important; z-index: 1 !important; } /* * Neutralización de desplazamientos heredados solamente en los hijos * directos del contenido. No se rompen modales, dropdowns ni componentes * internos que sí necesitan position. */ .content-stack > main#content > * { top: auto !important; bottom: auto !important; margin-top: 0 !important; transform: none !important; translate: none !important; } .content-stack > main#content > * + * { margin-top: 18px !important; } /* El footer corporativo de escritorio no participa del layout móvil. */ .app > footer { display: none !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; z-index: auto !important; } /* Navegación inferior fija e independiente. */ .mobile-bottom-nav { position: absolute !important; left: max(18px, env(safe-area-inset-left, 0px)) !important; right: max(18px, env(safe-area-inset-right, 0px)) !important; bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: 680px !important; height: 94px !important; margin: 0 auto !important; z-index: 13000 !important; } .wa-float, .filter-float { position: fixed !important; bottom: calc(var(--v250-nav-h) + 18px) !important; z-index: 12500 !important; } .notif-preview, .notifications-dropdown, .notification-dropdown, .notification-popover, #notificationDropdown, #notificationsDropdown { z-index: 90000 !important; } } @media (max-width: 390px) { :root { --v250-header-h: 104px; --v250-nav-h: 106px; } .content-stack { padding-left: 14px !important; padding-right: 14px !important; } .content-stack > .page-heading h1 { font-size: 34px !important; } .mobile-bottom-nav { left: 10px !important; right: 10px !important; } .login-page .brand img { width: 66px !important; height: 66px !important; min-width: 66px !important; } } /* Login fuera del shell autenticado: nunca usar las reglas de .app móvil. */ @media (max-width: 900px) { body.login-page { position: static !important; width: 100% !important; height: auto !important; min-height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 22px 0 !important; } .login-page .login-shell { position: relative !important; inset: auto !important; width: min(100%, 760px) !important; min-height: auto !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; transform: none !important; } .login-page .login-panel { position: relative !important; inset: auto !important; display: block !important; width: calc(100% - 24px) !important; min-height: auto !important; margin: 0 auto !important; padding: 28px 24px !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .login-page .login-panel > * { opacity: 1 !important; visibility: visible !important; } } /* ========================================================================== v2.5.1 · Login profesional responsive + carga robusta del logo ========================================================================== */ body.login-page.login-v251{ position:static!important;inset:auto!important;width:100%!important;height:auto!important; min-height:100dvh!important;margin:0!important;padding:clamp(18px,3vw,42px)!important; overflow-x:hidden!important;overflow-y:auto!important;color:#edf7f7!important; background: radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--brand2) 20%,transparent),transparent 32%), radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--brand) 25%,transparent),transparent 34%), #071012!important; } .login-v251-shell{width:min(1180px,100%)!important;min-height:min(760px,calc(100dvh - 84px))!important;margin:0 auto!important; display:grid!important;grid-template-columns:minmax(420px,.92fr) minmax(440px,1.08fr)!important; border:1px solid #285058!important;border-radius:30px!important;overflow:hidden!important;background:#0d1517!important; box-shadow:0 32px 90px rgba(0,0,0,.42)!important;position:relative!important;inset:auto!important;transform:none!important} .login-v251-form-panel{padding:clamp(34px,5vw,64px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important; background:linear-gradient(145deg,rgba(20,29,31,.98),rgba(10,17,19,.98))!important;position:relative!important;z-index:2!important} .login-v251-brand{display:flex!important;align-items:center!important;gap:16px!important;margin-bottom:34px!important} .login-v251-logo-wrap{width:88px!important;height:88px!important;min-width:88px!important;display:grid!important;place-items:center!important; border:1px solid #315b62!important;border-radius:22px!important;background:#101b1e!important;overflow:hidden!important} .login-v251-logo-wrap img,#loginLogo{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;padding:6px!important;margin:0!important; max-width:none!important;max-height:none!important;border:0!important;border-radius:16px!important;background:transparent!important} .login-v251-brand-copy{display:grid!important;gap:3px!important}.login-v251-brand-copy strong{font-size:18px!important;line-height:1.2!important;color:#fff!important} .login-v251-brand-copy span{font-size:13px!important;letter-spacing:.14em!important;color:var(--brand2)!important;font-weight:800!important} .login-v251-kicker{display:flex!important;align-items:center!important;gap:9px!important;color:var(--brand2)!important;font-weight:800!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.08em!important} .login-v251-kicker span{width:28px!important;height:3px!important;border-radius:999px!important;background:var(--brand2)!important} .login-v251-form-panel h1{margin:13px 0 10px!important;font-size:clamp(38px,4vw,56px)!important;line-height:1.02!important;letter-spacing:-.035em!important;color:#fff!important} .login-v251-intro{margin:0 0 30px!important;color:#9fb1b4!important;font-size:16px!important;line-height:1.65!important;max-width:560px!important} .login-v251-form{display:grid!important;gap:18px!important}.login-v251-form label{display:grid!important;gap:8px!important;color:#fff!important;font-weight:800!important} .login-v251-form input{width:100%!important;min-height:54px!important;padding:0 16px!important;border:1px solid #31535a!important;border-radius:14px!important; background:#0d1b28!important;color:#fff!important;font-size:16px!important;outline:none!important;box-shadow:none!important} .login-v251-form input:focus{border-color:var(--brand2)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand2) 18%,transparent)!important} .login-v251-primary{min-height:54px!important;margin-top:4px!important;border:0!important;border-radius:14px!important;background:linear-gradient(135deg,var(--brand2),#ffe05d)!important;color:#071012!important;font-weight:900!important;font-size:16px!important} .login-v251-divider{display:flex!important;align-items:center!important;gap:12px!important;margin:26px 0 18px!important;color:#708589!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.08em!important} .login-v251-divider:before,.login-v251-divider:after{content:""!important;height:1px!important;flex:1!important;background:#263f44!important} .login-v251-actions{display:grid!important;gap:12px!important}.login-v251-actions .btn{min-height:52px!important;border-radius:14px!important;font-weight:800!important} .login-v251-actions .google{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;background:#fff!important;color:#162033!important;border:0!important} .login-v251-actions .google svg{width:22px!important;height:22px!important}.login-v251-secondary-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important} .login-v251-security{text-align:center!important;margin:24px 0 0!important;color:#71868a!important;font-size:12px!important} .login-v251-visual{position:relative!important;overflow:hidden!important;min-height:640px!important;background: linear-gradient(150deg,rgba(20,91,96,.82),rgba(5,14,18,.98))!important;background-size:cover!important;background-position:center!important} .login-v251-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;object-fit:cover!important;opacity:.38!important} .login-v251-grid{position:absolute!important;inset:42% 0 0!important;background-image:linear-gradient(rgba(105,211,209,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(105,211,209,.12) 1px,transparent 1px)!important;background-size:54px 54px!important;transform:perspective(460px) rotateX(58deg) scale(1.55)!important;transform-origin:center top!important} .login-v251-glow{position:absolute!important;width:360px!important;height:360px!important;left:50%!important;top:20%!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;background:radial-gradient(circle,var(--brand2),transparent 68%)!important;opacity:.25!important;filter:blur(16px)!important} .login-v251-visual-content{position:relative!important;z-index:3!important;height:100%!important;padding:clamp(38px,5vw,70px)!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important} .login-v251-pill{align-self:flex-start!important;padding:9px 14px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:rgba(4,17,20,.5)!important;font-size:12px!important;font-weight:900!important;letter-spacing:.08em!important} .login-v251-visual h2{max-width:620px!important;margin:22px 0 14px!important;font-size:clamp(34px,4vw,58px)!important;line-height:1.05!important;letter-spacing:-.035em!important;color:#fff!important} .login-v251-visual p{max-width:600px!important;margin:0!important;color:#c5d7d9!important;font-size:17px!important;line-height:1.65!important} .login-v251-metrics{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin-top:34px!important} .login-v251-metrics article{padding:18px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:16px!important;background:rgba(5,17,20,.58)!important;backdrop-filter:blur(10px)!important} .login-v251-metrics b{display:block!important;font-size:24px!important;color:#fff!important}.login-v251-metrics span{display:block!important;margin-top:4px!important;color:#9fc3c6!important;font-size:12px!important} @media(max-width:900px){body.login-page.login-v251{padding:16px!important;min-height:100dvh!important}.login-v251-shell{display:block!important;min-height:auto!important;border-radius:24px!important}.login-v251-form-panel{padding:30px 24px 34px!important}.login-v251-visual{display:none!important}.login-v251-brand{justify-content:center!important;text-align:left!important;margin-bottom:28px!important}.login-v251-logo-wrap{width:82px!important;height:82px!important;min-width:82px!important}.login-v251-kicker{justify-content:center!important}.login-v251-form-panel h1{text-align:center!important;font-size:42px!important}.login-v251-intro{text-align:center!important;margin-left:auto!important;margin-right:auto!important}.login-v251-secondary-row{grid-template-columns:1fr!important}.login-v251-security{padding-bottom:max(4px,env(safe-area-inset-bottom))!important}} @media(max-width:420px){body.login-page.login-v251{padding:10px!important}.login-v251-form-panel{padding:24px 18px 28px!important}.login-v251-brand-copy strong{font-size:16px!important}.login-v251-brand-copy span{font-size:11px!important}.login-v251-form-panel h1{font-size:36px!important}.login-v251-logo-wrap{width:72px!important;height:72px!important;min-width:72px!important}} /* ========================================================================== v2.5.2 · Adaptabilidad integral del nuevo Login iPhone · Android · Tablet · Notebook · Escritorio ========================================================================== */ body.login-page{ min-height:100dvh !important; width:100% !important; display:grid !important; place-items:center !important; padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)) !important; overflow:auto !important; } .login-page .login-v252-shell, .login-page .login-shell{ width:min(1180px, 100%) !important; max-width:1180px !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:auto !important; display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; align-items:stretch !important; overflow:hidden !important; border-radius:28px !important; } .login-page .login-v252-panel, .login-page .login-panel{ width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; padding:clamp(28px, 4vw, 54px) !important; overflow:visible !important; } .login-page .login-v252-visual, .login-page .login-visual, .login-page .visual-panel, .login-page .login-showcase{ width:100% !important; min-width:0 !important; height:auto !important; min-height:100% !important; overflow:hidden !important; } .login-page .login-panel form, .login-page .login-panel .auth-form{ width:100% !important; max-width:100% !important; } .login-page .login-panel input, .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ width:100% !important; max-width:100% !important; } .login-page .login-panel .brand, .login-page .login-panel .brand-row, .login-page .login-panel .brand-block{ display:flex !important; align-items:center !important; gap:18px !important; flex-wrap:wrap !important; } .login-page .login-panel .brand img{ flex:0 0 auto !important; width:clamp(82px, 9vw, 118px) !important; height:clamp(82px, 9vw, 118px) !important; object-fit:contain !important; } .login-page h1, .login-page .login-title{ font-size:clamp(42px, 5vw, 68px) !important; line-height:1.02 !important; text-wrap:balance !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:clamp(16px, 1.7vw, 22px) !important; line-height:1.55 !important; } /* Escritorios y notebooks bajos: evitar recorte inferior */ @media (min-width: 901px) and (max-height: 860px){ body.login-page{ place-items:start center !important; padding-top:18px !important; padding-bottom:18px !important; } .login-page .login-v252-shell, .login-page .login-shell{ max-width:1080px !important; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr) !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:30px 38px !important; } .login-page h1, .login-page .login-title{ font-size:clamp(40px, 4.2vw, 58px) !important; } .login-page .login-panel input{ min-height:48px !important; } .login-page .login-panel button, .login-page .login-panel .btn{ min-height:46px !important; } } /* Tablets verticales y horizontales */ @media (min-width: 701px) and (max-width: 1100px){ body.login-page{ padding:18px !important; } .login-page .login-v252-shell, .login-page .login-shell{ width:min(920px, 100%) !important; grid-template-columns:minmax(0, 1fr) minmax(0, .95fr) !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:32px !important; } .login-page h1, .login-page .login-title{ font-size:clamp(42px, 6vw, 60px) !important; } } /* Mobile First: iPhone y Android */ @media (max-width: 700px){ body.login-page{ display:block !important; min-height:100dvh !important; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important; overflow-y:auto !important; overflow-x:hidden !important; } .login-page .login-v252-shell, .login-page .login-shell{ display:block !important; width:100% !important; max-width:620px !important; margin:0 auto !important; border-radius:24px !important; overflow:visible !important; } .login-page .login-v252-visual, .login-page .login-visual, .login-page .visual-panel, .login-page .login-showcase{ display:none !important; } .login-page .login-v252-panel, .login-page .login-panel{ width:100% !important; min-height:0 !important; padding:clamp(22px, 6vw, 32px) !important; border-radius:24px !important; } .login-page .login-panel .brand, .login-page .login-panel .brand-row, .login-page .login-panel .brand-block{ justify-content:center !important; text-align:left !important; gap:14px !important; } .login-page .login-panel .brand img{ width:clamp(82px, 23vw, 112px) !important; height:clamp(82px, 23vw, 112px) !important; } .login-page h1, .login-page .login-title{ font-size:clamp(40px, 11vw, 58px) !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:clamp(17px, 4.8vw, 22px) !important; line-height:1.6 !important; text-align:center !important; } .login-page .eyebrow, .login-page .kicker{ justify-content:center !important; text-align:center !important; } .login-page .login-panel input{ min-height:58px !important; font-size:18px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:56px !important; font-size:18px !important; } .login-page .login-panel .actions, .login-page .login-panel .secondary-actions{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; } } /* Teléfonos pequeños y pantallas de poca altura */ @media (max-width: 430px), (max-height: 720px) and (max-width: 700px){ .login-page .login-v252-panel, .login-page .login-panel{ padding:20px 18px !important; } .login-page h1, .login-page .login-title{ font-size:clamp(36px, 10vw, 48px) !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:16px !important; } .login-page .login-panel .brand img{ width:88px !important; height:88px !important; } .login-page .login-panel input{ min-height:54px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:52px !important; } } /* Landscape móvil: mantener todo accesible sin recorte */ @media (max-width: 900px) and (orientation: landscape){ body.login-page{ padding:10px 14px !important; } .login-page .login-v252-shell, .login-page .login-shell{ width:min(760px, 100%) !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:18px 24px !important; } .login-page .login-panel .brand img{ width:72px !important; height:72px !important; } .login-page h1, .login-page .login-title{ font-size:36px !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:15px !important; } } /* ========================================================================== v2.5.3 · Login compacto, centrado y con scroll elegante ========================================================================== */ body.login-page{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:100dvh !important; height:100dvh !important; padding:16px !important; overflow:auto !important; scrollbar-width:thin !important; scrollbar-color:#4aa5a8 transparent !important; } body.login-page::-webkit-scrollbar, .login-page .login-v252-shell::-webkit-scrollbar, .login-page .login-shell::-webkit-scrollbar{ width:8px !important; height:8px !important; } body.login-page::-webkit-scrollbar-track, .login-page .login-v252-shell::-webkit-scrollbar-track, .login-page .login-shell::-webkit-scrollbar-track{ background:transparent !important; } body.login-page::-webkit-scrollbar-thumb, .login-page .login-v252-shell::-webkit-scrollbar-thumb, .login-page .login-shell::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#4aa5a8,#6ed9d4) !important; border-radius:999px !important; border:2px solid transparent !important; background-clip:padding-box !important; } .login-page .login-v252-shell, .login-page .login-shell{ width:min(980px, calc(100vw - 32px)) !important; max-width:980px !important; max-height:calc(100dvh - 32px) !important; min-height:0 !important; height:auto !important; margin:auto !important; display:grid !important; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr) !important; overflow:auto !important; overscroll-behavior:contain !important; scrollbar-width:thin !important; scrollbar-color:#4aa5a8 transparent !important; border-radius:24px !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:24px 28px !important; min-height:0 !important; } .login-page .login-v252-visual, .login-page .login-visual, .login-page .visual-panel, .login-page .login-showcase{ min-height:0 !important; height:auto !important; } /* Compactación general del formulario */ .login-page .login-panel .brand, .login-page .login-panel .brand-row, .login-page .login-panel .brand-block{ gap:12px !important; margin-bottom:18px !important; } .login-page .login-panel .brand img{ width:72px !important; height:72px !important; min-width:72px !important; } .login-page .eyebrow, .login-page .kicker{ margin:14px 0 12px !important; font-size:13px !important; letter-spacing:.08em !important; } .login-page h1, .login-page .login-title{ margin:0 0 12px !important; font-size:clamp(34px, 4vw, 50px) !important; line-height:1.02 !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ margin:0 0 18px !important; font-size:15px !important; line-height:1.45 !important; } .login-page .login-panel form, .login-page .login-panel .auth-form{ display:grid !important; gap:12px !important; } .login-page .login-panel label{ margin-bottom:5px !important; font-size:14px !important; } .login-page .login-panel input{ min-height:46px !important; height:46px !important; padding:10px 14px !important; font-size:15px !important; border-radius:12px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:44px !important; height:44px !important; padding:9px 14px !important; font-size:15px !important; border-radius:12px !important; } .login-page .divider, .login-page .separator{ margin:12px 0 !important; } .login-page .login-panel .actions, .login-page .login-panel .secondary-actions{ gap:10px !important; } /* Escritorio: no usar todo el ancho ni toda la altura */ @media (min-width: 1101px){ .login-page .login-v252-shell, .login-page .login-shell{ width:min(920px, calc(100vw - 48px)) !important; max-width:920px !important; grid-template-columns:420px 1fr !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:24px 26px !important; } } /* Notebooks con poca altura */ @media (min-width: 701px) and (max-height: 760px){ body.login-page{ align-items:flex-start !important; padding:10px !important; } .login-page .login-v252-shell, .login-page .login-shell{ max-height:calc(100dvh - 20px) !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:18px 22px !important; } .login-page .login-panel .brand img{ width:62px !important; height:62px !important; min-width:62px !important; } .login-page h1, .login-page .login-title{ font-size:38px !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:14px !important; margin-bottom:12px !important; } .login-page .login-panel input{ min-height:42px !important; height:42px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:40px !important; height:40px !important; } } /* Tablet */ @media (min-width: 701px) and (max-width: 1100px){ .login-page .login-v252-shell, .login-page .login-shell{ width:min(860px, calc(100vw - 28px)) !important; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr) !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:22px !important; } } /* Mobile First real: más compacto y siempre desplazable */ @media (max-width: 700px){ body.login-page{ display:block !important; height:auto !important; min-height:100dvh !important; padding: max(10px, env(safe-area-inset-top,0px)) max(10px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px)) !important; overflow-y:auto !important; } .login-page .login-v252-shell, .login-page .login-shell{ display:block !important; width:min(100%, 560px) !important; max-width:560px !important; max-height:none !important; overflow:visible !important; margin:0 auto !important; border-radius:20px !important; } .login-page .login-v252-panel, .login-page .login-panel{ padding:20px 18px !important; border-radius:20px !important; } .login-page .login-v252-visual, .login-page .login-visual, .login-page .visual-panel, .login-page .login-showcase{ display:none !important; } .login-page .login-panel .brand, .login-page .login-panel .brand-row, .login-page .login-panel .brand-block{ justify-content:center !important; gap:10px !important; margin-bottom:14px !important; } .login-page .login-panel .brand img{ width:72px !important; height:72px !important; min-width:72px !important; } .login-page .eyebrow, .login-page .kicker{ margin:10px 0 !important; font-size:12px !important; } .login-page h1, .login-page .login-title{ font-size:clamp(34px, 9vw, 44px) !important; margin-bottom:10px !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:15px !important; line-height:1.42 !important; margin-bottom:16px !important; } .login-page .login-panel form, .login-page .login-panel .auth-form{ gap:10px !important; } .login-page .login-panel input{ min-height:48px !important; height:48px !important; padding:10px 13px !important; font-size:16px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:46px !important; height:46px !important; font-size:16px !important; } .login-page .divider, .login-page .separator{ margin:10px 0 !important; } } /* iPhone SE y Android pequeños */ @media (max-width: 390px){ .login-page .login-v252-panel, .login-page .login-panel{ padding:16px 14px !important; } .login-page .login-panel .brand img{ width:64px !important; height:64px !important; min-width:64px !important; } .login-page h1, .login-page .login-title{ font-size:32px !important; } .login-page .login-subtitle, .login-page .lead, .login-page .subtitle{ font-size:14px !important; } .login-page .login-panel input{ min-height:44px !important; height:44px !important; } .login-page .login-panel button, .login-page .login-panel .btn, .login-page .login-panel a.button{ min-height:42px !important; height:42px !important; font-size:15px !important; } } /* ========================================================================== v2.5.4 · Scroll interno moderno del Login Mobile First ========================================================================== */ @media (max-width:700px){ body.login-page{ height:100dvh !important; min-height:100dvh !important; overflow:hidden !important; padding: max(8px, env(safe-area-inset-top,0px)) max(8px, env(safe-area-inset-right,0px)) max(8px, env(safe-area-inset-bottom,0px)) max(8px, env(safe-area-inset-left,0px)) !important; } .login-page .login-v251-shell, .login-page .login-v252-shell, .login-page .login-shell{ display:block !important; width:min(100%,560px) !important; max-width:560px !important; height:calc(100dvh - 16px) !important; max-height:none !important; margin:0 auto !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:thin !important; scrollbar-color:#55bcc6 rgba(255,255,255,.04) !important; scrollbar-gutter:stable !important; } .login-page .login-v251-shell::-webkit-scrollbar, .login-page .login-v252-shell::-webkit-scrollbar, .login-page .login-shell::-webkit-scrollbar{ width:6px !important; } .login-page .login-v251-shell::-webkit-scrollbar-track, .login-page .login-v252-shell::-webkit-scrollbar-track, .login-page .login-shell::-webkit-scrollbar-track{ background:rgba(255,255,255,.035) !important; border-radius:999px !important; } .login-page .login-v251-shell::-webkit-scrollbar-thumb, .login-page .login-v252-shell::-webkit-scrollbar-thumb, .login-page .login-shell::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#55bcc6,#75e7df) !important; border-radius:999px !important; border:1px solid rgba(7,16,18,.65) !important; } .login-page .login-v251-form-panel{ min-height:auto !important; padding-bottom:26px !important; } } /* ========================================================================== v2.6.0 · Smart Import Engine ========================================================================== */ .smart-import-trigger svg{width:18px;height:18px;vertical-align:-4px;margin-right:6px} .smart-import-popup{border:1px solid var(--line,#285058)!important} .smart-import-popup .swal2-html-container{margin:1em 1.1em!important} .smart-import{color:var(--text,#eef7f7);text-align:left} .smart-import-hero{display:flex;gap:15px;align-items:center;padding:16px;border:1px solid var(--line,#285058);border-radius:16px;background:rgba(77,178,184,.08);margin-bottom:16px} .smart-import-hero b{font-size:19px}.smart-import-hero p{margin:5px 0 0;color:var(--muted,#aab9bc);font-size:14px} .smart-import-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#3f858c;color:#fff;flex:0 0 auto} .smart-import-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2} .smart-dropzone{display:grid;place-items:center;min-height:145px;padding:24px;border:2px dashed #3f858c;border-radius:17px;background:rgba(63,133,140,.07);cursor:pointer;text-align:center} .smart-dropzone:hover{background:rgba(63,133,140,.13)} .smart-dropzone input{position:absolute;opacity:0;pointer-events:none} .smart-drop-title{font-size:18px;font-weight:800}.smart-dropzone small,.smart-import-field small{display:block;margin-top:7px;color:var(--muted,#aab9bc)} .smart-import-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted,#aab9bc)} .smart-import-divider:before,.smart-import-divider:after{content:"";height:1px;background:var(--line,#285058);flex:1} .smart-import-grid,.smart-import-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .smart-import-field label{display:block;font-weight:700;margin-bottom:7px} .smart-import-field input,.smart-import-field select,.smart-map-row select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line,#285058);border-radius:11px;background:var(--input,#101d2d);color:var(--text,#eef7f7)} .smart-import-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px} .smart-import-summary span{padding:9px 12px;border:1px solid var(--line,#285058);border-radius:999px;background:rgba(63,133,140,.08);font-size:13px} .smart-check{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line,#285058);border-radius:12px} .smart-import-sections{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr);gap:18px;margin-top:18px} .smart-import-sections section{min-width:0;padding:15px;border:1px solid var(--line,#285058);border-radius:15px} .smart-import-sections h3{margin:0 0 5px}.smart-import-sections p{margin:0 0 12px;color:var(--muted,#aab9bc);font-size:13px} .smart-map-list{display:grid;gap:9px;max-height:390px;overflow:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:#4faeb4 transparent} .smart-map-list::-webkit-scrollbar,.smart-preview-table::-webkit-scrollbar{width:7px;height:7px} .smart-map-list::-webkit-scrollbar-thumb,.smart-preview-table::-webkit-scrollbar-thumb{background:#4faeb4;border-radius:99px} .smart-map-row{display:grid;grid-template-columns:minmax(125px,.8fr) minmax(150px,1.2fr);gap:10px;align-items:center} .smart-map-row label{font-size:13px;font-weight:700}.smart-map-row em{display:block;color:#ffbe55;font-size:10px;font-style:normal;text-transform:uppercase} .smart-preview-table{max-width:100%;max-height:430px;overflow:auto;border-radius:12px;scrollbar-width:thin;scrollbar-color:#4faeb4 transparent} .smart-preview-table table{width:max-content;min-width:100%;border-collapse:collapse} .smart-preview-table th,.smart-preview-table td{padding:9px 11px;border:1px solid var(--line,#285058);font-size:12px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis} .smart-preview-table th{position:sticky;top:0;background:#132126;color:#75e7df;z-index:1} .smart-result{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .smart-result div{padding:13px 7px;border:1px solid var(--line,#285058);border-radius:12px;text-align:center} .smart-result b{display:block;font-size:22px}.smart-result span{font-size:11px;color:var(--muted,#aab9bc)} .smart-errors{text-align:left;margin-top:14px;padding:12px;border:1px solid #9b4b4b;border-radius:12px;max-height:200px;overflow:auto} .smart-errors li{margin-bottom:5px;font-size:12px} @media(max-width:760px){ .smart-import-popup{width:calc(100% - 18px)!important} .smart-import-popup .swal2-html-container{margin:.7em!important} .smart-import-grid,.smart-import-options,.smart-import-sections{grid-template-columns:1fr} .smart-import-sections section{padding:12px} .smart-map-row{grid-template-columns:1fr} .smart-map-list{max-height:310px} .smart-preview-table{max-height:280px} .smart-result{grid-template-columns:repeat(2,1fr)} .smart-result div:last-child{grid-column:1/-1} }