/* ============================================================ 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;scrollbar-gutter:stable} 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; white-space:normal;line-height:1.3;text-align:center;word-break:keep-all;overflow-wrap:break-word} .seg button[data-cond="mono"]{font-size:11px} .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;flex-direction:column;background:var(--papel);border:1.5px solid var(--linea); border-radius:14px;box-shadow:var(--shadow);overflow:hidden} .prod-card-top{display:flex;align-items:center;gap:14px;padding:14px 16px} .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 .del{background:transparent;border:0;color:var(--tinta-soft);cursor:pointer;padding:4px;border-radius:7px; display:grid;place-items:center;transition:.15s;flex-shrink:0} .prod .del:hover{color:var(--naranja);background:var(--crema-2)} .prod .del svg{width:16px;height:16px} .prod-edit-meta{background:transparent;border:0;color:var(--tinta-soft);cursor:pointer;padding:4px;border-radius:7px; display:grid;place-items:center;transition:.15s;flex-shrink:0} .prod-edit-meta:hover{color:var(--verde);background:var(--crema-2)} .prod-edit-meta svg{width:16px;height:16px} .prod-precios{border-top:1px solid var(--linea);padding:8px 16px;display:flex;flex-direction:column;gap:5px} .prod-precio-row{display:flex;align-items:center;gap:8px} .prod-precio-info{flex:1;min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .prod-precio-canal{font-size:13px;font-weight:600;color:var(--tinta)} .prod-precio-margen{font-size:11px;color:var(--tinta-soft);background:var(--crema-2);padding:2px 7px;border-radius:20px;white-space:nowrap} .prod-precio-val{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--verde);white-space:nowrap;flex-shrink:0} .prod-precio-del{background:transparent;border:0;color:var(--tinta-soft);cursor:pointer;padding:2px 6px; border-radius:6px;font-size:17px;line-height:1;transition:.15s;flex-shrink:0} .prod-precio-del:hover{color:var(--naranja);background:var(--crema-2)} .prod-no-precios{font-size:12.5px;color:var(--tinta-soft);margin:2px 0;font-style:italic} .prod-add-precio{width:100%;border:none;background:none;color:var(--verde);font-family:var(--sans); font-size:12.5px;font-weight:600;cursor:pointer;padding:9px 16px;text-align:left; border-top:1px solid var(--linea);display:flex;align-items:center;gap:6px;transition:.15s} .prod-add-precio:hover{background:var(--crema-2)} .prod-add-precio svg{width:15px;height:15px;flex-shrink:0} .prod-edit-ico{background:none;border:none;cursor:pointer;font-size:11px;color:var(--tinta-soft); padding:1px 4px;border-radius:4px;opacity:.5;transition:.15s;vertical-align:middle} .prod-edit-ico:hover{opacity:1;background:var(--crema-2)} .prod-edit-bar{display:flex;align-items:center;gap:8px;padding:8px 14px; border-top:1px solid var(--linea);background:var(--crema-2);flex-wrap:wrap} .prod-edit-label{font-size:12px;font-weight:600;color:var(--tinta-soft);white-space:nowrap} .prod-edit-in{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--linea); border-radius:7px;padding:3px 8px;font-size:13px;color:var(--tinta-soft)} .prod-edit-input{border:none;outline:none;width:90px;font-size:13px;font-family:var(--sans)} .prod-edit-save{background:var(--verde);color:#fff;border:none;border-radius:7px; padding:5px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s} .prod-edit-save:hover{opacity:.88} .prod-edit-cancel{background:none;border:none;color:var(--tinta-soft);font-size:12.5px;cursor:pointer;padding:4px 6px} .prod-recalcular{width:100%;border:none;background:none;color:var(--naranja);font-family:var(--sans); font-size:12px;font-weight:600;cursor:pointer;padding:7px 16px;text-align:left; border-top:1px solid var(--linea);transition:.15s} .prod-recalcular:hover{background:var(--crema-2)} .prod-recalcular:disabled{opacity:.5;cursor:default} .modal-label{font-size:13px;font-weight:600;color:var(--tinta-soft);display:block} .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;flex-wrap:wrap;gap:10px;margin-top:16px} .export button{flex:1;min-width:calc(50% - 5px);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} #shareWa:hover{border-color:#25D366;color:#25D366} /* 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)} /* Lista de checkboxes de procesadores (nueva UI multi-proc) */ .procesador-checks-list{display:flex;flex-direction:column;gap:5px} .proc-check-row{display:flex;align-items:center;gap:10px;padding:9px 13px; border-radius:10px;border:1.5px solid var(--linea);cursor:pointer; transition:.12s;background:transparent;user-select:none} .proc-check-row:hover{border-color:var(--verde-2);background:var(--crema)} .proc-check-row.on{border-color:var(--verde);background:var(--crema)} .proc-check-row input[type=checkbox]{accent-color:var(--verde);width:15px;height:15px;flex-shrink:0;cursor:pointer} .proc-check-name{font-size:13.5px;font-weight:600;color:var(--tinta);flex:1} /* Header de grupo en la lista de medios */ .canal-proc-group-hdr{font-size:11px;font-weight:700;color:var(--tinta-soft); text-transform:uppercase;letter-spacing:.7px;padding:10px 2px 4px;margin-top:4px} .canal-proc-group-hdr:first-child{padding-top:4px;margin-top:0} /* Nota de precio máximo */ .precio-medios-note{font-size:11.5px;color:var(--on-verde);opacity:.8;margin-top:4px;line-height:1.35} /* 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} /* Lista de medios inline en la calculadora */ .canal-medios-list{display:flex;flex-direction:column;gap:4px;margin-top:12px;margin-bottom:2px} .canal-medio-row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 13px;border-radius:10px;border:1.5px solid var(--linea);cursor:pointer; transition:.12s;background:transparent;user-select:none} .canal-medio-row:hover{border-color:var(--verde-2);background:var(--crema)} .canal-medio-row.on{border-color:var(--verde);background:var(--crema)} .canal-medio-name{font-size:13px;font-weight:600;color:var(--tinta)} .canal-medio-com{font-size:11.5px;color:var(--tinta-soft);margin-top:1px} .canal-medio-price{font-size:14px;font-weight:700;color:var(--tinta);font-family:var(--serif);white-space:nowrap} .canal-medio-row.on .canal-medio-price{color:var(--verde)} /* Multi-select medios: checkbox en cada fila */ .canal-medio-row{position:relative;padding-right:42px} .canal-medio-ck{position:absolute;right:13px;top:50%;transform:translateY(-50%); accent-color:var(--verde);width:16px;height:16px;cursor:pointer;flex-shrink:0} /* Estado "off" (desactivado) */ .canal-medio-row.off{opacity:.45} .canal-medio-row.off .canal-medio-price{color:var(--tinta-soft)} /* Footer de la lista de medios */ .canal-medios-footer{margin-top:8px} .canal-medios-actions{display:flex;gap:8px;margin-top:8px} .btn-medios-add,.btn-medios-pdf{flex:1;display:flex;align-items:center;justify-content:center; gap:6px;padding:9px 12px;border-radius:11px;font-family:var(--sans);font-size:13px; font-weight:600;cursor:pointer;transition:.15s;border:1.5px solid var(--linea)} .btn-medios-add{background:transparent;color:var(--tinta)} .btn-medios-add:hover{border-color:var(--verde-2);background:var(--crema)} .btn-medios-pdf{background:transparent;color:var(--verde);border-color:var(--verde)} .btn-medios-pdf:hover{background:rgba(31,138,91,.08)} .btn-medios-add svg,.btn-medios-pdf svg{width:14px;height:14px;flex-shrink:0} /* Formulario agregar medio propio */ .canal-add-form{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap} .canal-add-form .in-bare{flex:1;min-width:100px} .btn-add-medio-confirm{padding:9px 14px;border-radius:10px;background:var(--verde); color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer; border:none;white-space:nowrap;transition:.12s} .btn-add-medio-confirm:hover{filter:brightness(.92)} /* Fila de medio personalizado: botón eliminar */ .canal-medio-del{position:absolute;right:36px;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;color:var(--tinta-soft);padding:3px; opacity:0;transition:.12s;font-size:16px;line-height:1} .canal-medio-row:hover .canal-medio-del{opacity:1} .canal-medio-del:hover{color:#e55} /* Card de IIBB separado */ .iibb-card{margin-top:0;padding:14px 16px!important} .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} /* Header: achicar gap/padding para que los 4 elementos entren sin apretarse */ .head-in{gap:8px;padding:14px 12px} .cur button{padding:6px 10px} } /* ---------- 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} .pass-wrap{position:relative} .pass-wrap input{padding-right:42px} .pass-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--tinta-soft);line-height:0;border-radius:6px} .pass-eye:hover{color:var(--tinta)} .pass-eye svg{width:18px;height:18px} .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} /* ---------- BOTÓN CANCELAR SUSCRIPCIÓN ---------- */ .acct-cancel{width:100%;display:none;align-items:center;gap:9px;border:0;background:transparent; color:var(--tinta-soft);font-family:var(--sans);font-weight:600;font-size:13px;padding:9px 12px; border-radius:10px;cursor:pointer;transition:.15s;text-align:left;margin-bottom:4px} .acct-cancel:hover{background:rgba(200,50,50,.08);color:#c44} .acct-promo-badge{margin:4px 12px 8px;padding:8px 12px;background:rgba(31,138,91,.1);border-radius:10px;border:1px solid rgba(31,138,91,.2)} .acct-promo-badge b{display:block;font-size:12px;font-weight:700;color:var(--verde);font-family:var(--sans)} .acct-promo-badge span{display:block;font-size:11px;color:var(--tinta-soft);font-family:var(--sans);margin-top:1px} /* ---------- IMPORTADOR CSV ---------- */ .imp-box{width:min(460px,calc(100vw - 32px));text-align:left} .imp-steps{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--tinta)} .imp-steps b{color:var(--verde)} .imp-cfg{font-size:12.5px;color:var(--tinta-soft);background:var(--crema-2);border-radius:9px;padding:9px 11px;margin-bottom:4px;line-height:1.5} .imp-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px} .imp-actions button{font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 18px;border-radius:11px;cursor:pointer;border:0;transition:.15s} .imp-tpl{background:var(--crema-2);color:var(--tinta)} .imp-tpl:hover{background:var(--linea)} .imp-pick,.imp-go{background:var(--verde);color:var(--on-verde)} .imp-pick:hover,.imp-go:hover{filter:brightness(1.08)} .imp-go:disabled{opacity:.65;cursor:default} .imp-tblwrap{margin:8px 0 2px;max-height:240px;overflow:auto;border:1px solid var(--linea);border-radius:10px} .imp-tbl{width:100%;border-collapse:collapse;font-size:13px} .imp-tbl th{text-align:left;background:var(--crema-2);color:var(--tinta-soft);font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;position:sticky;top:0} .imp-tbl td{padding:8px 10px;border-top:1px solid var(--linea);color:var(--tinta)} .imp-more{font-size:12px;color:var(--tinta-soft);text-align:center;padding:4px} .imp-errs{background:rgba(242,96,63,.1);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:12.5px;color:var(--tinta)} .imp-errs b{color:var(--naranja)} .imp-errs ul{margin:6px 0 0 16px;line-height:1.5} /* ---------- MI NEGOCIO (logo + nombre para el PDF) ---------- */ .negocio-card{display:block;background:var(--papel);border:1.5px solid var(--linea); border-radius:14px;padding:14px;margin-bottom:16px;box-shadow:var(--shadow)} .neg-logo{width:64px;height:64px;flex:0 0 auto;border-radius:12px;border:1.5px dashed var(--linea); background:var(--crema);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:.15s} .neg-logo:hover{border-color:var(--naranja)} .neg-logo img{width:100%;height:100%;object-fit:contain} .neg-ph{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--tinta-soft);font-size:10.5px;font-weight:600} .neg-ph svg{width:20px;height:20px} .neg-fields{flex:1;min-width:0} .neg-fields input{width:100%;background:var(--crema);border:1.5px solid var(--linea);border-radius:10px; font-family:var(--sans);font-weight:600;font-size:14px;color:var(--tinta);padding:9px 11px;outline:none;transition:.15s} .neg-fields input:focus{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(242,96,63,.13)} .neg-actions{display:flex;gap:8px;margin-top:8px} .neg-actions button{font-family:var(--sans);font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:9px; cursor:pointer;border:1.5px solid var(--linea);background:var(--crema);color:var(--tinta);transition:.15s} .neg-actions button:hover{border-color:var(--naranja);color:var(--naranja)} .neg-note{font-size:11px;color:var(--tinta-soft);margin-top:7px} .neg-perfil{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)} .neg-perfil-lbl{display:block;font-size:11.5px;font-weight:600;color:var(--tinta-soft);margin-bottom:6px} .seg-sm button{font-size:11.5px;padding:5px 10px} .neg-canales{display:flex;flex-direction:column;gap:5px;margin-top:2px} .neg-canal-row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--tinta);cursor:pointer;padding:3px 0} .neg-canal-row input{accent-color:var(--verde);width:14px;height:14px;cursor:pointer;flex-shrink:0} /* Summary (collapsed view) */ .neg-summary{display:flex;align-items:center;gap:10px;min-width:0} .neg-sum-ico{flex:0 0 auto;color:var(--verde);line-height:0} .neg-sum-ico svg{width:18px;height:18px;display:block} .neg-sum-txt{flex:1;font-size:13px;font-weight:500;color:var(--tinta);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .neg-edit-btn{flex:0 0 auto;font-family:var(--sans);font-size:12px;font-weight:700;padding:5px 11px;border-radius:9px;cursor:pointer;border:1.5px solid var(--linea);background:var(--crema);color:var(--tinta);transition:.15s;white-space:nowrap} .neg-edit-btn:hover{border-color:var(--naranja);color:var(--naranja)} /* Full form (expanded) */ .neg-form{display:flex;gap:14px;align-items:flex-start;margin-top:0} .neg-form .in.sel select,.neg-form select{font-size:13px} .neg-listo-btn{margin-top:12px;width:100%;font-family:var(--sans);font-size:13px;font-weight:700;padding:9px 14px;border-radius:10px;cursor:pointer;border:none;background:var(--verde);color:#fff;transition:.15s} .neg-listo-btn:hover{opacity:.88} /* ---------- ONBOARDING BANNER ---------- */ .onboarding-banner{background:var(--verde);color:#fff;border-radius:14px;padding:16px 18px;margin-bottom:14px} .ob-titulo{font-size:15px;font-weight:700;margin:0 0 4px} .ob-sub{font-size:13px;opacity:.9;margin:0 0 12px;line-height:1.4} .onboarding-banner .seg button{color:var(--verde);background:#fff;border-color:rgba(255,255,255,.3)} .onboarding-banner .seg button.on{background:#fff;color:var(--verde);box-shadow:0 0 0 2px #fff} /* ---------- RECALC BANNER ---------- */ .recalc-banner{background:var(--verde);color:#fff;padding:10px 14px;border-radius:10px;margin-bottom:10px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;flex-wrap:wrap} .recalc-banner button{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:#fff;border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:var(--sans)} .recalc-banner-close{background:none !important;border:none !important;font-size:14px;opacity:0.7;padding:0 4px !important} /* ---------- PROD HEAD (contador + recalc todos) ---------- */ .prod-head{display:flex;align-items:center;gap:10px;margin-bottom:0} .prod-head .prod-count{margin:0;flex:1} .recalc-todos-btn{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--tinta-soft);background:none;border:none;padding:5px 2px;cursor:pointer;white-space:nowrap;transition:.15s;text-decoration:underline;text-underline-offset:2px} .recalc-todos-btn:hover{color:var(--tinta)} .recalc-todos-btn:disabled{opacity:.4;cursor:default} .btn-quick-add{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--verde);background:none;border:1.5px solid var(--verde);border-radius:9px;padding:5px 11px;cursor:pointer;white-space:nowrap;transition:.15s} .btn-quick-add:hover{background:var(--verde);color:#fff} /* ---------- MODAL: AGREGAR PRODUCTO RÁPIDO ---------- */ .modal-quick{max-width:400px} .modal-field{margin-bottom:13px} .modal-label{display:block;font-size:12px;font-weight:600;color:var(--tinta-soft);margin-bottom:5px} .qa-saved{background:var(--crema);border:1.5px solid var(--verde);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--tinta);margin-bottom:12px;line-height:1.5} .qa-adv-link{font-size:12px;color:var(--tinta-soft);margin:8px 0 14px} .qa-adv-link a{color:var(--verde);font-weight:600;cursor:pointer;text-decoration:underline} .qa-calc-opts{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px} .qa-calc-opt{background:var(--crema-2);border:1px solid var(--linea);border-radius:9px;padding:8px 12px;text-align:left;cursor:pointer;font-size:13px;font-weight:600;color:var(--tinta);font-family:var(--sans);transition:background .12s} .qa-calc-opt:hover{background:var(--verde);color:#fff} .modal-actions{display:flex;gap:8px;margin-top:4px} .btn-modal-cancel{flex:1;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px;border-radius:10px;cursor:pointer;border:1.5px solid var(--linea);background:var(--crema);color:var(--tinta);transition:.15s} .btn-modal-cancel:hover{border-color:var(--tinta-soft)} .btn-modal-ok{flex:2;font-family:var(--sans);font-size:13px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;border:none;background:var(--verde);color:#fff;transition:.15s} .btn-modal-ok:hover{opacity:.88} .btn-modal-ok:disabled{opacity:.5;cursor:default} /* ---------- SERVICIOS: costos fijos + guardar ---------- */ .s-costo-row{display:flex;gap:8px;align-items:center;margin-bottom:8px} .s-costo-row .s-cn{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:1.5px solid var(--linea);border-radius:10px;padding:10px 32px 10px 12px;font-family:var(--sans);font-size:.9rem;color:var(--tinta);cursor:pointer;width:100%} .s-costo-row .s-cn:focus{outline:none;border-color:var(--verde)} .s-costo-row .in{flex:0 0 160px} .s-del{background:none;border:none;padding:4px 8px;cursor:pointer;color:var(--tinta-soft);font-size:16px;line-height:1;border-radius:6px;flex-shrink:0} .s-del:hover{color:#e53} .s-add{background:none;border:none;padding:4px 0;cursor:pointer;color:var(--verde);font-size:.875rem;font-weight:700;margin-top:4px} .s-add:hover{opacity:.75} .s-guardar-wrap{text-align:center;margin-top:4px} .s-guardar{display:inline-block;padding:13px 28px;background:var(--verde);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;font-family:var(--sans)} .s-guardar:hover{opacity:.88} /* ---------- AUTH: olvidé contraseña ---------- */ .auth-forgot{display:block;text-align:right;font-size:.8rem;color:var(--tinta-soft);cursor:pointer;margin-bottom:12px;user-select:none} .auth-forgot:hover{color:var(--tinta)} /* ---------- HINT: ir a Servicios desde la Calculadora ---------- */ .serv-hint{text-align:center;font-size:.83rem;color:var(--tinta-soft);margin:4px 0 16px} .serv-hint a{color:var(--verde);font-weight:600;cursor:pointer} .serv-hint a:hover{opacity:.75} /* ---------- Código / SKU en la lista de productos ---------- */ .sku-tag{font-size:.7rem;font-weight:600;color:var(--tinta-soft);background:var(--crema);border:1px solid var(--linea);border-radius:5px;padding:1px 5px;letter-spacing:.04em;vertical-align:middle;margin-left:4px} /* ---------- Importador: leyenda de columnas ---------- */ .imp-cols{background:var(--crema);border:1px solid var(--linea);border-radius:10px;padding:10px 12px;margin:14px 0 10px;display:flex;flex-direction:column;gap:7px} .imp-col-row{display:flex;gap:10px;align-items:baseline;font-size:.83rem} .imp-col-name{font-family:monospace;font-size:.8rem;font-weight:700;color:var(--verde);background:var(--papel);border:1px solid var(--linea);border-radius:5px;padding:1px 6px;flex-shrink:0} .imp-col-desc{color:var(--tinta);line-height:1.4} .imp-cfg-warn{border-left:3px solid var(--naranja);padding-left:10px} /* ---------- Mis productos: banner de registro ---------- */ .reg-teaser{text-align:center;padding:36px 24px 32px;display:flex;flex-direction:column;align-items:center;gap:12px} .reg-teaser-ico{color:var(--tinta-soft);opacity:.5} .reg-teaser-ico svg{width:44px;height:44px;stroke-width:1.2} .reg-teaser h3{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--tinta);margin:0} .reg-teaser p{font-size:.9rem;color:var(--tinta-soft);margin:0;max-width:280px;line-height:1.5} .reg-teaser-btn{margin-top:6px;background:var(--verde);color:#fff;border:none;border-radius:12px;padding:13px 26px;font-family:var(--sans);font-size:.95rem;font-weight:700;cursor:pointer;transition:.15s} .reg-teaser-btn:hover{opacity:.88} /* ---------- Footer: sugerencias ---------- */ .app-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px} .sugerencias-link{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--tinta-soft);text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid var(--linea);transition:.15s} .sugerencias-link:hover{color:var(--verde);border-color:var(--verde)} .sugerencias-link svg{width:14px;height:14px;flex-shrink:0} .foot-links{display:flex;align-items:center;gap:8px} /* ============================================================ NAV AGRUPADA ============================================================ */ .tabs{align-items:flex-end} .tab-group{display:flex;flex-direction:column;gap:3px} .tab-group-label{font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase; color:var(--tinta-soft);padding:0 4px;white-space:nowrap} .tab-group-inner{display:flex;gap:6px} .tab-divider{width:1.5px;background:var(--linea);align-self:stretch;margin:6px 4px 10px; border-radius:2px;flex:0 0 auto} .tab.tab-accent{border-color:var(--verde);color:var(--verde)} .tab.tab-accent.on{background:var(--verde);border-color:var(--verde);color:var(--on-verde)} /* ============================================================ MIS PRODUCTOS — PESTAÑAS POR TIPO ============================================================ */ .prod-tipo-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .tipo-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 13px; border-radius:20px;cursor:pointer;transition:.15s;white-space:nowrap} .tipo-pill.on{background:var(--verde);border-color:var(--verde);color:var(--on-verde)} .tipo-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px; border-radius:20px;margin-bottom:3px;letter-spacing:.02em;vertical-align:middle;margin-left:5px; background:rgba(31,138,91,.1);color:var(--verde)} /* ============================================================ SECCIÓN PRODUCCIÓN ============================================================ */ /* Encabezado de columnas de ingredientes */ .ping-header{display:grid; grid-template-columns:1.8fr 130px 120px 130px 75px 38px; gap:6px;padding:0 2px 8px;font-size:10.5px;font-weight:700;color:var(--tinta-soft); text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid var(--linea);margin-bottom:8px} /* Filas de ingredientes */ .ping-row{display:grid; grid-template-columns:1.8fr 130px 120px 130px 75px 38px; gap:6px;align-items:center;margin-bottom:7px} .ping-pkt{display:flex;align-items:center;gap:3px;min-width:0} .in-bare-pre{font-size:13px;font-weight:700;color:var(--tinta-soft);flex:0 0 auto;padding-left:2px} .in-bare-suf{font-size:12px;font-weight:600;color:var(--tinta-soft);white-space:nowrap;flex:0 0 auto} .ping-unit{width:60px!important;padding:10px 4px!important;-webkit-appearance:auto!important;appearance:auto!important;cursor:pointer} .ping-costo{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--verde); text-align:right;white-space:nowrap} /* Filas de gastos */ .pgasto-row{display:grid; grid-template-columns:1.4fr 1.4fr 110px auto 38px; gap:6px;align-items:center;margin-bottom:7px} /* Barra resultado sticky — mismo lenguaje visual que .tag */ .prod-result-bar{position:sticky;bottom:0;background:var(--verde);color:var(--on-verde); border-radius:18px 18px 0 0;padding:16px 20px 18px;margin-top:24px; display:flex;align-items:center;gap:14px;z-index:10; box-shadow:0 -8px 28px -8px rgba(20,80,55,.45)} .prb-main{flex:1;min-width:0} .prb-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px; color:var(--naranja-soft);margin-bottom:3px} .prb-val{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--on-verde);line-height:1} .prb-actions{display:flex;gap:8px;flex:0 0 auto} .prb-save{display:flex;align-items:center;gap:7px;background:var(--naranja);color:#fff; border:0;font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 16px; border-radius:12px;cursor:pointer;transition:.15s;white-space:nowrap} .prb-save:hover{filter:brightness(.94)} .prb-save svg{width:16px;height:16px} .prb-calc{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3);color:var(--on-verde); font-family:var(--sans);font-weight:700;font-size:14px;padding:10px 14px; border-radius:12px;cursor:pointer;transition:.15s;white-space:nowrap} .prb-calc:hover{background:rgba(255,255,255,.28);color:var(--on-verde)} /* Cartel de contexto en la calculadora: "poniéndole precio a X" */ .calc-context{display:flex;align-items:center;gap:12px;background:var(--crema-2); border:1.5px solid var(--verde);border-radius:12px;padding:11px 14px;margin-bottom:14px} .calc-context .cc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .cc-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--verde)} .cc-name{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--tinta); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cc-cost{font-size:12px;color:var(--tinta-soft)} .cc-x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;background:var(--papel); color:var(--tinta-soft);cursor:pointer;display:grid;place-items:center;transition:.15s} .cc-x:hover{color:var(--naranja);background:var(--crema)} .cc-x svg{width:16px;height:16px} /* Layout mobile para la tabla de ingredientes y gastos */ @media(max-width:600px){ /* Ingredientes: header adaptado a 3 columnas (con ? tooltips visibles) */ #ping-header{ display:grid; grid-template-columns:1fr 1fr 1fr 34px; padding:0 2px 6px} #ping-header>:nth-child(1), #ping-header>:nth-child(5), #ping-header>:nth-child(6){display:none} #ping-header>:nth-child(2){grid-column:1} #ping-header>:nth-child(3){grid-column:2} #ping-header>:nth-child(4){grid-column:3} #ping-header .help{display:none} #ping-list{overflow-x:visible;padding-bottom:0} .ping-row{ display:grid; grid-template-columns:1fr 1fr 1fr 34px; grid-template-areas:"nombre nombre nombre del" "cant pkt rinde ."; gap:6px 4px;min-width:unset; padding-bottom:10px;margin-bottom:8px; border-bottom:1px solid var(--crema-2)} .ping-row>:nth-child(1){grid-area:nombre} .ping-row>:nth-child(2){grid-area:cant} .ping-row>:nth-child(3){grid-area:pkt} .ping-row>:nth-child(4){grid-area:rinde} .ping-row>:nth-child(5){display:none} .ping-row>:nth-child(6){grid-area:del;justify-self:end;align-self:start} .ping-unit{width:56px!important;padding:10px 3px!important;-webkit-appearance:auto!important;appearance:auto!important} /* iOS hace auto-zoom si el input tiene font-size < 16px — lo forzamos en mobile */ .ping-row .in-bare,.pgasto-row .in-bare,.ping-unit{font-size:16px!important} /* Gastos: nombre+del en fila 1, tipo+monto en fila 2 */ .pgasto-row{ display:grid; grid-template-columns:1fr 1fr 34px; grid-template-areas:"nombre nombre del" "tipo monto monto"; gap:6px 4px;min-width:unset; padding-bottom:10px;margin-bottom:8px; border-bottom:1px solid var(--crema-2)} .pgasto-row>:nth-child(1){grid-area:nombre} .pgasto-row>:nth-child(2){grid-area:tipo} .pgasto-row>:nth-child(3){grid-area:monto} .pgasto-row>:nth-child(4){grid-column:1/-1} .pgasto-row>:nth-child(5){grid-area:del;justify-self:end;align-self:start} /* La barra se apila: costo arriba, los dos botones abajo a lo ancho (el primario "Guardar y ponerle precio →" no entra en una fila con el costo) */ .prod-result-bar{flex-direction:column;align-items:stretch;padding:12px 14px 14px;gap:10px} .prb-label{font-size:9.5px;letter-spacing:.8px} .prb-val{font-size:24px} /* Los botones se apilan (el primario es largo y no entra al lado del otro) */ .prb-actions{flex-direction:column;gap:8px} .prb-actions button{width:100%;justify-content:center} .prb-save{padding:12px 10px;font-size:14px} .prb-calc{padding:12px 10px;font-size:14px} /* Cartel de contexto: la × no se achica */ .calc-context{gap:10px;padding:10px 12px} .cc-name{font-size:15px} } /* ============================================================ HELP BANNERS — Tutorial colapsable por sección ============================================================ */ .help-banner{background:var(--crema);border:1.5px solid var(--linea);border-radius:16px; padding:18px 20px 16px;margin-bottom:16px;display:none} .help-banner.on{display:block;animation:rise .3s ease} .hb-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px} .hb-ico{width:30px;height:30px;flex-shrink:0;color:var(--verde);margin-top:2px} .hb-title{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--tinta);line-height:1.2} .hb-sub{font-size:12.5px;color:var(--tinta-soft);margin-top:3px} .hb-steps{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;counter-reset:hb} .hb-steps li{counter-increment:hb;display:flex;gap:10px;font-size:13.5px;color:var(--tinta);line-height:1.5} .hb-steps li::before{content:counter(hb);width:22px;height:22px;border-radius:50%; background:var(--verde);color:var(--on-verde);font-size:11.5px;font-weight:700; display:grid;place-items:center;flex-shrink:0;margin-top:2px} .hb-footer{display:flex;justify-content:flex-end;margin-top:14px} .hb-dismiss{background:var(--verde);color:var(--on-verde);border:none;border-radius:11px; padding:9px 18px;font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s} .hb-dismiss:hover{filter:brightness(1.08)} .hb-reopen{display:none;align-items:center;gap:5px;background:transparent;border:none; font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--tinta-soft); cursor:pointer;padding:0;margin-bottom:12px;transition:.15s} .hb-reopen:hover{color:var(--verde)} .hb-reopen.visible{display:inline-flex} .hb-reopen svg{width:13px;height:13px} /* ============================================================ PRODUCCIÓN v2 — Insumos + Receta ============================================================ */ /* Grilla insumos: nombre | cant | unidad | precio total | $ por unidad | del */ .pinsumo-header{display:grid; grid-template-columns:1.6fr 90px 80px 130px 120px 38px; gap:6px;padding:0 2px 8px;font-size:10.5px;font-weight:700;color:var(--tinta-soft); text-transform:uppercase;letter-spacing:.04em} .pinsumo-row{display:grid; grid-template-columns:1.6fr 90px 80px 130px 120px 38px; gap:6px;align-items:center;margin-bottom:7px} .pinsumo-pu{font-family:var(--serif);font-weight:700;font-size:13.5px;color:var(--verde); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Grilla receta: insumo dropdown | cant usada | unidad | $ unitario | costo | del */ .preceta-header{display:grid; grid-template-columns:1.8fr 90px 60px 100px 90px 38px; gap:6px;padding:0 2px 8px;font-size:10.5px;font-weight:700;color:var(--tinta-soft); text-transform:uppercase;letter-spacing:.04em} .preceta-row{display:grid; grid-template-columns:1.8fr 90px 60px 100px 90px 38px; gap:6px;align-items:center;margin-bottom:7px} .preceta-unit{font-size:13px;font-weight:600;color:var(--tinta-soft)} .preceta-pu{font-size:13px;font-weight:600;color:var(--tinta-soft);white-space:nowrap} .preceta-costo{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--verde); text-align:right;white-space:nowrap} .preceta-ins-sel{cursor:pointer} .prod-unit-sel{width:72px!important;padding:10px 4px!important; -webkit-appearance:auto!important;appearance:auto!important;cursor:pointer} /* Empty state */ .prod-empty{font-size:13px;color:var(--tinta-soft);text-align:center;padding:8px 0 4px;line-height:1.5} /* Modal confirmación eliminar insumo en uso */ .prod-confirm{background:var(--crema);border:1.5px solid var(--naranja); border-radius:12px;padding:14px 16px;margin-bottom:14px} .prod-confirm-txt{font-size:13.5px;color:var(--tinta);margin-bottom:11px;line-height:1.5} .prod-confirm-btns{display:flex;gap:8px;justify-content:flex-end} .prod-confirm-no{background:transparent;border:1.5px solid var(--linea);border-radius:9px; padding:8px 16px;font-family:var(--sans);font-size:13px;font-weight:600; color:var(--tinta-soft);cursor:pointer;transition:.15s} .prod-confirm-no:hover{border-color:var(--tinta-soft)} .prod-confirm-yes{background:var(--naranja);color:#fff;border:none;border-radius:9px; padding:8px 16px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:.15s} .prod-confirm-yes:hover{filter:brightness(.92)} /* Mobile ≤600px */ @media(max-width:600px){ .pinsumo-header,.preceta-header{display:none} .pinsumo-row{ display:grid; grid-template-columns:1fr 1fr 38px; grid-template-rows:auto auto auto; gap:6px;padding-bottom:10px;margin-bottom:8px; border-bottom:1px solid var(--crema-2)} .pinsumo-row>:nth-child(1){grid-column:1/-1} .pinsumo-row>:nth-child(2){grid-column:1} .pinsumo-row>:nth-child(3){grid-column:2} .pinsumo-row>:nth-child(4){grid-column:1} .pinsumo-row>:nth-child(5){grid-column:2;font-size:13px} .pinsumo-row>:nth-child(6){grid-row:1;grid-column:3;align-self:start} .preceta-row{ display:grid; grid-template-columns:1fr 1fr 38px; grid-template-rows:auto auto; gap:6px;padding-bottom:10px;margin-bottom:8px; border-bottom:1px solid var(--crema-2)} .preceta-row>:nth-child(1){grid-column:1/-1} .preceta-row>:nth-child(2){grid-column:1} .preceta-row>:nth-child(3){grid-column:2} .preceta-row>:nth-child(4){display:none} .preceta-row>:nth-child(5){grid-column:1/-1;text-align:right;font-size:16px} .preceta-row>:nth-child(6){grid-row:1;grid-column:3;align-self:start} .pinsumo-row .in-bare,.preceta-row .in-bare,.prod-unit-sel,.preceta-ins-sel{font-size:16px!important} } /* ============================================================ PROMO BAR — banda de lanzamiento ============================================================ */ .promo-bar{position:relative;display:flex;align-items:center;justify-content:center; gap:10px;background:var(--naranja);color:#fff;font-family:var(--sans);font-size:13.5px; font-weight:600;padding:10px 44px;line-height:1.4} .promo-bar-ico{flex-shrink:0;font-size:16px} .promo-bar-close{position:absolute;right:12px;top:50%;transform:translateY(-50%); background:none;border:none;color:#fff;cursor:pointer;padding:4px; border-radius:6px;display:grid;place-items:center;opacity:.8;transition:.15s} .promo-bar-close:hover{opacity:1;background:rgba(0,0,0,.15)} .promo-bar-close svg{width:16px;height:16px} /* ============================================================ HERO — bloque de entrada para usuarios nuevos ============================================================ */ .hero{text-align:center;padding:32px 16px 28px;margin-bottom:4px} .hero-title{font-family:var(--serif);font-size:clamp(28px,8vw,42px);font-weight:700; color:var(--tinta);line-height:1.15;margin-bottom:14px} .hero-sub{font-size:clamp(14px,3.5vw,16px);color:var(--tinta-soft);line-height:1.55;margin-bottom:24px} .hero-cta{background:var(--verde);color:var(--on-verde);border:none;border-radius:14px; font-family:var(--sans);font-size:16px;font-weight:700;padding:15px 36px;cursor:pointer; box-shadow:0 8px 22px -8px rgba(31,138,91,.55);transition:.18s;display:inline-block} .hero-cta:hover{filter:brightness(1.07);transform:translateY(-1px)} .hero-cta:active{transform:none} .hero-note{font-size:12.5px;color:var(--tinta-soft);margin-top:14px;line-height:1.5} .hero-note span{font-weight:600;color:var(--naranja)} @media(max-width:480px){ .hero{padding:24px 8px 20px} .hero-sub br{display:none} } /* ============================================================ PRECIO SUB-NOTE — frase bajo el precio resultado ============================================================ */ .precio-sub-note{font-size:12px;color:rgba(245,240,232,.75);margin-top:4px;line-height:1.4} .precio-cash-note{font-size:11.5px;color:rgba(245,240,232,.72);margin-top:6px;line-height:1.45;font-style:italic} /* ============================================================ GUEST CTA — incentivo de registro bajo el breakdown ============================================================ */ .guest-cta{margin-top:12px;padding:13px 16px;background:var(--crema);border:1.5px dashed var(--linea); border-radius:12px;text-align:center} .guest-cta-title{font-size:13.5px;font-weight:600;color:var(--tinta);margin-bottom:3px} .guest-cta-promo{font-size:12.5px;color:var(--naranja);font-weight:600;margin-top:5px} /* ============================================================ PERFIL: acordeón de canales de cobro ============================================================ */ .neg-acord-canal{border:1px solid var(--linea);border-radius:11px;overflow:hidden;margin-bottom:6px} .neg-acord-hdr{display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;background:var(--superficie);user-select:none;-webkit-user-select:none;transition:background .12s} .neg-acord-hdr:hover{background:var(--crema-2)} .neg-acord-nm{flex:1;font-size:13px;font-weight:600;color:var(--tinta)} .neg-acord-badge{background:var(--verde);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;line-height:1.6;flex-shrink:0} .neg-acord-arrow{font-size:14px;color:var(--tinta-soft);transition:transform .18s;display:inline-block;flex-shrink:0} .neg-acord-hdr.open .neg-acord-arrow{transform:rotate(180deg)} .neg-acord-body{padding:8px 13px 10px;border-top:1px solid var(--linea)} .neg-canal-medio-row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--tinta);cursor:pointer;padding:5px 0;line-height:1.3;border-bottom:1px solid var(--crema-2)} .neg-canal-medio-row:last-child{border-bottom:none} .neg-canal-medio-row input{accent-color:var(--verde);width:14px;height:14px;cursor:pointer;flex-shrink:0} .neg-medio-com{font-size:11px;color:var(--tinta-soft);font-weight:400;margin-left:5px} .neg-custom-canal-wrap{display:flex;flex-direction:column;gap:6px} .neg-custom-nombre-inp{width:100%;font-size:12.5px;font-weight:500;color:var(--tinta);background:var(--crema);border:1px solid var(--linea);border-radius:7px;padding:5px 9px;box-sizing:border-box} .neg-custom-nombre-inp::placeholder{color:var(--tinta-soft)} .neg-custom-medios-list{display:flex;flex-direction:column} .neg-custom-medio-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--crema-2)} .neg-custom-medio-row:last-child{border-bottom:none} .neg-custom-medio-row input[type="checkbox"]{accent-color:var(--verde);width:14px;height:14px;cursor:pointer;flex-shrink:0} .neg-custom-medio-inner{flex:1;min-width:0;display:flex;align-items:center;gap:2px} .neg-custom-medio-inner .neg-custom-medio-nm{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--tinta);background:none!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid var(--linea)!important;padding:0;outline:none;line-height:1.3;box-shadow:none;cursor:text} .neg-custom-medio-inner .neg-custom-medio-nm:focus{border-bottom-color:var(--verde)!important} .neg-custom-medio-inner .neg-custom-medio-nm::placeholder{color:var(--tinta-soft);font-weight:400} .neg-custom-medio-inner .neg-custom-medio-com{width:38px;flex-shrink:0;font-size:11px;font-weight:400;color:var(--tinta-soft);background:none!important;border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid var(--linea)!important;padding:0;text-align:right;outline:none;-moz-appearance:textfield;margin-left:4px;box-shadow:none;cursor:text} .neg-custom-medio-inner .neg-custom-medio-com:focus{border-bottom-color:var(--verde)!important;color:var(--tinta)} .neg-custom-medio-com::-webkit-inner-spin-button,.neg-custom-medio-com::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .neg-medio-suf{font-size:11px;color:var(--tinta-soft);flex-shrink:0} .neg-custom-del-medio{background:none;border:none;color:var(--tinta-soft);font-size:14px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0} .neg-custom-del-medio:hover{color:var(--naranja)} .neg-custom-add-medio{align-self:flex-start;background:none;border:1px dashed var(--linea);border-radius:7px;color:var(--verde);font-size:12px;font-weight:600;padding:4px 10px;cursor:pointer;margin-top:2px} .neg-custom-add-medio:hover{border-color:var(--verde);background:var(--crema)} .neg-modelo-precio{display:flex;flex-direction:column;gap:8px;margin-top:6px} .neg-modelo-opt{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:9px 11px;border:1.5px solid var(--linea);border-radius:10px;transition:.15s} .neg-modelo-opt:has(input:checked){border-color:var(--verde);background:var(--crema)} .neg-modelo-opt input{accent-color:var(--verde);margin-top:3px;flex-shrink:0;width:auto} .neg-modelo-txt{flex:1;min-width:0} .neg-modelo-txt b{font-size:13px;color:var(--tinta);display:block;margin-bottom:2px} .neg-modelo-txt p{font-size:11.5px;color:var(--tinta-soft);margin:0;line-height:1.4} /* ============================================================ MODAL: paso 1 — tipo de producto ============================================================ */ .qa-tipo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0} .qa-flujo-grid{grid-template-columns:1fr 1fr} .qa-tipo-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1.5px solid var(--linea);border-radius:12px;background:var(--crema);cursor:pointer;font-family:var(--sans);transition:.15s;text-align:center} .qa-tipo-btn:hover{border-color:var(--verde);background:var(--on-verde)} .qa-tipo-ico{font-size:22px;line-height:1} .qa-tipo-btn b{font-size:13px;color:var(--tinta);font-weight:700;line-height:1.2} .qa-tipo-btn small{font-size:11px;color:var(--tinta-soft);line-height:1.3} .qa-nose-wrap{text-align:center;margin:6px 0 2px;font-size:12.5px} .qa-nose-wrap a{color:var(--verde);font-weight:600;cursor:pointer;text-decoration:underline} .qa-nose-help{background:var(--crema);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--tinta-soft);line-height:1.5;margin-top:6px;text-align:left} .qa-nose-help b{color:var(--tinta)} /* ============================================================ PRODUCTO: precio único destacado + detalle colapsable ============================================================ */ .prod-precio-unico{background:linear-gradient(135deg,var(--crema) 0%,color-mix(in srgb,var(--verde) 40%,var(--crema)) 100%);border:1.5px solid var(--verde);border-radius:11px;padding:11px 13px;margin-bottom:6px;display:flex;align-items:flex-start;gap:10px} .prod-precio-unico-main{flex:1;min-width:0} .prod-precio-unico-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--verde);margin-bottom:2px} .prod-precio-unico-val{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--tinta);line-height:1.15} .prod-precio-unico-note{font-size:10.5px;color:var(--tinta-soft);margin-top:2px;line-height:1.4} .prod-precio-unico-detalle{font-size:10.5px;color:var(--tinta-soft);margin-top:3px;line-height:1.4;font-style:italic;opacity:.75} .prod-precio-unico-mejor{font-size:10.5px;color:var(--tinta-soft);margin-top:4px;line-height:1.4;opacity:.65} .prod-detalle-toggle{background:none;border:none;padding:3px 0;cursor:pointer;color:var(--verde);font-size:12px;font-weight:600;font-family:var(--sans);text-decoration:underline;display:block;margin-bottom:4px} .prod-detalle-toggle:hover{opacity:.75} .prod-detalle-list{border:1px solid var(--linea);border-radius:9px;overflow:hidden;margin-bottom:6px} .prod-detalle-list .prod-precio-row{border-bottom:1px solid var(--crema-2);padding:7px 11px} /* Desglose de cálculo */ .prod-desglose-toggle{background:none;border:none;padding:3px 0;cursor:pointer;color:var(--tinta-soft);font-size:11px;font-family:var(--sans);text-decoration:underline;text-underline-offset:2px;display:block;margin-top:5px;transition:.12s} .prod-desglose-toggle:hover{color:var(--tinta)} .prod-desglose{background:var(--crema-2);border-radius:8px;padding:9px 12px;margin-top:6px;font-size:11.5px;display:flex;flex-direction:column;gap:4px} .prod-desglose-row{display:flex;justify-content:space-between;gap:8px;color:var(--tinta-soft);line-height:1.3} .prod-desglose-val{font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0} .prod-desglose-minus .prod-desglose-val{color:var(--naranja)} .prod-desglose-hr{border:none;border-top:1px solid var(--linea);margin:3px 0} .prod-desglose-gan{color:var(--verde);font-weight:700} .prod-desglose-total{color:var(--tinta);font-weight:700} .prod-desglose-info{opacity:.7;font-style:italic} .prod-desglose-info small{opacity:.8} .prod-precio-row-wrap{display:flex;flex-direction:column} /* Small arrow toggle inside list rows */ .prod-detalle-list .prod-desglose-toggle{font-size:12px;padding:2px 5px;text-decoration:none;border:none;background:none;cursor:pointer;color:var(--tinta-soft);line-height:1;margin:0} /* En tarjeta destacada, forzar colores sobre fondo crema */ .prod-precio-unico .prod-desglose{background:rgba(0,0,0,.07)} .prod-precio-unico .prod-desglose-row{color:var(--tinta-soft)} .prod-precio-unico .prod-desglose-gan{color:var(--verde)} .prod-precio-unico .prod-desglose-total{color:var(--tinta)} /* ============================================================ NEGOCIO: tipo de venta y tipos vendidos checkboxes (Puntos 3 y 5) ============================================================ */ .neg-tipo-venta{display:flex;gap:14px;margin-top:5px;flex-wrap:wrap} .neg-tipos-vendidos{display:flex;gap:14px;margin-top:5px;flex-wrap:wrap} .neg-check-opt{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--tinta);cursor:pointer} .neg-check-opt input[type="checkbox"]{accent-color:var(--verde);width:15px;height:15px;flex-shrink:0} .prod-detalle-list .prod-precio-row:last-child{border-bottom:none} /* ============================================================ HISTORIAL DE PRECIOS ============================================================ */ .prod-historial{border-top:1px solid var(--linea);padding:8px 16px 12px} .prod-historial-toggle{background:none;border:none;padding:3px 0;cursor:pointer;color:var(--tinta-soft); font-size:11.5px;font-weight:600;font-family:var(--sans);text-decoration:underline;text-underline-offset:2px; display:block;transition:.12s} .prod-historial-toggle:hover{color:var(--tinta)} .prod-historial-body{padding:2px 0 0} .prod-historial-list{margin-top:8px;display:flex;flex-direction:column;gap:4px} .hist-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-soft)} .hist-fecha{min-width:56px;font-size:11px;flex-shrink:0} .hist-val{font-family:var(--serif);font-size:12.5px;font-weight:600;color:var(--tinta)} .hist-up{color:var(--naranja);font-weight:700} .hist-down{color:#2DAA5C;font-weight:700} [data-theme="dark"] .hist-down{color:#5BBF86} .prod-historial-teaser{border-top:1px solid var(--linea);padding:8px 16px;font-size:12.5px;color:var(--tinta-soft)} .prod-hist-reg-btn{background:none;border:none;cursor:pointer;color:var(--verde);font-size:12.5px; font-weight:600;text-decoration:underline;font-family:var(--sans);padding:0;vertical-align:baseline} /* ============================================================ TOUR DE BIENVENIDA ============================================================ */ #tourOverlay{position:fixed;inset:0;z-index:500;pointer-events:none;display:none} #tourBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.38);pointer-events:none} #tourTooltip{position:absolute;width:260px;max-width:calc(100vw - 24px);background:var(--papel); border:1.5px solid var(--verde);border-radius:16px;padding:16px 18px 14px; box-shadow:0 8px 28px rgba(0,0,0,.22);pointer-events:auto} .tour-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--verde);margin-bottom:5px} .tour-msg{font-size:13.5px;color:var(--tinta);line-height:1.5;margin-bottom:12px} .tour-btns{display:flex;gap:8px;align-items:center;justify-content:flex-end} .tour-skip{background:none;border:none;color:var(--tinta-soft);font-size:13px;cursor:pointer; padding:4px 6px;font-family:var(--sans);text-decoration:underline} .tour-next{background:var(--verde);color:var(--on-verde);border:none;border-radius:9px; padding:8px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:.15s} .tour-next:hover{opacity:.88} #tourClose{position:absolute;top:10px;right:13px;background:none;border:none; color:var(--tinta-soft);font-size:20px;cursor:pointer;line-height:1;padding:2px 4px; transition:.12s;pointer-events:auto} #tourClose:hover{color:var(--tinta)} .tour-dots{display:flex;gap:5px;justify-content:center;margin-top:11px} .tour-dot{width:6px;height:6px;border-radius:50%;background:var(--linea);transition:.2s} .tour-dot.on{background:var(--verde);transform:scale(1.25)} .tour-highlight{outline:3px solid var(--verde) !important;outline-offset:4px;border-radius:8px}