/* ============================================================ COSTITO — Hoja de estilos Sistema de temas: Menta (claro, default) / Bosque Nocturno (oscuro) El tema se cambia con el atributo data-theme en . ============================================================ */ /* ---------- TEMA CLARO (Menta) — default ---------- */ :root{ --verde:#1F8A5B; --verde-2:#23996A; --crema:#E9F5EE; --crema-2:#DAEDE2; --papel:#F5FBF7; --naranja:#F2603F; --naranja-soft:#FF9F86; --tinta:#19271F; --tinta-soft:#5E7268; --linea:#CBE5D6; --ok:#1F8A5B; --on-verde:#F3FBF6; --dot:rgba(31,138,91,.06); --shadow:0 2px 0 rgba(31,138,91,.04), 0 8px 24px -12px rgba(20,80,55,.3); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter','Segoe UI',system-ui,sans-serif; } /* ---------- TEMA OSCURO (Bosque Nocturno) ---------- */ [data-theme="dark"]{ --verde:#2F6B45; --verde-2:#3C8255; --crema:#12211A; --crema-2:#25392E; --papel:#1B2C23; --naranja:#D2691E; --naranja-soft:#F0B45E; --tinta:#E6EFE8; --tinta-soft:#9DB3A4; --linea:#2E4639; --ok:#5BBF86; --on-verde:#EAF6EF; --dot:rgba(255,255,255,.05); --shadow:0 2px 0 rgba(0,0,0,.15), 0 10px 28px -12px rgba(0,0,0,.6); } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--crema);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased; font-optical-sizing:auto;text-rendering:optimizeLegibility} html{transition:background .3s ease} body{ min-height:100vh; background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0); background-size:22px 22px; } .wrap{max-width:880px;margin:0 auto;padding:0 16px 120px} a{color:inherit} /* ---------- HEADER ---------- */ header{position:sticky;top:0;z-index:30;background:var(--verde);color:var(--on-verde); border-bottom:3px solid var(--naranja)} .head-in{max-width:880px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:.2px} .logo .mark{width:38px;height:38px;border-radius:10px;background:var(--on-verde);color:var(--verde); display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 0 0 2px var(--naranja)} .logo .mark svg{width:22px;height:22px} .logo small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:1.5px; text-transform:uppercase;color:var(--naranja-soft);margin-top:-2px} .head-spacer{flex:1} /* Selector de moneda */ .cur{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:3px;gap:2px} .cur button{font-family:var(--sans);border:0;background:transparent;color:var(--on-verde);font-weight:700; font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.15s} .cur button.on{background:var(--on-verde);color:var(--verde)} /* Toggle de tema */ .theme-toggle{width:38px;height:38px;border-radius:999px;border:0;background:rgba(255,255,255,.12); color:var(--on-verde);cursor:pointer;display:grid;place-items:center;transition:.2s;flex:0 0 auto} .theme-toggle:hover{background:rgba(255,255,255,.22)} .theme-toggle svg{width:19px;height:19px} .theme-toggle .moon{display:none} [data-theme="dark"] .theme-toggle .sun{display:none} [data-theme="dark"] .theme-toggle .moon{display:block} /* ---------- NAV ---------- */ nav{position:sticky;top:67px;z-index:20;background:var(--crema);padding:12px 0 6px;margin-bottom:6px} /* Degradés en los bordes que indican que hay más tabs hacia los costados. Se prenden/apagan con .can-left / .can-right desde JS según el scroll. */ nav::before,nav::after{content:"";position:absolute;top:12px;bottom:6px;width:42px;pointer-events:none;z-index:2; opacity:0;transition:opacity .2s} nav::before{left:0;background:linear-gradient(to right,var(--crema),transparent)} nav::after{right:0;background:linear-gradient(to left,var(--crema),transparent)} nav.can-left::before{opacity:1} nav.can-right::after{opacity:1} .tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;scroll-behavior:smooth} .tabs::-webkit-scrollbar{display:none} .tab{flex:0 0 auto;display:flex;align-items:center;gap:7px;background:var(--papel);border:1.5px solid var(--linea); color:var(--tinta-soft);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:11px; cursor:pointer;transition:.15s;white-space:nowrap;box-shadow:var(--shadow)} .tab svg{width:17px;height:17px} .tab:hover{border-color:var(--naranja-soft);color:var(--tinta)} .tab.on{background:var(--verde);border-color:var(--verde);color:var(--on-verde)} .tab .lock{width:13px;height:13px;opacity:.7} /* ---------- PANELS ---------- */ .panel{display:none;animation:rise .35s ease} .panel.on{display:block} @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .section-title{font-family:var(--serif);font-size:25px;font-weight:700;margin:6px 2px 4px;line-height:1.15} .section-sub{font-size:14px;color:var(--tinta-soft);margin:0 2px 16px;line-height:1.5} .card{background:var(--papel);border:1.5px solid var(--linea);border-radius:16px;padding:20px;box-shadow:var(--shadow)} .card + .card{margin-top:16px} .card-h{display:flex;align-items:center;gap:10px;margin-bottom:16px} .card-h .ico{width:34px;height:34px;border-radius:9px;background:var(--crema-2);color:var(--verde); display:grid;place-items:center;flex:0 0 auto} .card-h .ico svg{width:19px;height:19px} .card-h h3{font-family:var(--serif);font-size:18px;font-weight:700} .card-h p{font-size:12.5px;color:var(--tinta-soft);margin-top:1px} /* ---------- FIELDS ---------- */ .field{margin-bottom:15px} .field:last-child{margin-bottom:0} .field label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--tinta);margin-bottom:7px} .help{position:relative;display:inline-flex} .help .q{width:16px;height:16px;border-radius:50%;background:var(--crema-2);color:var(--tinta-soft); font-size:11px;font-weight:700;display:grid;place-items:center;cursor:help;border:1px solid var(--linea)} .help .tip{position:absolute;bottom:135%;left:50%;transform:translateX(-50%) translateY(4px); background:var(--tinta);color:var(--crema);font-size:12px;font-weight:500;line-height:1.45; padding:9px 11px;border-radius:9px;width:215px;opacity:0;pointer-events:none;transition:.18s;z-index:5; box-shadow:0 10px 24px -8px rgba(0,0,0,.4)} .help .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--tinta)} .help:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)} .in{position:relative;display:flex;align-items:center;background:var(--crema);border:1.5px solid var(--linea); border-radius:12px;transition:.15s;overflow:hidden} .in:focus-within{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(242,96,63,.13)} .in .pre{padding:0 0 0 14px;font-weight:700;color:var(--tinta-soft);font-size:15px} .in input,.in select{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:17px; font-weight:600;color:var(--tinta);padding:13px 14px;width:100%;outline:none;-moz-appearance:textfield} .in input::-webkit-outer-spin-button,.in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .in .suf{padding:0 14px 0 0;font-weight:700;color:var(--tinta-soft);font-size:15px} .in select{cursor:pointer;-webkit-appearance:none;appearance:none} .in.sel::after{content:"▾";position:absolute;right:14px;color:var(--tinta-soft);pointer-events:none} /* Opciones del dropdown nativo: fondo y texto sólidos para que tengan contraste en ambos temas (en oscuro el navegador las pintaba sin contraste). */ select option{background:var(--papel);color:var(--tinta)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .seg{display:flex;gap:7px;flex-wrap:wrap} .seg button{flex:1;min-width:64px;background:var(--crema);border:1.5px solid var(--linea);color:var(--tinta-soft); font-family:var(--sans);font-weight:600;font-size:13.5px;padding:11px 8px;border-radius:11px;cursor:pointer;transition:.15s} .seg button.on{background:var(--verde);border-color:var(--verde);color:var(--on-verde)} .ri-nota{font-size:12.5px;color:var(--tinta-soft);background:var(--crema);border:1.5px solid var(--linea); border-radius:10px;padding:9px 12px;margin-top:-4px} .gan-equiv{font-size:12.5px;color:var(--verde);font-weight:600;margin:7px 0 0} .iibb-nota{font-size:12px;color:var(--tinta-soft);margin:7px 0 0} .iibb-nota a{color:var(--verde);font-weight:600;text-decoration:none} .iibb-nota a:hover{text-decoration:underline} .check{display:flex;align-items:flex-start;gap:11px;background:var(--crema);border:1.5px solid var(--linea); border-radius:12px;padding:13px;cursor:pointer} .check input{margin-top:2px;width:18px;height:18px;accent-color:var(--naranja);flex:0 0 auto} .check .t{font-size:13.5px;line-height:1.4} .check .t b{font-weight:700} .check .t span{display:block;color:var(--tinta-soft);font-size:12px;margin-top:2px} /* ---------- PRICE TAG (resultado) ---------- */ .tag-wrap{margin-top:18px} .tag{position:relative;background:var(--verde);color:var(--on-verde);border-radius:18px;padding:24px 22px; border:1.5px solid var(--linea);box-shadow:var(--shadow)} .tag .lbl{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--naranja-soft); display:flex;align-items:center;gap:7px} .tag .lbl svg{width:15px;height:15px} .tag .big{font-family:var(--serif);font-weight:700;line-height:1;margin:8px 0 4px; font-size:clamp(40px,12vw,62px);letter-spacing:-1px} .tag .big .c{font-size:.5em;font-weight:600;opacity:.8;vertical-align:super} .tag .note{font-size:13px;color:rgba(245,240,232,.85)} .tag .note b{color:#fff} .tag .copy{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.15);border:0;color:var(--on-verde); width:34px;height:34px;border-radius:9px;cursor:pointer;display:grid;place-items:center;transition:.15s} .tag .copy:hover{background:rgba(255,255,255,.28)} .tag .copy svg{width:16px;height:16px} .break{margin-top:16px;border-top:1.5px dashed var(--linea);padding-top:14px} .break .li{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px;border-bottom:1px dotted var(--crema-2)} .break .li:last-child{border-bottom:0} .break .li .k{color:var(--tinta-soft);display:flex;align-items:center;gap:6px} .break .li .v{font-weight:700;font-variant-numeric:tabular-nums} .break .li.minus .v{color:var(--naranja)} .break .li.plus .v{color:var(--ok)} .break .li.tot{border-top:1.5px solid var(--linea);margin-top:4px;padding-top:11px} .break .li.tot .k{color:var(--tinta);font-weight:700} .break .li.tot .v{font-size:17px} .btn-add{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px; background:var(--naranja);color:#fff;border:0;font-family:var(--sans);font-weight:700;font-size:15px; padding:14px;border-radius:13px;cursor:pointer;transition:.15s;box-shadow:0 8px 18px -8px rgba(242,96,63,.7)} .btn-add:hover{filter:brightness(.94)} .btn-add svg{width:18px;height:18px} .btn-medios{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px; background:transparent;color:var(--verde);border:1.5px solid var(--verde);font-family:var(--sans); font-weight:600;font-size:14px;padding:11px;border-radius:13px;cursor:pointer;transition:.15s} .btn-medios:hover{background:var(--verde-bg,rgba(31,138,91,.08))} .btn-medios svg{width:16px;height:16px;flex-shrink:0} .btn-medios .arr{margin-left:auto} .btn-medios:disabled{opacity:.4;cursor:default} /* ---------- TABLE (medios) ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-soft); font-weight:700;padding:0 12px 10px;border-bottom:2px solid var(--linea)} .tbl th:last-child,.tbl td:last-child{text-align:right} .tbl td{padding:13px 12px;border-bottom:1px dotted var(--crema-2);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl .m{display:flex;align-items:center;gap:10px;font-weight:600} .tbl .m .dot{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:#fff} .tbl .m .dot svg{width:16px;height:16px} .tbl .pct{color:var(--tinta-soft);font-weight:600;font-variant-numeric:tabular-nums} .tbl .price{font-family:var(--serif);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums} .tbl .reca{font-size:12px;color:var(--naranja);font-weight:700} .tbl tr.base td{background:var(--crema-2);border-radius:10px} .tbl tr.base .price{color:var(--verde)} /* ---------- PRODUCTS ---------- */ .plist{display:grid;gap:12px} .prod{display:flex;align-items:center;gap:14px;background:var(--papel);border:1.5px solid var(--linea); border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)} .prod .pic{width:46px;height:46px;border-radius:11px;background:var(--crema-2);display:grid;place-items:center; flex:0 0 auto;font-size:22px} .prod .info{flex:1;min-width:0} .prod .info h4{font-family:var(--serif);font-size:16px;font-weight:700} .prod .info p{font-size:12.5px;color:var(--tinta-soft);margin-top:1px} .prod .pr{text-align:right;flex:0 0 auto;display:flex;align-items:center;gap:10px} .prod .pr .n{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--verde)} .prod .pr .s{font-size:11.5px;color:var(--tinta-soft)} .prod .del{background:transparent;border:0;color:var(--tinta-soft);cursor:pointer;padding:4px;border-radius:7px; display:grid;place-items:center;transition:.15s} .prod .del:hover{color:var(--naranja);background:var(--crema-2)} .prod .del svg{width:16px;height:16px} .empty{text-align:center;padding:30px 16px;color:var(--tinta-soft);font-size:14px;line-height:1.6} .empty svg{width:40px;height:40px;opacity:.35;margin-bottom:10px} .export{display:flex;gap:10px;margin-top:16px} .export button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--crema); border:1.5px solid var(--linea);color:var(--tinta);font-family:var(--sans);font-weight:600;font-size:14px; padding:13px;border-radius:12px;cursor:pointer;transition:.15s} .export button:hover{border-color:var(--naranja);color:var(--naranja)} .export button svg{width:17px;height:17px} /* Botón exportar PDF en medios de pago */ .btn-export{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--crema);border:1.5px solid var(--linea);color:var(--tinta); font-family:var(--sans);font-weight:600;font-size:14px;padding:12px;border-radius:12px; cursor:pointer;transition:.15s} .btn-export:hover{border-color:var(--verde);color:var(--verde)} .btn-export svg{width:16px;height:16px} /* Checkboxes multi-select de procesadores */ .proc-checks{display:flex;flex-direction:column;gap:7px;margin-top:10px} .proc-check{display:flex;align-items:center;gap:11px;padding:10px 13px; background:var(--crema);border:1.5px solid var(--linea);border-radius:12px; cursor:pointer;font-size:14px;font-weight:500;color:var(--tinta);transition:.15s;user-select:none} .proc-check input[type=checkbox]{accent-color:var(--verde);width:16px;height:16px; cursor:pointer;flex-shrink:0;margin:0} .proc-check.on{background:var(--crema-2);border-color:var(--verde)} .proc-check:hover{border-color:var(--verde-2)} /* Encabezado de grupo en tabla medios */ .proc-header td{background:var(--crema-2);font-size:11.5px;font-weight:700; color:var(--tinta-soft);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px} /* Modal guardar producto */ .overlay{position:fixed;inset:0;background:rgba(10,20,14,.55);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;z-index:200; opacity:0;pointer-events:none;transition:opacity .2s} .overlay.on{opacity:1;pointer-events:all} .modal-box{background:var(--papel);border-radius:18px;box-shadow:var(--shadow); padding:26px 24px;width:min(380px,calc(100vw - 36px));transition:transform .2s} .modal-title{font-family:var(--serif);font-size:20px;color:var(--tinta);margin-bottom:6px} .modal-hint{font-size:13px;color:var(--tinta-soft);margin-bottom:2px} .modal-box .in input{width:100%;font-size:16px} .modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .modal-btns button{font-family:var(--sans);font-size:14px;font-weight:600; padding:10px 20px;border-radius:11px;cursor:pointer;border:none;transition:.15s} .modal-btns button:first-child{background:var(--crema);color:var(--tinta-soft)} .modal-btns button:first-child:hover{background:var(--crema-2)} .btn-prim-modal{background:var(--verde);color:var(--on-verde);display:flex;align-items:center;gap:7px} .btn-prim-modal svg{width:16px;height:16px} .btn-prim-modal:hover{filter:brightness(1.1)} /* ---------- PREMIUM (footer + gate) ---------- */ .premium{margin-top:26px;background:var(--verde);color:var(--on-verde);border-radius:18px;padding:24px; position:relative;overflow:hidden;box-shadow:var(--shadow)} .premium::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%; background:rgba(242,96,63,.22)} .premium .tagline{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--naranja-soft)} .premium h3{font-family:var(--serif);font-size:23px;margin:7px 0 8px;line-height:1.2;position:relative} .premium p{font-size:14px;color:rgba(245,240,232,.85);line-height:1.5;max-width:420px;position:relative} /* Botón WhatsApp reutilizable (se usa en .premium y en los gates) */ .wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--naranja);color:#fff; border:0;font-family:var(--sans);font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;cursor:pointer; position:relative;transition:.15s;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);text-decoration:none} .wa:hover{filter:brightness(.94)} .wa svg{width:19px;height:19px;flex:0 0 auto} .premium .wa{margin-top:16px} /* Gate de feature premium (pantalla bloqueada dentro de un tab) */ .gate{text-align:center;padding:36px 22px} .gate .lock-ico{width:62px;height:62px;border-radius:50%;background:var(--crema-2);color:var(--verde); display:grid;place-items:center;margin:0 auto 16px} .gate .lock-ico svg{width:28px;height:28px} .gate h3{font-family:var(--serif);font-size:21px;margin-bottom:8px} .gate p{font-size:14px;color:var(--tinta-soft);line-height:1.55;max-width:380px;margin:0 auto 18px} .gate .feat{display:flex;flex-direction:column;gap:9px;max-width:340px;margin:0 auto 20px;text-align:left} .gate .feat .f{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tinta)} .gate .feat .f svg{width:18px;height:18px;color:var(--verde);flex:0 0 auto} footer.foot{text-align:center;padding:26px 0 0;color:var(--tinta-soft);font-size:12.5px;line-height:1.6} footer.foot b{color:var(--verde);font-family:var(--serif)} /* ---------- PREMIUM: filas de ítems de importación ---------- */ .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px} .imp-sec-head{display:grid;grid-template-columns:1fr 60px 92px 28px 34px;gap:8px;padding:0 2px 5px; font-size:11.5px;font-weight:700;color:var(--tinta-soft);text-transform:uppercase;letter-spacing:.04em} .canal-nota{font-size:12.5px;color:var(--tinta-soft);line-height:1.5;margin-top:8px;padding:8px 10px; background:var(--crema-2);border-radius:9px} .badge-desvin{font-size:11px;font-weight:500;color:var(--naranja);background:rgba(242,96,63,.10); padding:2px 7px;border-radius:20px;vertical-align:middle} .imp-desc{font-size:13px;color:var(--tinta-soft);line-height:1.55;margin-bottom:14px;padding:10px 13px; background:var(--crema-2);border-radius:10px;border-left:3px solid var(--verde)} .imp-desc b{color:var(--tinta);font-weight:700} .imp-sub{display:flex;justify-content:space-between;align-items:center; margin-top:10px;padding:9px 12px;background:var(--crema-2);border-radius:10px; font-size:14px;font-weight:700;color:var(--tinta)} .imp-row{display:grid;grid-template-columns:1fr 60px 92px 28px 34px;gap:8px;align-items:center;margin-bottom:9px} .in-bare{background:var(--crema);border:1.5px solid var(--linea);border-radius:10px;padding:10px 11px; font-family:var(--sans);font-size:14px;font-weight:600;color:var(--tinta);outline:none;width:100%; -moz-appearance:textfield;transition:.15s} .in-bare:focus{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(242,96,63,.13)} .in-bare::-webkit-outer-spin-button,.in-bare::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} select.in-bare{cursor:pointer;-webkit-appearance:none;appearance:none} .imp-del{background:transparent;border:1.5px solid var(--linea);border-radius:10px;color:var(--tinta-soft); height:40px;cursor:pointer;font-size:20px;line-height:1;transition:.15s} .imp-del:hover{border-color:var(--naranja);color:var(--naranja)} @media(max-width:480px){ .row3{grid-template-columns:1fr} .imp-sec-head{display:none} .imp-row{grid-template-columns:1fr 56px 80px 24px 32px;gap:6px} .in-bare{padding:9px 8px;font-size:13px} } /* ---------- BADGE COMISIONES DESACTUALIZADAS ---------- */ .com-stale{display:inline-flex;align-items:center;gap:4px; background:rgba(242,96,63,.13);color:var(--naranja); font-size:11px;font-weight:700;border-radius:6px; padding:3px 8px;margin-left:6px;cursor:default} /* ---------- BARRA DE COTIZACIÓN DEL DÓLAR ---------- */ .dolar-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--papel); border:1.5px solid var(--linea);border-radius:12px;padding:9px 13px;margin-bottom:14px; font-size:13px;color:var(--tinta-soft);box-shadow:var(--shadow)} .dolar-bar svg{width:16px;height:16px;color:var(--verde);flex:0 0 auto} .dolar-bar .db-label{font-weight:700;color:var(--tinta)} .dolar-bar select{background:var(--crema);border:1.5px solid var(--linea);border-radius:8px;color:var(--tinta); font-family:var(--sans);font-weight:700;font-size:13px;padding:5px 26px 5px 9px;cursor:pointer; -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E7268' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center} .dolar-bar .db-val{font-family:var(--serif);font-weight:700;color:var(--verde);font-size:16px} .dolar-bar .db-fecha{font-size:11.5px;opacity:.85;margin-left:auto} @media(max-width:480px){.dolar-bar .db-fecha{margin-left:0;width:100%}} /* ---------- SELLO OPERON (marca de autor, sutil) ---------- */ .app-foot{display:flex;justify-content:center;padding:34px 0 8px} .operon-badge{display:inline-flex;align-items:center;gap:7px;color:var(--tinta-soft);text-decoration:none; opacity:.55;transition:opacity .2s} .operon-badge:hover{opacity:1} .operon-badge svg{width:17px;height:17px} .operon-badge .ob-by{font-size:10.5px;letter-spacing:.4px;text-transform:lowercase} .operon-badge .ob-name{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.2px} /* ---------- DEMO Premium (pre-launch, hasta que exista el backend) ---------- */ .gate-demo{margin-top:14px;background:transparent;border:0;color:var(--tinta-soft);font-family:var(--sans); font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:.15s} .gate-demo:hover{color:var(--verde)} .demo-ribbon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--crema-2);border:1.5px dashed var(--linea); border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:12.5px;color:var(--tinta-soft);line-height:1.4} .demo-ribbon b{color:var(--verde);font-weight:700} .demo-ribbon .demo-lock{margin-left:auto;background:transparent;border:1.5px solid var(--linea);border-radius:9px; color:var(--tinta);font-family:var(--sans);font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer;transition:.15s} .demo-ribbon .demo-lock:hover{border-color:var(--naranja);color:var(--naranja)} /* ---------- TOAST ---------- */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--verde); color:var(--on-verde);font-weight:600;font-size:14px;padding:13px 20px;border-radius:12px;z-index:60;opacity:0; transition:.28s;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);display:flex;align-items:center;gap:9px;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast svg{width:18px;height:18px} @media(max-width:560px){ .row2{grid-template-columns:1fr} .tbl .reca{display:none} nav{top:63px} } /* ---------- CONVERSOR MARKUP ↔ MARGEN ---------- */ .conv-row{display:flex;align-items:center;gap:10px;margin:6px 0 2px; background:var(--crema);border-radius:10px;padding:8px 10px} .conv-in{flex:1;min-width:0;margin:0} .conv-mult{font-size:13px;color:var(--verde);font-weight:600;white-space:nowrap} /* ---------- CONTADOR DE PRODUCTOS ---------- */ .prod-count{font-size:12.5px;color:var(--tinta-soft);margin:0 2px 6px;min-height:1em} .cat-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .cat-pill{background:var(--crema);border:1.5px solid var(--linea);color:var(--tinta-soft); font-family:var(--sans);font-weight:600;font-size:13px;padding:7px 14px;border-radius:20px; cursor:pointer;transition:.15s;white-space:nowrap} .cat-pill.on{background:var(--verde);border-color:var(--verde);color:var(--on-verde)} .cat-tag{display:inline-block;background:var(--verde-bg,rgba(31,138,91,.1));color:var(--verde); font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:3px; letter-spacing:.02em;text-transform:uppercase} /* ---------- TEASER CUENTA CLOUD ---------- */ .cloud-teaser{display:flex;align-items:flex-start;gap:14px;background:var(--papel); border:1.5px solid var(--linea);border-radius:14px;padding:16px 18px;margin-top:18px} .cloud-teaser svg{width:24px;height:24px;color:var(--verde);flex:0 0 auto;margin-top:2px} .cloud-teaser b{font-size:14px;color:var(--tinta)} .cloud-teaser p{font-size:13px;color:var(--tinta-soft);margin-top:4px;line-height:1.5} /* ---------- COMPARADOR AVIÓN VS BARCO ---------- */ .cf-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0} .cf-col{background:var(--crema);border-radius:12px;padding:14px;text-align:center} .cf-ico{font-size:22px;margin-bottom:4px} .cf-via{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tinta-soft);margin-bottom:6px} .cf-unit{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--verde)} .cf-sub{font-size:11.5px;color:var(--tinta-soft);margin-top:2px} .cf-diff{margin-top:10px;padding:10px 14px;border-radius:10px;font-size:13.5px;text-align:center; background:var(--crema-2);color:var(--tinta)} .cf-diff.cf-more{background:#FFF0EB;color:#B03000} .cf-diff.cf-less{background:#EAF6EF;color:var(--verde)} /* ---------- COMPARATIVA DE CANALES ---------- */ .comp-card{margin-top:16px} .comp-summary{cursor:pointer;list-style:none;user-select:none} .comp-summary::-webkit-details-marker,.comp-summary::marker{display:none} .comp-chev{width:18px;height:18px;color:var(--tinta-soft);margin-left:auto;flex:0 0 auto; transition:transform .2s} details[open] .comp-chev{transform:rotate(180deg)} .comp-tbl{margin-top:10px} .comp-tbl th:last-child,.comp-tbl td.comp-price{text-align:right} .comp-tbl td.comp-price{font-weight:700;color:var(--verde);white-space:nowrap} .comp-tbl td.comp-loss{color:var(--naranja)!important} .comp-group td{background:var(--crema);color:var(--tinta-soft);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.6px;padding:6px 10px!important;border:none} /* ============================================================ SPLASH DE ENTRADA ============================================================ */ .splash{position:fixed;inset:0;z-index:1000;background:var(--crema); background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);background-size:22px 22px; display:flex;align-items:center;justify-content:center; transition:opacity .5s ease, transform .5s ease} .splash.gone{opacity:0;transform:scale(1.04);pointer-events:none} .splash-logo{display:flex;flex-direction:column;align-items:center;gap:15px} .splash-mark{width:82px;height:82px;border-radius:22px;background:var(--verde);color:var(--on-verde); display:grid;place-items:center;box-shadow:inset 0 0 0 2.5px var(--naranja), 0 18px 40px -14px rgba(20,80,55,.5); animation:splashPop .6s cubic-bezier(.18,.9,.25,1.1) both} .splash-mark svg{width:44px;height:44px} .splash-word{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--tinta);text-align:center; line-height:1;animation:splashRise .55s ease .22s both} .splash-word small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--tinta-soft);margin-top:7px} .splash-accent{width:54px;height:4px;border-radius:4px;background:var(--naranja); transform-origin:center;animation:splashSweep .5s cubic-bezier(.2,.8,.2,1) .45s both} @keyframes splashPop{from{opacity:0;transform:scale(.55) translateY(8px)}to{opacity:1;transform:none}} @keyframes splashRise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}} @keyframes splashSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){ .splash-mark,.splash-word,.splash-accent{animation:splashFade .3s ease both} @keyframes splashFade{from{opacity:0}to{opacity:1}} } /* ============================================================ CUENTA (botón header + menú) ============================================================ */ .acct-wrap{position:relative;flex:0 0 auto} .acct-btn{width:38px;height:38px;border-radius:999px;border:0;cursor:pointer;flex:0 0 auto; background:rgba(255,255,255,.12);color:var(--on-verde);display:grid;place-items:center;transition:.2s} .acct-btn:hover{background:rgba(255,255,255,.22)} .acct-btn .acct-ico{width:20px;height:20px} .acct-avatar{display:none;width:30px;height:30px;border-radius:999px;background:var(--naranja);color:#fff; font-family:var(--sans);font-weight:700;font-size:12px;align-items:center;justify-content:center;letter-spacing:.3px} .acct-btn.logged .acct-ico{display:none} .acct-btn.logged .acct-avatar{display:flex} .acct-menu{position:absolute;top:46px;right:0;width:230px;background:var(--papel);border:1.5px solid var(--linea); border-radius:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.4);padding:8px;z-index:40; opacity:0;transform:translateY(-6px);pointer-events:none;transition:.16s} .acct-menu.on{opacity:1;transform:none;pointer-events:all} .acct-menu-head{display:flex;align-items:center;gap:11px;padding:9px 9px 11px} .acct-avatar-lg{width:40px;height:40px;border-radius:999px;background:var(--naranja);color:#fff; display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 auto} .acct-menu-id{min-width:0} .acct-menu-id b{display:block;font-size:14px;color:var(--tinta);font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-menu-id span{display:block;font-size:12px;color:var(--tinta-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-logout{width:100%;display:flex;align-items:center;gap:9px;border:0;background:var(--crema); color:var(--tinta);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:11px 12px; border-radius:10px;cursor:pointer;transition:.15s} .acct-logout:hover{background:var(--crema-2);color:var(--naranja)} .acct-logout svg{width:17px;height:17px} /* ============================================================ MODAL DE LOGIN ============================================================ */ .auth-box{position:relative;text-align:center;width:min(390px,calc(100vw - 36px))} .auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:9px; background:var(--crema);color:var(--tinta-soft);cursor:pointer;display:grid;place-items:center;transition:.15s} .auth-close:hover{background:var(--crema-2);color:var(--tinta)} .auth-close svg{width:17px;height:17px} .auth-head{display:flex;flex-direction:column;align-items:center;margin-bottom:18px} .auth-mark{width:52px;height:52px;border-radius:15px;background:var(--verde);color:var(--on-verde); display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--naranja);margin-bottom:12px} .auth-mark svg{width:28px;height:28px} .auth-box .modal-title{font-size:21px} .auth-label{display:block;text-align:left;font-size:12.5px;font-weight:600;color:var(--tinta);margin-bottom:6px} .auth-box .in input{width:100%;font-size:16px} .auth-error{min-height:16px;text-align:left;font-size:12.5px;font-weight:600;color:var(--naranja);margin:4px 2px 0} .auth-submit{width:100%;margin-top:12px;border:0;border-radius:12px;background:var(--verde);color:var(--on-verde); font-family:var(--sans);font-weight:700;font-size:15px;padding:13px;cursor:pointer;transition:.15s} .auth-submit:hover{filter:brightness(1.08)} .auth-submit:disabled{opacity:.6;cursor:default} .auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--tinta-soft);font-size:12px} .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--linea)} .auth-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--linea); background:var(--papel);color:var(--tinta);font-family:var(--sans);font-weight:600;font-size:14.5px; padding:12px;border-radius:12px;cursor:pointer;transition:.15s} .auth-google:hover{background:var(--crema);border-color:var(--tinta-soft)} .auth-google svg{width:19px;height:19px} .auth-foot{font-size:13px;color:var(--tinta-soft);margin-top:16px} .auth-foot a{color:var(--verde);font-weight:700;cursor:pointer} .auth-foot a:hover{text-decoration:underline} /* ---------- BOTÓN PASATE A PREMIUM (menú de cuenta) ---------- */ .acct-premium{width:100%;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;text-align:left; background:var(--crema-2);color:var(--tinta);font-family:var(--sans); padding:10px 12px;border-radius:10px;margin-bottom:6px;transition:.15s} .acct-premium:hover{background:var(--naranja);color:#fff} .acct-premium svg{width:18px;height:18px;color:var(--naranja);flex:0 0 auto} .acct-premium:hover svg{color:#fff} .acct-premium b{display:block;font-size:13.5px;font-weight:700} .acct-premium small{display:block;font-size:11px;opacity:.85;margin-top:1px}