/* ============================================================
VECTRA UI — Sistema visual para app.vectracr.com
Basado en la propuesta "Vectra Plataforma v3"
Marca: #27FE91 · #3C3C3B · negro · Montserrat
USO
1) En el de cada página, ANTES de vectra-premium.css:
M */
.v-num-unit{font-size:.55em;font-weight:700;color:var(--v-text-4);letter-spacing:0}
.v-body{font-size:13px;font-weight:500;color:var(--v-text-2)}
.v-muted{font-size:11px;font-weight:500;color:var(--v-text-4)}
/* Separador de sección: Áreas de trabajo
*/
.v-rule{display:flex;align-items:center;gap:14px;margin:32px 0 14px}
.v-rule > span{
font-size:9px;font-weight:700;letter-spacing:.28em;
text-transform:uppercase;color:var(--v-text-4);
}
.v-rule::after{content:"";flex:1;height:1px;background:var(--v-line)}
/* ---------- Layout ---------- */
.v-app{min-height:100vh;background:var(--v-bg);display:flex}
.v-sidebar{
width:236px;flex:0 0 auto;position:sticky;top:0;height:100vh;
display:flex;flex-direction:column;padding:24px 0 18px;
background:linear-gradient(180deg,var(--v-bg-alt) 0%,var(--v-bg) 55%);
border-right:1px solid rgba(255,255,255,.06);
}
.v-main{flex:1;min-width:0}
.v-page{padding:34px 36px 60px;max-width:1420px}
/* Encabezado de pantalla */
.v-page-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;flex-wrap:wrap;margin-bottom:22px;
}
/* ---------- Navegación ---------- */
.v-nav{display:flex;flex-direction:column;gap:2px;padding:0 14px}
.v-nav-item{
display:flex;align-items:center;gap:11px;width:100%;
padding:10px 12px;border-radius:var(--v-r);
font:600 12.5px/1 var(--v-font);
color:var(--v-text-4);background:none;
border:1px solid transparent;cursor:pointer;text-align:left;
}
.v-nav-item:hover{color:var(--v-text-2)}
.v-nav-item.is-active{
font-weight:700;color:#fff;
background:linear-gradient(90deg,rgba(39,254,145,.14),rgba(39,254,145,.03));
border-color:var(--v-verde-br);
}
.v-nav-item .v-nav-emoji{font-size:14px;line-height:1;width:18px;flex:0 0 auto}
.v-nav-item .v-nav-label{flex:1}
.v-nav-item .v-nav-count{
font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--v-text-6);
}
.v-nav-item.is-active .v-nav-count{color:var(--v-verde)}
/* Sub-pestañas anidadas bajo el ítem activo */
.v-subnav{
display:flex;flex-direction:column;gap:1px;
margin:3px 0 6px 11px;padding-left:3px;
border-left:1px solid rgba(255,255,255,.08);
}
.v-subnav-item{
display:flex;align-items:center;gap:9px;width:100%;
padding:7px 12px 7px 20px;border-radius:var(--v-r-sm);
font:500 11.5px/1 var(--v-font);color:#6D746E;
background:none;border:none;cursor:pointer;text-align:left;
}
.v-subnav-item:hover{color:var(--v-text-3)}
.v-subnav-item.is-active{font-weight:700;color:var(--v-verde);background:rgba(39,254,145,.07)}
.v-subnav-item .v-nav-count{margin-left:auto;font-size:9px;font-weight:700;color:var(--v-text-6)}
.v-subnav-item.is-active .v-nav-count{color:var(--v-verde)}
/* Buscador del rail */
.v-search{
display:flex;align-items:center;gap:9px;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
border-radius:var(--v-r);padding:9px 11px;
font-size:12px;font-weight:500;color:var(--v-text-5);
}
.v-kbd{
font-size:9px;font-weight:700;color:var(--v-text-6);
border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:2px 5px;
}
/* ---------- Botones ---------- */
.v-btn{
display:inline-flex;align-items:center;gap:7px;
padding:10px 15px;border-radius:var(--v-r);
font:600 12.5px/1 var(--v-font);
color:var(--v-text-2);background:var(--v-fill);
border:1px solid rgba(255,255,255,.09);cursor:pointer;
transition:border-color .14s,background .14s;
}
.v-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.v-btn-primary{
padding:10px 17px;font-weight:700;color:#04220F;
background:linear-gradient(145deg,#3BFF9E,#16D97A);
border:none;box-shadow:var(--v-shadow-verde);
}
.v-btn-primary:hover{filter:brightness(1.06);background:linear-gradient(145deg,#3BFF9E,#16D97A)}
.v-btn-ghost{background:none;border-color:transparent;color:var(--v-text-4)}
.v-btn-ghost:hover{background:var(--v-fill);border-color:transparent;color:var(--v-text-2)}
.v-btn-danger{color:var(--v-coral-text);background:var(--v-coral-bg);border-color:rgba(226,74,58,.26)}
.v-btn-danger:hover{background:rgba(226,74,58,.18)}
.v-btn-sm{padding:7px 12px;font-size:11.5px}
/* ---------- Tarjetas ---------- */
.v-card{
background:var(--v-surface);
border:1px solid var(--v-line);
border-radius:var(--v-r-md);
padding:18px 20px;
}
.v-card-lg{border-radius:var(--v-r-lg);padding:22px 24px}
/* Tarjeta clickeable (áreas de trabajo, estimaciones) */
.v-card-link{
display:flex;flex-direction:column;justify-content:space-between;gap:22px;
width:100%;text-align:left;cursor:pointer;
transition:border-color .14s;
}
.v-card-link:hover{border-color:rgba(39,254,145,.34)}
/* Tarjeta destacada en verde (KPI positivo) */
.v-card-accent{
background:linear-gradient(160deg,rgba(39,254,145,.12),rgba(39,254,145,.02));
border-color:var(--v-verde-br);
}
.v-card-accent .v-label{color:var(--v-verde)}
.v-card-accent .v-num{color:var(--v-verde)}
/* Tarjeta héroe con halo radial */
.v-card-hero{
position:relative;overflow:hidden;
background:linear-gradient(165deg,var(--v-surface-2),#101211);
border:1px solid var(--v-line);border-radius:var(--v-r-lg);padding:22px 24px;
}
.v-card-hero::before{
content:"";position:absolute;top:-70px;right:-50px;
width:230px;height:230px;pointer-events:none;
background:radial-gradient(circle,rgba(39,254,145,.13),transparent 68%);
}
.v-card-hero > *{position:relative}
/* Rejilla de KPIs — envuelve sola, nunca desborda */
.v-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.v-grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:12px}
.v-grid-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;align-items:start}
/* Cápsula de emoji */
.v-icon{
width:34px;height:34px;border-radius:10px;flex:0 0 auto;
display:grid;place-items:center;font-size:16px;line-height:1;
background:rgba(39,254,145,.10);
}
.v-icon-neutral{background:var(--v-fill)}
.v-icon-sm{width:26px;height:26px;border-radius:var(--v-r-sm);font-size:12px}
.v-icon-lg{width:46px;height:46px;border-radius:13px;font-size:21px;border:1px solid rgba(39,254,145,.18)}
/* ---------- Badges de estado ---------- */
.v-badge{
display:inline-flex;align-items:center;gap:5px;
font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
border-radius:var(--v-r-pill);padding:4px 10px;white-space:nowrap;
border:1px solid transparent;
}
.v-badge-ok {color:var(--v-verde); background:var(--v-verde-bg); border-color:var(--v-verde-br)}
.v-badge-wait {color:var(--v-ambar); background:var(--v-ambar-bg); border-color:var(--v-ambar-br)}
.v-badge-late {color:var(--v-coral-text);background:var(--v-coral-bg); border-color:var(--v-coral-br)}
.v-badge-neutral{color:var(--v-text-3); background:var(--v-fill); border-color:var(--v-line)}
/* ---------- Alertas ---------- */
.v-alert{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
border-radius:11px;padding:13px 16px;
font-size:13px;font-weight:500;line-height:1.4;
}
.v-alert-late{
background:linear-gradient(90deg,rgba(226,74,58,.16),rgba(226,74,58,.03));
border:1px solid var(--v-coral-br);color:#F3D9D5;
}
.v-alert-wait{
background:linear-gradient(90deg,rgba(227,179,65,.13),rgba(227,179,65,.02));
border:1px solid var(--v-ambar-br);color:#EDE3CC;
}
.v-alert-text{flex:1;min-width:220px}
.v-alert-note{color:#A88A85;font-weight:500}
/* Punto luminoso de estado */
.v-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.v-dot-ok {background:var(--v-verde);box-shadow:0 0 10px 1px rgba(39,254,145,.5)}
.v-dot-wait{background:var(--v-ambar);box-shadow:0 0 10px 1px rgba(227,179,65,.45)}
.v-dot-late{background:var(--v-coral);box-shadow:0 0 10px 1px rgba(255,107,91,.6)}
.v-dot-off {background:#6D746E}
/* ---------- Tablas y listas ---------- */
/* Contenedor de lista/tabla */
.v-list{
background:var(--v-surface);
border:1px solid var(--v-line);
border-radius:var(--v-r-lg);
overflow:hidden;
}
.v-list-head,
.v-list-row{
display:grid;gap:14px;align-items:center;padding:13px 20px;
border-bottom:1px solid var(--v-line-soft);
}
.v-list-head{
padding:11px 20px;background:rgba(255,255,255,.02);
border-bottom:1px solid var(--v-line);
}
.v-list-head > *{
font-size:8.5px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--v-text-5);
}
.v-list-row:hover{background:rgba(255,255,255,.02)}
.v-list-row:last-of-type{border-bottom:none}
/* Fila total (honorarios, subtotales) */
.v-list-total{
display:grid;gap:14px;align-items:center;padding:16px 20px;
background:linear-gradient(90deg,rgba(39,254,145,.08),transparent);
}
.v-list-total .v-num{color:var(--v-verde)}
/* Celda de texto que puede truncar sin romper la fila */
.v-cell{min-width:0}
.v-cell-title{
font-size:13px;font-weight:600;color:var(--v-text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-cell-sub{
font-size:10.5px;font-weight:500;color:#6D746E;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-cell-num{text-align:right;white-space:nowrap}
/* Fila resaltada por atraso */
.v-row-late{background:rgba(226,74,58,.05)}
/* ---------- Barras de progreso ---------- */
.v-bar{height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.v-bar > span{display:block;height:100%;border-radius:2px;background:var(--v-verde)}
.v-bar-wait > span{background:var(--v-ambar)}
.v-bar-late > span{background:var(--v-coral)}
.v-bar-thick{height:5px}
/* Gráfico de barras mensual.
Importante: la altura de cada barra va en PX, no en %,
porque el contenedor no tiene altura declarada. */
.v-chart{display:flex;align-items:flex-end;gap:4px}
.v-chart-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.v-chart-slot{height:88px;width:100%;display:flex;align-items:flex-end}
.v-chart-bar{
width:100%;border-radius:4px 4px 2px 2px;
background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
}
.v-chart-bar.is-active{
background:linear-gradient(180deg,#3BFF9E,#16D97A);
box-shadow:0 0 18px -2px rgba(39,254,145,.55);
}
.v-chart-label{font-size:8px;font-weight:700;color:#4B524C;overflow:hidden;max-width:100%}
.v-chart-label.is-active{color:var(--v-verde)}
/* ---------- Formularios ---------- */
.v-input,
.v-select{
background:#0F1210;border:1px solid rgba(255,255,255,.08);
border-radius:var(--v-r);padding:10px 13px;
font:500 12.5px/1.2 var(--v-font);color:var(--v-text-2);
}
.v-input::placeholder{color:var(--v-text-5)}
.v-input:focus,
.v-select:focus{outline:none;border-color:var(--v-verde-br);box-shadow:0 0 0 3px rgba(39,254,145,.08)}
.v-select{font-weight:600;font-size:12px;background:var(--v-surface)}
/* Barra de filtros */
.v-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.v-filters .v-input{flex:1;min-width:210px}
/* Avatar de usuario / cliente */
.v-avatar{
width:32px;height:32px;border-radius:10px;flex:0 0 auto;
display:grid;place-items:center;
font-size:10.5px;font-weight:700;
background:var(--v-fill);color:var(--v-text-4);
}
.v-avatar-active{background:rgba(39,254,145,.10);color:var(--v-verde)}
.v-avatar-round{border-radius:50%;background:linear-gradient(145deg,#27FE91,#0E9459);color:#04220F;font-weight:800}
/* ---------- Reglas de robustez ----------
Estos tres arreglos resuelven los desbordes que aparecían
en el diseño original. Conservalos. */
/* 1. Todo grid/flex con texto necesita min-width:0 para poder encogerse */
.v-cell,.v-nav-label,.v-alert-text{min-width:0}
/* 2. Nunca uses white-space:nowrap en un contenedor flexible:
el texto se derrama sobre el elemento hermano.
Reservalo para cifras y badges. */
.v-num,.v-badge,.v-cell-num{white-space:nowrap}
/* 3. Las cifras grandes escalan con el ancho disponible */
.v-num-xl,.v-num-lg{overflow-wrap:anywhere}
/* ---------- Responsive ---------- */
@media (max-width:900px){
.v-app{flex-direction:column}
.v-sidebar{
width:100%;height:auto;position:static;
flex-direction:row;align-items:center;gap:14px;
padding:12px 16px;overflow-x:auto;
border-right:none;border-bottom:1px solid var(--v-line);
}
.v-nav{flex-direction:row;padding:0;gap:4px}
.v-nav-item{width:auto;white-space:nowrap;padding:8px 12px}
.v-nav-item .v-nav-label{flex:0 0 auto}
.v-subnav{display:none}
.v-page{padding:24px 18px 48px}
}
@media (max-width:640px){
.v-h1{font-size:24px}
.v-display{font-size:26px}
.v-page-head{align-items:flex-start;flex-direction:column}
.v-list-head{display:none}
.v-list-row{grid-template-columns:1fr !important;gap:8px}
.v-cell-num{text-align:left}
}
/* ---------- Impresión (reportes y cobros) ---------- */
@media print{
:root{
--v-bg:#fff;--v-surface:#fff;--v-text:#111310;
--v-text-2:#3C3C3B;--v-text-3:#6B6D6A;--v-text-4:#6B6D6A;
--v-line:rgba(0,0,0,.12);--v-line-soft:rgba(0,0,0,.08);
}
body{background:#fff;color:#111310}
.v-sidebar,.v-btn,.v-filters,.v-search{display:none}
.v-card,.v-list{border-color:rgba(0,0,0,.12);box-shadow:none;break-inside:avoid}
.v-num,.v-h1,.v-display{color:#111310}
.v-card-hero::before{display:none}
.v-badge-ok{color:#0A7A47;background:#E4F8EE}
.v-badge-wait{color:#8A5A08;background:#FCF4E1}
.v-badge-late{color:#B42318;background:#FDEFED}
a{color:#0A7A47}
}