/* ---- bloque 1 ---- */
/* ===== MAVIN TRADE (registro de campo) ===== */

:root{
  --red:#E8192C;
  --navy:#0D1B4B;
  --bg:#F4F6FA;
  --white:#FFFFFF;
  --gray:#6B7280;
  --light:#E5E7EB;
  --success:#16A34A;
  --warn:#D97706;
  --danger:#DC2626;
  --radius:16px;
  --radius-sm:11px;
  --radius-lg:22px;
  --border:rgba(13,27,75,0.07);
  --shadow:0 1px 2px rgba(13,27,75,0.04),0 10px 24px -8px rgba(13,27,75,0.14);
  --shadow-sm:0 1px 3px rgba(13,27,75,0.06);
  --shadow-lg:0 20px 44px -12px rgba(13,27,75,0.24);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;background:var(--bg);color:#1A1A2E;min-height:100vh;-webkit-font-smoothing:antialiased}
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}

/* HEADER */
.header{background:linear-gradient(135deg,var(--navy) 0%,#16225E 100%);color:var(--white);padding:18px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(13,27,75,.18)}
.header .back{background:rgba(255,255,255,.1);border:none;color:var(--white);font-size:20px;cursor:pointer;padding:5px 10px;border-radius:10px;transition:background .15s var(--ease)}
.header .back:active{background:rgba(255,255,255,.22)}
.header .upload-btn{background:rgba(255,255,255,.1);border:none;color:var(--white);font-size:18px;cursor:pointer;padding:5px 10px;border-radius:10px;margin-left:auto}
.header h1{font-size:18px;font-weight:700;flex:1;letter-spacing:-.2px}
.logo-svg{display:flex;align-items:center;gap:6px}

/* CONTENT */
.content{flex:1;padding:20px 16px 28px;overflow-y:auto}

/* HOME */
.home-logo{text-align:center;padding:36px 0 26px}
.home-logo svg{width:120px;height:80px;filter:drop-shadow(0 6px 16px rgba(13,27,75,.15))}
.home-title{font-size:12.5px;color:var(--gray);letter-spacing:2.5px;text-transform:uppercase;margin-top:10px;font-weight:600}
.home-cards{display:flex;flex-direction:column;gap:12px}
.home-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;display:flex;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--border);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.home-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.home-card:active{transform:translateY(0) scale(.98);border-color:var(--red)}
.home-card .icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(13,27,75,.04)}
.home-card .icon.red{background:linear-gradient(135deg,#FEE2E2,#FEF0F0)}
.home-card .icon.navy{background:linear-gradient(135deg,#E0E7FF,#EEF1FF)}
.home-card .icon.green{background:linear-gradient(135deg,#DCFCE7,#EEFCF3)}
.home-card .icon.gold{background:linear-gradient(135deg,#FEF3C7,#FFF8E1)}
.home-card .info h2{font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.1px}
.home-card .info p{font-size:12.5px;color:var(--gray);margin-top:3px;line-height:1.4}
.home-card .arrow{margin-left:auto;color:var(--light);font-size:18px;transition:transform .18s var(--ease)}
.home-card:hover .arrow{transform:translateX(3px);color:var(--gray)}

/* PANEL DE REPARTO (solo lectura) */
.reparto-hint{font-size:12px;color:var(--gray);margin-bottom:14px;line-height:1.4}
.rep-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:box-shadow .18s var(--ease)}
.rep-card:hover{box-shadow:var(--shadow-lg)}
.rep-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rep-name{font-weight:700;color:var(--navy);font-size:15px}
.rep-meta{font-size:12px;color:var(--gray);margin-top:2px}
.rep-pct{font-weight:800;color:var(--navy);font-size:18px;flex-shrink:0}
.rep-progress-wrap{height:7px;background:var(--light);border-radius:6px;margin-top:10px;overflow:hidden}
.rep-progress-bar{height:100%;background:linear-gradient(90deg,var(--red),#ff4d5e);border-radius:6px;transition:width .3s var(--ease)}
.rep-stops{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.rep-card.expanded .rep-stops{display:block}
.rep-stop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;font-size:12.5px;border-bottom:1px dashed var(--border)}
.rep-stop:last-child{border-bottom:none}
.rep-stop-pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.prom-stop-detail{padding:10px 0;border-bottom:1px dashed var(--border)}
.prom-stop-detail:last-child{border-bottom:none}
.prom-stop-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prom-stop-name{font-size:13px;font-weight:600;color:var(--navy)}
.prom-obs{font-size:12px;color:var(--gray);margin-top:4px;line-height:1.4}
.prom-tarea-row{font-size:11.5px;color:var(--gray);margin-top:2px}
.prom-fotos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.prom-foto{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.prom-hint-btn-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.export-btn{background:linear-gradient(135deg,var(--navy),#16225E);color:var(--white);border:none;border-radius:100px;padding:16px;font-size:14.5px;font-weight:700;width:100%;cursor:pointer;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px -8px rgba(13,27,75,.4);transition:transform .15s var(--ease),box-shadow .15s var(--ease);letter-spacing:.2px}
.export-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(13,27,75,.45)}
.export-btn:active{transform:translateY(0);opacity:.9}
.day-summary{background:var(--white);border-radius:var(--radius-lg);padding:16px 8px;margin-bottom:16px;display:flex;box-shadow:var(--shadow);border:1px solid var(--border)}
.day-stat{text-align:center;flex:1;position:relative}
.day-stat+.day-stat:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--light)}
.day-stat .n{font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.day-stat .l{font-size:10.5px;color:var(--gray);margin-top:3px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}

/* FORMS */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:7px;letter-spacing:.1px}
.field select,.field input[type=text],.field input[type=number],.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--light);border-radius:12px;font-size:15px;background:var(--white);color:#1A1A2E;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);font-family:inherit}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3.5px rgba(13,27,75,.1)}
.field textarea{resize:none;font-family:inherit}
.char-count{font-size:11px;color:var(--gray);text-align:right;margin-top:4px}

/* BUSCADOR DE CLIENTES (nombre o ID) — reemplaza el <select> con todos los clientes */
.picker-wrap{position:relative}
.picker-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--white);border:1.5px solid var(--light);border-radius:12px;box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;z-index:50}
.picker-opt{padding:11px 14px;font-size:14px;color:#1A1A2E;cursor:pointer;border-bottom:1px solid var(--border)}
.picker-opt:last-child{border-bottom:none}
.picker-opt:active{background:var(--bg)}
.picker-opt-id{color:var(--gray);font-size:12px;font-family:'DM Mono',monospace}
.picker-empty{padding:11px 14px;font-size:13px;color:var(--gray)}
.picker-vendedor-view{width:100%;padding:12px 14px;border:1.5px solid var(--light);border-radius:12px;font-size:15px;background:var(--bg);color:#1A1A2E}
.picker-vendedor-view.vacio{color:var(--gray);font-style:italic}

/* ACUERDO ITEMS */
.acuerdo-item{background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.acuerdo-item .info{flex:1}
.acuerdo-item .cat{font-size:14px;font-weight:700;color:var(--navy)}
.acuerdo-item .val{font-size:12px;color:var(--gray);margin-top:2px}
.toggle{position:relative;width:50px;height:28px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--light);border-radius:14px;cursor:pointer;transition:background .2s var(--ease)}
.toggle input:checked+.toggle-track{background:var(--success)}
.toggle-track:before{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .2s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-track:before{transform:translateX(22px)}
.toggle-label{font-size:11px;font-weight:600;margin-left:4px;color:var(--gray)}
.toggle input:checked~.toggle-label{color:var(--success)}

/* ANALYSIS BOX */
.analysis-box{background:linear-gradient(135deg,var(--navy),#16225E);color:var(--white);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:0 14px 30px -10px rgba(13,27,75,.35)}
.analysis-box .pct{font-size:32px;font-weight:800;letter-spacing:-.5px}
.analysis-box .pct span{font-size:15px;font-weight:500;opacity:.65}
.analysis-box .texto{font-size:13px;margin-top:6px;opacity:.85;line-height:1.5}
.analysis-box .bar{background:rgba(255,255,255,.16);border-radius:5px;height:7px;margin-top:12px;overflow:hidden}
.analysis-box .bar-fill{height:7px;border-radius:5px;background:var(--red);transition:width .4s var(--ease)}

/* SCORES */
.score-item{background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.score-item .cat{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px}
.stars{display:flex;gap:7px;flex-wrap:wrap}
.stars button{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--light);background:var(--white);font-size:14.5px;font-weight:700;cursor:pointer;transition:all .15s var(--ease);color:var(--gray)}
.stars button.active{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 4px 10px -2px rgba(13,27,75,.4)}

/* VENDEDOR ANALYSIS */
.vend-analysis{background:var(--white);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--border)}
.vend-analysis .avg{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.4px}
.vend-analysis .avg-label{font-size:12.5px;color:var(--gray);margin-bottom:14px;font-weight:600}
.criteria-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--light);font-size:13px}
.criteria-row:last-child{border:none}
.criteria-row .name{color:var(--gray);flex:1}
.criteria-row .score{font-weight:800;color:var(--navy)}

/* PARTICIPACION */
.part-item{background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.part-item label{font-size:13px;font-weight:700;color:var(--navy);display:block;margin-bottom:4px}
.part-item .desc{font-size:11px;color:var(--gray);margin-bottom:8px}
.part-row{display:flex;align-items:center;gap:10px}
.part-row input{flex:1;padding:10px 12px;border:1.5px solid var(--light);border-radius:10px;font-size:15px;text-align:center;transition:border-color .15s var(--ease)}
.part-row input:focus{outline:none;border-color:var(--navy)}
.part-row .unit{font-size:13px;color:var(--gray);font-weight:700;min-width:20px}

/* PHOTO */
.photo-area{background:var(--white);border-radius:var(--radius-lg);border:2px dashed var(--light);padding:26px;text-align:center;cursor:pointer;margin-bottom:16px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.photo-area:hover{border-color:var(--navy);background:#FAFBFF}
.photo-area img{max-width:100%;border-radius:12px;margin-top:12px;box-shadow:var(--shadow-sm)}
.photo-area .ph-icon{font-size:34px;color:var(--light)}
.photo-area p{font-size:13px;color:var(--gray);margin-top:8px}
input[type=file]{display:none}

/* SAVE BTN */
.save-btn{background:linear-gradient(135deg,var(--red),#F0384A);color:var(--white);border:none;border-radius:var(--radius);padding:16px;font-size:15.5px;font-weight:700;width:100%;cursor:pointer;margin-top:4px;letter-spacing:.3px;box-shadow:0 12px 26px -8px rgba(232,25,44,.45);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.save-btn:hover{transform:translateY(-1px)}
.save-btn:active{transform:translateY(0);opacity:.92}
.save-btn:disabled{background:var(--light);color:var(--gray);box-shadow:none;cursor:default;transform:none}

/* SECTION TITLE */
.section-title{font-size:12.5px;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:1.2px;margin:22px 0 12px}

/* TOAST */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(6px);background:var(--navy);color:white;padding:13px 24px;border-radius:100px;font-size:13.5px;font-weight:600;z-index:999;opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none;white-space:nowrap;box-shadow:0 14px 30px -8px rgba(13,27,75,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sync-warn-stack{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:998;display:flex;flex-direction:column-reverse;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.sync-warn-item{display:flex;align-items:flex-start;gap:8px;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:10px 12px;border-radius:12px;font-size:12.5px;font-weight:600;box-shadow:0 14px 30px -10px rgba(146,64,14,.35);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:auto;width:100%}
.sync-warn-item.show{opacity:1;transform:translateY(0)}
.sync-warn-item span{flex:1;line-height:1.35}
.sync-warn-item button{background:none;border:none;color:#92400E;opacity:.6;font-size:14px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
.sync-warn-item button:hover{opacity:1}

/* UPDATE BANNER (nueva versión de la app disponible) */
.update-banner{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,var(--navy),#16225E);color:#fff;padding:12px 16px;font-size:13px;font-weight:600;box-shadow:0 8px 24px -6px rgba(13,27,75,.4);transform:translateY(-100%);transition:transform .3s var(--ease)}
.update-banner.show{transform:translateY(0)}
.update-banner .ub-text{display:flex;align-items:center;gap:8px}
.update-banner .ub-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;animation:live-pulse 1.5s infinite}
.update-banner button{background:var(--red);color:#fff;border:none;border-radius:100px;padding:7px 16px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s var(--ease)}
.update-banner button:hover{transform:translateY(-1px)}
.update-banner button:disabled{opacity:.7;cursor:default;transform:none}

/* CLIENTE INFO */
.cliente-info{background:var(--white);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--border)}
.cliente-info .vendedor{font-size:12.5px;color:var(--gray)}
.cliente-info .nombre{font-size:16px;font-weight:700;color:var(--navy)}

/* OBJETIVOS MENSUALES */
.obj-card{background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.obj-card .titulo{font-size:14px;font-weight:700;color:var(--navy)}
.obj-card .meta{font-size:12px;color:var(--gray);margin:2px 0 10px}
.obj-bar-bg{background:var(--light);border-radius:5px;height:8px;overflow:hidden}
.obj-bar-fill{height:8px;border-radius:5px;background:var(--red);transition:width .4s var(--ease)}
.obj-empty{text-align:center;padding:32px 16px;color:var(--gray);font-size:14px}

/* OBJETIVOS: LISTADO DE CLIENTES QUE LOGRARON */
.logged-group{margin-bottom:14px}
.logged-title{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.logged-item{background:var(--white);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#1A1A2E;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.del-btn{background:none;border:none;color:var(--danger);font-size:16px;font-weight:700;cursor:pointer;padding:2px 8px;line-height:1}

/* ACUERDOS: alternar Nuevo/Ver + tarjetas con detalle por categoría */
.ac-mode-tabs{display:flex;gap:6px;background:var(--light);padding:4px;border-radius:14px;margin-bottom:18px}
.ac-mode-tab{flex:1;border:none;background:none;padding:11px 8px;border-radius:11px;font-size:13.5px;font-weight:700;color:var(--gray);cursor:pointer;transition:all .15s var(--ease)}
.ac-mode-tab.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm)}

.ac-subtabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.ac-subtab{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1.5px solid var(--light);background:var(--white);padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--gray);cursor:pointer;white-space:nowrap;transition:all .15s var(--ease)}
.ac-subtab.active{border-color:var(--navy);background:var(--navy);color:var(--white)}
.ac-subtab-count{background:var(--light);color:var(--navy);font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.ac-subtab.active .ac-subtab-count{background:rgba(255,255,255,.25);color:var(--white)}

.ac-list{display:flex;flex-direction:column;gap:12px}
.ac-card{background:var(--white);border-radius:var(--radius-lg);padding:17px;box-shadow:var(--shadow);border:1px solid var(--border);transition:box-shadow .18s var(--ease)}
.ac-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.ac-card-cliente{font-size:15px;font-weight:700;color:var(--navy);line-height:1.3}
.ac-card-sub{font-size:12px;color:var(--gray);margin-top:2px}
.ac-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.ac-badge.ok{background:#DCFCE7;color:var(--success)}
.ac-badge.mid{background:#FEF3C7;color:var(--warn)}
.ac-badge.low{background:#FEE2E2;color:var(--danger)}
.ac-progress{height:7px;border-radius:99px;background:var(--light);overflow:hidden;margin-bottom:8px}
.ac-progress>div{height:100%;border-radius:99px;transition:width .4s var(--ease)}
.ac-card-meta{font-size:12px;color:var(--gray);margin-bottom:10px}
.ac-chip-grid{display:flex;flex-wrap:wrap;gap:7px;padding-top:10px;border-top:1px dashed var(--light);margin-bottom:10px}
.ac-chip{display:flex;flex-direction:column;padding:6px 10px;border-radius:10px;font-size:12px;line-height:1.35;min-width:72px}
.ac-chip-name{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.75}
.ac-chip-val{font-weight:700;font-size:13px}
.ac-chip-obj{font-size:10px;opacity:.7}
.ac-chip.ok{background:#DCFCE7;color:var(--success)}
.ac-chip.low{background:#FEE2E2;color:var(--danger)}
.ac-chip.neutral{background:var(--bg);color:var(--navy)}
.ac-card-obs{font-size:12.5px;color:#1A1A2E;background:var(--bg);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-style:italic}
.ac-owner{display:inline-flex;font-size:11px;color:var(--gray);background:var(--bg);padding:3px 9px;border-radius:999px}
.ac-owner.mine{background:#DCFCE7;color:var(--success)}


/* ---- bloque 2 ---- */
/* ===== DASHBOARD COMERCIAL (analitica) ===== */

  #app-dashboard {
    --mavin-red: #E8112D;
    --mavin-purple: #2D0E5C;
    --mavin-red-soft: rgba(232,17,45,0.12);
    --mavin-purple-soft: rgba(45,14,92,0.15);
    --bg: #F4F5F7;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --border: #E2E5EC;
    --border-soft: #EEF0F4;
    --text: #1A1D2E;
    --muted: #7B82A0;
    --muted2: #A8AEBE;
    --green: #00A878;
    --green-soft: rgba(0,168,120,0.1);
    --red: var(--mavin-red);
    --red-soft: var(--mavin-red-soft);
    --purple: var(--mavin-purple);
    --purple-soft: var(--mavin-purple-soft);
    --gold: #D4900A;
    --gold-soft: rgba(212,144,10,0.1);
    --shadow: 0 2px 12px rgba(45,14,92,0.07);
    --shadow-md: 0 4px 20px rgba(45,14,92,0.1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  #app-dashboard {
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* HEADER */
  header {
    background: var(--mavin-purple);
    padding: 14px 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .header-left { display: flex; align-items: center; gap: 12px; }
  .logo-icon {
    display: flex; align-items: center; gap: 0;
    flex-shrink: 0;
  }
  .logo-tri-l {
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid var(--mavin-red);
  }
  .logo-tri-r {
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 24px solid rgba(255,255,255,0.85);
    margin-left: -8px;
  }
  .header-text h1 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
  .header-text span { font-size: 10px; color: rgba(255,255,255,0.5); font-family: 'DM Mono', monospace; }
  .update-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    display: flex; align-items: center; gap: 6px;
  }
  .update-btn:hover { background: rgba(255,255,255,0.2); }
  .dash-back { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }

  /* NAV TABS */
  nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    padding: 0 12px;
    gap: 0;
    box-shadow: var(--shadow);
  }
  nav::-webkit-scrollbar { display: none; }
  nav button {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 13px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
  }
  nav button.active { color: var(--mavin-purple); border-bottom-color: var(--mavin-purple); }
  nav button:hover:not(.active) { color: var(--text); }

  /* MAIN */
  main { padding: 14px; max-width: 800px; margin: 0 auto; }
  .section { display: none; }
  .section.active { display: block; }

  /* CARDS */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
  }
  .card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-title .pill {
    display: inline-block;
    width: 18px; height: 4px;
    border-radius: 2px;
    background: var(--mavin-purple);
  }
  .card-title .pill.red { background: var(--mavin-red); }
  .card-title .pill.green { background: var(--green); }
  .card-title .pill.gold { background: var(--gold); }

  /* KPI GRID */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }
  .kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }
  .kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mavin-purple);
  }
  .kpi.red::before { background: var(--mavin-red); }
  .kpi.green::before { background: var(--green); }
  .kpi.gold::before { background: var(--gold); }
  .kpi .label { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
  .kpi .value { font-size: 22px; font-weight: 800; color: var(--mavin-purple); margin: 5px 0 2px; }
  .kpi.red .value { color: var(--mavin-red); }
  .kpi.green .value { color: var(--green); }
  .kpi.gold .value { color: var(--gold); }
  .kpi .sub { font-size: 11px; color: var(--muted); }

  /* RANK LIST */
  .rank-list { list-style: none; }
  .rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 6px;
    margin: 0 -6px;
    padding-left: 6px; padding-right: 6px;
  }
  .rank-item:last-child { border-bottom: none; }
  .rank-item:hover { background: var(--bg); }
  .rank-num {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;
  }
  .rank-num.top1 { background: var(--gold-soft); color: var(--gold); }
  .rank-num.top2 { background: rgba(148,163,184,0.15); color: #7B8CAD; }
  .rank-num.top3 { background: rgba(180,120,80,0.12); color: #A06040; }
  .rank-info { flex: 1; min-width: 0; }
  .rank-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  .rank-sub { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 2px; }
  .rank-val { text-align: right; flex-shrink: 0; }
  .rank-val .amount { font-size: 13px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--mavin-purple); }
  .rank-val .dev-tag { font-size: 10px; color: var(--mavin-red); font-family: 'DM Mono', monospace; font-weight: 600; }

  /* STACKED BAR */
  .stacked-bar-wrap { margin-top: 5px; }
  .stacked-bar-row { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--border-soft); }
  .bar-venta { background: var(--mavin-purple); height: 100%; transition: width 0.4s ease; }
  .bar-dev { background: var(--mavin-red); height: 100%; transition: width 0.4s ease; }
  .bar-legend { display: flex; gap: 10px; margin-top: 4px; }
  .bar-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; }
  .bar-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

  /* SEARCH */
  .search-wrap { position: relative; margin-bottom: 12px; }
  input[type=search] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    padding: 10px 14px 10px 36px;
    outline: none;
    transition: border-color 0.2s;
  }
  input[type=search]:focus { border-color: var(--mavin-purple); }
  .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; }

  /* BADGE */
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700; font-family: 'DM Mono', monospace; text-transform: uppercase;
  }
  .badge.green { background: var(--green-soft); color: var(--green); }
  .badge.red { background: var(--red-soft); color: var(--red); }
  .badge.purple { background: var(--purple-soft); color: var(--purple); }

  /* INNER TABS */
  .inner-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
  .inner-tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
    border: 1.5px solid var(--border); background: var(--bg);
    color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  }
  .tab-btn.active { background: var(--mavin-purple); color: #fff; border-color: var(--mavin-purple); }

  /* PROD ITEM */
  .prod-item { padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
  .prod-item:last-child { border-bottom: none; }
  .prod-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .prod-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--text); }
  .prod-amt { font-size: 13px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--mavin-purple); flex-shrink: 0; }
  .prod-amt.red { color: var(--mavin-red); }
  .prod-meta { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }

  /* SELLER GRID */
  .seller-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
  .seller-card {
    background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px;
    cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow);
  }
  .seller-card:hover { border-color: var(--mavin-purple); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .seller-card.active { border-color: var(--mavin-purple); background: rgba(45,14,92,0.03); }
  .seller-card .sc-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .seller-card .sc-last { font-size: 11px; color: var(--muted); }
  .seller-card .sc-venta { font-size: 18px; font-weight: 800; color: var(--mavin-purple); margin: 8px 0 2px; }
  .seller-card .sc-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .seller-card .sc-stat { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; }
  .seller-card .sc-dev { color: var(--mavin-red) !important; }
  /* Mini stacked bar on seller card */
  .sc-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--border-soft); margin-top: 8px; }

  /* CLIENT SUMMARY */
  .client-summary {
    background: linear-gradient(135deg, rgba(45,14,92,0.05) 0%, rgba(232,17,45,0.04) 100%);
    border: 1.5px solid rgba(45,14,92,0.15);
    border-radius: 14px; padding: 16px; margin-bottom: 14px;
  }
  .client-summary h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; color: var(--text); }
  .client-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cs { text-align: center; }
  .cs .v { font-size: 14px; font-weight: 800; font-family: 'DM Mono', monospace; }
  .cs .l { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
  .cs.g .v { color: var(--green); }
  .cs.r .v { color: var(--mavin-red); }
  .cs.b .v { color: var(--mavin-purple); }

  /* NEVER SOLD */
  .tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
  .tag {
    padding: 4px 10px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; font-size: 11px; font-family: 'DM Mono', monospace; color: var(--muted);
  }

  /* OPPORTUNITY BOX */
  .opp-box {
    margin-bottom: 12px; padding: 11px 14px;
    background: var(--purple-soft); border: 1px solid rgba(45,14,92,0.2);
    border-radius: 10px; font-size: 12px; color: var(--mavin-purple); font-weight: 600;
  }

  /* CLIENT PICKER */
  .client-picker-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); }
  .scroll-list { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .client-list-item {
    padding: 9px 14px; border-bottom: 1px solid var(--border-soft);
    cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text);
    transition: background 0.12s;
  }
  .client-list-item:last-child { border-bottom: none; }
  .client-list-item:hover { background: var(--bg); color: var(--mavin-purple); }
  .id-badge { display:inline-block; font-family:'DM Mono',monospace; font-size:10px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-left:6px; letter-spacing:.3px; vertical-align:middle; }

  /* EMPTY */
  .empty { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }

  /* DIVIDER LABEL */
  .section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--muted2); padding: 6px 0 10px;
  }

  /* UPLOAD MODAL */
  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(10,8,20,0.6); backdrop-filter: blur(4px);
    z-index: 200; align-items: flex-end; justify-content: center;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface); border-radius: 20px 20px 0 0;
    padding: 24px 20px 32px; width: 100%; max-width: 600px;
    box-shadow: 0 -8px 40px rgba(45,14,92,0.2);
    animation: slideUp 0.3s ease;
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal h2 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
  .modal p { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
  .drop-zone {
    border: 2px dashed var(--border); border-radius: 14px; padding: 32px 20px;
    text-align: center; cursor: pointer; transition: all 0.2s;
    background: var(--bg);
  }
  .drop-zone:hover, .drop-zone.drag-over { border-color: var(--mavin-purple); background: var(--purple-soft); }
  .drop-zone .dz-icon { font-size: 32px; margin-bottom: 10px; }
  .drop-zone p { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .drop-zone span { font-size: 12px; color: var(--muted); }
  #file-input { display: none; }
  .modal-progress { margin-top: 16px; display: none; }
  .progress-bar-bg { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 8px 0; }
  .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mavin-purple), var(--mavin-red)); border-radius: 3px; transition: width 0.3s; }
  .modal-status { font-size: 13px; color: var(--muted); text-align: center; }
  .modal-actions { display: flex; gap: 10px; margin-top: 16px; }
  .btn-cancel { flex: 1; padding: 12px; border: 1.5px solid var(--border); border-radius: 10px; background: none; color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; }
  .btn-apply { flex: 2; padding: 12px; background: var(--mavin-purple); border: none; border-radius: 10px; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; display: none; }
  .btn-apply:hover { background: #3d1480; }

  /* SELLER TOTALS TABLE */
  .seller-totals-table { width: 100%; border-collapse: collapse; }
  .seller-totals-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); padding: 6px 8px; text-align: left; border-bottom: 1.5px solid var(--border); }
  .seller-totals-table th:not(:first-child) { text-align: right; }
  .seller-totals-table td { font-size: 12px; padding: 9px 8px; border-bottom: 1px solid var(--border-soft); font-family: 'DM Mono', monospace; }
  .seller-totals-table td:first-child { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px; }
  .seller-totals-table td:not(:first-child) { text-align: right; }
  .seller-totals-table tr:last-child td { border-bottom: none; }
  .seller-totals-table .td-venta { color: var(--mavin-purple); font-weight: 700; }
  .seller-totals-table .td-dev { color: var(--mavin-red); }
  .seller-totals-table .td-pct { font-size: 11px; }
  .seller-totals-table tr:hover td { background: var(--bg); }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .animate { animation: fadeUp 0.25s ease forwards; }


/* ---- bloque 3 ---- */
/* ===== LOGIN / SETUP / ROLES / TIEMPO REAL / INFORMES ===== */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 15%,rgba(232,25,44,.07),transparent 45%),radial-gradient(circle at 85% 85%,rgba(13,27,75,.08),transparent 45%),var(--bg);padding:24px}
.auth-box{width:100%;max-width:380px}
.auth-logo{text-align:center;margin-bottom:30px}
.auth-logo svg{width:100px;height:66px;filter:drop-shadow(0 8px 20px rgba(13,27,75,.18))}
.auth-logo .sub{margin-top:12px;font-size:11.5px;letter-spacing:3.5px;color:var(--gray);font-weight:700}
.auth-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:30px 26px}
.auth-card h1{font-size:20px;color:var(--navy);font-weight:800;margin-bottom:22px;letter-spacing:-.3px}
.auth-card .field{margin-bottom:16px}
.auth-card .field label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.auth-card .field input{width:100%;padding:12px 14px;border:1.5px solid var(--light);border-radius:11px;font-size:14px;font-family:inherit;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.auth-card .field input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3.5px rgba(13,27,75,.1)}
.auth-err{background:#FEF2F2;color:var(--danger);font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:14px;display:none;font-weight:600}
.auth-btn{background:linear-gradient(135deg,var(--navy),#16225E);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;width:100%;cursor:pointer;margin-top:6px;font-family:inherit;box-shadow:0 12px 26px -8px rgba(13,27,75,.4);transition:transform .15s var(--ease)}
.auth-btn:hover{transform:translateY(-1px)}
.auth-btn:disabled{opacity:.6;box-shadow:none;transform:none}
.auth-link{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--gray);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:inherit;width:100%}

.home-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 4px 0}
.home-usuario{font-size:12.5px;color:var(--gray);font-weight:600}
.home-usuario .rol-badge{margin-left:6px;vertical-align:middle}
.home-topbar .auth-link{width:auto;margin:0}

.rol-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;display:inline-block}
.rol-badge.admin{background:#FEE2E2;color:var(--red)}
.rol-badge.usuario{background:#E0E7FF;color:var(--navy)}

/* Aviso de registros que se guardaron localmente pero todavía no llegaron a
   Supabase (por ejemplo, por un corte de sesión). Se muestra en Home hasta
   que se sincronizan solos o la persona toca "Reintentar ahora". */
.sync-pendiente-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;border-radius:12px;padding:11px 14px;margin:10px 4px 0;font-size:12.5px;font-weight:600}
.sync-pendiente-banner button{background:#92400E;color:#fff;border:none;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.sync-pendiente-banner button:disabled{opacity:.6}

.user-card{background:var(--white);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.user-card.inactivo{opacity:.55}
.user-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px}
.user-card .nombre{font-weight:700;color:var(--navy);font-size:15px}
.user-card .email{font-size:12px;color:var(--gray)}
.user-card .acciones{display:flex;gap:16px;margin-top:10px}
.user-card .acciones .auth-link{width:auto;margin:0}

.perm-table{width:100%;border-collapse:collapse;margin-top:8px}
.perm-table th{font-size:10.5px;color:var(--gray);text-align:center;padding:6px 4px;font-weight:700}
.perm-table td{padding:8px 4px;text-align:center;border-top:1px solid var(--light)}
.perm-table td:first-child,.perm-table th:first-child{text-align:left;font-size:13px;font-weight:600;color:var(--navy)}

.live-wrap{background:linear-gradient(135deg,var(--navy),#16225E);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;color:#fff;box-shadow:0 14px 30px -10px rgba(13,27,75,.35)}
.live-wrap .title{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;opacity:.75;margin-bottom:10px;display:flex;align-items:center;gap:7px;font-weight:700}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;display:inline-block;animation:live-pulse 1.5s infinite}
@keyframes live-pulse{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
.live-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.live-counters .lc{background:rgba(255,255,255,.1);border-radius:12px;padding:11px 6px;text-align:center}
.live-counters .lc .n{font-size:20px;font-weight:800}
.live-counters .lc .l{font-size:9.5px;opacity:.8;margin-top:2px}

.feed-item{background:var(--white);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm);border:1px solid var(--border);font-size:12.5px}
.feed-item .top{display:flex;justify-content:space-between;color:var(--gray);font-size:11px;margin-bottom:3px}
.feed-item .who{font-weight:700;color:var(--navy)}
.feed-empty{text-align:center;color:var(--gray);font-size:13px;padding:18px 0}

.informe-filtros .row2{display:flex;gap:10px}
.informe-filtros .row2 .field{flex:1}
.informe-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.informe-botones{display:flex;gap:10px;margin-top:6px}
.informe-botones .save-btn{flex:1}

.informe-preview{margin-top:20px}
.informe-resumen{background:linear-gradient(135deg,var(--navy),#16225E);border-radius:var(--radius-lg);padding:18px;color:#fff;margin-bottom:18px;box-shadow:0 14px 30px -10px rgba(13,27,75,.35)}
.informe-titulo{font-size:13px;opacity:.85;margin-bottom:12px;font-weight:600}
.informe-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.informe-kpis .ik{background:rgba(255,255,255,.1);border-radius:12px;padding:11px 6px;text-align:center}
.informe-kpis .ik .n{font-size:19px;font-weight:800}
.informe-kpis .ik .l{font-size:9.5px;opacity:.8;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.informe-section-title{font-size:12px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--red);padding-bottom:7px;margin:20px 0 10px}
.informe-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:6px;border:1px solid var(--light);border-radius:12px}
.informe-table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.informe-table th{background:var(--bg);color:var(--navy);text-align:left;padding:9px 10px;font-weight:800;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.informe-table td{padding:9px 10px;border-bottom:1px solid var(--light);vertical-align:top}
.informe-table tr:last-child td{border-bottom:none}
.informe-table tr:nth-child(even) td{background:#FAFAFC}

/* Fix contraste: .modal-overlay/.modal (definidos junto al módulo Dashboard
   Comercial) usan variables CSS (--surface, --text, etc.) que solo existen
   dentro de #app-dashboard. El modal de Configuración vive fuera de ese
   scope, así que esas variables quedaban indefinidas y el modal se veía
   transparente (se transparentaba lo que hubiera detrás). Le damos sus
   propios valores con las variables globales de la app (--navy/--red/etc). */
#cfg-modal-overlay .modal{background:var(--white);max-height:88vh;overflow-y:auto}
#cfg-modal-overlay .modal h2{color:var(--navy)}
#cfg-modal-overlay .btn-cancel{border-color:var(--light);color:var(--gray)}
#cfg-modal-overlay .btn-apply{background:var(--navy)}
#cfg-modal-overlay .btn-apply:hover{background:#16225c}

/* Los campos de email/contraseña no tenían el mismo estilo que el resto
   (la regla original de .field solo cubría text/number/textarea/select). */
.field input[type=email],.field input[type=password],.field input[type=date]{
  width:100%;padding:12px 14px;border:1.5px solid var(--light);border-radius:10px;
  font-size:15px;background:var(--white);color:#1A1A2E;outline:none;
  -webkit-appearance:none;appearance:none;font-family:inherit
}
.field input[type=email]:focus,.field input[type=password]:focus,.field input[type=date]:focus{border-color:var(--navy)}

.historial-import{font-size:12.5px;color:var(--gray);line-height:1.5;margin-bottom:12px}