/* ============================================================================ MODULOS.CSS — capa de página para los módulos "gordos" con sub-sidebar: · Módulo A · Expedientes (Comercial · VN + VO) · Módulo B · Órdenes de trabajo (Posventa) ---------------------------------------------------------------------------- NO redefine tokens ni reinventa componentes. Reusa lo canónico Atlas (dir c): · shell .switchbar / .app / .sidebar / .header / .page (base.css) · .kpis / .kpi / .kpi__* (base.css) · .dtable-card / .dtable-head / .dwrap / .dtable / .pager (matriculas.css) · .search / .search__ico (matriculas.css) · .vo-ficha / .vo-card / .vo-spec / .vo-back / .vo-internal (vo.css) · .vo-btn / .vo-plate / .vo-mono / .vo-empty / .vo-skel (vo.css) Aquí sólo vive lo propio de estos dos módulos: el sub-sidebar contextual, los badges semánticos de estado/tipo, el panel RELACIONES, las tablas de líneas (M.O./recambios), los chips de gestión, el timeline de vehículo 360 y el estado atenuado "OR vacía". ============================================================================ */ /* ══════════════════════════════════════════════════════════════════════════ 1 · SUB-SIDEBAR CONTEXTUAL (reemplaza el nav global dentro de un módulo) ══════════════════════════════════════════════════════════════════════════ */ .subnav { display:flex; flex-direction:column; flex:1; overflow-y:auto; padding:var(--s-3) var(--s-3) var(--s-4); } .subnav__back { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--text-2); padding:7px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); margin:0 var(--s-2) var(--s-3); transition:all .13s; } .subnav__back:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } .subnav__back .arw { font-size:14px; line-height:1; } .subnav__mod { display:flex; align-items:center; gap:11px; padding:12px var(--s-3); margin:0 var(--s-2) var(--s-3); border-radius:var(--radius); background:var(--accent-weak); } .subnav__mod-ico { width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:#fff; font-size:16px; } .subnav__mod-txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; } .subnav__mod-txt b { font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.01em; } .subnav__mod-txt small { font-size:10.5px; color:var(--accent-strong); font-weight:600; margin-top:2px; letter-spacing:.02em; } .subnav .nav__label { padding:var(--s-2) var(--s-3) var(--s-1); } .subnav .nav__item { cursor:pointer; } .subnav__foot-note { margin:auto var(--s-2) 0; padding:12px var(--s-3); font-size:11px; line-height:1.5; color:var(--text-3); border-top:1px dashed var(--border); } /* ══════════════════════════════════════════════════════════════════════════ 2 · BADGES SEMÁNTICOS (estado · tipo · naturaleza · cargo) Base canónica reusada tal cual (misma métrica que pages.css / catalogo.css). ══════════════════════════════════════════════════════════════════════════ */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; } .badge__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.9; } .badge--pos { color:var(--pos); background:var(--pos-bg); } .badge--neg { color:var(--neg); background:var(--neg-bg); } .badge--warn { color:var(--warn); background:var(--warn-bg); } .badge--info { color:#2563c9; background:#e8eefb; } .badge--neu { color:var(--text-2); background:var(--surface-2); } /* tipo de venta / taller */ .badge--vn { color:#2563c9; background:#e8eefb; } /* VN → azul */ .badge--vo { color:var(--accent-strong); background:var(--accent-weak); } /* VO → esmeralda */ /* ══════════════════════════════════════════════════════════════════════════ 3 · CELDAS DE TABLA REUTILIZADAS EN LISTADOS ══════════════════════════════════════════════════════════════════════════ */ .dtable td .m-veh { display:flex; flex-direction:column; gap:1px; min-width:0; } .dtable td .m-veh b { font-weight:600; color:var(--text); } .dtable td .m-veh small { font-size:11px; color:var(--text-3); } .m-code { font-family:var(--font-num); font-weight:500; color:var(--text); letter-spacing:.02em; } .m-eur { font-family:var(--font-num); font-weight:600; color:var(--text); } .dtable tbody tr.is-void td { color:var(--text-3); } /* anulada / vacía */ .dtable tbody tr.is-void .m-veh b { color:var(--text-2); font-weight:500; } .dtable tbody tr.is-void td:first-child { box-shadow:inset 3px 0 0 color-mix(in srgb,var(--neg) 55%,transparent); } /* OR vacía (colgada sin trabajar) */ .dtable tbody tr.is-empty-or td { color:var(--text-3); background:repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb,var(--surface-2) 60%,transparent) 9px 18px); } .dtable tbody tr.is-empty-or:hover td { background:var(--surface-2); } .tag-vacia { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:var(--radius-pill); } /* filtro-barra: variante compacta (reusa .vo-filters de vo.css como base) */ .m-filters { display:flex; align-items:flex-end; gap:var(--s-3); flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-5); } .m-filters .field__lbl { margin-bottom:4px; } .m-filters .select { min-width:118px; } .m-filters__spacer { flex:1; } /* rango de fechas Desde/Hasta con calendario nativo — componente compartido de los 3 listados (Expedientes · Órdenes · En curso). F2-B: sustituye al filtro Año+Mes. */ .fdate { font-family:var(--font-num); font-size:12.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px; min-width:130px; transition:all .14s; } .fdate:focus { outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-weak); } /* acciones del buscador: los filtros NO se auto-aplican; Buscar dispara la consulta única */ .m-filters__actions { display:flex; gap:9px; align-items:center; } .fbtn { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:12.5px; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:var(--radius-sm); border:1px solid transparent; transition:all .14s; white-space:nowrap; } .fbtn--primary { background:var(--accent); color:#fff; border-color:var(--accent); } .fbtn--primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); } .fbtn--ghost { background:var(--surface); color:var(--text-2); border-color:var(--border); } .fbtn--ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } /* estado del semáforo de OR en curso (E2–E5) */ .est { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-num); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; } .est::before { content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:currentColor; } .est--e2 { color:var(--text-2); background:var(--surface-2); } .est--e3 { color:#2563c9; background:#e8eefb; } .est--e4 { color:var(--warn); background:var(--warn-bg); } .est--e5 { color:var(--accent-strong); background:var(--accent-weak); } /* ══════════════════════════════════════════════════════════════════════════ 4 · FICHA — cabecera hero + rejilla de secciones Reusa .vo-ficha / .vo-card / .vo-spec de vo.css. Sólo añadidos finos. ══════════════════════════════════════════════════════════════════════════ */ .m-detail { display:grid; grid-template-columns:1fr 360px; gap:var(--s-5); align-items:start; } @media (max-width:1080px){ .m-detail{ grid-template-columns:1fr; } } .m-main { display:flex; flex-direction:column; gap:var(--s-5); min-width:0; } .m-rail { display:flex; flex-direction:column; gap:var(--s-5); position:sticky; top:calc(var(--header-h) + 46px + var(--s-5)); } @media (max-width:1080px){ .m-rail{ position:static; } } .m-hero { display:flex; flex-direction:column; gap:16px; } .m-hero__top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; } .m-hero__id { min-width:0; } .m-hero__ey { font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); } .m-hero__h { font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-top:6px; color:var(--text); } .m-hero__sub { font-size:13.5px; color:var(--text-2); margin-top:5px; } .m-hero__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; } .m-hero__amt { text-align:right; flex-shrink:0; } .m-hero__amt-k { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); } .m-hero__amt-v { font-family:var(--font-num); font-size:32px; font-weight:700; letter-spacing:-.01em; color:var(--text); line-height:1; margin-top:5px; } .m-hero__amt-sub { font-size:11.5px; color:var(--text-3); margin-top:5px; } .m-card__eyebrow { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); } .m-card__head-sub { font-size:11.5px; color:var(--text-3); } /* rejilla de pares clave/valor (reusa la estética de .vo-spec) */ .m-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .m-grid--3 { grid-template-columns:repeat(3,1fr); } @media (max-width:560px){ .m-grid, .m-grid--3{ grid-template-columns:1fr; } } .m-cell { background:var(--surface); padding:12px 15px; min-width:0; } .m-cell__k { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .m-cell__v { font-size:13.5px; color:var(--text); font-weight:600; margin-top:4px; word-break:break-word; } .m-cell__v.mono { font-family:var(--font-num); font-weight:500; letter-spacing:.02em; } .m-cell__v.dim { color:var(--text-3); font-weight:500; } /* filas simples clave/valor (comercial, financiación) */ .m-rows { display:flex; flex-direction:column; } .m-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px dashed var(--border); font-size:13px; } .m-row:last-child { border-bottom:0; } .m-row__k { color:var(--text-2); } .m-row__v { font-family:var(--font-num); font-weight:600; color:var(--text); text-align:right; } .m-row__v.dim { color:var(--text-3); font-weight:500; } .m-row--total { border-top:1px solid var(--border-strong); border-bottom:0; margin-top:4px; padding-top:13px; } .m-row--total .m-row__k { font-weight:700; color:var(--text); } .m-row--total .m-row__v { font-size:15px; } /* ══════════════════════════════════════════════════════════════════════════ 5 · TABLAS DE LÍNEAS (mano de obra / recambios / permutas) con pie total ══════════════════════════════════════════════════════════════════════════ */ .linetable { width:100%; border-collapse:collapse; font-size:12.5px; } .linetable thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:right; padding:9px var(--s-4); white-space:nowrap; border-bottom:1px solid var(--border-strong); } .linetable thead th:first-child { text-align:left; } .linetable tbody td { padding:11px var(--s-4); text-align:right; border-bottom:1px solid var(--row-border); color:var(--text); white-space:nowrap; } .linetable tbody td:first-child { text-align:left; } .linetable tbody td.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; } .linetable tbody td .op { font-weight:600; color:var(--text); } .linetable tbody td .op small { display:block; font-size:11px; font-weight:400; color:var(--text-3); } .linetable tbody td.dim { color:var(--text-3); } .linetable tfoot td { padding:12px var(--s-4); text-align:right; font-weight:700; font-family:var(--font-num); background:var(--row-total-bg); border-top:1px solid var(--border-strong); } .linetable tfoot td:first-child { text-align:left; font-family:var(--font-sans); color:var(--text-2); font-weight:600; text-transform:uppercase; font-size:10.5px; letter-spacing:.06em; } /* familia de M.O. / recambio, chip minúsculo */ .fam { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:var(--radius-pill); white-space:nowrap; } /* ══════════════════════════════════════════════════════════════════════════ 6 · CHIPS DE GESTIÓN (flags: retrabajo, garantía, presupuesto, eficiencia) ══════════════════════════════════════════════════════════════════════════ */ .flags { display:flex; flex-wrap:wrap; gap:9px; } .flag { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text); background:var(--surface-2); border:1px solid var(--border); padding:8px 13px; border-radius:var(--radius-sm); } .flag__ico { width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:11px; color:#fff; background:var(--text-3); flex-shrink:0; } .flag__val { font-family:var(--font-num); color:var(--text-2); margin-left:2px; } .flag--on .flag__ico { background:var(--accent); } .flag--warn .flag__ico { background:var(--warn); } .flag--neg .flag__ico { background:var(--neg); } .flag.is-off { opacity:.5; } .flag.is-off .flag__ico { background:var(--text-3); } /* ══════════════════════════════════════════════════════════════════════════ 7 · PANEL RELACIONES (enlaces cross-módulo, en el rail) ══════════════════════════════════════════════════════════════════════════ */ .rel { display:flex; flex-direction:column; } .rel__item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px var(--s-5); border:0; border-top:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:background .13s; font-family:var(--font-sans); } .rel__item:first-child { border-top:0; } .rel__item:hover { background:var(--row-hover); } .rel__ico { width:32px; height:32px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; font-size:14px; background:var(--accent-weak); color:var(--accent-strong); } .rel__main { flex:1; min-width:0; } .rel__t { font-size:13px; font-weight:600; color:var(--text); line-height:1.25; } .rel__s { font-size:11.5px; color:var(--text-3); margin-top:2px; } .rel__arw { color:var(--text-3); font-size:15px; flex-shrink:0; } .rel__count { font-family:var(--font-num); font-size:11px; font-weight:700; color:var(--accent-strong); background:var(--accent-weak); border-radius:var(--radius-pill); padding:2px 8px; flex-shrink:0; } /* enlace bajo permiso (atenuado, no clicable) */ .rel__item.is-locked { cursor:not-allowed; } .rel__item.is-locked:hover { background:var(--surface); } .rel__item.is-locked .rel__ico { background:var(--surface-2); color:var(--text-3); } .rel__item.is-locked .rel__t { color:var(--text-2); } .rel__lock { font-size:12px; color:var(--text-3); flex-shrink:0; } /* mini-lista de OR dentro del rail/relaciones (historial de taller) */ .mini { display:flex; flex-direction:column; } .mini__row { display:flex; align-items:center; gap:12px; padding:10px var(--s-5); border-top:1px solid var(--border); cursor:pointer; transition:background .13s; } .mini__row:hover { background:var(--row-hover); } .mini__date { font-family:var(--font-num); font-size:11.5px; color:var(--text-3); width:58px; flex-shrink:0; } .mini__main { flex:1; min-width:0; } .mini__t { font-size:12.5px; font-weight:600; color:var(--text); } .mini__s { font-size:11px; color:var(--text-3); } .mini__amt { font-family:var(--font-num); font-size:12.5px; font-weight:600; color:var(--text); } /* ══════════════════════════════════════════════════════════════════════════ 8 · BLOQUE FINANCIERO BLOQUEADO (candado · permiso) Reusa .vo-internal de vo.css como base visual; añade la superposición. ══════════════════════════════════════════════════════════════════════════ */ .locked { position:relative; } .locked__grid { filter:blur(4px); opacity:.5; pointer-events:none; user-select:none; } .locked__over { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:var(--s-5); } .locked__lock { width:44px; height:44px; border-radius:12px; background:var(--warn); color:#fff; display:grid; place-items:center; font-size:19px; box-shadow:0 4px 14px color-mix(in srgb,var(--warn) 34%,transparent); } .locked__t { font-size:14px; font-weight:700; color:var(--text); } .locked__s { font-size:12px; color:var(--text-2); max-width:320px; line-height:1.5; } .locked__btn { margin-top:4px; } /* ══════════════════════════════════════════════════════════════════════════ 9 · VEHÍCULO 360 — buscador grande + cabecera unificada + timeline ══════════════════════════════════════════════════════════════════════════ */ .v360-search { max-width:680px; margin:0 auto var(--s-6); text-align:center; padding-top:var(--s-5); } .v360-search__h { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text); } .v360-search__s { font-size:13.5px; color:var(--text-2); margin-top:8px; } .v360-search__box { position:relative; margin-top:var(--s-5); } .v360-search__box input { width:100%; font-family:var(--font-num); font-size:17px; letter-spacing:.04em; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:18px 20px 18px 52px; box-shadow:var(--shadow-card); transition:all .15s; } .v360-search__box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-weak); } .v360-search__box .ico { position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:18px; } .v360-search__hint { margin-top:12px; font-size:12px; color:var(--text-3); } /* candidatos de matrícula/bastidor parcial ("7300" → elegir entre los coches que lo contienen) */ .v360-sug { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; padding:var(--s-4) var(--s-5) var(--s-5); } .v360-sug__it { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; text-align:left; transition:border-color .13s; } .v360-sug__it:hover { border-color:var(--accent); } .v360-sug__m { font-family:var(--font-num); font-weight:700; color:var(--text); } .v360-sug__b { font-family:var(--font-num); font-size:11.5px; color:var(--text-3); } .v360-chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; } .v360-chip { font-family:var(--font-num); font-size:12px; font-weight:600; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-pill); cursor:pointer; transition:all .13s; } .v360-chip:hover { border-color:var(--accent); color:var(--accent-strong); } .v360-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:var(--s-5); background:linear-gradient(180deg,var(--accent-weak),var(--surface)); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); margin-bottom:var(--s-5); } .v360-hero__ico { width:56px; height:56px; flex-shrink:0; border-radius:15px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:24px; } .v360-hero__main { flex:1; min-width:0; } .v360-hero__title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .v360-hero__title h1 { font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--text); } .v360-hero__meta { display:flex; gap:20px; flex-wrap:wrap; margin-top:8px; font-size:13px; } .v360-hero__meta span { color:var(--text-2); } .v360-hero__meta b { font-family:var(--font-num); font-weight:600; color:var(--text); } .v360-hero__meta .k { color:var(--text-3); font-family:var(--font-sans); margin-right:5px; } #v360RentTile { display:contents; } .v360-hero__rent { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:10px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .15s; } .v360-hero__rent:hover { border-color:var(--accent); } .v360-hero__rent-k { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .v360-hero__rent-v { font-family:var(--font-num); font-size:22px; font-weight:700; color:var(--text); } .v360-hero__rent-v.is-pos { color:var(--pos); } .v360-hero__rent-v.is-neg { color:var(--neg); } @media (max-width:769px){ .v360-hero__rent{ flex:0 0 100%; align-items:flex-start; } } .v360-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); margin-bottom:var(--s-5); } @media (max-width:900px){ .v360-cols{ grid-template-columns:1fr; } } /* tarjeta de venta VN/VO en 360 */ .saleC { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; } .saleC__head { display:flex; align-items:center; gap:10px; padding:14px var(--s-5); border-bottom:1px solid var(--border); } .saleC__head h3 { font-size:14px; font-weight:700; } .saleC__head .badge { margin-left:auto; } .saleC__body { padding:var(--s-5); display:flex; flex-direction:column; gap:12px; } .saleC--empty .saleC__body { align-items:center; text-align:center; color:var(--text-3); gap:8px; padding:var(--s-6) var(--s-5); } .saleC--empty .saleC__body .dash { font-size:26px; opacity:.5; } .saleC__link { margin-top:2px; } /* timeline de taller en 360 */ .tl { position:relative; padding-left:26px; } .tl::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--border); } .tl__item { position:relative; padding:12px 0; cursor:pointer; } .tl__item::before { content:""; position:absolute; left:-22px; top:17px; width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); } .tl__item--carr::before { border-color:#2563c9; } .tl__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .tl__or { font-family:var(--font-num); font-weight:600; font-size:12.5px; color:var(--text); } .tl__amt { margin-left:auto; font-family:var(--font-num); font-weight:600; color:var(--text); } .tl__meta { font-size:12px; color:var(--text-2); margin-top:4px; } .tl__item:hover .tl__or { color:var(--accent-strong); } /* ══════════════════════════════════════════════════════════════════════════ 10 · ESTADOS DE TABLA (skeleton · vacío) — reusa .vo-empty / .vo-skel ══════════════════════════════════════════════════════════════════════════ */ .m-empty { text-align:center; padding:var(--s-6) var(--s-5); } .m-empty__ico { width:52px; height:52px; margin:0 auto 14px; border-radius:15px; background:var(--surface-2); color:var(--text-3); display:grid; place-items:center; font-size:24px; } .m-empty__t { font-size:15px; font-weight:700; color:var(--text); } .m-empty__s { font-size:13px; color:var(--text-2); margin-top:6px; } .skelbar { height:12px; border-radius:6px; background:var(--surface-2); position:relative; overflow:hidden; } .skelbar::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent); animation:mShimmer 1.3s infinite; } @keyframes mShimmer { 100%{ transform:translateX(100%); } } @media (prefers-reduced-motion:reduce){ .skelbar::after{ animation:none; } } /* rejillas KPI de anchura variable (degradan en desktop estrecho) */ .kpis--6 { grid-template-columns:repeat(6,1fr); } @media (max-width:1340px){ .kpis--6{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ .kpis--6{ grid-template-columns:repeat(2,1fr); } } .kpis--3 { grid-template-columns:repeat(3,1fr); } @media (max-width:760px){ .kpis--3{ grid-template-columns:1fr; } } /* utilidades de vista (view router) */ [data-view-panel] { display:none; } [data-view-panel].is-active { display:block; } /* header: botón volver a la lista dentro del módulo */ .m-backbar { display:flex; align-items:center; gap:12px; margin-bottom:var(--s-4); flex-wrap:wrap; } .m-crumb { font-size:12px; color:var(--text-3); } .m-crumb b { color:var(--text-2); font-weight:600; } /* impresión */ @media print { .m-rail { position:static; } .m-detail, .v360-cols { grid-template-columns:1fr; } .subnav__back, .m-filters { display:none !important; } } /* ══════════════════════════════════════════════════════════════════════════ 11 · COMPONENTES Atlas re-scopeados a #page-expediente (ERR #118) .kpi* y el interior de .dtable viven en el app scopeados a OTROS #page-* (matriculaciones/cx/transferencias/comisiones) → no llegaban aquí. Se re-declaran acotados a #page-expediente (sin tocar los demás módulos). ══════════════════════════════════════════════════════════════════════════ */ #page-expediente .kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--kpi-gap); margin-bottom:var(--s-5); } @media (max-width:1200px){ #page-expediente .kpis{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ #page-expediente .kpis{ grid-template-columns:repeat(2,1fr); } } #page-expediente .kpi { position:relative; background:var(--surface); border:var(--card-border); border-radius:var(--radius); padding:var(--kpi-pad); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:var(--kpi-inner-gap); transition:box-shadow .18s, transform .18s, border-color .18s; } #page-expediente .kpi:hover { box-shadow:0 6px 22px rgba(15,40,30,.10),0 1px 3px rgba(15,40,30,.06); transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); } #page-expediente .kpi__top { display:flex; align-items:center; gap:8px; } #page-expediente .kpi__chip { width:24px; height:24px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:12px; flex-shrink:0; background:var(--accent-weak); color:var(--accent-strong); } #page-expediente .kpi__label { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); } #page-expediente .kpi__val { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:var(--kpi-val-fs); font-weight:var(--kpi-val-fw); letter-spacing:-.01em; color:var(--text); line-height:1; white-space:nowrap; } #page-expediente .kpi__sub { font-size:11.5px; color:var(--text-3); } #page-expediente .dtable-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:var(--s-5); } #page-expediente .dtable-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; } #page-expediente .dtable-head h2 { font-size:15px; font-weight:700; } #page-expediente .dtable-head__meta { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); } #page-expediente .search { position:relative; } #page-expediente .search input { font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 14px 8px 32px; width:240px; transition:all .14s; } #page-expediente .search input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-weak); } #page-expediente .search__ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; } #page-expediente .dwrap { overflow-x:auto; } #page-expediente .dtable { width:100%; border-collapse:collapse; font-size:12.5px; } #page-expediente .dtable thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--border-strong); } #page-expediente .dtable thead th.num { text-align:right; } #page-expediente .dtable tbody td { padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--row-border); color:var(--text-2); vertical-align:middle; } #page-expediente .dtable tbody td.num { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); } #page-expediente .dtable tbody tr { cursor:pointer; transition:background .12s; } #page-expediente .dtable tbody tr:hover { background:var(--row-hover); } #page-expediente .pager { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-top:1px solid var(--border); flex-wrap:wrap; } #page-expediente .pager__info { font-size:12px; color:var(--text-3); font-family:var(--font-num); } #page-expediente .pager__ctrls { display:flex; gap:4px; align-items:center; } #page-expediente .pgbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; min-width:32px; height:32px; padding:0 8px; border-radius:var(--radius-sm); font-family:var(--font-num); transition:all .12s; } #page-expediente .pgbtn:hover:not(:disabled) { background:var(--hover); color:var(--text); border-color:var(--border-strong); } #page-expediente .pgbtn.is-active { background:var(--accent); color:#fff; border-color:var(--accent); } #page-expediente .pgbtn:disabled { opacity:.4; cursor:not-allowed; } /* botones Atlas (.vo-btn / .vo-back): en el app están scopeados a .crm-vo → re-declarados aquí (ERR #118) */ #page-expediente .vo-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; transition:all .14s; white-space:nowrap; text-decoration:none; } #page-expediente .vo-btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); } #page-expediente .vo-btn--primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); } #page-expediente .vo-btn--ghost { background:var(--surface); color:var(--text-2); border-color:var(--border); } #page-expediente .vo-btn--ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } #page-expediente .vo-btn--sm { padding:6px 12px; font-size:12px; } #page-expediente .vo-btn:disabled { opacity:.45; cursor:not-allowed; } #page-expediente .vo-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-2); padding:7px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; transition:all .13s; } #page-expediente .vo-back:hover { background:var(--surface-2); color:var(--text); } /* #page-v360: re-scope de botones Atlas .vo-btn (olvido al promover v360 a página propia; ERR #118) */ #page-v360 .vo-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; transition:all .14s; white-space:nowrap; text-decoration:none; } #page-v360 .vo-btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); } #page-v360 .vo-btn--primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); } #page-v360 .vo-btn--ghost { background:var(--surface); color:var(--text-2); border-color:var(--border); } #page-v360 .vo-btn--ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); } #page-v360 .vo-btn--sm { padding:6px 12px; font-size:12px; } #page-v360 .vo-btn:disabled { opacity:.45; cursor:not-allowed; } /* ══════════════════════════════════════════════════════════════════════════ 7b · TARJETAS CX EN EL RAIL (RGPD · encuesta CEM · conectividad) ══════════════════════════════════════════════════════════════════════════ */ #page-expediente .cx-wrap , #page-v360 .cx-wrap { display:flex; flex-direction:column; } #page-expediente .cx-mini , #page-v360 .cx-mini { padding:13px var(--s-5); border-top:1px solid var(--border); } #page-expediente .cx-mini:first-child , #page-v360 .cx-mini:first-child { border-top:0; } #page-expediente .cx-mini__h , #page-v360 .cx-mini__h { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); } #page-expediente .cx-mini__h b , #page-v360 .cx-mini__h b { font-weight:700; } #page-expediente .cx-mini__ico , #page-v360 .cx-mini__ico { width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center; font-size:13px; background:var(--accent-weak); color:var(--accent-strong); } #page-expediente .cx-mini__h .badge , #page-v360 .cx-mini__h .badge { margin-left:auto; } #page-expediente .cx-mini__b , #page-v360 .cx-mini__b { margin-top:9px; } #page-expediente .cx-line , #page-v360 .cx-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:12px; color:var(--text-2); border-bottom:1px dashed var(--border); } #page-expediente .cx-line:last-child , #page-v360 .cx-line:last-child { border-bottom:0; } #page-expediente .cx-line--foot , #page-v360 .cx-line--foot { color:var(--text-3); font-family:var(--font-num); border-bottom:0; border-top:1px solid var(--border); margin-top:2px; padding-top:8px; } #page-expediente .cx-yn , #page-v360 .cx-yn { font-weight:700; font-size:11.5px; } #page-expediente .cx-yn--si , #page-v360 .cx-yn--si { color:var(--pos); } #page-expediente .cx-yn--no , #page-v360 .cx-yn--no { color:var(--text-3); } #page-expediente .cx-yn--unk , #page-v360 .cx-yn--unk { color:var(--text-3); font-weight:600; } #page-expediente .cx-topbox , #page-v360 .cx-topbox { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-weak); border-radius:var(--radius-pill); padding:1px 7px; margin-left:4px; } #page-expediente .cx-nodata , #page-v360 .cx-nodata { margin-top:8px; font-size:12px; color:var(--text-3); font-style:italic; } #page-expediente .cx-nodata--load , #page-v360 .cx-nodata--load { font-style:normal; } #page-expediente .cx-nodata--err , #page-v360 .cx-nodata--err { font-style:normal; color:var(--warn); } /* Estado no-contactar del titular (anonimizado / tratamiento limitado): dato comercial prioritario */ #page-expediente .cx-nocontact , #page-v360 .cx-nocontact { margin-top:9px; display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:8px; background:var(--neg-bg); border:1px solid var(--neg); } #page-expediente .cx-nocontact b , #page-v360 .cx-nocontact b { color:var(--neg); font-size:12.5px; } #page-expediente .cx-nocontact span , #page-v360 .cx-nocontact span { font-size:11px; color:var(--text-2); } #page-expediente .cx-nota , #page-v360 .cx-nota { display:block; font-style:normal; margin-top:4px; font-size:11px; color:var(--warn); } #page-expediente .cx-link , #page-v360 .cx-link { margin-top:9px; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--accent-strong); background:transparent; border:0; padding:0; cursor:pointer; } #page-expediente .cx-link:hover , #page-v360 .cx-link:hover { text-decoration:underline; } /* ══════════════════════════════════════════════════════════════════════════ 12 · #page-ordenes — mismos componentes Atlas re-scopeados (ERR #118) (kpi / interior .dtable / pager / search / vo-btn / vo-back / tarjetas cx) ══════════════════════════════════════════════════════════════════════════ */ #page-ordenes .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--kpi-gap); margin-bottom:var(--s-5); } @media (max-width:1100px){ #page-ordenes .kpis{ grid-template-columns:repeat(2,1fr); } } #page-ordenes .kpi { position:relative; background:var(--surface); border:var(--card-border); border-radius:var(--radius); padding:var(--kpi-pad); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:var(--kpi-inner-gap); transition:box-shadow .18s, transform .18s, border-color .18s; } #page-ordenes .kpi:hover { box-shadow:0 6px 22px rgba(15,40,30,.10),0 1px 3px rgba(15,40,30,.06); transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); } #page-ordenes .kpi__top { display:flex; align-items:center; gap:8px; } #page-ordenes .kpi__chip { width:24px; height:24px; border-radius:var(--radius-sm); display:grid; place-items:center; font-size:12px; flex-shrink:0; background:var(--accent-weak); color:var(--accent-strong); } #page-ordenes .kpi__label { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); } #page-ordenes .kpi__val { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:var(--kpi-val-fs); font-weight:var(--kpi-val-fw); letter-spacing:-.01em; color:var(--text); line-height:1; white-space:nowrap; } #page-ordenes .kpi__sub { font-size:11.5px; color:var(--text-3); } #page-ordenes .dtable-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:var(--s-5); } #page-ordenes .dtable-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; } #page-ordenes .dtable-head h2 { font-size:15px; font-weight:700; } #page-ordenes .dtable-head__meta { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); } #page-ordenes .search { position:relative; } #page-ordenes .search input { font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 14px 8px 32px; width:240px; transition:all .14s; } #page-ordenes .search input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-weak); } #page-ordenes .search__ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; } #page-ordenes .dwrap { overflow-x:auto; } #page-ordenes .dtable { width:100%; border-collapse:collapse; font-size:12.5px; } #page-ordenes .dtable thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--border-strong); } #page-ordenes .dtable thead th.num { text-align:right; } #page-ordenes .dtable tbody td { padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--row-border); color:var(--text-2); vertical-align:middle; } #page-ordenes .dtable tbody td.num { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); } #page-ordenes .dtable tbody tr { cursor:pointer; transition:background .12s; } #page-ordenes .dtable tbody tr:hover { background:var(--row-hover); } #page-ordenes .pager { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-5); border-top:1px solid var(--border); flex-wrap:wrap; } #page-ordenes .pager__info { font-size:12px; color:var(--text-3); font-family:var(--font-num); } #page-ordenes .pager__ctrls { display:flex; gap:4px; align-items:center; } #page-ordenes .pgbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; min-width:32px; height:32px; padding:0 8px; border-radius:var(--radius-sm); font-family:var(--font-num); transition:all .12s; } #page-ordenes .pgbtn:hover:not(:disabled) { background:var(--hover); color:var(--text); border-color:var(--border-strong); } #page-ordenes .pgbtn.is-active { background:var(--accent); color:#fff; border-color:var(--accent); } #page-ordenes .pgbtn:disabled { opacity:.4; cursor:not-allowed; } #page-ordenes .ghostbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--radius-sm); cursor:pointer; transition:all .13s; } #page-ordenes .ghostbtn:hover, #page-ordenes .ghostbtn.is-active { background:var(--accent-weak); color:var(--accent-strong); border-color:transparent; } #page-ordenes .wip-tools { display:flex; gap:var(--s-3); align-items:flex-end; flex-wrap:wrap; } #page-ordenes .vo-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-2); padding:7px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; transition:all .13s; } #page-ordenes .vo-back:hover { background:var(--surface-2); color:var(--text); } /* tarjetas CX-PV en el rail */ #page-ordenes .cx-wrap { display:flex; flex-direction:column; } #page-ordenes .cx-mini { padding:13px var(--s-5); border-top:1px solid var(--border); } #page-ordenes .cx-mini:first-child { border-top:0; } #page-ordenes .cx-mini__h { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); } #page-ordenes .cx-mini__ico { width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center; font-size:13px; background:var(--accent-weak); color:var(--accent-strong); } #page-ordenes .cx-mini__h .badge { margin-left:auto; } #page-ordenes .cx-mini__b { margin-top:9px; } #page-ordenes .cx-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:12px; color:var(--text-2); border-bottom:1px dashed var(--border); } #page-ordenes .cx-line:last-child { border-bottom:0; } #page-ordenes .cx-line--foot { color:var(--text-3); font-family:var(--font-num); border-bottom:0; border-top:1px solid var(--border); margin-top:2px; padding-top:8px; } #page-ordenes .cx-yn { font-weight:700; font-size:11.5px; } #page-ordenes .cx-yn--si { color:var(--pos); } #page-ordenes .cx-yn--no { color:var(--text-3); } #page-ordenes .cx-yn--unk { color:var(--text-3); font-weight:600; } #page-ordenes .cx-topbox { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-weak); border-radius:var(--radius-pill); padding:1px 7px; margin-left:4px; } #page-ordenes .cx-nodata { margin-top:8px; font-size:12px; color:var(--text-3); font-style:italic; } #page-ordenes .cx-nota { display:block; margin-top:4px; font-size:11px; color:var(--warn); } /* ══════════════════════════════════════════════════════════════════════════ 13 · OPERACIÓN COMERCIAL + CAMPAÑAS Y AYUDAS (F1-C T2) — ficha de expediente. Reglas de la maqueta rediseño-expediente v2.0 (fuente/css/modulos.css), scopeadas a #page-expediente (ERR #118). Ambas tablas EXTIENDEN .linetable; aquí solo deltas. ══════════════════════════════════════════════════════════════════════════ */ #page-expediente .oc-table .oc-cpt { text-align:left; color:var(--text-2); font-size:13px; } #page-expediente .oc-table .oc-base .oc-cpt { color:var(--text); font-weight:600; } #page-expediente .oc-table .oc-amt { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; } #page-expediente .oc-table .oc-amt.is-pos { color:var(--text); } #page-expediente .oc-table .oc-amt.is-neg { color:var(--neg); } #page-expediente .dtable .m-eur.is-neg { color:var(--neg); } /* T1: margen negativo en el listado */ #page-expediente .oc-table tfoot .oc-total td:first-child { font-family:var(--font-sans); text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:700; color:var(--text); } #page-expediente .oc-table tfoot .oc-total td:last-child { color:var(--text); font-size:16px; } #page-expediente .camp-table thead th, #page-expediente .camp-table tbody td, #page-expediente .camp-table tfoot td { padding-left:10px; padding-right:10px; } #page-expediente .camp-table tbody td:first-child { white-space:normal; min-width:130px; } #page-expediente .camp-table .camp-tick { margin-right:2px; font-weight:700; } #page-expediente .camp-table td.is-pos { color:var(--pos); font-weight:600; } #page-expediente .camp-table td.cx-c, #page-expediente .camp-table th.cx-c { text-align:center; } #page-expediente .camp-table tfoot .camp-foot .camp-pend { text-align:right; font-family:var(--font-sans); text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; color:var(--warn); } /* fuera de maqueta (decisiones del plan F1-C): chip de descuadre DMS/contable + contenedor chip+badge */ #page-expediente .camp-headr { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } #page-expediente .camp-chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--warn); background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); padding:2px 9px; border-radius:var(--radius-pill); white-space:nowrap; } /* .vo-permiso vive en vo.css bajo .crm-vo → re-scope aquí (ERR #118; lo usan el vacío de campañas de la maqueta Y la nota "Operación al contado" de Financiación, que salía plana) */ #page-expediente .vo-permiso { display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 16px; font-size:13px; color:var(--text-2); } #page-expediente .vo-permiso__ico { width:28px; height:28px; border-radius:8px; background:var(--surface-3); color:var(--text-3); display:grid; place-items:center; font-size:14px; flex-shrink:0; } #page-expediente .camp-table tfoot .camp-foot .camp-pend.is-ok { color:var(--pos); } /* ══════════════════════════════════════════════════════════════════════════ 14 · TARJETA ATLAS (.vo-card / .vo-plate) — maqueta rediseño-expediente v2.0. En el app viven en vo.css bajo .crm-vo → nunca aplicaban en Expedientes/Órdenes y TODA la ficha salía PLANA (sin tarjeta, sin cabecera, sin chapa de matrícula). Reglas verbatim de fuente/css/vo.css de la entrega, scopeadas (ERR #118). ══════════════════════════════════════════════════════════════════════════ */ #page-expediente .vo-card, #page-ordenes .vo-card, #page-v360 .vo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; } #page-expediente .vo-card__head, #page-ordenes .vo-card__head, #page-v360 .vo-card__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; } #page-expediente .vo-card__head h2, #page-ordenes .vo-card__head h2, #page-v360 .vo-card__head h2 { font-size:15px; font-weight:700; } #page-expediente .vo-card__body, #page-ordenes .vo-card__body, #page-v360 .vo-card__body { padding:var(--s-5); } #page-expediente .vo-plate, #page-ordenes .vo-plate, #page-v360 .vo-plate { display:inline-flex; align-items:center; font-family:var(--font-num); font-weight:600; font-size:12px; letter-spacing:.04em; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:3px 8px; white-space:nowrap; } /* ══════════════════════════════════════════════════════════════════════════ 15 · CAMPAÑAS — control de cobro de campañas y ayudas de marca (F1-D) (Expedientes · vista campanias). Portado de la maqueta v2.1 (zip campañas, fuente/css/modulos.css §11) scopeado a #page-expediente (ERR #118). Vista de GESTIÓN de cobro, dos niveles: · Control 1 — POR COCHE: provisionado que la marca no ha facturado, o facturado de menos (tabla .camp-list). Aquí vive el riesgo y la acción. · Control 2 — POR MARCA: salud de la cuenta corriente sociedad × marca (panel .ccm). La liquidación es AGREGADA: no hay fecha de cobro por coche. Desvíos de la maqueta: .dinput → .fdate (componente de fecha ya en prod); .ccm a 4 columnas (4 combos vivos reales, la maqueta traía 3 de demo). ══════════════════════════════════════════════════════════════════════════ */ /* tira de 4 KPIs */ #page-expediente .kpis--camp { grid-template-columns:repeat(4,1fr); } @media (max-width:1180px){ #page-expediente .kpis--camp{ grid-template-columns:repeat(2,1fr); } } /* KPI destacado en warn — lo accionable (cola > 90 días) */ #page-expediente .kpi--warn { border-color:color-mix(in srgb,var(--warn) 42%,var(--border)); background:linear-gradient(180deg,color-mix(in srgb,var(--warn-bg) 72%,var(--surface)),var(--surface)); } #page-expediente .kpi--warn .kpi__chip { background:var(--warn); color:#fff; } #page-expediente .kpi--warn .kpi__val { color:var(--warn); } #page-expediente .kpi--warn .kpi__sub { color:var(--warn); font-weight:600; } /* KPI compacto en positivo — "la marca está al día" */ #page-expediente .kpi--ok .kpi__chip { background:var(--pos-bg); color:var(--pos); } #page-expediente .kpi--ok .kpi__val { color:var(--pos); } #page-expediente .kpi--ok .kpi__sub { color:var(--pos); } /* ── Control 2 · panel cuenta corriente marca ── */ #page-expediente .camp-ccmcard { margin-bottom:var(--s-5); } #page-expediente .ccm { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); padding:var(--s-4) var(--s-5); } @media (max-width:1280px){ #page-expediente .ccm{ grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ #page-expediente .ccm{ grid-template-columns:1fr; } } #page-expediente .ccm-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:13px 16px 4px; display:flex; flex-direction:column; } #page-expediente .ccm-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } #page-expediente .ccm-card__soc { font-size:13px; font-weight:700; color:var(--text); letter-spacing:.01em; } #page-expediente .ccm-card__soc small { display:block; font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-top:2px; } #page-expediente .ccm-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px dashed var(--border); font-size:12px; } #page-expediente .ccm-row .k { color:var(--text-2); } #page-expediente .ccm-row .v { font-family:var(--font-num); font-weight:600; color:var(--text); text-align:right; } #page-expediente .ccm-row--saldo .v { font-size:17px; font-weight:700; } #page-expediente .ccm-row--saldo .v.is-debe { color:var(--neg); } #page-expediente .ccm-note { padding:11px var(--s-5) 14px; border-top:1px dashed var(--border); font-size:11px; line-height:1.55; color:var(--text-3); } #page-expediente .ccm-note b { color:var(--text-2); } /* ── Control 1 · filtros (hint bajo la barra; acciones ya definidas en §3) ── */ #page-expediente .m-filters__hint { flex-basis:100%; font-size:10.5px; color:var(--text-3); margin-top:-4px; } #page-expediente .m-filters__hint b { color:var(--text-2); } /* ── Control 1 · tabla por coche ── */ /* el concepto contable real es LARGO (60-100 chars, no los rótulos cortos de la demo del zip): sin tope, la columna Campañas expulsaba Reclamado/Pendiente/Días/Estado a scroll horizontal. table-layout FIXED con presupuesto de anchos (Σ=100%) + ellipsis en las celdas de texto → las 10 columnas caben sin scroll (paridad con el listado de Ventas del módulo). */ #page-expediente .camp-list { table-layout:fixed; width:100%; } #page-expediente .camp-list th { letter-spacing:.02em; } #page-expediente .camp-list th:nth-child(1) { width:9%; } /* nº control + serie */ #page-expediente .camp-list th:nth-child(2) { width:8.5%; } /* f. cierre */ #page-expediente .camp-list th:nth-child(3) { width:9%; } /* matrícula */ #page-expediente .camp-list th:nth-child(4) { width:11.5%; } /* modelo */ #page-expediente .camp-list th:nth-child(5) { width:13%; } /* campañas (concepto) */ #page-expediente .camp-list th:nth-child(6) { width:10%; } /* reclamado */ #page-expediente .camp-list th:nth-child(7) { width:10%; } /* facturado */ #page-expediente .camp-list th:nth-child(8) { width:10%; } /* pendiente */ #page-expediente .camp-list th:nth-child(9) { width:6.5%; } /* días */ #page-expediente .camp-list th:nth-child(10) { width:12.5%; }/* estado */ #page-expediente .camp-list th, #page-expediente .camp-list td { overflow:hidden; text-overflow:ellipsis; } #page-expediente .camp-list td .m-veh { max-width:100%; } #page-expediente .camp-list td .m-veh b, #page-expediente .camp-list td .m-veh small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #page-expediente .camp-list th[data-csort] { cursor:pointer; user-select:none; white-space:nowrap; } #page-expediente .camp-list th[data-csort]:hover { color:var(--text); } #page-expediente .camp-list th[data-csort]::after { content:"↕"; margin-left:5px; font-size:9px; opacity:.4; } #page-expediente .camp-list th[data-csort].is-desc::after { content:"↓"; opacity:1; } #page-expediente .camp-list th[data-csort].is-asc::after { content:"↑"; opacity:1; } #page-expediente .camp-list td.pcol { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; color:var(--text); } #page-expediente .camp-list td.is-negv { color:var(--neg); } #page-expediente .camp-serie { display:block; font-size:10px; font-weight:600; letter-spacing:.05em; color:var(--text-3); margin-top:1px; font-family:var(--font-num); } #page-expediente .dias-chip { display:inline-flex; align-items:center; font-family:var(--font-num); font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); } #page-expediente .dias-chip--neu { color:var(--text-2); background:var(--surface-2); } #page-expediente .dias-chip--warn { color:var(--warn); background:var(--warn-bg); } #page-expediente .dias-chip--neg { color:var(--neg); background:var(--neg-bg); } /* estado vacío FELIZ (sin pendientes = buena noticia) */ #page-expediente .m-empty--happy .m-empty__ico { background:var(--pos-bg); color:var(--pos); } #page-expediente .m-empty--happy .m-empty__t { color:var(--pos); } /* ⓘ de concepto en la FICHA (camp-table): el literal contable va recortado; el botón abre el modal propio con el texto completo (decisión gerente 02/07) */ #page-expediente .camp-table .camp-info { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text-3); font-size:10px; font-weight:700; font-family:var(--font-num); line-height:1; cursor:pointer; vertical-align:middle; flex-shrink:0; padding:0; } #page-expediente .camp-table .camp-info:hover { color:var(--accent); border-color:var(--accent); } /* ═══ F3a — Panel Gestión Comercial VN+VO (scopeada #page-gestion_comercial_*, ERR #118) ═══ */ #page-gestion_comercial_vn .gc-wrap, #page-gestion_comercial_vo .gc-wrap { max-width: var(--page-max, 1400px); margin: 0 auto; padding: var(--s-4) var(--s-5); } #page-gestion_comercial_vn .gc-head, #page-gestion_comercial_vo .gc-head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-4); } #page-gestion_comercial_vn .gc-title, #page-gestion_comercial_vo .gc-title { font-size: 20px; font-weight: 700; color: var(--text); } #page-gestion_comercial_vn .gc-seg, #page-gestion_comercial_vo .gc-seg { color: var(--accent); font-weight: 800; } #page-gestion_comercial_vn .gc-filtros, #page-gestion_comercial_vo .gc-filtros { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; } #page-gestion_comercial_vn .gc-f, #page-gestion_comercial_vo .gc-f { display: flex; flex-direction: column; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); gap: 3px; } #page-gestion_comercial_vn .gc-f input, #page-gestion_comercial_vn .gc-f select, #page-gestion_comercial_vo .gc-f input, #page-gestion_comercial_vo .gc-f select { font-family: var(--font-sans); font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; min-width: 120px; } #page-gestion_comercial_vn .gc-f select[multiple], #page-gestion_comercial_vo .gc-f select[multiple] { min-height: 34px; max-height: 34px; } #page-gestion_comercial_vn .gc-btn, #page-gestion_comercial_vo .gc-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 16px; cursor: pointer; border: 1px solid var(--border); } #page-gestion_comercial_vn .gc-btn--go, #page-gestion_comercial_vo .gc-btn--go { background: var(--accent); color: var(--accent-on, #fff); border-color: var(--accent); } #page-gestion_comercial_vn .gc-btn--ghost, #page-gestion_comercial_vo .gc-btn--ghost { background: var(--surface); color: var(--text-2); } #page-gestion_comercial_vn .gc-tiles, #page-gestion_comercial_vo .gc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); } #page-gestion_comercial_vn .gc-tile, #page-gestion_comercial_vo .gc-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--kpi-pad, 16px); display: flex; flex-direction: column; gap: 4px; min-height: 96px; } #page-gestion_comercial_vn .gc-tile__l, #page-gestion_comercial_vo .gc-tile__l { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } /* T2: dimensionado al PEOR CASO (agregado de grupo "52.210.877,26 €") → cabe en UNA línea, coherente en todas las tiles */ #page-gestion_comercial_vn .gc-tile__v, #page-gestion_comercial_vo .gc-tile__v { font-family: var(--font-num); font-size: 18px; font-weight: var(--kpi-val-fw, 700); color: var(--text); white-space: nowrap; } /* T1: Market/Ventas share como tile (valor en acento, como la card previa) */ #page-gestion_comercial_vn .gc-tile--share .gc-tile__v { color: var(--accent-strong, #0a7a54); } #page-gestion_comercial_vn .gc-shares-foot { font-size: 11px; color: var(--text-3); margin: calc(-1 * var(--s-3)) 0 var(--s-4); } #page-gestion_comercial_vn .gc-shares-foot .gc-aviso { color: var(--warn, #b45309); font-weight: 600; } #page-gestion_comercial_vn .gc-tile__sub, #page-gestion_comercial_vo .gc-tile__sub { font-size: 11px; color: var(--text-3); } #page-gestion_comercial_vn .gc-tile__chips, #page-gestion_comercial_vo .gc-tile__chips { display: flex; flex-wrap: wrap; gap: 4px; } #page-gestion_comercial_vn .gc-chip, #page-gestion_comercial_vo .gc-chip { font-size: 10px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); padding: 1px 8px; } #page-gestion_comercial_vn .gc-chip--auto, #page-gestion_comercial_vo .gc-chip--auto { background: var(--accent-weak, #e2f4ec); color: var(--accent-strong, #0a7a54); border-color: var(--accent-weak, #cde9dd); } #page-gestion_comercial_vn .gc-tile--rap, #page-gestion_comercial_vo .gc-tile--rap { cursor: pointer; border-color: var(--accent-weak, #cde9dd); } #page-gestion_comercial_vn .gc-tile--rap:hover, #page-gestion_comercial_vo .gc-tile--rap:hover { border-color: var(--accent); } #page-gestion_comercial_vn .gc-tile--camp { cursor: pointer; border-color: var(--accent-weak, #cde9dd); } #page-gestion_comercial_vn .gc-tile--camp:hover { border-color: var(--accent); } #page-gestion_comercial_vn .gc-tile--soon, #page-gestion_comercial_vo .gc-tile--soon { opacity: .6; } #page-gestion_comercial_vn .gc-i, #page-gestion_comercial_vo .gc-i { color: var(--text-3); font-size: 11px; } #page-gestion_comercial_vn .gc-panel, #page-gestion_comercial_vo .gc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-4); } #page-gestion_comercial_vn .gc-panel__h, #page-gestion_comercial_vo .gc-panel__h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: var(--s-3); display: flex; align-items: center; gap: 10px; } /* T3 (VO): fila [Rappeles+Objetivos | Evolución] → la evolución rellena el hueco a la derecha de Objetivos */ #page-gestion_comercial_vo .gc-obj-evo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--s-4); align-items: stretch; margin-bottom: var(--s-4); } #page-gestion_comercial_vo .gc-obj-evo__l { display: grid; gap: var(--s-3); align-content: start; } #page-gestion_comercial_vo .gc-obj-evo > .gc-panel { margin-bottom: 0; } @media (max-width: 900px) { #page-gestion_comercial_vo .gc-obj-evo { grid-template-columns: 1fr; } } #page-gestion_comercial_vn .gc-cols, #page-gestion_comercial_vo .gc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 900px) { #page-gestion_comercial_vn .gc-cols, #page-gestion_comercial_vo .gc-cols { grid-template-columns: 1fr; } } /* AUDIT-CSS (06/07): en 1 columna, los paneles de tabla son grid items con min-width:auto → no encogen bajo el min-content de la .gc-tbl y desbordan el viewport en móvil (hasta 65px @320, scroll horizontal de página). min-width:0 deja encoger el track; overflow-x:auto contiene la tabla dentro de la card (patrón .dwrap). Inerte ≥900px. */ @media (max-width: 900px) { #page-gestion_comercial_vn .gc-cols > .gc-panel, #page-gestion_comercial_vo .gc-cols > .gc-panel { min-width: 0; overflow-x: auto; } } #page-gestion_comercial_vn .gc-mix__row, #page-gestion_comercial_vo .gc-mix__row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; } #page-gestion_comercial_vn .gc-mix__row:hover, #page-gestion_comercial_vo .gc-mix__row:hover { background: var(--row-hover, #f5f5f0); } #page-gestion_comercial_vn .gc-mix__l, #page-gestion_comercial_vo .gc-mix__l { font-size: 12px; color: var(--text-2); } #page-gestion_comercial_vn .gc-mix__bar, #page-gestion_comercial_vo .gc-mix__bar { background: var(--surface-2); border-radius: var(--radius-pill, 999px); height: 10px; overflow: hidden; } #page-gestion_comercial_vn .gc-mix__bar span, #page-gestion_comercial_vo .gc-mix__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; } #page-gestion_comercial_vn .gc-mix__n, #page-gestion_comercial_vo .gc-mix__n { font-family: var(--font-num); font-size: 12px; text-align: right; color: var(--text); } #page-gestion_comercial_vn .gc-shares, #page-gestion_comercial_vo .gc-shares { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } #page-gestion_comercial_vn .gc-share, #page-gestion_comercial_vo .gc-share { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--s-3); } #page-gestion_comercial_vn .gc-share__l, #page-gestion_comercial_vo .gc-share__l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } #page-gestion_comercial_vn .gc-share__v, #page-gestion_comercial_vo .gc-share__v { font-family: var(--font-num); font-size: 22px; font-weight: 700; color: var(--accent-strong, #0a7a54); } #page-gestion_comercial_vn .gc-share__s, #page-gestion_comercial_vo .gc-share__s { font-size: 10px; color: var(--text-3); } #page-gestion_comercial_vn .gc-share__meta, #page-gestion_comercial_vo .gc-share__meta { font-size: 10px; color: var(--text-3); margin-top: 8px; } #page-gestion_comercial_vn .gc-aviso, #page-gestion_comercial_vo .gc-aviso { font-size: 11px; color: var(--neg, #b3261e); background: var(--neg-bg, #fbeaea); border: 1px solid var(--neg, #b3261e); border-radius: var(--radius-sm); padding: 7px 10px; margin-bottom: var(--s-3); } #page-gestion_comercial_vn .gc-tbl, #page-gestion_comercial_vo .gc-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } #page-gestion_comercial_vn .gc-tbl th, #page-gestion_comercial_vo .gc-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); } #page-gestion_comercial_vn .gc-tbl td, #page-gestion_comercial_vo .gc-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--row-border, #eee); color: var(--text); } #page-gestion_comercial_vn .gc-tbl .n, #page-gestion_comercial_vo .gc-tbl .n { text-align: right; font-family: var(--font-num); } #page-gestion_comercial_vn .gc-tbl tbody tr[data-drill], #page-gestion_comercial_vo .gc-tbl tbody tr[data-drill] { cursor: pointer; } #page-gestion_comercial_vn .gc-tbl tbody tr:hover, #page-gestion_comercial_vo .gc-tbl tbody tr:hover { background: var(--row-hover, #f5f5f0); } #page-gestion_comercial_vn .gc-sort, #page-gestion_comercial_vo .gc-sort { font-size: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; } #page-gestion_comercial_vn .gc-evo, #page-gestion_comercial_vo .gc-evo { display: flex; align-items: flex-end; gap: 3px; height: 90px; } #page-gestion_comercial_vn .gc-evo__bar, #page-gestion_comercial_vo .gc-evo__bar { flex: 1; height: 100%; display: flex; align-items: flex-end; } #page-gestion_comercial_vn .gc-evo__bar span, #page-gestion_comercial_vo .gc-evo__bar span { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; } #page-gestion_comercial_vn .gc-evo__x, #page-gestion_comercial_vo .gc-evo__x { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); margin-top: 4px; } /* Evolución índice base 100 (líneas): tu serie (--accent) vs mercado DGT (--text-2, discontinua) */ #page-gestion_comercial_vn .gc-line-wrap, #page-gestion_comercial_vo .gc-line-wrap { width: 100%; } #page-gestion_comercial_vn .gc-line, #page-gestion_comercial_vo .gc-line { display: block; width: 100%; height: 128px; overflow: visible; } #page-gestion_comercial_vn .gc-line__base, #page-gestion_comercial_vo .gc-line__base { stroke: var(--text-3); stroke-width: 1; stroke-opacity: .45; stroke-dasharray: 3 3; } #page-gestion_comercial_vn .gc-line__you, #page-gestion_comercial_vo .gc-line__you { fill: none; stroke: var(--accent); stroke-width: 2; } #page-gestion_comercial_vn .gc-line__mkt, #page-gestion_comercial_vo .gc-line__mkt { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-dasharray: 5 3; } #page-gestion_comercial_vn .gc-line__dot--you, #page-gestion_comercial_vo .gc-line__dot--you { fill: var(--accent); } #page-gestion_comercial_vn .gc-line__dot--mkt, #page-gestion_comercial_vo .gc-line__dot--mkt { fill: var(--text-2); } #page-gestion_comercial_vn .gc-line__lg, #page-gestion_comercial_vo .gc-line__lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 11px; color: var(--text-2); margin-top: 6px; } #page-gestion_comercial_vn .gc-line__k, #page-gestion_comercial_vo .gc-line__k { display: inline-flex; align-items: center; gap: 5px; } #page-gestion_comercial_vn .gc-line__k::before, #page-gestion_comercial_vo .gc-line__k::before { content: ''; width: 16px; border-top: 2px solid var(--accent); } #page-gestion_comercial_vn .gc-line__k--mkt::before, #page-gestion_comercial_vo .gc-line__k--mkt::before { border-top: 2px dashed var(--text-2); } #page-gestion_comercial_vn .gc-line__base-lbl, #page-gestion_comercial_vo .gc-line__base-lbl { margin-left: auto; color: var(--text-3); } #page-gestion_comercial_vn .gc-yoy, #page-gestion_comercial_vo .gc-yoy { font-size: 11px; font-weight: 600; } #page-gestion_comercial_vn .gc-yoy.up, #page-gestion_comercial_vo .gc-yoy.up { color: var(--pos, #0a7a54); } #page-gestion_comercial_vn .gc-yoy.dn, #page-gestion_comercial_vo .gc-yoy.dn { color: var(--neg, #b3261e); } #page-gestion_comercial_vn .gc-empty, #page-gestion_comercial_vo .gc-empty { color: var(--text-3); font-size: 12px; padding: 12px; text-align: center; } #page-gestion_comercial_vn .gc-skel, #page-gestion_comercial_vo .gc-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-3); } #page-gestion_comercial_vn .gc-skel__tile, #page-gestion_comercial_vo .gc-skel__tile { height: 96px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; border-radius: var(--radius); animation: gc-shimmer 1.2s infinite; } @keyframes gc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } #page-gestion_comercial_vn .gc-error, #page-gestion_comercial_vo .gc-error { text-align: center; padding: var(--s-6) var(--s-5); } #page-gestion_comercial_vn .gc-error__t, #page-gestion_comercial_vo .gc-error__t { font-weight: 700; color: var(--text); margin-bottom: 6px; } #page-gestion_comercial_vn .gc-error__m, #page-gestion_comercial_vo .gc-error__m { font-size: 12px; color: var(--text-3); margin-bottom: var(--s-3); } /* F3b — card Objetivos + modal (prefijo gc-, coexisten con el panel #page-gestion_comercial_*) */ #page-gestion_comercial_vn .gc-tile--obj, #page-gestion_comercial_vo .gc-tile--obj { cursor: pointer; border-color: var(--accent-weak, #cde9dd); } #page-gestion_comercial_vn .gc-tile--obj:hover, #page-gestion_comercial_vo .gc-tile--obj:hover { border-color: var(--accent); } .gc-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10000; display: flex; align-items: center; justify-content: center; } .gc-modal__box { background: var(--surface, #fff); border-radius: var(--radius-lg, 12px); width: 720px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.34); } .gc-modal__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; color: var(--text); padding: 16px 20px; border-bottom: 1px solid var(--border); } .gc-modal__x { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-3); line-height: 1; } .gc-modal__body { padding: 16px 20px; overflow: auto; } .gc-obj-head, .gc-obj-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr .7fr; gap: 10px; align-items: center; padding: 6px 0; } .gc-obj-head { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border); } .gc-obj-l { font-size: 12.5px; color: var(--text-2); } .gc-obj-bar { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; } .gc-obj-bar span { display: block; height: 100%; background: var(--accent); } .gc-obj-n { font-family: var(--font-num); font-size: 12px; text-align: right; color: var(--text); } .gc-obj-c { font-family: var(--font-num); font-size: 12px; text-align: right; color: var(--text-3); } .gc-obj-c.ok { color: var(--pos, #0a7a54); font-weight: 700; } .gc-obj-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 16px 0 8px; border-top: 1px solid var(--border); padding-top: 12px; } .gc-obj-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .gc-obj-form label { display: flex; flex-direction: column; font-size: 9.5px; font-weight: 600; text-transform: uppercase; color: var(--text-3); gap: 3px; } .gc-obj-form input, .gc-obj-form select { font-family: var(--font-sans); font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--surface); color: var(--text); min-width: 90px; } .gc-obj-pend { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); padding: 5px 0; } /* F3c — detalle rappeles (CON €) + marcado (SIN €). Modales prefijo gc-. */ .gc-modal__box--wide { width: 900px; } .gc-modal__actions { display: flex; align-items: center; gap: 10px; } .gc-obj-parcial { font-size: 15px !important; color: var(--text-3) !important; } .gc-rap-marca { margin-bottom: 18px; } .gc-rap-marca__h { font-size: 14px; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 2px solid var(--accent); margin-bottom: 8px; } .gc-rap-marca__t { font-family: var(--font-num); color: var(--accent-strong, #0a7a54); } .gc-rap-total { text-align: right; font-size: 15px; padding: 12px 0; border-top: 2px solid var(--border); margin-top: 8px; } .gc-help { font-size: 10px; color: var(--text-3); background: var(--surface-2); border-radius: var(--radius-pill, 999px); padding: 1px 7px; margin-left: 6px; cursor: help; } .gc-mk-marca { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-left: 10px; } .gc-mk-row { padding: 8px 0; border-bottom: 1px solid var(--row-border, #eee); } .gc-mk-cn { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; } .gc-mk-per { font-size: 10px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .gc-mk-tbl { border-collapse: collapse; } .gc-mk-tbl td { padding: 2px 3px; } .gc-mk-sel { font-size: 11px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-width: 84px; } /* F-anomalías: chip de aviso "sin precio registrado" en la tile de Facturación (scopeado ya por gc-chip) */ #page-gestion_comercial_vn .gc-chip--warn, #page-gestion_comercial_vo .gc-chip--warn { background: var(--neg-bg, #fbeaea); color: var(--neg, #b3261e); border-color: var(--neg, #b3261e); cursor: pointer; } /* ═══ Modal de trazabilidad de campañas (mayor 44002000 + semáforo banco) ═══ El modal cuelga de (fuera de #page-gestion_comercial_*) → los estilos de tabla/chip scopeados a la página NO alcanzan aquí; se re-declaran acotados a .gc-modal. */ .gc-modal .gc-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .gc-modal .gc-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .gc-modal .gc-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--row-border, #eee); color: var(--text); } .gc-modal .gc-tbl .n { text-align: right; font-family: var(--font-num); white-space: nowrap; } .gc-modal .gc-empty { padding: 20px; text-align: center; color: var(--text-3); font-size: 13px; } .gc-modal .gc-chip { font-size: 10px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); padding: 1px 8px; } .gc-modal .gc-chip--ok { background: var(--accent-weak, #e2f4ec); color: var(--accent-strong, #0a7a54); border-color: var(--accent-weak, #cde9dd); } .gc-modal .gc-chip--red { background: var(--neg-bg, #fbeaea); color: var(--neg, #b3261e); border-color: var(--neg, #b3261e); } .gc-modal .gc-chip--warn { background: #fdf3e3; color: #a86800; border-color: #e9d3a3; } .gc-modal .gc-mono { font-family: var(--font-num); } .gc-modal .gc-camp-intro, .gc-modal .gc-camp-nota { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; } .gc-modal .gc-camp-nota { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-3); } .gc-modal .gc-camp-row { cursor: pointer; } .gc-modal .gc-camp-row:hover { background: var(--row-hover, #f5f5f0); } .gc-modal .gc-camp-cod { font-family: var(--font-num); font-size: 11px; color: var(--text-2); } .gc-modal .gc-may-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .gc-modal .gc-may-emp { font-size: 11.5px; color: var(--text-3); } .gc-modal .gc-may-provision td { background: color-mix(in srgb, var(--neg, #b3261e) 5%, transparent); } .gc-modal .gc-may-abono td { background: color-mix(in srgb, var(--accent, #0a7a54) 5%, transparent); } .gc-modal .gc-may-con { max-width: 320px; font-size: 11.5px; color: var(--text-2); } .gc-modal .gc-sem { font-size: 10.5px; white-space: nowrap; } .gc-modal .gc-sem--ok { color: var(--accent-strong, #0a7a54); } .gc-modal .gc-sem--wait { color: var(--text-3); }