/* dashboard.css — Dashboards cliente y partner (diseño DM Sans) */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── Base overlay ── */
.dash-overlay{
  position:fixed; inset:0; background:#f8f8f6; z-index:700;
  overflow-y:auto; display:none; flex-direction:column;
  font-family:'DM Sans',sans-serif;
}
.dash-overlay.open{ display:flex }

/* ── Topbar ── */
.dash-nav{
  background:#0a0a0a; height:56px; display:flex; align-items:center;
  justify-content:space-between; padding:0 2rem;
  position:sticky; top:0; z-index:10; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dash-nav-l{ display:flex; align-items:center; gap:14px }
.dash-logo-sq{
  width:30px; height:30px; background:white; border-radius:5px;
  display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#0a0a0a;
}
.dash-nav-title{ color:white; font-size:13px; font-weight:600; letter-spacing:-.2px }
.dash-nav-sub{
  color:rgba(255,255,255,.3); font-size:11px;
  background:rgba(255,255,255,.07); padding:2px 8px; border-radius:10px; margin-left:4px;
}
.dash-nav-r{ display:flex; align-items:center; gap:8px }
.dash-close-btn{
  background:rgba(255,255,255,.07); border:none; color:rgba(255,255,255,.6);
  padding:6px 14px; border-radius:6px; font-size:12px; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:all .2s;
}
.dash-close-btn:hover{ background:rgba(255,255,255,.12); color:white }
.dash-salir-btn{
  background:transparent; border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.4); padding:6px 14px; border-radius:6px;
  font-size:12px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s;
}
.dash-salir-btn:hover{ border-color:rgba(255,255,255,.4); color:white }

/* ── Layout ── */
.dash-body{ display:flex; flex:1; min-height:0 }
.dash-sidebar{
  width:200px; background:white; border-right:1px solid #ebebeb;
  flex-shrink:0; padding:1.25rem 0; display:flex; flex-direction:column;
}
.dash-menu-group{ padding:.375rem .75rem .125rem; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:#c0c0c0; font-weight:600; margin-top:.5rem }
.dash-menu-item{
  display:flex; align-items:center; gap:9px; padding:.625rem .875rem .625rem 1rem;
  font-size:12.5px; color:#6a6a6a; cursor:pointer; transition:all .15s;
  border-left:2px solid transparent; margin:1px .5rem; border-radius:6px;
}
.dash-menu-item:hover{ color:#0a0a0a; background:#f5f5f5 }
.dash-menu-item.active{ color:#0a0a0a; font-weight:700; background:#f0f0f0; border-left-color:#0a0a0a }
.dash-menu-icon{ width:14px; height:14px; flex-shrink:0; opacity:.7 }
.dash-menu-item.active .dash-menu-icon{ opacity:1 }
.dash-content{ flex:1; overflow-y:auto; padding:2rem 2.5rem }

/* ── Sección header ── */
.dash-section-header{ margin-bottom:2rem }
.dash-section-title{ font-size:1.25rem; font-weight:700; color:#0a0a0a; letter-spacing:-.5px }
.dash-section-sub{ font-size:13px; color:#a0a0a0; margin-top:.25rem }

/* ── Hero stat cards ── */
.dc-hero{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem }
.dc-hero-card{
  background:white; border:1px solid #ebebeb; border-radius:14px;
  padding:1.5rem; position:relative; overflow:hidden; transition:transform .2s;
}
.dc-hero-card:hover{ transform:translateY(-2px) }
.dc-hero-card.dark{ background:#0a0a0a; border-color:#0a0a0a }
.dc-hero-accent{ position:absolute; top:0; left:0; right:0; height:2px }
.dc-hero-icon{ width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:16px }
.dc-hero-val{ font-size:2rem; font-weight:800; color:#0a0a0a; letter-spacing:-1.5px; line-height:1; margin-bottom:.25rem; font-family:'DM Mono',monospace }
.dark .dc-hero-val{ color:white }
.dc-hero-label{ font-size:12px; color:#a0a0a0; font-weight:500 }
.dark .dc-hero-label{ color:rgba(255,255,255,.4) }
.dc-hero-trend{ position:absolute; top:1.25rem; right:1.25rem; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px }
.trend-up{ background:#dcfce7; color:#166534 }
.trend-neutral{ background:#f3f4f6; color:#6b7280 }

/* ── Tablas ── */
.dash-table-wrap{ background:white; border:1px solid var(--g2); border-radius:12px; overflow:hidden }
.dash-table{ width:100%; border-collapse:collapse; font-size:13px }
.dash-table th{ background:var(--g1); padding:.75rem 1rem; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); font-weight:600; border-bottom:1px solid var(--g2) }
.dash-table td{ padding:.875rem 1rem; border-bottom:1px solid var(--g2); color:var(--k2); vertical-align:middle }
.dash-table tr:last-child td{ border-bottom:none }
.dash-table tr:hover td{ background:#fafafa }

.dc-table-wrap{ background:white; border:1px solid #ebebeb; border-radius:14px; overflow:hidden }
.dc-table-head{ padding:1rem 1.25rem; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between }
.dc-table-title{ font-size:13px; font-weight:700; color:#0a0a0a }
.dc-table{ width:100%; border-collapse:collapse; font-size:12.5px }
.dc-table th{ background:#fafafa; padding:.625rem 1.25rem; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#b0b0b0; font-weight:600; border-bottom:1px solid #f0f0f0 }
.dc-table td{ padding:.875rem 1.25rem; border-bottom:1px solid #f5f5f5; color:#3a3a3a; vertical-align:middle }
.dc-table tr:last-child td{ border-bottom:none }
.dc-table tr:hover td{ background:#fafafa }

/* ── Estado badges ── */
.estado-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600 }
.estado-pendiente{ background:#fff3cd; color:#856404 }
.estado-confirmado{ background:#cff4fc; color:#055160 }
.estado-en_preparacion{ background:#e2d9f3; color:#432874 }
.estado-despachado{ background:#d1ecf1; color:#0c5460 }
.estado-entregado{ background:#d4edda; color:#155724 }
.estado-cancelado{ background:#f8d7da; color:#721c24 }

.eb2{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:600 }
.eb2::before{ content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.eb2-pendiente{ background:#fef9ee; color:#92400e } .eb2-pendiente::before{ background:#f59e0b }
.eb2-confirmado{ background:#eff6ff; color:#1e40af } .eb2-confirmado::before{ background:#3b82f6 }
.eb2-en_preparacion{ background:#faf5ff; color:#6b21a8 } .eb2-en_preparacion::before{ background:#a855f7 }
.eb2-despachado{ background:#f0fdf4; color:#166534 } .eb2-despachado::before{ background:#22c55e }
.eb2-entregado{ background:#f0fdf4; color:#166534; font-weight:700 } .eb2-entregado::before{ background:#16a34a }
.eb2-cancelado{ background:#fef2f2; color:#991b1b } .eb2-cancelado::before{ background:#ef4444 }

/* ── Timeline ── */
.timeline{ display:flex; flex-direction:column; gap:0 }
.tl-item{ display:flex; gap:14px; padding-bottom:1.25rem; position:relative }
.tl-item:not(:last-child)::before{ content:''; position:absolute; left:11px; top:24px; bottom:0; width:1px; background:linear-gradient(#e0e0e0,transparent) }
.tl-dot{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; border:2px solid #e0e0e0; background:white; color:#c0c0c0; transition:all .3s }
.tl-dot.done{ background:#0a0a0a; border-color:#0a0a0a; color:white }
.tl-dot.current{ background:white; border-color:#0a0a0a; color:#0a0a0a; box-shadow:0 0 0 4px rgba(10,10,10,.08) }
.tl-content{ flex:1; padding-top:2px }
.tl-title{ font-size:13px; font-weight:600; color:#0a0a0a }
.tl-title.pending{ color:#c0c0c0; font-weight:400 }
.tl-date{ font-size:11px; color:#a0a0a0; margin-top:2px; font-family:'DM Mono',monospace }

/* ── Documentos ── */
.doc-card{ display:flex; align-items:center; gap:12px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px; padding:.875rem 1rem; transition:all .2s }
.doc-card:hover{ background:white; border-color:#e0e0e0; box-shadow:0 2px 8px rgba(0,0,0,.06) }
.doc-icon{ width:38px; height:38px; border-radius:8px; background:#0a0a0a; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px }
.doc-info{ flex:1 }
.doc-name{ font-size:12.5px; font-weight:600; color:#0a0a0a }
.doc-type{ font-size:10.5px; color:#a0a0a0; text-transform:uppercase; letter-spacing:.5px; margin-top:1px }
.doc-btn{ background:#0a0a0a; color:white; border:none; padding:6px 14px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s }
.doc-btn:hover{ background:#1a1a1a }

/* ── Referidos ── */
.ref-code-card{ background:#0a0a0a; border-radius:14px; padding:1.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem }
.ref-code-val{ font-size:1.4rem; font-weight:700; color:white; letter-spacing:3px; font-family:'DM Mono',monospace }
.ref-pct-display{ text-align:center; background:rgba(255,255,255,.07); border-radius:10px; padding:.875rem 1.5rem }
.ref-pct-num{ font-size:2rem; font-weight:800; color:white; letter-spacing:-1px; line-height:1 }
.ref-pct-label{ font-size:10px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:1px; margin-top:2px }
.ref-tramo-bar{ background:white; border-radius:12px; padding:1.25rem; margin-bottom:1rem }
.ref-tramo-progress{ height:6px; background:#f0f0f0; border-radius:3px; margin:.75rem 0; overflow:hidden }
.ref-tramo-fill{ height:100%; background:#0a0a0a; border-radius:3px; transition:width .6s ease }
.ref-step{ display:flex; align-items:center; gap:10px; padding:.625rem 0; border-bottom:1px solid #f5f5f5 }
.ref-step:last-child{ border-bottom:none }
.ref-step-pct{ font-size:1.1rem; font-weight:800; color:#0a0a0a; width:44px; font-family:'DM Mono',monospace }
.ref-step-label{ font-size:12px; color:#6a6a6a; flex:1 }
.ref-step-badge{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px }

/* ── Partner KPI ── */
.partner-kpi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem }
.partner-kpi{ background:white; border:1px solid #ebebeb; border-radius:12px; padding:1.25rem }
.partner-kpi-val{ font-size:1.6rem; font-weight:800; color:#0a0a0a; letter-spacing:-1px; font-family:'DM Mono',monospace }
.partner-kpi-label{ font-size:11px; color:#a0a0a0; text-transform:uppercase; letter-spacing:.5px; margin-top:.25rem }

/* ── Perfil ── */
.perfil-card{ background:white; border:1px solid var(--g2); border-radius:12px; padding:2rem; max-width:500px }
.perfil-avatar{ width:64px; height:64px; background:var(--k); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.5rem; font-weight:700; margin-bottom:1.25rem }
.perfil-field{ margin-bottom:12px }
.perfil-field label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); margin-bottom:4px }
.perfil-val{ font-size:14px; color:var(--k); font-weight:500 }

/* ── Pedido detail ── */
.pedido-detail-wrap{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:800; align-items:center; justify-content:center; padding:1.5rem }
.pedido-detail-wrap.open{ display:flex }
.pedido-detail-box{ background:white; border-radius:16px; max-width:580px; width:100%; max-height:88vh; overflow-y:auto }
.pd-head{ padding:1.25rem 1.5rem; border-bottom:1px solid var(--g2); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:white; border-radius:16px 16px 0 0 }
.pd-head h3{ font-size:15px; font-weight:700; color:var(--k) }
.pd-body{ padding:1.5rem }
.pd-section-label{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--g4); font-weight:600; margin-bottom:.75rem }
.pd-items{ display:flex; flex-direction:column; gap:6px; margin-bottom:1.25rem }
.pd-item{ display:flex; justify-content:space-between; font-size:13px; color:var(--k2); padding:6px 0; border-bottom:1px solid var(--g2) }
.pd-item:last-child{ border-bottom:none }
.pd-total-row{ display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:var(--k); padding-top:.75rem; border-top:1px solid var(--g2) }

/* ── Empty state ── */
.dash-empty{ text-align:center; padding:4rem 2rem; color:var(--g4) }
.dash-empty-icon{ font-size:3rem; opacity:.3; margin-bottom:1rem }
.dash-empty-title{ font-size:15px; font-weight:600; color:var(--k); margin-bottom:.5rem }
.dash-empty-sub{ font-size:13px; color:var(--g4); line-height:1.6 }

/* ── Perfil tabs ── */
.dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem }
.dash-stat{ background:white; border:1px solid var(--g2); border-radius:12px; padding:1.25rem }
.dash-stat-n{ font-size:1.8rem; font-weight:800; color:var(--k); letter-spacing:-1px; line-height:1 }
.dash-stat-l{ font-size:11px; color:var(--g4); text-transform:uppercase; letter-spacing:.5px; margin-top:.25rem }

/* ── Badges de estados nuevos (flujo Mercado Pago) ───────────── */
.eb2-pendiente_pago        { background:#fef9ee; color:#92400e } .eb2-pendiente_pago::before        { background:#f59e0b }
.eb2-procesando            { background:#eff6ff; color:#1e40af } .eb2-procesando::before            { background:#3b82f6 }
.eb2-pendiente_acreditacion{ background:#fffbeb; color:#854d0e } .eb2-pendiente_acreditacion::before{ background:#eab308 }
.eb2-aprobado              { background:#eff6ff; color:#1e40af } .eb2-aprobado::before              { background:#3b82f6 }
.eb2-rechazado             { background:#fef2f2; color:#991b1b } .eb2-rechazado::before             { background:#ef4444 }
.eb2-refundeado            { background:#fef2f2; color:#991b1b } .eb2-refundeado::before            { background:#f97316 }

/* ── Estado "failed" en la timeline (etapa que se rompió, ej. pago rechazado) ── */
.tl-dot.failed   { background:#fef2f2; border-color:#ef4444; color:#991b1b }
.tl-title.failed { color:#991b1b; font-weight:600 }