/* ============================================================
   MOCKUPS DEL SAAS — recreación en código (sin imágenes)
   Todo en em: cambia el font-size del contenedor para escalar.
   ============================================================ */
.saas-win{
    --emr:#10b981; --emr-d:#0f3d2c; --ink:#141414; --mut:#6b6b6b;
    --line:#e9edf2; --bg:#f7f9fb;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-size:13px; line-height:1.35; color:var(--ink);
    background:#fff; border:1px solid var(--line); border-radius:14px;
    overflow:hidden; width:100%;
    box-shadow:0 24px 50px -22px rgba(15,23,42,.40);
}
.saas-topbar{display:flex;align-items:center;gap:.55em;padding:.65em .85em;background:#eef1f5;border-bottom:1px solid var(--line)}
.saas-dots{display:flex;gap:.4em}
.saas-dots i{width:.7em;height:.7em;border-radius:50%;display:block}
.saas-dots i:nth-child(1){background:#ff5f57}
.saas-dots i:nth-child(2){background:#febc2e}
.saas-dots i:nth-child(3){background:#28c840}
.saas-url{flex:1;background:#fff;border:1px solid var(--line);border-radius:.55em;padding:.28em .7em;font-size:.78em;color:var(--mut);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saas-body{padding:1.1em 1.2em;background:var(--bg)}

/* tipografía / encabezados internos */
.sx-h{font-weight:800;font-size:1.3em;margin:0}
.sx-sub{color:var(--mut);font-size:.82em;margin:.2em 0 0}
.sx-eyebrow{font-size:.66em;font-weight:800;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.sx-sec-t{font-weight:700;font-size:.95em;margin:0 0 .55em}

/* pills / badges */
.sx-pill{display:inline-flex;align-items:center;gap:.35em;font-size:.72em;font-weight:700;padding:.2em .6em;border-radius:999px;background:#eef2f6;color:var(--mut)}
.sx-pill.is-green{background:#dcfce7;color:#15803d}
.sx-pill.is-amber{background:#fef3c7;color:#b45309}
.sx-pill.is-blue{background:#dbeafe;color:#1d4ed8}
.sx-pill.is-purple{background:#f3e8ff;color:#7e22ce}
.sx-pill .dot{width:.5em;height:.5em;border-radius:50%;background:currentColor}

/* botones */
.sx-btn{display:inline-flex;align-items:center;gap:.4em;font-size:.78em;font-weight:700;padding:.5em .9em;border-radius:.6em;border:1px solid var(--line);background:#fff;color:var(--ink)}
.sx-btn.is-primary{background:linear-gradient(135deg,#34d399,#059669);color:#fff;border:0}

/* cards genéricas */
.sx-card{background:#fff;border:1px solid var(--line);border-radius:.9em;padding:.95em}
.sx-grid{display:grid;gap:.7em}

/* KPI cards */
.sx-kpi{background:#fff;border:1px solid var(--line);border-radius:.8em;padding:.75em .85em}
.sx-kpi .k-top{display:flex;align-items:center;justify-content:space-between}
.sx-kpi .k-lab{font-size:.62em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.sx-kpi .k-ico{width:1.9em;height:1.9em;border-radius:.5em;display:flex;align-items:center;justify-content:center;font-size:.8em}
.sx-kpi .k-val{font-size:1.5em;font-weight:800;margin-top:.25em;letter-spacing:-.02em}
.sx-kpi .k-val small{font-size:.5em;font-weight:600;color:var(--mut)}
.sx-kpi .k-foot{font-size:.6em;color:var(--mut);margin-top:.1em}
/* variantes de color KPI (fondo + número) */
.k-green{background:#ecfdf5;border-color:#d1fae5}.k-green .k-val{color:#059669}.k-green .k-ico{background:#d1fae5;color:#059669}
.k-blue{background:#eff6ff;border-color:#dbeafe}.k-blue .k-val{color:#2563eb}.k-blue .k-ico{background:#dbeafe;color:#2563eb}
.k-purple{background:#faf5ff;border-color:#f3e8ff}.k-purple .k-val{color:#9333ea}.k-purple .k-ico{background:#f3e8ff;color:#9333ea}
.k-red{background:#fef2f2;border-color:#fee2e2}.k-red .k-val{color:#dc2626}.k-red .k-ico{background:#fee2e2;color:#dc2626}
.k-amber{background:#fffbeb;border-color:#fef3c7}.k-amber .k-val{color:#d97706}.k-amber .k-ico{background:#fef3c7;color:#d97706}
.k-sky{background:#f0f9ff;border-color:#e0f2fe}.k-sky .k-val{color:#0284c7}.k-sky .k-ico{background:#e0f2fe;color:#0284c7}
.k-slate{background:#fff}.k-slate .k-val{color:var(--ink)}.k-slate .k-ico{background:#f1f5f9;color:#475569}

/* barras de desglose */
.sx-bar-row{display:flex;align-items:center;gap:.6em;margin:.5em 0}
.sx-bar-name{display:flex;align-items:center;gap:.4em;width:7.5em;font-size:.76em;font-weight:600;color:#334155;flex-shrink:0}
.sx-bar-name .d{width:.55em;height:.55em;border-radius:50%;flex-shrink:0}
.sx-bar{flex:1;height:.55em;background:#eef2f6;border-radius:999px;overflow:hidden}
.sx-bar > span{display:block;height:100%;border-radius:999px}
.sx-bar-val{width:4.2em;text-align:right;font-size:.72em;font-weight:700;color:#0f172a;flex-shrink:0}
.sx-bar-val em{color:var(--mut);font-style:normal;font-weight:600}

/* tabla / lista de retiros */
.sx-tbl{background:#fff;border:1px solid var(--line);border-radius:.9em;overflow:hidden}
.sx-tr{display:grid;grid-template-columns:1.6fr 1.2fr 1.2fr .9fr .9fr;gap:.6em;align-items:center;padding:.7em .9em;border-top:1px solid var(--line);font-size:.76em}
.sx-tr.head{background:#f8fafc;border-top:0;color:var(--mut);font-weight:700;font-size:.66em;letter-spacing:.04em;text-transform:uppercase}
.sx-tr .cell-main{display:flex;align-items:center;gap:.55em}
.sx-tr .mini-ico{width:1.7em;height:1.7em;border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:.8em;flex-shrink:0}
.sx-tr .t-name{font-weight:700}.sx-tr .t-mut{color:var(--mut);font-size:.85em}

/* tabs */
.sx-tabs{display:flex;gap:.4em;flex-wrap:wrap;align-items:center;margin:.2em 0 .8em}
.sx-tab{font-size:.74em;font-weight:700;padding:.35em .75em;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--mut)}
.sx-tab.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.sx-search{flex:1;min-width:8em;display:flex;align-items:center;gap:.45em;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35em .8em;color:#94a3b8;font-size:.74em}

/* tiles de categorías (cotización) */
.sx-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.55em}
.sx-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:.7em;padding:.7em .4em;text-align:center;font-size:.66em;font-weight:600;color:#475569}
.sx-tile .ti{width:2em;height:2em;border-radius:50%;margin:0 auto .4em;background:#f1f5f9;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:.85em}
.sx-tile .rep{position:absolute;top:.4em;left:.4em;font-size:.85em;font-weight:800;color:#16a34a}
.sx-tile.is-on{border-color:#34d399;background:#f0fdf4;box-shadow:0 0 0 1px #34d399 inset}
.sx-tile.is-on .ti{background:#bbf7d0;color:#059669}
.sx-tile .chk{position:absolute;top:.35em;right:.4em;color:#16a34a;font-size:.9em}

/* chips seleccionados */
.sx-chips{display:flex;flex-wrap:wrap;gap:.4em;border:1px dashed #cbd5e1;border-radius:.6em;padding:.5em;margin-bottom:.7em}
.sx-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.72em;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:.5em;padding:.25em .55em}
.sx-chip i{color:#94a3b8;font-size:.85em}

/* opciones (a quién enviar) */
.sx-opts{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.sx-opt{position:relative;background:#fff;border:1px solid var(--line);border-radius:.7em;padding:.75em .85em}
.sx-opt.is-on{border-color:#34d399;box-shadow:0 0 0 1px #34d399 inset}
.sx-opt .o-lab{font-size:.62em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.sx-opt .o-t{font-weight:700;font-size:.9em;margin-top:.15em}
.sx-opt .o-s{color:var(--mut);font-size:.74em;margin-top:.1em}
.sx-opt .o-chk{position:absolute;top:.6em;right:.7em;width:1.3em;height:1.3em;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7em}

/* peso / origen */
.sx-input{background:#fff;border:1px solid var(--line);border-radius:.6em;padding:.55em .8em;font-weight:700;font-size:.95em;display:flex;align-items:center;gap:.5em}
.sx-seg{display:flex;gap:.4em;margin-top:.5em}
.sx-seg span{flex:1;text-align:center;font-size:.72em;font-weight:700;padding:.45em;border-radius:.5em;background:#fff;border:1px solid var(--line);color:var(--mut)}
.sx-seg span.is-on{background:#bbf7d0;color:#15803d;border-color:#34d399}

/* timeline trazabilidad */
.sx-tl{position:relative;padding-left:.3em}
.sx-tl-item{position:relative;display:flex;gap:.7em;padding-bottom:.7em}
.sx-tl-item:before{content:'';position:absolute;left:.78em;top:1.6em;bottom:-.2em;width:2px;background:#bbf7d0}
.sx-tl-item:last-child:before{display:none}
.sx-tl-dot{width:1.6em;height:1.6em;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72em;flex-shrink:0;z-index:1}
.sx-tl-c{flex:1;display:flex;justify-content:space-between;align-items:center}
.sx-tl-c b{font-weight:700;font-size:.82em}
.sx-tl-c span{color:var(--mut);font-size:.68em}

/* lista lateral de retiros (trazabilidad) */
.sx-rlist{display:flex;flex-direction:column;gap:.45em}
.sx-ritem{display:flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);border-radius:.6em;padding:.5em .6em;font-size:.74em}
.sx-ritem.is-on{border-color:#34d399;background:#f0fdf4}
.sx-ritem .mini-ico{width:1.6em;height:1.6em;border-radius:.4em;display:flex;align-items:center;justify-content:center;font-size:.75em;flex-shrink:0}
.sx-ritem .r-id{font-weight:700}
.sx-ritem .r-mut{color:var(--mut);font-size:.85em}

/* layout dashboard (hero) */
.sx-dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;margin-bottom:.85em}
.sx-total{background:linear-gradient(150deg,#16543c,#0c3326);color:#fff;border-radius:.9em;padding:.9em;position:relative;overflow:hidden}
.sx-total .t-lab{font-size:.66em;opacity:.85;font-weight:600}
.sx-total .t-big{font-size:2em;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:.15em}
.sx-total .t-big small{font-size:.5em;font-weight:600;opacity:.85}
.sx-total .t-foot{font-size:.62em;opacity:.8;margin-top:1.2em;display:flex;align-items:center;gap:.4em}
.sx-total .t-foot .d{width:.5em;height:.5em;border-radius:50%;background:#34d399}

.sx-equiv{background:#f0fdf4;border:1px solid #dcfce7;border-radius:.6em;padding:.5em .75em;font-size:.7em;color:#15803d;line-height:1.5}
.sx-equiv b{font-weight:800;color:#0f172a}
.r-mut{color:var(--mut)}

/* shell con sidebar (dashboard real) */
.sx-shell{display:flex;height:100%;background:#fff}
.sx-side{width:18%;min-width:6.5em;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:.8em .55em;display:flex;flex-direction:column;gap:.12em}
.sx-side .brand{font-size:.82em}
.sx-side .s-org{font-size:.58em;font-weight:700;letter-spacing:.09em;color:#94a3b8;margin:.15em 0 .85em .35em}
.sx-nav{display:flex;flex-direction:column;gap:.12em}
.sx-nav span{display:flex;align-items:center;gap:.5em;font-size:.72em;font-weight:600;color:#64748b;padding:.46em .55em;border-radius:.5em}
.sx-nav span i{width:1.1em;text-align:center}
.sx-nav span.is-on{background:#ecfdf5;color:#059669;font-weight:700}
.sx-side .s-user{margin-top:auto;display:flex;align-items:center;gap:.45em;font-size:.66em;border-top:1px solid var(--line);padding-top:.65em}
.sx-side .s-user b{font-size:1.05em}
.sx-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.sx-mainbar{display:flex;align-items:center;justify-content:space-between;padding:.5em .95em;background:#fff;border-bottom:1px solid var(--line);font-size:.95em}
.sx-mainbar .bell{color:#94a3b8}

/* dashboard incrustado en el laptop: cabecera de app */
.sx-appbar{display:flex;align-items:center;gap:.55em;padding:.6em .8em;background:#fff;border-bottom:1px solid var(--line)}
.sx-appbar .brand{display:flex;align-items:center;gap:.4em;font-weight:800;font-size:.82em;color:#0f172a}
.sx-appbar .brand .lg{width:1.4em;height:1.4em;border-radius:50%;background:linear-gradient(135deg,#34d399,#059669)}
.sx-appbar .av{margin-left:auto;width:1.6em;height:1.6em;border-radius:50%;background:#0f3d2c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:700}

.saas-banner{display:flex;align-items:center;gap:.6em;background:#fffbeb;border:1px solid #fef3c7;border-radius:.7em;padding:.6em .8em;margin-top:.8em}
.saas-banner .b-ico{width:1.8em;height:1.8em;border-radius:.45em;background:#fef3c7;color:#d97706;display:flex;align-items:center;justify-content:center}
.saas-banner .b-t{font-weight:700;font-size:.8em}
.saas-banner .b-s{color:var(--mut);font-size:.68em}

/* helpers */
.sx-row{display:flex;align-items:center;gap:.6em}
.sx-mt{margin-top:.8em}

/* tamaños por contexto */
.laptop-display .saas-win{border:0;border-radius:0;box-shadow:none;height:100%;font-size:7.1px}
.laptop-display .saas-win .saas-body{padding:.65em .85em;flex:1;display:flex;flex-direction:column}
.laptop-display .sx-dash-head{margin-bottom:.55em}
.laptop-display .sx-mt{margin-top:.5em}
.laptop-display .sx-equiv{padding:.4em .7em}
.laptop-display .sx-kpi{padding:.6em .75em}
/* la fila de KPIs crece para ocupar el alto restante (sin huecos blancos) */
.laptop-display .saas-body > .sx-grid:last-child{flex:1}
.feature-shot .saas-win{font-size:11px}
@media (min-width:1024px){ .feature-shot .saas-win{font-size:12.5px} }
@media (max-width:520px){ .feature-shot .saas-win{font-size:9.5px} }