/* ===================================================== SouthDesk Calculator — CSS (actualizado y depurado) ===================================================== */ /* ---------- Tokens ---------- */ :root{ --sd-primary:#17375F; --sd-accent:#EF7D17; --sd-border:#E6E9EE; --sd-text:#1F2937; --sd-muted:#6B7280; --sd-bg:#FFFFFF; --sd-backdrop:rgba(10,18,33,.62); } /* ---------- Wrapper / Titles ---------- */ .sd-calculator-wrapper{ width:min(1100px,96vw); max-width:1100px; margin:clamp(16px,3vw,32px) auto; padding:clamp(14px,3.5vw,28px); background:#fff; border-radius:14px; box-shadow:0 4px 20px rgba(0,0,0,.08); font-family:'Montserrat',sans-serif; overflow-x:hidden; padding-bottom: max(16px, env(safe-area-inset-bottom), var(--kb-h, 0px)); } .title-calculator{ font:700 30px/1.2 "Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--sd-primary); overflow-wrap:anywhere; word-break:break-word; } .accent-savings{ color:var(--sd-accent); } .sd-form-column{ display:grid; gap:1.2em; position:relative; z-index:3; } /* ---------- Header + Rows ---------- */ .sd-header{ display:grid; grid-template-columns:1fr 1fr 1fr 100px 40px; /* Industry | Role | Level | Qty | X */ gap:12px; margin-bottom:8px; font-weight:600; font-size:.9rem; color:#333; } .sd-row{ display:grid; grid-template-columns:1fr 1fr 1fr 100px 40px; gap:12px; align-items:center; } /* ---------- Inputs ---------- */ .sd-row select, .sd-row input{ width:100%; padding:.65em .8em; border:1px solid #dcdcdc; border-radius:6px; background:#f7f8fa; font-size:.95rem; transition:border .2s,box-shadow .2s; } .sd-row select:focus, .sd-row input:focus{ outline:none; border-color:var(--sd-primary); box-shadow:0 0 0 2px rgba(23,55,95,.1); } .sd-row input.sd-qty{ min-width:0; } /* ---------- Delete button (fila) — usa × ---------- */ .sd-delete{ --sd-red:#E63946; width:36px; height:36px; border-radius:50%; border:2px solid var(--sd-red); background:#fff !important; display:grid; place-items:center; color:var(--sd-red); padding:0; line-height:1; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform .15s ease, background .2s ease; } .sd-delete .sd-x{ font:800 20px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--sd-red); transform:translateY(-1px); } .sd-delete:hover{ background:rgba(230,57,70,.06) !important; transform:scale(1.06); } .sd-delete--hidden{ visibility:hidden; } .sd-delete[disabled]{ pointer-events:none; } /* Mata overlays/pseudoelementos que algunos themes inyectan */ .sd-delete::before, .sd-delete::after{ content:none !important; } /* ---------- Tom Select ---------- */ .sd-calculator-wrapper .ts-control, .sd-calculator-wrapper .ts-control input{ font-family:'Montserrat',sans-serif !important; font-weight:500; letter-spacing:.2px; } .sd-row .ts-wrapper{ width:100% !important; position:relative; z-index:10; } .ts-control{ padding:.55em .8em; min-height:38px; border-radius:6px; border:1px solid #dcdcdc; background:#f7f8fa; box-shadow:none; font-size:.95rem; color:#333; transition:all .2s; } .ts-control:hover{ border-color:var(--sd-primary); } .ts-control .ts-arrow{ border-color:var(--sd-primary) transparent transparent transparent; margin-top:6px; } .ts-control input{ font-size:.95rem; padding:0; background:none; } /* Dropdown portalizado al (JS añade .sd-ts-fix y CSS vars de posición) */ body > .ts-dropdown.sd-ts-fix{ position:absolute !important; left:var(--sd-left) !important; top:var(--sd-top) !important; width:var(--sd-width) !important; right:auto !important; max-width:none !important; max-height:min(60vh,320px); overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; border:1px solid #dcdcdc; background:#fff; border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.15); font-size:.95rem; z-index:999999 !important; } /* ---------- Botones principales ---------- */ #sd-calc, #sd-add{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; margin:10px; padding:10px 24px; border-radius:50px; cursor:pointer; transition:all .3s ease; border:2px solid transparent; } #sd-calc{ background:#f58220; border-color:#f58220; color:#fff; } #sd-calc:hover{ background:transparent; color:#f58220; box-shadow:0 0 10px rgba(245,130,32,.6); } #sd-add{ background:transparent; border-color:#0d2043; color:#0d2043; } #sd-add:hover{ background:#0d2043; color:#fff; box-shadow:0 0 10px rgba(13,32,67,.6); } /* ---------- Resultados / Chart ---------- */ .sd-results{ margin-top:2em; padding:1em; background:#f8f9fb; border-radius:8px; display:none; position:relative; z-index:1; } .sd-results-wrapper{ display:flex; gap:1.5em; margin-top:2em; flex-wrap:wrap; } .sd-results-chart{ flex:2; background:#fff; padding:clamp(12px,2vw,24px); border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.05); position:relative; overflow:visible; } .sd-results-cta{ flex:1; display:flex; flex-direction:column; justify-content:center; } .sd-results-chart h3{ font-size:clamp(1.1rem,2vw,1.6rem); margin:0 0 .25em; position:relative; z-index:2; } #sd-total{ font-size:clamp(1.6rem,3.2vw,2.2rem); color:var(--sd-accent); font-weight:800; margin-bottom:.6em; position:relative; z-index:2; } .sd-chart-box{ position:relative; width:100%; height:360px; padding-inline:6px; } .sd-chart-box canvas{ display:block; position:absolute; inset:0; width:100% !important; height:100% !important; } /* ---------- CTA buttons ---------- */ #cta-discovery,#cta-email{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; margin:10px; padding:10px 24px; border-radius:50px; cursor:pointer; transition:all .3s ease; border:2px solid transparent; } #cta-discovery{ background:transparent; border-color:#0d2043; color:#0d2043; } #cta-discovery:hover{ background:#0d2043; color:#fff; box-shadow:0 0 10px rgba(13,32,67,.6); } #cta-email{ background:#f58220; border-color:#f58220; color:#fff; } #cta-email:hover{ background:transparent; color:#f58220; box-shadow:0 0 10px rgba(245,130,32,.6); } .fira-bold{ font-family:'Fira Sans',sans-serif; font-weight:700; } /* ---------- Toast ---------- */ #sd-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--sd-primary); color:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); font-weight:600; z-index:1000000; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; } #sd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ===================================================== Modal (popup) ===================================================== */ body.sd-lock{ overflow:hidden; } .sd-popup{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:var(--sd-backdrop); z-index:1000000; padding:clamp(16px,3vw,28px); -webkit-overflow-scrolling:touch; overflow-y:auto; overscroll-behavior:contain; } .sd-popup.is-open,.sd-popup[aria-hidden="false"]{ display:flex; } .sd-popup-content{ background:var(--sd-bg); color:var(--sd-text); width:min(720px,92vw); border-radius:16px; box-shadow:0 20px 45px rgba(17,24,39,.18),0 6px 16px rgba(17,24,39,.12); padding:clamp(18px,2.6vw,28px); position:relative; animation:sd-pop-in .26s cubic-bezier(.2,.65,.3,1) both; max-height:calc(100dvh - 24px); overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding-bottom:18px; } @keyframes sd-pop-in{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1; transform:translateY(0) scale(1)}} /* Cerrar popup — usa pseudo-elemento (tu botón está vacío) */ .sd-popup-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:#0d2043; border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 6px rgba(13,32,67,.10); cursor:pointer; line-height:1; font-size:22px; font-weight:700; z-index:10001; transition:background .2s,color .2s,box-shadow .2s,transform .12s; } .sd-popup-close::before{ content:"\00D7"; /* × */ font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Fira Sans", Arial, sans-serif; transform: translateY(-1px); } .sd-popup-close:hover,.sd-popup-close:focus-visible{ background:#0d2043; color:#fff; box-shadow:0 6px 18px rgba(13,32,67,.22); outline:none; transform:scale(1.04); } /* Títulos / campos del popup */ .title-h3{ margin:2px 40px 4px 0; font:700 clamp(20px,2.4vw,26px)/1.25 "Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--sd-primary); } .subtitle-h4{ margin:0 40px 10px 0; font:600 clamp(14px,1.9vw,18px)/1.35 "Fira Sans",system-ui; color: var(--sd-accent); } .sd-popup-intro{ margin:6px 0 16px; color:var(--sd-muted); font-size:clamp(13.5px,1.8vw,15.5px); } .sd-popup-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:14px; } .sd-field-full{ grid-column:1 / -1; } .sd-field label{ display:block; font-weight:600; color:var(--sd-text); margin:2px 0 6px; font-size:14px; } .sd-req{ color:var(--sd-accent); margin-left:2px; } .sd-popup-content input, .sd-popup-content select{ width:100%; height:46px; padding:10px 12px; border:1px solid var(--sd-border); border-radius:10px; background:#F7F9FC; color:var(--sd-text); font-size:15px; outline:none; transition:border .18s,box-shadow .18s,background .18s; appearance:none; } .sd-popup-content input:focus, .sd-popup-content select:focus{ background:#fff; border-color:var(--sd-primary); box-shadow:0 0 0 3px rgba(23,55,95,.12); } .sd-popup-content .is-invalid{ border-color:#e63946 !important; box-shadow:0 0 0 3px rgba(230,57,70,.15) !important; background:#FFF5F6; } /* Select chevron en popup */ #sd-popup .sd-field select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; padding-right:44px; } #sd-popup .sd-field select::-ms-expand{ display:none; } #sd-popup .sd-field select:not([multiple]){ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' fill='none' stroke='%2399A3AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; } #sd-popup .sd-field select:focus{ outline:none; box-shadow:0 0 0 2px rgba(23,55,95,.15); border-color:var(--sd-primary); } /* ---------- Botón SouthDesk (submit popup) ---------- */ .sd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 22px; border:2px solid transparent; box-sizing:border-box; border-radius:30px; background:#f58220; color:#fff; font:700 15px/1 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.2px; cursor:pointer; box-shadow:0 10px 24px rgba(239,125,23,.25); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; -webkit-tap-highlight-color:transparent; } .sd-btn:hover{ background:transparent; color:#f58220; border-color:#f58220; transform:translateY(-1px); box-shadow:0 10px 22px rgba(245,130,32,.28); } .sd-btn:focus-visible{ outline:3px solid rgba(23,55,95,.55); /* fallback seguro */ outline-offset:3px; } .sd-btn[disabled], .sd-btn.is-loading{ opacity:.9; pointer-events:none; cursor:default; } .sd-btn__label{ display:inline-block; } /* Spinner */ .sd-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.65); border-right-color:transparent; display:none; animation: sdspin 0.8s linear infinite; } .sd-btn.is-loading .sd-spinner{ display:inline-block; } @keyframes sdspin{ to { transform: rotate(360deg) } } /* Estado loading del submit: mantiene naranja (sin “vino”) */ #sd-popup-submit.sd-btn.is-loading, #sd-popup-submit.sd-btn.is-loading:hover, #sd-popup-submit.sd-btn[disabled]{ background:#f58220 !important; border-color:#f58220 !important; color:#fff !important; box-shadow:0 10px 24px rgba(245,130,32,.28) !important; filter:none !important; } #sd-popup-submit.sd-btn.is-loading::before, #sd-popup-submit.sd-btn.is-loading::after{ content:none !important; display:none !important; background:none !important; } /* ===================================================== Actions row (Add / Period / Calculate) ===================================================== */ .sd-actions{ display:flex; align-items:center; gap:16px; } .sd-actions #sd-add,.sd-actions #sd-calc{ display:inline-flex; padding:.7em 1.2em; } .sd-actions .sd-period-label{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; flex-shrink:0; } .sd-actions .sd-period-label #sd-period{ min-width:160px; } /* Salary Period select */ #sd-period{ padding:.65em .8em; border:1px solid #dcdcdc; border-radius:6px; background:#f7f8fa; font-size:.95rem; transition:border .2s,box-shadow .2s; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' fill='none' stroke='%2399A3AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; } #sd-period:focus{ outline:none; border-color:var(--sd-primary); box-shadow:0 0 0 2px rgba(23,55,95,.1); } #sd-period::-ms-expand{ display:none; } /* ===================================================== Responsive ===================================================== */ @media (min-width:769px){ .sd-actions #sd-calc{ margin-left:auto; } } @media (max-width:768px){ .sd-header{ display:none; } .sd-row{ grid-template-columns:1fr; } .sd-row .sd-delete{ justify-self:end; } .sd-results-wrapper{ flex-direction:column; } .sd-actions{ flex-direction:column; align-items:stretch; gap:16px; } .sd-actions .sd-period-label{ width:50%; min-width:220px; align-self:flex-start; } .sd-actions .sd-period-label #sd-period{ width:100%; } .sd-actions #sd-add,.sd-actions #sd-calc{ width:100% !important; } .sd-results-chart{ padding:16px 12px 14px; } .sd-chart-box{ height:320px; padding-inline:10px; } } @media (max-width:480px){ .sd-results-chart h3{ font-size:1rem; margin:0 0 .2rem; } #sd-total{ font-size:1.6rem; margin:.25rem 0 .5rem; } .sd-popup-content{ border-radius:14px; padding:18px; } .sd-popup-grid{ grid-template-columns:1fr; gap:12px; } .sd-popup-close{ top:8px; right:8px; } .sd-cta p{ overflow-wrap:anywhere; word-break:break-word; margin:0 2px 12px; } } @media (min-width:1200px){ .sd-chart-box{ height:420px; } .sd-results-chart{ padding:20px 24px; } } /* ---------- Accesibilidad al enfocar ---------- */ .sd-calculator-wrapper input, .sd-calculator-wrapper select, .sd-calculator-wrapper .ts-control{ scroll-margin:72px; } /* ---------- Scheduler (opcional) ---------- */ .sd-popup-content--wide{ width:min(980px,95vw); } .sd-iframe-wrap{ position:relative; width:100%; height:min(80vh,80dvh); border-radius:12px; overflow:hidden; background:#fff; } .sd-iframe-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } @media (max-width:640px){ .sd-iframe-wrap{ height:calc(100dvh - 120px); } }