@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); /* ============================================================ Design System Business IT — basado en SERVIENTREGA Tema OSCURO por defecto (clase .light en = tema claro). Los nombres de variable se conservan para no romper el resto del CSS; solo cambia su valor según el tema. ============================================================ */ :root{ --bit-green:#A3C243;--bit-green-h:#8FAD38;--bit-green-a:#A3C243; --bit-green-glow:rgba(163,194,67,.15); --bit-gray:#E8E8E8;--bit-gray-2:#9A9A9A;--bit-heading:#F4F4F4; --bit-white:#1F1F1F; --bit-bg:#151515;--bit-card:#1F1F1F;--bit-card2:#252525; --bit-border:#2E2E2E;--bit-muted:#252525; --bit-red:#EF4444;--bit-red-bg:rgba(239,68,68,.12);--bit-warn:#F59E0B;--bit-info:#60A5FA; --bit-shadow-card:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -1px rgba(0,0,0,.4); --bit-shadow-lg:0 20px 25px -5px rgba(0,0,0,.6),0 10px 10px -5px rgba(0,0,0,.5); --font-bit:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* El mockup de Outlook se mantiene "papel" en ambos temas (Outlook real es claro) */ --ms-accent:#0F6CBD;--ms-accent-dark:#0a4f8a;--ms-pane:#ffffff;--ms-rail:#faf9f8; --ms-border:#e5e3e1;--ms-border-strong:#d2d0ce;--ms-text:#242424;--ms-text-2:#616161;--ms-text-3:#8a8886; --ms-hover:#f3f2f1;--ms-sel:#eaf3fc;--font-ms:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --susp:#DC2626;--susp-bg:#fff4f4;--radius:8px; --on-green:#1A1A1A; } html.light{ --bit-green:#A3C243;--bit-green-h:#8FAD38;--bit-green-a:#7A962F; --bit-green-glow:rgba(163,194,67,.18); --bit-gray:#606161;--bit-gray-2:#8B8B8C;--bit-heading:#4a4b4b; --bit-white:#FFFFFF; --bit-bg:#F1F2F0;--bit-card:#FFFFFF;--bit-card2:#F5F5F5; --bit-border:#E5E5E5;--bit-muted:#F5F5F5; --bit-red:#DC2626;--bit-red-bg:#FCEBEB;--bit-warn:#F59E0B;--bit-info:#3B82F6; --bit-shadow-card:0 1px 2px rgba(96,97,97,.05); --bit-shadow-lg:0 10px 25px rgba(96,97,97,.08); --on-green:#FFFFFF; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{font-family:var(--font-bit);background:var(--bit-bg);color:var(--bit-gray);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .3s ease,color .3s ease;} .topline{height:4px;background:var(--bit-green);width:100%;box-shadow:0 0 12px var(--bit-green-glow);} .appbar{display:flex;align-items:center;gap:16px;padding:12px 22px;background:var(--bit-card);border-bottom:2px solid var(--bit-green);position:sticky;top:0;z-index:50;box-shadow:var(--bit-shadow-card);} .brand{display:flex;align-items:center;gap:12px;} .hlogo{height:34px;object-fit:contain;display:block;} .logo-text{font-family:var(--font-bit);font-size:21px;line-height:1;letter-spacing:-.3px;} .logo-text .b{color:var(--bit-green);font-weight:700;}.logo-text .rest{color:var(--bit-gray);font-weight:700;} .brand .div{width:1px;height:26px;background:var(--bit-border);} .brand .tagline{font-size:11px;color:var(--bit-gray-2);font-weight:600;letter-spacing:.3px;line-height:1.3;} .brand .tagline b{color:var(--bit-gray);display:block;font-size:12.5px;} .appbar .spacer{flex:1;} .user-chip{display:none;align-items:center;gap:8px;font-size:12.5px;color:var(--bit-gray);background:var(--bit-muted);border:1px solid var(--bit-border);border-radius:99px;padding:6px 13px 6px 8px;} .user-chip .uav{width:24px;height:24px;border-radius:50%;background:var(--bit-green);color:var(--on-green);display:grid;place-items:center;font-weight:700;font-size:11px;} .scoremeta{display:none;font-size:12.5px;color:var(--bit-gray);} .scoremeta b{color:var(--bit-green-a);font-size:14px;} .viewtoggle{display:flex;background:var(--bit-muted);border:1px solid var(--bit-border);border-radius:99px;padding:3px;gap:2px;} .viewtoggle button{border:0;background:transparent;color:var(--bit-gray-2);font-family:var(--font-bit);font-size:12px;font-weight:600;padding:6px 13px;border-radius:99px;cursor:pointer;transition:.15s;} .viewtoggle button.on{background:var(--bit-green);color:var(--on-green);} .viewtoggle button:not(.on):hover{color:var(--bit-gray);} .progress-wrap{display:flex;align-items:center;gap:10px;min-width:190px;} .progress-track{height:6px;flex:1;background:var(--bit-border);border-radius:99px;overflow:hidden;} .progress-fill{height:100%;width:0;background:var(--bit-green);border-radius:99px;transition:width .4s ease;} .progress-lbl{font-size:12px;color:var(--bit-gray-2);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;} .stage{max-width:1180px;margin:24px auto;padding:0 18px 64px;} .hidden{display:none !important;} .intro{background:var(--bit-card);border:1px solid var(--bit-border);border-radius:16px;padding:0;max-width:880px;margin:28px auto;overflow:hidden;box-shadow:var(--bit-shadow-lg);} .intro-hero{padding:38px 44px 26px;border-bottom:1px solid var(--bit-border);} .intro .eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--bit-green-a);font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;} .intro .eyebrow::before{content:"";width:22px;height:3px;background:var(--bit-green);border-radius:2px;} .intro h1{font-size:29px;line-height:1.2;margin:12px 0 14px;font-weight:700;color:var(--bit-heading);} .intro p{color:var(--bit-gray);font-size:14.5px;line-height:1.65;margin:0;max-width:680px;} .intro .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:24px 44px 4px;} .intro .card{background:var(--bit-muted);border:1px solid var(--bit-border);border-radius:10px;padding:15px 16px;} .intro .card .ic{font-size:18px;} .intro .card h3{margin:8px 0 4px;font-size:13.5px;font-weight:700;color:var(--bit-gray);} .intro .card p{font-size:12px;line-height:1.5;} .intro-form{padding:24px 44px 38px;} .intro-form h2{font-size:15px;font-weight:700;color:var(--bit-gray);margin:0 0 4px;} .intro-form .fhint{font-size:12.5px;color:var(--bit-gray-2);margin:0 0 18px;} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;} .field{display:flex;flex-direction:column;gap:6px;} .field.full{grid-column:1 / -1;} .field label{font-size:12.5px;font-weight:600;color:var(--bit-gray);} .field label .req{color:var(--bit-red);} .field input{font-family:var(--font-bit);font-size:14px;color:var(--bit-gray);background:var(--bit-card2);border:1px solid var(--bit-border);border-radius:8px;padding:11px 13px;transition:.15s;} .field input:focus{outline:none;border-color:var(--bit-green);box-shadow:0 0 0 3px rgba(163,194,67,.18);} .field input.err{border-color:var(--bit-red);box-shadow:0 0 0 3px rgba(220,38,38,.12);} .field .errmsg{font-size:11.5px;color:var(--bit-red);min-height:14px;} .field .sub{font-size:11px;color:var(--bit-gray-2);line-height:1.45;} .btn-primary{background:var(--bit-green);color:var(--on-green);border:0;font-family:var(--font-bit);font-weight:700;font-size:15px;padding:13px 30px;border-radius:9px;cursor:pointer;transition:.15s;} .btn-primary:hover{background:var(--bit-green-h);}.btn-primary:active{background:var(--bit-green-a);} .intro-form .start-row{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap;} .intro-form small{display:block;color:var(--bit-gray-2);font-size:11px;margin-top:18px;line-height:1.55;} .guide{margin:20px 44px 0;padding:18px 20px;background:var(--bit-muted);border:1px solid var(--bit-border);border-left:4px solid var(--bit-green);border-radius:10px;} .guide-ttl{font-size:14px;font-weight:700;color:var(--bit-gray);margin-bottom:12px;display:flex;align-items:center;gap:8px;} .guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;} .guide-list li{font-size:12.5px;line-height:1.5;color:var(--bit-gray-2);position:relative;padding-left:22px;} .guide-list li::before{content:"✓";position:absolute;left:0;top:0;width:16px;height:16px;color:var(--bit-green-a);font-weight:800;} .guide-list li b{color:var(--bit-gray);} .outlook{font-family:var(--font-ms);background:var(--ms-pane);color:var(--ms-text);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(96,97,97,.18);border:1px solid var(--ms-border-strong);} .ol-title{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:var(--ms-accent);color:#fff;font-size:13px;} .ol-title .dots{display:flex;gap:7px;margin-right:4px;} .ol-title .dots i{width:11px;height:11px;border-radius:50%;display:block;opacity:.9;} .ol-title .dots i:nth-child(1){background:#ff5f57;}.ol-title .dots i:nth-child(2){background:#febc2e;}.ol-title .dots i:nth-child(3){background:#28c840;} .ol-title .search{flex:1;max-width:420px;margin:0 auto;background:rgba(255,255,255,.18);border-radius:5px;height:26px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#eaf2fb;} .ol-title .app{font-weight:600;} .ol-title .acct{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;} .ol-title .avatar{width:24px;height:24px;border-radius:50%;background:#0a4f8a;display:grid;place-items:center;font-weight:700;font-size:11px;} .ol-tabs{display:none;gap:2px;padding:0 12px;background:#fff;border-bottom:1px solid var(--ms-border);} .ol-tabs span{font-size:12.5px;color:var(--ms-text-2);padding:9px 13px;border-bottom:2px solid transparent;} .ol-tabs span.active{color:var(--ms-accent);border-bottom-color:var(--ms-accent);font-weight:600;} .ol-ribbon{display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--ms-rail);border-bottom:1px solid var(--ms-border);flex-wrap:wrap;} .rb{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ms-text);font-family:var(--font-ms);font-size:12.5px;padding:7px 11px;border-radius:5px;cursor:default;} .rb:hover{background:var(--ms-hover);}.rb .gl{font-size:14px;} .rb-div{width:1px;height:22px;background:var(--ms-border-strong);margin:0 4px;} .ol-body{display:grid;grid-template-columns:54px 290px 1fr;min-height:520px;} .ol-rail{background:var(--ms-rail);border-right:1px solid var(--ms-border);padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:6px;} .ol-rail .ri{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-size:17px;color:var(--ms-text-2);} .ol-rail .ri.on{background:#fff;color:var(--ms-accent);box-shadow:inset 2px 0 0 var(--ms-accent);} .ol-list{background:var(--ms-pane);border-right:1px solid var(--ms-border);overflow:hidden;} .list-head{padding:11px 14px;border-bottom:1px solid var(--ms-border);display:flex;align-items:center;justify-content:space-between;} .list-head .ttl{font-weight:700;font-size:15px;}.list-head .flt{font-size:12px;color:var(--ms-accent);} .mitem{padding:11px 14px;border-bottom:1px solid var(--ms-border);position:relative;} .mitem.active{background:var(--ms-sel);box-shadow:inset 3px 0 0 var(--ms-accent);} .mitem.decoy{opacity:.6;} .mitem .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;} .mitem .snd{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mitem.unread .snd{font-weight:700;} .mitem .dt{font-size:11px;color:var(--ms-text-3);white-space:nowrap;} .mitem .sub{font-size:12.5px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mitem.unread .sub{font-weight:600;color:var(--ms-accent-dark);} .mitem .prev{font-size:11.5px;color:var(--ms-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mitem .unreadbar{position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--ms-accent);border-radius:2px;display:none;} .mitem.unread .unreadbar{display:block;} .ol-read{overflow:auto;display:flex;flex-direction:column;} .rd-subject{font-size:20px;font-weight:600;padding:18px 26px 6px;} .rd-cat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ms-accent);background:var(--ms-sel);border-radius:99px;padding:3px 10px;margin:0 26px 10px;} .rd-headcard{margin:0 26px 8px;border:1px solid var(--ms-border);border-radius:8px;padding:13px 15px;} .rd-fromline{display:flex;align-items:center;gap:12px;} .rd-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;} .rd-fr-main{flex:1;min-width:0;} .rd-fr-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .rd-fr-name{font-weight:700;font-size:14px;} .rd-fr-addr{font-size:12.5px;color:var(--ms-text-2);} .rd-fr-to{font-size:12px;color:var(--ms-text-2);margin-top:2px;} .rd-date{font-size:12px;color:var(--ms-text-2);white-space:nowrap;} .rd-detogg{font-size:12px;color:var(--ms-accent);cursor:pointer;border:0;background:none;padding:4px 0;font-family:var(--font-ms);} .rd-detail{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ms-border);font-size:12.5px;} .rd-detail.open{display:block;} .rd-detail dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;} .rd-detail dt{color:var(--ms-text-3);}.rd-detail dd{margin:0;word-break:break-all;} .rd-actions{display:flex;gap:8px;padding:4px 26px 12px;flex-wrap:wrap;} .rd-actions button{border:1px solid var(--ms-border-strong);background:#fff;border-radius:6px;padding:6px 14px;font-family:var(--font-ms);font-size:12.5px;color:var(--ms-text);display:flex;align-items:center;gap:6px;cursor:default;} .rd-attach{margin:0 26px 12px;display:flex;gap:10px;flex-wrap:wrap;} .attach{display:flex;align-items:center;gap:9px;border:1px solid var(--ms-border-strong);border-radius:6px;padding:8px 12px;font-size:12.5px;background:#fff;min-width:200px;} .attach .ai{width:30px;height:30px;border-radius:4px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;} .attach .an{font-weight:600;}.attach .asz{font-size:11px;color:var(--ms-text-3);} .rd-banner{margin:0 26px 14px;border-radius:6px;padding:9px 14px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start;} .rd-banner.ext{background:#fff8e6;border:1px solid #f3d77a;color:#6b5400;} .rd-banner .gl{font-size:15px;} .rd-body{padding:6px 30px 28px;font-size:14px;line-height:1.65;color:#1f1f1f;} .rd-body p{margin:0 0 13px;} .rd-body a{color:#1155cc;text-decoration:underline;cursor:pointer;position:relative;} .rd-body .ebtn{display:inline-block;background:var(--ms-accent);color:#fff !important;text-decoration:none;padding:11px 26px;border-radius:5px;font-weight:600;font-size:13.5px;margin:6px 0;cursor:pointer;} .rd-body .ebtn.alt{background:#0b8043;}.rd-body .ebtn.docu{background:#d4af37;color:#2a2200 !important;} .rd-body .sig{color:var(--ms-text-2);font-size:13px;border-top:1px solid var(--ms-border);margin-top:18px;padding-top:12px;} .rd-body small{color:var(--ms-text-3);font-size:11px;} /* Los señuelos (.susp) permanecen invisibles como resaltado hasta que el usuario evalúa el correo. Solo tras responder se añade .show-flags al contenedor y aparecen los recuadros punteados rojos con su explicación. */ .susp{background:none!important;outline:none!important;border:0!important;padding:0!important;color:inherit;cursor:text;position:static;} .susp::after{display:none!important;content:none!important;} .show-flags .susp{background:var(--susp-bg)!important;outline:2px dashed var(--susp)!important;border-radius:3px;padding:0 2px!important;position:relative;cursor:help;} .show-flags .susp::after{content:"⚠ " attr(data-tip)!important;position:absolute;left:0;top:100%;margin-top:4px;z-index:5;background:#3a0d0d;color:#ffe1e1;font-size:11px;line-height:1.4;font-weight:500;padding:6px 9px;border-radius:6px;width:max-content;max-width:300px;white-space:normal;box-shadow:0 6px 18px rgba(0,0,0,.3);display:none;} .show-flags .susp:hover::after{display:block!important;} .ol-status{display:flex;align-items:center;gap:9px;padding:8px 16px;background:#f3f2f1;border-top:1px solid var(--ms-border);font-size:12px;color:var(--ms-text-3);min-height:36px;} .ol-status .si{font-size:13px;flex:none;} .ol-status .st{font-family:'Consolas','SF Mono',ui-monospace,monospace;word-break:break-all;} .ol-status.active{background:#fff4e5;color:#7a3e00;border-top-color:#f3d77a;font-weight:600;} .decision{background:var(--bit-card);border:1px solid var(--bit-border);border-radius:14px;margin-top:16px;padding:18px 22px;box-shadow:var(--bit-shadow-card);} .decision .q{font-size:16px;font-weight:700;color:var(--bit-gray);} .decision .hint{font-size:12px;color:var(--bit-gray-2);margin-top:5px;display:flex;align-items:center;gap:6px;} .choices{display:flex;gap:12px;margin-top:14px;} .choice{flex:1;border:1.5px solid var(--bit-border);background:var(--bit-card2);color:var(--bit-gray);font-family:var(--font-bit);font-weight:700;font-size:15px;padding:15px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.15s;} .choice .ic{font-size:18px;} .choice.phish:hover{border-color:var(--bit-red);background:var(--bit-red-bg);color:var(--bit-red);} .choice.legit:hover{border-color:var(--bit-green);background:rgba(163,194,67,.14);color:var(--bit-green-a);} .choice:disabled{cursor:default;opacity:.5;} .feedback{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--bit-border);display:none;background:var(--bit-card);} .feedback.show{display:block;animation:fbin .35s ease;} @keyframes fbin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .fb-head{padding:16px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--bit-border);} .fb-head.correct{background:rgba(163,194,67,.12);}.fb-head.wrong{background:var(--bit-red-bg);} .fb-badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;color:#fff;} .fb-head.correct .fb-badge{background:var(--bit-green);color:var(--on-green);}.fb-head.wrong .fb-badge{background:var(--bit-red);} .fb-head .ht{font-weight:700;font-size:17px;color:var(--bit-gray);} .fb-head .hs{font-size:13px;color:var(--bit-gray-2);} .fb-head .verdict-tag{margin-left:auto;font-size:12px;font-weight:700;padding:5px 13px;border-radius:99px;} .verdict-tag.phish{background:var(--bit-red-bg);color:var(--bit-red);} .verdict-tag.legit{background:rgba(163,194,67,.18);color:var(--bit-green-a);} .fb-body{padding:18px 22px;} .fb-why{font-size:14px;line-height:1.65;color:var(--bit-gray);margin:0 0 16px;} .fb-flags-ttl{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--bit-green-a);margin-bottom:10px;} .fb-flags{list-style:none;margin:0;padding:0;display:grid;gap:8px;} .fb-flags li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;background:var(--bit-muted);border:1px solid var(--bit-border);border-radius:9px;padding:11px 13px;} .fb-flags li .fi{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700;} .fb-flags li.bad .fi{background:var(--bit-red-bg);color:var(--bit-red);} .fb-flags li.ok .fi{background:rgba(163,194,67,.2);color:var(--bit-green-a);} .fb-flags li b{color:var(--bit-gray);}.fb-flags li span{color:var(--bit-gray-2);} .fb-foot{padding:14px 22px;background:var(--bit-muted);border-top:1px solid var(--bit-border);display:flex;align-items:center;justify-content:space-between;gap:12px;} .fb-foot .tip{font-size:12px;color:var(--bit-gray-2);max-width:62%;line-height:1.5;} .results{background:var(--bit-card);border:1px solid var(--bit-border);border-radius:16px;padding:36px 40px;max-width:860px;margin:24px auto;box-shadow:var(--bit-shadow-lg);} .res-id{font-size:12.5px;color:var(--bit-gray-2);margin-bottom:18px;} .res-id b{color:var(--bit-gray);} .score-ring{display:flex;align-items:center;gap:26px;flex-wrap:wrap;} .ring{width:130px;height:130px;flex:none;position:relative;} .ring svg{transform:rotate(-90deg);} .ring .pct{position:absolute;inset:0;display:grid;place-items:center;text-align:center;} .ring .pct b{font-size:30px;font-weight:800;line-height:1;color:var(--bit-gray);} .ring .pct small{font-size:11px;color:var(--bit-gray-2);} .results h2{font-size:23px;margin:0 0 6px;color:var(--bit-heading);} .verdict-line{font-size:14.5px;color:var(--bit-gray);line-height:1.6;} .res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0;} .res-stat{background:var(--bit-muted);border:1px solid var(--bit-border);border-radius:10px;padding:15px;text-align:center;} .res-stat b{display:block;font-size:24px;font-weight:800;}.res-stat span{font-size:12px;color:var(--bit-gray-2);} .res-review h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--bit-green-a);margin:0 0 12px;} .rr-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bit-border);font-size:13.5px;} .rr-item .rr-ic{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;} .rr-item.c .rr-ic{background:rgba(163,194,67,.2);color:var(--bit-green-a);} .rr-item.w .rr-ic{background:var(--bit-red-bg);color:var(--bit-red);} .rr-item .rr-sub{flex:1;min-width:0;} .rr-item .rr-sub b{display:block;color:var(--bit-gray);}.rr-item .rr-sub span{font-size:12px;color:var(--bit-gray-2);} .rr-item .rr-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;} .send-status{font-size:13px;font-weight:600;padding:11px 15px;border-radius:9px;margin-top:22px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .send-status.sending{background:var(--bit-muted);color:var(--bit-gray-2);border:1px solid var(--bit-border);} .send-status.ok{background:rgba(163,194,67,.15);color:var(--bit-green-a);border:1px solid rgba(163,194,67,.45);} .send-status.err{background:var(--bit-red-bg);color:var(--bit-red);border:1px solid #f3c0c0;} .send-status .btn-ghost{padding:5px 12px;font-size:12px;margin-left:auto;} .results .actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;} .btn-ghost{background:transparent;border:1.5px solid var(--bit-border);color:var(--bit-gray);font-family:var(--font-bit);font-weight:600;font-size:14px;padding:12px 22px;border-radius:9px;cursor:pointer;transition:.15s;} .btn-ghost:hover{border-color:var(--bit-green);color:var(--bit-green-a);} .outlook.classic .ol-tabs{display:flex;} .outlook.classic .ol-title{background:#f3f2f1;color:#242424;} .outlook.classic .ol-title .search{background:#fff;border:1px solid var(--ms-border-strong);color:var(--ms-text-2);} .outlook.classic .ol-title .avatar{background:var(--ms-accent);} .outlook.classic .ol-ribbon{background:#fff;} @media(max-width:900px){ .ol-body{grid-template-columns:1fr;}.ol-rail,.ol-list{display:none;} .intro .cards,.res-stats,.fgrid{grid-template-columns:1fr;} .choices{flex-direction:column;}.appbar{flex-wrap:wrap;gap:10px;} .progress-wrap{order:5;width:100%;} .intro-hero,.intro .cards,.intro-form{padding-left:24px;padding-right:24px;} .guide{margin-left:24px;margin-right:24px;}.guide-list{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}} /* ====== Clases añadidas para CSP estricta (sin 'unsafe-inline') ====== Sustituyen a los atributos style="" que existían en el HTML/JS. */ .progress-wrap{display:none;} /* oculto por defecto; JS lo muestra con style.display='flex' */ .ring-anim{transition:stroke-dashoffset 1s ease;} .res-headtxt{flex:1;min-width:240px;} .c-red{color:var(--bit-red);} .c-green{color:var(--bit-green-a);} .c-gray{color:var(--bit-gray);} /* ============================================================ Botón de tema (dark / light) — estilo SERVIENTREGA ============================================================ */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;flex:none; background:var(--bit-card2);border:1px solid var(--bit-border); color:var(--bit-gray);border-radius:var(--radius); cursor:pointer;font-family:var(--font-bit);font-size:18px;line-height:1; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease; } .theme-toggle:hover{border-color:var(--bit-green);color:var(--bit-green);box-shadow:0 0 0 3px var(--bit-green-glow);} .theme-toggle:focus-visible{outline:none;border-color:var(--bit-green);box-shadow:0 0 0 3px var(--bit-green-glow);} .theme-toggle .ti-sun{display:none;} .theme-toggle .ti-moon{display:inline;} html.light .theme-toggle .ti-sun{display:inline;} html.light .theme-toggle .ti-moon{display:none;} /* Glow firma SERVIENTREGA en el botón primario */ .btn-primary{box-shadow:0 4px 14px var(--bit-green-glow);} .btn-primary:hover{box-shadow:0 6px 20px var(--bit-green-glow);} .intro,.results{box-shadow:var(--bit-shadow-lg);} .decision,.appbar{box-shadow:var(--bit-shadow-card);} /* Evitar parpadeo antes de aplicar el tema */ html{background:#151515;} html.light{background:#F1F2F0;}