diff --git a/prototipo/Prototipo-Etapa0.html b/prototipo/Prototipo-Etapa0.html index 8f29cf7..43f91bb 100644 --- a/prototipo/Prototipo-Etapa0.html +++ b/prototipo/Prototipo-Etapa0.html @@ -43,7 +43,7 @@ *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--crema)} - body{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);font-size:13.5px;line-height:1.55;padding-top:var(--banner-h);min-width:1366px} + body{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);font-size:13.5px;line-height:1.55;padding-top:var(--banner-h)} ::selection{background:var(--amarillo);color:var(--cafe)} /* ============ Banner fijo de prototipo ============ */ @@ -66,14 +66,11 @@ color:#D9CDBB;display:flex;flex-direction:column;padding:26px 16px 18px; position:sticky;top:var(--banner-h);height:calc(100vh - var(--banner-h)); } - .brand{display:flex;align-items:center;gap:12px;padding:0 10px 22px;border-bottom:1px solid rgba(247,189,12,.16);margin-bottom:14px} + .brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px;border-bottom:1px solid rgba(247,189,12,.16);margin-bottom:10px} .logo-mark{ - width:42px;height:42px;border-radius:11px;background:var(--amarillo);color:var(--cafe); - display:grid;place-items:center;font-weight:800;font-size:21px;letter-spacing:-.02em;flex:none; - box-shadow:0 2px 10px rgba(247,189,12,.35); + width:198px;max-width:100%;display:flex;align-items:center;flex:none; } - .brand-name{color:var(--amarillo);font-weight:700;font-size:19px;letter-spacing:.14em;line-height:1.1} - .brand-sub{color:rgba(255,255,255,.55);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500} + .logo-mark img{display:block;width:100%;height:auto} .nav-label{color:rgba(217,205,187,.45);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:14px 12px 7px;font-weight:600} .nav-item{ @@ -117,20 +114,27 @@ background:var(--crema-2);border:1px solid var(--linea);padding:5px 11px;border-radius:999px;font-weight:500; } .pill b{color:var(--ink);font-weight:600} + .sync-context{ + display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px; + color:var(--info-ink);background:var(--info-bg);border:1px solid #BCD7EA; + font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap + } + .sync-context .dot{box-shadow:none;width:7px;height:7px} + .sync-context small{display:block;color:var(--info-ink);opacity:.72;font-size:9.5px;font-weight:400} .content{padding:30px 34px 60px;max-width:1560px} .view{display:none;animation:fadeIn .18s ease} .view.active{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .view-title{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:0 0 3px} - .view-sub{color:var(--muted);margin:0 0 26px;font-size:13px;font-weight:300;max-width:880px} + .view-sub{color:var(--muted);margin:0 0 16px;font-size:12.5px;font-weight:400;max-width:920px} .view-sub b{font-weight:500;color:var(--ink)} /* ============ Componentes base ============ */ .card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);box-shadow:var(--shadow)} .card-pad{padding:22px 24px} .card-title{font-size:14px;font-weight:600;margin:0 0 2px} - .card-sub{font-size:11.5px;color:var(--muted);font-weight:300;margin:0 0 14px} + .card-sub{font-size:11px;color:var(--muted);font-weight:400;margin:0 0 10px} .btn{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px; @@ -207,6 +211,12 @@ .kpi-meta{font-size:11.5px;color:var(--muted);margin-top:7px;font-weight:300} .kpi-meta .up{color:var(--ok-ink);font-weight:500} .kpi-meta .down{color:var(--bad-ink);font-weight:500} + .money-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:3px} + .money-line{border-left:3px solid var(--linea-2);padding-left:10px} + .money-line:first-child{border-left-color:var(--bad)} + .money-line:last-child{border-left-color:var(--info)} + .money-line b{display:block;font-size:20px;line-height:1.25;font-variant-numeric:tabular-nums} + .money-line small{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.06em} /* Gráficas simples */ .bars{display:flex;align-items:flex-end;gap:26px;height:190px;padding:8px 6px 0} @@ -225,7 +235,7 @@ .hbar-n{color:var(--muted);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums} /* Lista requiere atención */ - .att-item{display:flex;align-items:center;gap:13px;padding:12px 6px;border-bottom:1px solid var(--linea);cursor:pointer;border-radius:8px;transition:background .12s} + .att-item{display:grid;grid-template-columns:auto minmax(0,1fr) 190px auto;align-items:center;gap:13px;padding:12px 6px;border-bottom:1px solid var(--linea);cursor:pointer;border-radius:8px;transition:background .12s} .att-item:hover{background:var(--crema)} .att-item:last-child{border-bottom:none} .sev{width:9px;height:9px;border-radius:50%;flex:none} @@ -234,6 +244,12 @@ .att-txt b{font-weight:600} .att-txt .att-sub{display:block;font-size:11px;color:var(--muted);font-weight:300} .att-go{color:var(--muted-2);font-size:15px} + .att-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:10.5px;color:var(--muted)} + .att-meta span{display:block} + .att-meta b{display:block;color:var(--ink);font-size:11px;font-weight:600} + #view-dashboard.active{display:flex;flex-direction:column} + .dashboard-attention{order:1} + .dashboard-charts{order:2} /* Filtros chips */ .filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px} @@ -332,6 +348,13 @@ .check-ico svg{width:12px;height:12px} .check-row b{font-weight:600} .check-row .cr-sub{color:var(--muted);font-size:11px;font-weight:300;display:block} + .approval-gate{border:1.5px solid var(--warn-line);background:#FFFDF6} + .approval-status{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--linea)} + .approval-status:last-child{border-bottom:none} + .approval-status .state-dot{width:9px;height:9px;border-radius:50%;background:var(--warn);margin-top:5px;flex:none} + .approval-status.ok .state-dot{background:var(--ok)} + .approval-status span{font-size:12px} + .approval-status small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px} /* Éxito */ .success-wrap{max-width:660px;margin:30px auto;text-align:center} @@ -375,6 +398,18 @@ .aging-cell.warm .aging-val{color:var(--warn-ink)} .aging-total{background:var(--crema);border-left:1px solid var(--linea-2)} + /* Cobranza · pagos detectados y reglas de recordatorio */ + .sync-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--ok-ink);background:var(--ok-bg);border-radius:99px;padding:4px 12px;white-space:nowrap} + .sync-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:syncPulse 2s infinite} + @keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.35}} + .regla{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--linea)} + .regla:last-child{border-bottom:none} + .regla-d{font-weight:700;font-size:11.5px;min-width:46px;text-align:center;background:var(--crema);border:1px solid var(--linea-2);border-radius:8px;padding:6px 4px;flex:none;font-variant-numeric:tabular-nums} + .regla-txt{flex:1;font-size:12.5px;line-height:1.45} + .regla-txt small{display:block;font-size:11px;color:var(--muted);font-weight:300} + .regla .chip{flex:none} + .regla.off{opacity:.55} + .empty-state{text-align:center;padding:38px 20px;color:var(--muted)} .empty-state .es-ico{width:52px;height:52px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 12px} .empty-state .es-ico svg{width:24px;height:24px} @@ -396,6 +431,66 @@ .mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px} .flex{display:flex;align-items:center;gap:10px} .spread{display:flex;align-items:center;justify-content:space-between;gap:14px} + + /* ============ Adaptación progresiva ============ */ + @media (max-width:1200px){ + .app{grid-template-columns:220px 1fr} + .content{padding:24px 24px 50px} + .grid4{grid-template-columns:repeat(2,1fr)} + .aging-card{min-width:980px} + .card:has(.aging-card){overflow-x:auto!important} + .topbar{padding-inline:24px} + } + @media (max-width:900px){ + body{font-size:13px} + .app{display:block} + .sidebar{position:static;height:auto;padding:14px;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;align-items:center} + .brand{width:100%;padding:0 4px 12px;margin-bottom:5px} + .logo-mark{width:180px} + .nav-label{display:none} + .nav-item{padding:8px 10px;margin:0;font-size:11.5px} + .nav-item svg{width:15px;height:15px} + .bind-status{margin:7px 0 0;width:100%} + .user-chip{display:none} + .topbar{position:static;padding:10px 16px;align-items:flex-start;flex-wrap:wrap} + .crumbs>span:first-child,.top-right>.pill:last-child{display:none} + .top-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end} + .content{padding:20px 16px 42px} + .view-title{font-size:20px} + .grid2,.grid3,.grid4,.send-layout,.pay-opt{grid-template-columns:1fr;display:grid} + .content [style*="grid-template-columns"]{grid-template-columns:1fr!important} + .dashboard-charts>*{min-width:0} + .bars{gap:10px} + .bar-val{font-size:9px} + .stepper{overflow-x:auto} + .step{min-width:175px} + .ticket-ribbon{flex-wrap:wrap} + .ticket-ribbon .sep{display:none} + .ticket-ribbon [style*="margin-left:auto"]{margin-left:0!important} + .att-item{grid-template-columns:auto minmax(0,1fr) auto} + .att-meta{grid-column:2;grid-row:2;grid-template-columns:auto auto;justify-content:start} + .att-go{grid-column:3;grid-row:1/3} + .filters{align-items:stretch} + .search-box{margin-left:0;width:100%} + .search-box input{width:100%} + .tbl{min-width:760px} + .card:has(.tbl){overflow-x:auto!important} + .doc{padding:22px 20px} + .wiz-foot{align-items:stretch;flex-direction:column} + .wiz-foot>.flex{flex-wrap:wrap} + } + @media (max-width:560px){ + .grid4{grid-template-columns:1fr} + .proto-banner{font-size:10px;padding:0 10px;text-align:center} + .nav-item{flex:1 1 46%} + .nav-num{display:none} + .top-right{width:100%;margin-left:0;justify-content:flex-start} + .top-right>.pill{display:none} + .sync-context{width:100%;white-space:normal} + .money-split{grid-template-columns:1fr} + .dl{grid-template-columns:1fr} + .card-pad{padding:18px} + } @@ -411,18 +506,18 @@