/* Lanzador cálido de OptiManage (Acceso) — identidad propia, excepción deliberada al tema homologado (REFERENCIA B §6).
   Separado del index.html por REFERENCIA B §6.1 (estructura / look / comportamiento). */
/* ============================================================
   OptiManage · Lanzador (portada cálida). Identidad propia del portal:
   crema + Marcellus + wordmark giratorio. Las apps por dentro NO cambian
   (siguen homologadas con /assets/optimanage.css). Icono DIBUJADO de cada app
   (del paquete "Porta ICONOS de ACCESO"), con el acento en el color de su
   módulo (MODULOS.md): hover tiñe el cuadro, clic hace zoom.
   ============================================================ */
:root{--navy:#121B22;--navy2:#204254;--cream:#FBFAF8;--ink:#121B22;--mut:#7A7470;--line:#E2DDD7;--accent:#E34525;}
@keyframes of2Pulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes of2Form{0%{stroke-dashoffset:480;opacity:0}7%{opacity:1}50%{stroke-dashoffset:0;opacity:1}86%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes of2Born{0%,46%{transform:scale(.2);opacity:0}53%{transform:scale(1.16);opacity:1}60%{transform:scale(1)}86%{opacity:1}100%{opacity:0}}@keyframes ofWave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes ofShine{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes ofFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ofFloatHover{0%,100%{transform:translateY(0) scale(1.16)}50%{transform:translateY(-5px) scale(1.16)}}
@keyframes ofEnter{0%{transform:scale(1.16)}55%{transform:scale(1.55)}100%{transform:scale(2.05);opacity:.25}}
@keyframes ofAurora{0%{transform:translate(-8%,-6%) rotate(0) scale(1)}50%{transform:translate(6%,4%) rotate(12deg) scale(1.15)}100%{transform:translate(-8%,-6%) rotate(0) scale(1)}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:'Plus Jakarta Sans',Helvetica,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;display:inline-block;vertical-align:middle}
/* Header cálido */
.hwrap{position:relative;width:100%;overflow:hidden;background:linear-gradient(135deg,#121B22 0%,#1B3242 55%,#204254 100%);color:#fff}
.hgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}
.haura{position:absolute;left:5%;top:-40%;width:60%;height:180%;border-radius:50%;background:radial-gradient(rgba(70,120,150,.4),rgba(70,120,150,0) 62%);filter:blur(10px);animation:ofAurora 14s ease-in-out infinite}
.hin{position:relative;max-width:1040px;margin:0 auto;padding:30px 24px 52px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lock{display:flex;align-items:center;gap:14px}
.emb{position:relative;width:104px;height:52px;flex:0 0 auto}
.logo{font-weight:800;font-size:27px;line-height:1;letter-spacing:-.01em;display:flex;align-items:baseline}
.logo .o{margin-right:4px;color:#fff}
.wmbox{position:relative;display:inline-block;min-width:150px}
.wmghost{visibility:hidden}
.wmrot{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .35s ease,transform .35s ease;color:#7cf0e2}
.studio{font-weight:600;font-size:10.5px;color:rgba(255,255,255,.9);letter-spacing:.42em;margin-top:5px}
.hright{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.hsel{background:rgba(255,255,255,.1);border:1px solid rgba(124,240,226,.35);color:#fff;border-radius:22px;padding:8px 14px;font-size:12.5px;font-family:inherit;font-weight:600;cursor:pointer}
.hsel option{color:#121B22}
.rolebadge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:600}
.rolebadge .d{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.2)}
.userchip{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600}
.userchip .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:11.5px;font-weight:700}
.lgt{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:22px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.lgt:hover{background:rgba(255,255,255,.2)}
.wave{position:absolute;left:0;right:0;bottom:-2px;height:42px;overflow:hidden}
.wave svg{position:absolute;bottom:0;width:200%;height:100%;animation:ofWave 18s linear infinite}
.wave svg.s2{animation-duration:11s}
/* Cuerpo */
.wrap{max-width:1040px;margin:0 auto;padding:22px 24px 64px}
.toolbar{display:flex;align-items:baseline;gap:12px;margin:22px 0 16px}
.tblabel{font-family:'Marcellus',Georgia,serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.tbcount{font-size:12px;font-weight:500;color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.appcard{--app:#3B82F6;position:relative;display:flex;flex-direction:column;gap:14px;padding:10px 10px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(42,45,51,.05),0 10px 28px -18px rgba(18,27,34,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.appcard:hover{transform:translateY(-5px) scale(1.01);border-color:transparent;box-shadow:0 2px 4px rgba(42,45,51,.05),0 24px 44px -18px rgba(150,200,230,.45)}
.thumb{position:relative;display:flex;align-items:center;justify-content:center;height:128px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#F7F3EE,#ECE6DF);border:1px solid var(--line);transition:background .28s ease,border-color .28s ease}
.thumb .g{position:absolute;inset:0;background-image:linear-gradient(rgba(32,66,84,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(32,66,84,.14) 1px,transparent 1px),linear-gradient(rgba(32,66,84,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(32,66,84,.07) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:center}
.thumb .v{position:absolute;inset:0;background:radial-gradient(circle,rgba(247,243,238,0) 30%,rgba(247,243,238,.8) 100%)}
.thumb .tl{position:absolute;left:9px;top:9px;width:12px;height:12px;border-left:1.5px solid color-mix(in srgb,var(--app) 75%,transparent);border-top:1.5px solid color-mix(in srgb,var(--app) 75%,transparent)}
.thumb .br{position:absolute;right:9px;bottom:9px;width:12px;height:12px;border-right:1.5px solid color-mix(in srgb,var(--app) 75%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--app) 75%,transparent)}
.thumb .shine{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));animation:ofShine 6s ease-in-out infinite}
/* icono dibujado: acento = color del módulo (currentColor) */
.thumb .ic{position:relative;overflow:visible;color:var(--app);animation:ofFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(18,27,34,.12))}
.appcard:hover .thumb{background:color-mix(in srgb,var(--app) 18%,#FBFAF8);border-color:color-mix(in srgb,var(--app) 50%,transparent)}
.appcard:hover .thumb .ic{animation:ofFloatHover 3.6s ease-in-out infinite}
.appcard.entrando .thumb{background:color-mix(in srgb,var(--app) 32%,#FBFAF8);border-color:color-mix(in srgb,var(--app) 66%,transparent)}
.appcard.entrando .thumb .ic{animation:ofEnter .5s cubic-bezier(.3,.7,.3,1) forwards}
.meta{display:flex;flex-direction:column;gap:5px;padding:0 8px}
.ey{font-size:11.5px;font-weight:600;color:var(--accent);letter-spacing:.2px;min-height:14px}
.nm{font-family:'Marcellus',Georgia,serif;font-size:17px;font-weight:400;color:var(--ink);letter-spacing:.1px;line-height:1.25}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(227,69,37,.5),transparent);margin:34px 0 18px;border:0}
.sec{font-family:'Marcellus',Georgia,serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.sec span{font-family:'Plus Jakarta Sans';font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mut)}
.conn{display:flex;flex-wrap:wrap;gap:8px}
.who{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:6px 14px 6px 8px;font-size:12.5px}
.who .dot{width:8px;height:8px;border-radius:50%;background:#1F9D5B;box-shadow:0 0 0 3px #E4F6EC}
.who .ap{color:var(--mut);font-size:11.5px}
.bajo{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:4px}
.cardwrap{max-width:340px}
.empty{padding:26px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:16px;background:#fff;font-size:13px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.foot .ses{color:var(--mut);font-size:12px;font-weight:500}
.logout{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:22px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 20px -10px rgba(227,69,37,.8);border:none;font-family:inherit;cursor:pointer}
.loading{padding:48px;text-align:center;color:var(--mut)}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,8px);background:var(--navy);color:#fff;padding:11px 16px;border-radius:12px;font-size:13px;box-shadow:0 24px 60px -24px rgba(7,20,41,.55);z-index:999;display:flex;gap:10px;align-items:center;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;border-left:4px solid var(--accent)}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.impbar{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;background:#FDF3DB;color:#8F6309;border-bottom:1px solid #F3DFA8}
.impbar.bad{background:#FBE8E6;color:#A8332A;border-bottom-color:#F2C4BF}
.impbar .impbtn{margin-left:auto;border:1px solid currentColor;background:#fff;color:inherit;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.msgov{position:fixed;inset:0;z-index:4000;background:rgba(7,20,41,.55);display:none;align-items:center;justify-content:center;padding:16px} .msgov.on{display:flex}
.msgcard{background:#fff;border-radius:16px;width:100%;max-width:360px;max-height:90vh;overflow:auto;box-shadow:0 24px 60px -24px rgba(7,20,41,.55);color:#0F1F33}
.msgcard .mh{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--navy);color:#fff;font-weight:600;font-size:14px}
.msgcard .mb{padding:16px} .msglbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#5F7892;font-weight:700;margin:0 0 8px}
.msgfrom{font-size:11.5px;color:#5F7892;margin-bottom:10px}
.msgtxt{font-size:15px;font-weight:600;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.msgyn{display:flex;gap:8px;margin-bottom:12px} .msgyn .btn{flex:1}
.msgsep{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#5F7892;text-align:center;margin:0 0 8px}
.msgti{display:flex;flex-direction:column;gap:8px} .msgti input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit}
.msgcdbanner{display:flex;align-items:center;gap:10px;background:#FBE8E6;border:1px solid #e7bdbd;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.msgcdbanner .t{font-size:11.5px;color:#8a2b2b;font-weight:600} .msgcdbanner .n{margin-left:auto;font-size:22px;font-weight:800;color:#A8332A;font-variant-numeric:tabular-nums}
.msgcdbanner.done{background:#EEF2F6;border-color:var(--line)} .msgcdbanner.done .t,.msgcdbanner.done .n{color:var(--navy)}
.msgdone{font-size:12px;color:#157A45;font-weight:700;margin-top:10px;text-align:center}
@media(max-width:640px){.bajo{grid-template-columns:1fr}.hin{padding:22px 18px 46px}.wrap{padding:18px 18px 60px}.hright{width:100%}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition:none!important}}
/* Modal (subida de CSF / datos fiscales) — identidad cálida del portal */
.ov{position:fixed;inset:0;background:rgba(18,27,34,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1000;overflow:auto}
.ov.show{display:flex}
.modal{background:var(--cream);width:100%;max-width:560px;border-radius:22px;border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(7,20,41,.6);overflow:hidden;animation:ofFloat .01s}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:linear-gradient(135deg,#1B3242,#204254);color:#fff}
.mhead .mt{font-family:'Marcellus',Georgia,serif;font-size:18px;display:flex;align-items:center;gap:10px}
.mx{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;font-family:inherit;display:grid;place-items:center}
.mx:hover{background:rgba(255,255,255,.22)}
.mbody{padding:22px}
.fld{margin:0 0 14px}
.fld label{display:block;font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.3px;text-transform:uppercase;margin:0 0 5px}
.fld input,.fld select,.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;font-size:14px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--navy2);box-shadow:0 0 0 3px rgba(32,66,84,.12)}
.fld textarea{resize:vertical;min-height:52px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filebox{border:1.5px dashed var(--line);border-radius:12px;padding:16px;background:#fff}
.hint{font-size:12px;color:var(--mut);margin:8px 0 0}
.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--navy2)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(227,69,37,.8)}
.btn.primary:hover{border-color:transparent;filter:brightness(1.05)}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.mnote{font-size:12.5px;color:#2c4a3a;background:#fff;border:1px solid var(--line);border-left:3px solid #1F9D5B;border-radius:10px;padding:10px 12px;margin:0 0 14px}
.mnote.warn{border-left-color:var(--accent);color:#7a3522}
.sechdr{font-family:'Marcellus',Georgia,serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:16px 0 10px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}