/* ═══════════════════════════════════════════════════════════════════════
   VECTRA — Tema oscuro (vectra-tema.css)
   Aplica la imagen del rediseño (fondo oscuro en capas, superficies con
   borde hairline, montos tabulares, estados con etiqueta, emoji en cápsula)
   SOBRE las clases que las apps ya usan. No cambia flujos ni estructura:
   la barra superior se mantiene. Carga DESPUÉS de vectra-premium.css.

   Tokens tomados del handoff "Mejora gráfica Vectra apps" (vectra-ui.css).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Marca */
  --green:#27FE91; --green-dim:#16D97A; --green-dark:#04220F;
  --gray:#3C3C3B; --black:#000; --white:#fff;

  /* Superficies (variables que las apps ya usan) */
  --bg:#131614;               /* antes blanco: tarjetas y listas */
  --bg2:#161A17;              /* superficie elevada */
  --bg3:#1C211D;              /* encabezados de tabla, cápsulas */
  --canvas:#0B0C0B;           /* fondo de la app */
  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.12);
  --radius:9px; --radius-lg:14px;
  --shadow:0 1px 0 rgba(255,255,255,.02);

  /* Texto (escala de 6 pasos) */
  --text:#EDEFEB; --text2:#DCE0DA; --text3:#9BA29C; --text4:#7E857F; --text5:#565D57; --text6:#3E443F;

  /* Estados: siempre con etiqueta, nunca solo color */
  --ok:#27FE91;      --ok-bg:rgba(39,254,145,.11);  --ok-br:rgba(39,254,145,.20);
  --amber:#E3B341;   --amber-bg:rgba(227,179,65,.10); --amber-br:rgba(227,179,65,.22);
  --red:#FF8C7E;     --red-bg:rgba(226,74,58,.12);  --red-br:rgba(226,74,58,.24);
  --blue:#7FB4FF;    --blue-bg:rgba(90,150,255,.12);
  --purple:#C9A8FF;  --purple-bg:rgba(160,120,255,.12);

  /* Bloques "de tinta" (antes background:#111;color:#fff) */
  --ink-bg:#1C211D; --ink-fg:#EDEFEB;
  --on-green:#04220F;

  /* Premium: alinear su lienzo con el tema */
  --premium-canvas:#0B0C0B; --premium-surface:#131614; --premium-ink:#EDEFEB; --premium-muted:#9BA29C;
  --premium-line:rgba(255,255,255,.07); --premium-line-strong:rgba(255,255,255,.12);
  --premium-shadow:none; --premium-shadow-raised:0 18px 40px -30px rgba(0,0,0,.8);
}

/* ── Lienzo ───────────────────────────────────────────────────────────── */
html{background:var(--canvas) !important;}
body{
  background:radial-gradient(circle at 92% -12%,rgba(39,254,145,.06),transparent 28rem),var(--canvas) !important;
  color:var(--text) !important;
  font-family:Montserrat,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.main,.page,.layout{background:transparent !important;color:var(--text);}

/* ── Tipografía ───────────────────────────────────────────────────────── */
.ptitle,.page-title,.hero-greet,h1,h2{color:#fff !important;letter-spacing:-.035em !important;font-weight:700 !important;}
.psub,.sec-title{color:var(--text4) !important;}
.sec-title{font-size:9px !important;font-weight:700 !important;letter-spacing:.28em !important;text-transform:uppercase;}
label,.fl,.form-label{color:var(--text4) !important;font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;}
.hint,.help,small{color:var(--text4);}

/* Montos con dígitos alineados: regla que no se negocia */
.hito-amt,.stat-val,.stat-value,.monto,.money,.num,.amt,.total,
td,th,.tbl,.table,.hon-table,.areas-table,input[type=number],.monto-input,
[class*="monto"],[class*="total"],[class*="saldo"],[class*="amt"]{font-variant-numeric:tabular-nums;}

/* ── Barra superior (se mantiene, solo cambia el tono) ────────────────── */
.topnav{
  background:linear-gradient(90deg,#0B0C0B,#101210 55%,#0B0C0B) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
.topnav-item{color:var(--text4) !important;font-weight:600;border:1px solid transparent !important;border-radius:9px !important;}
.topnav-item:hover{background:rgba(255,255,255,.05) !important;color:#fff !important;}
.topnav-item.active{
  background:linear-gradient(90deg,rgba(39,254,145,.14),rgba(39,254,145,.03)) !important;
  border-color:rgba(39,254,145,.20) !important;
  color:#fff !important;font-weight:700;
}
.topnav-item .tico{display:inline-flex !important;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;font-size:12px;filter:saturate(.9);}
.topnav-home{border:1px solid rgba(39,254,145,.35) !important;color:var(--green) !important;background:transparent !important;}
.topnav-home:hover{background:rgba(39,254,145,.09) !important;}
.topnav-avatar{background:linear-gradient(145deg,#27FE91,#0E9459) !important;color:var(--on-green) !important;font-weight:800;box-shadow:0 0 0 3px rgba(39,254,145,.10);}
.user-menu,.topnav-dropdown-inner,.app-menu{
  background:linear-gradient(145deg,#171A18,#0E100F) !important;
  border:1px solid rgba(255,255,255,.08) !important;color:var(--text) !important;
}
.user-menu-item,.app-menu a,.app-menu button{color:var(--text2) !important;}
.user-menu-item:hover{background:rgba(255,255,255,.05) !important;color:#fff !important;}
@media(max-width:820px){ .topnav-menu{background:#0B0C0B !important;border-top:1px solid rgba(255,255,255,.06) !important;} }

/* ── Superficies ──────────────────────────────────────────────────────── */
.card,.cli-card,.est-card,.ecard,.sblock,.stat,.stat-card,.app-card,.kbox,.detalle,.admin-panel,.tw{
  background:var(--bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:none !important;
  color:var(--text);
}
.cli-card:hover,.est-card:hover,.ecard:hover,.app-card:hover{border-color:rgba(39,254,145,.34) !important;box-shadow:none !important;transform:none !important;}
.card .card,.card .kbox{background:var(--bg2) !important;}
.stat.hl,.stat-card.hl{
  background:linear-gradient(160deg,#161A17,#131614) !important;
  border-color:rgba(39,254,145,.26) !important;
  position:relative;overflow:hidden;
}
.stat.hl::before,.stat-card.hl::before{content:"";position:absolute;top:-70px;right:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(39,254,145,.13),transparent 70%);pointer-events:none;}
.stat-val,.stat-value{color:#fff !important;font-weight:700 !important;letter-spacing:-.045em !important;}
.stat.hl .stat-val,.stat-card.hl .stat-value,.stat.hl .stat-value,.stat-card.hl .stat-val{color:var(--green) !important;text-shadow:none !important;}
.stat-lbl,.stat-label,.stat-sub{color:var(--text4) !important;font-size:8.5px !important;font-weight:700 !important;letter-spacing:.24em !important;text-transform:uppercase;}
.stat-sub{text-transform:none;letter-spacing:0 !important;font-size:10.5px !important;font-weight:500 !important;}
.empty{color:var(--text4) !important;border:1px dashed rgba(255,255,255,.12) !important;border-radius:var(--radius-lg);background:transparent !important;}

/* Inicio */
.hero{background:radial-gradient(circle at 84% 10%,rgba(39,254,145,.10),transparent 24rem),linear-gradient(118deg,#0B0C0B,#131614 64%,#0B0C0B) !important;border-bottom:1px solid rgba(255,255,255,.06) !important;box-shadow:none !important;}
.hero-tag{color:var(--text4) !important;letter-spacing:.30em !important;font-size:9px !important;font-weight:700 !important;}
.hero-msg{color:var(--text4) !important;}
.hero-date,.hero-btn{background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.06) !important;color:var(--text2) !important;}
.hero-btn:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.14) !important;}
.hero-btn.green{background:var(--green) !important;color:var(--on-green) !important;border-color:var(--green) !important;box-shadow:0 6px 20px -8px rgba(39,254,145,.6) !important;font-weight:700;}
.app-ico{background:rgba(39,254,145,.10) !important;border:1px solid rgba(39,254,145,.14) !important;}
.app-ico svg{stroke:var(--green) !important;}
.app-arrow{color:var(--text5) !important;}

/* ── Emoji en cápsula, nunca sueltos ──────────────────────────────────── */
.tico,.app-emoji,.ico-emoji{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg3);line-height:1;}
.card > .tico,.cli-card .tico,.est-card .tico{width:34px;height:34px;font-size:17px;background:rgba(39,254,145,.10);}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tbl,.table,.hon-table,.areas-table,table{color:var(--text2);}
.tbl thead th,.table thead th,.hon-table thead th,.areas-table thead th,thead th{
  background:transparent !important;
  color:var(--text5) !important;
  font-size:8.5px !important;font-weight:700 !important;letter-spacing:.24em !important;text-transform:uppercase;
  border-bottom:1px solid var(--border) !important;
}
td{border-color:rgba(255,255,255,.05) !important;}
tbody tr:hover td,.tbl tbody tr:hover td,.table tbody tr:hover td{background:rgba(255,255,255,.02) !important;}
tr.total td,.fila-total td,.v-list-total{background:linear-gradient(90deg,rgba(39,254,145,.08),transparent) !important;color:var(--green) !important;font-weight:700;}

/* ── Controles ────────────────────────────────────────────────────────── */
.btn,button.btn,.hero-btn{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:var(--text2) !important;
  border-radius:9px !important;box-shadow:none !important;
  font-weight:600;transition:background .14s,border-color .14s !important;
}
.btn:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.14) !important;color:#fff !important;transform:none !important;}
.btn.primary,.btn-primary{
  background:var(--green) !important;border-color:var(--green) !important;color:var(--on-green) !important;
  font-weight:700 !important;box-shadow:0 6px 20px -8px rgba(39,254,145,.6) !important;
}
.btn.primary:hover{filter:brightness(1.06) !important;transform:none !important;}
.btn.dark,.btn.negro{background:var(--ink-bg) !important;border-color:var(--ink-bg) !important;color:var(--ink-fg) !important;}
.btn.danger,.btn.rojo{background:var(--red-bg) !important;border-color:var(--red-br) !important;color:var(--red) !important;}
.btn.xs{font-size:10.5px;padding:3px 8px;}
.btn.ghost{background:transparent !important;border-color:transparent !important;}
.btn[disabled],.btn.disabled{opacity:.45;}

input,select,textarea,.search-box input{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:var(--text) !important;border-radius:9px !important;box-shadow:none !important;
  color-scheme:dark;
}
input::placeholder,textarea::placeholder{color:var(--text5);}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.14) !important;}
input:focus,select:focus,textarea:focus{border-color:rgba(39,254,145,.20) !important;box-shadow:0 0 0 3px rgba(39,254,145,.08) !important;outline:none;}
select option{background:#131614;color:var(--text);}
input[type=checkbox],input[type=radio]{accent-color:var(--green);}
input[readonly],input[disabled]{color:var(--text4) !important;background:rgba(255,255,255,.02) !important;}

/* ── Badges y estados (siempre con texto) ─────────────────────────────── */
.badge,.pill,.lmark,[class*="badge"]{
  border-radius:20px !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.06em !important;
  background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.08) !important;color:var(--text3) !important;
}
.badge.ok,.badge.green,.badge.success,.badge.pagado,.pill.ok,.badge.aprobada{background:var(--ok-bg) !important;border-color:var(--ok-br) !important;color:var(--green) !important;}
.badge.amber,.badge.warn,.badge.pend,.badge.pendiente,.badge.espera,.badge.presentada{background:var(--amber-bg) !important;border-color:var(--amber-br) !important;color:var(--amber) !important;}
.badge.red,.badge.danger,.badge.vencido,.badge.rechazada{background:var(--red-bg) !important;border-color:var(--red-br) !important;color:var(--red) !important;}
.badge.blue{background:var(--blue-bg) !important;color:var(--blue) !important;border-color:transparent !important;}
.badge.dark,.badge.black{background:var(--ink-bg) !important;color:var(--ink-fg) !important;}

/* ── Filas de hitos / cuotas ──────────────────────────────────────────── */
.hito-item{border-bottom:1px solid rgba(255,255,255,.05);padding:10px 0;}
.hito-item:last-child{border-bottom:0;}
.hito-desc{color:var(--text) !important;font-weight:600;}
.hito-desc.done{color:var(--text4) !important;}
.hito-amt{font-weight:700;}

/* ── Modales, avisos, menús ───────────────────────────────────────────── */
.moverlay,.modal-overlay{background:rgba(3,4,3,.72) !important;backdrop-filter:blur(6px);}
.modal,.modal-body{background:#131614 !important;color:var(--text) !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:15px !important;box-shadow:0 34px 90px -28px rgba(0,0,0,.8) !important;}
.mh,.mf{border-color:var(--border) !important;background:transparent !important;}
.mt{color:#fff !important;}
.notif{background:#161A17 !important;color:var(--text) !important;border:1px solid rgba(255,255,255,.09) !important;border-left:3px solid var(--green) !important;}
.alert{background:var(--amber-bg) !important;border:1px solid var(--amber-br) !important;color:var(--text) !important;border-radius:var(--radius);}
.alert.error,.alert.danger{background:var(--red-bg) !important;border-color:var(--red-br) !important;}
.alert.ok{background:var(--ok-bg) !important;border-color:var(--ok-br) !important;}
hr{border-color:var(--border) !important;}
a{color:var(--green);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14) !important;background-clip:padding-box !important;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24) !important;background-clip:padding-box !important;}
::selection{background:rgba(39,254,145,.28);}

/* Indicadores de esquina */
#vectra-build-tag{color:var(--text6) !important;}

/* ── Impresión: tema claro, sin cromo ─────────────────────────────────── */
@media print{
  :root{
    --bg:#fff;--bg2:#f7f7f5;--bg3:#f0f0ee;--canvas:#fff;--border:rgba(0,0,0,.12);--border2:rgba(0,0,0,.2);
    --text:#111;--text2:#333;--text3:#666;--text4:#777;--text5:#888;--text6:#999;
    --ok:#0A7A47;--ok-bg:#E4F8EE;--amber:#8A5A00;--amber-bg:#FFF4D6;--red:#B3261E;--red-bg:#FDE7E5;
    --ink-bg:#111;--ink-fg:#fff;--green:#0A7A47;
  }
  html,body,.main,.card,.cli-card,.est-card,.ecard,.sblock,.stat,.stat-card,.modal{background:#fff !important;color:#111 !important;box-shadow:none !important;}
  .topnav,.topbar .btn,.btn,.btns,.search-box,.notif,#vectra-build-tag,#vectra-sync-tag,#vectra-aviso{display:none !important;}
  .ptitle,.page-title,h1,h2,.stat-val,.stat-value{color:#111 !important;}
  thead th{color:#555 !important;border-bottom:1px solid #ccc !important;}
  .badge,.pill{border-color:#bbb !important;color:#333 !important;background:#f3f3f1 !important;}
}

/* ── Menú lateral compartido (rediseño) ── */
body.v-app{display:flex;min-height:100vh;margin:0;}
body.v-app > .v-main{flex:1;min-width:0;}
body.v-app .topnav,body.v-app header.hero{display:none !important;}
.v-subnav-grupo .v-subnav-hijos{display:none;margin-left:6px;}
.v-subnav-grupo.is-open .v-subnav-hijos{display:flex;}
.v-subnav-grupo.is-open > .v-subnav-padre{color:var(--v-text-2);}
.v-subnav-item .v-nav-count{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--v-text-6);}
.v-subnav-item.is-active .v-nav-count{color:var(--v-verde);}
.v-subnav-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v-nav-item{text-decoration:none;}
@media (max-width:900px){ body.v-app{flex-direction:column;} #vectra-sidebar > div:first-child, #vectra-sidebar > div:nth-child(2), #vectra-sidebar > div:last-child{display:none;} }