/* Tema de todo el ERP: estructura de la caja FácilVirtual (/pos/) con la paleta de la landing de linkgestion.
   Colores y fuentes: SOLO tokens de lg-tokens.css (var(--c-*), var(--f-*)). Se activa con <body class="fv-tema">.
   Los selectores llevan "body.fv-tema" para ganarle a los <style> propios de cada plantilla. */

/* Base: papel de la landing, texto ink, IBM Plex Sans */
body.fv-tema { background: var(--c-bg); color: var(--c-ink); font-family: var(--f-sans); }
body.fv-tema input, body.fv-tema select, body.fv-tema textarea, body.fv-tema button { font-family: inherit; }
body.fv-tema a { color: var(--c-link); }

/* Barra superior: verde oscuro de la landing (panel-dark), con una línea rust abajo */
body.fv-tema .topbar { background: var(--c-brand-dark); box-shadow: none; border-bottom: 3px solid var(--c-accent); }
body.fv-tema .topbar .logo-text { font-family: var(--f-slab); letter-spacing: .02em; text-transform: none; color: #fff; }

/* Menú lateral: como los menús desplegables de la caja */
body.fv-tema .sidebar { background: var(--c-surface-2); color: var(--c-ink); border-right: 1px solid var(--c-line-strong); }
body.fv-tema .sidebar.show { box-shadow: 2px 0 10px rgba(20,26,20,.22); }
body.fv-tema .sidebar h6 { display: inline-block; background: var(--c-brand); color: #fff; padding: 2px 8px; margin: 4px 0 6px;
  font-weight: 600; letter-spacing: .02em; }
body.fv-tema .sidebar a { color: var(--c-ink); border-radius: 0; margin-bottom: 1px; padding: 6px 10px; border-left: 3px solid transparent; }
body.fv-tema .sidebar a:hover { background: var(--c-hover); border-left-color: var(--c-accent); }
body.fv-tema .sidebar a.active { background: var(--c-brand); color: #fff; border-left-color: var(--c-accent); }
body.fv-tema .sidebar .section-divider { background: var(--c-line); border: 0; height: 1px; margin: 8px 2px; }
body.fv-tema .sidebar .session { color: var(--c-muted) !important; }
body.fv-tema .sidebar button.link-btn { color: var(--c-ink) !important; }

/* Títulos de página: Zilla Slab como la landing */
body.fv-tema .content h1 { color: var(--c-ink); font-family: var(--f-slab); font-weight: 600; }
body.fv-tema .content h2, body.fv-tema .content h3 { color: var(--c-ink); }

/* Recuadros: borde fino, sin redondeo ni sombra (caja) */
body.fv-tema .pd-card, body.fv-tema .hub-card, body.fv-tema .filter-card, body.fv-tema .form-card, body.fv-tema .card,
body.fv-tema .cd-box, body.fv-tema .prod-filters, body.fv-tema .scenario-box, body.fv-tema .resultado-box,
body.fv-tema .summary-card, body.fv-tema .resource-summary .summary-chip {
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); box-shadow: none;
}
body.fv-tema .pd-card .pd-card, body.fv-tema .cd-box .filter-card { background: var(--c-surface-2); }
/* Título del recuadro = solapa pine de la caja */
body.fv-tema .pd-card > h2 { background: var(--c-brand); color: #fff; margin: -18px -18px 14px; padding: 5px 12px; font-weight: 600; }
body.fv-tema .pd-card > h2 small { color: rgba(255,255,255,.85); }
body.fv-tema .pd-card > h2 a { color: #fff; }
body.fv-tema .section-title, body.fv-tema .hub-card-title { display: inline-block; background: var(--c-brand); color: #fff;
  padding: 2px 10px; font-weight: 600; }
body.fv-tema .cd-box > .section-title { display: block; margin: -16px -16px 14px; padding: 5px 12px; }
body.fv-tema .hub-card:hover { border-color: var(--c-accent); }

/* KPIs */
body.fv-tema .pd-kpi, body.fv-tema .cd-kpis div { border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-surface); box-shadow: none; }
body.fv-tema .pd-kpi { border-left: 4px solid var(--c-line-strong); }
body.fv-tema .pd-kpi.verde, body.fv-tema .cd-kpis .cd-saldo { border-color: var(--c-brand); }
body.fv-tema .pd-kpi.rojo { border-left-color: var(--c-danger); }
body.fv-tema .pd-kpi.ambar { border-left-color: var(--c-warn); }
body.fv-tema .pd-kpi.azul { border-left-color: var(--c-info); }
body.fv-tema .pd-kpi b, body.fv-tema .cd-kpis b { font-family: var(--f-mono); font-weight: 600; }
body.fv-tema .cd-kpis .cd-saldo { background: var(--c-brand-bg); }
body.fv-tema .cd-medio { border-radius: var(--r-sm); border-color: var(--c-line-strong); }
body.fv-tema .cd-medio:hover { border-color: var(--c-focus); background: var(--c-hover); }

/* Grillas: encabezado pine, filas con selección suave */
body.fv-tema table { background: var(--c-surface); }
body.fv-tema th, body.fv-tema .pd-table th, body.fv-tema .historial-table th, body.fv-tema .tabla-simple th {
  background: var(--c-brand); color: #fff; font-weight: 600; text-transform: none; letter-spacing: 0; border-color: var(--c-brand-dark);
}
body.fv-tema th a { color: #fff; }
body.fv-tema td { border-color: var(--c-line); }
body.fv-tema .pd-table td { border-bottom-color: var(--c-line); }
body.fv-tema tbody tr:hover > td { background: var(--c-sel); }
body.fv-tema .pd-table tfoot th, body.fv-tema .pd-table tfoot td, body.fv-tema tfoot th { background: var(--c-panel); color: var(--c-ink); }
body.fv-tema .pd-scroll, body.fv-tema .table-wrap { border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); box-shadow: none; }
body.fv-tema .link-detail, body.fv-tema .pd-table a:not(.btn) { color: var(--c-link); }

/* Campos */
body.fv-tema input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.fv-tema select, body.fv-tema textarea {
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background-color: var(--c-surface); color: var(--c-ink);
}
body.fv-tema input:focus, body.fv-tema select:focus, body.fv-tema textarea:focus {
  outline: 2px solid var(--c-focus); outline-offset: -1px; border-color: var(--c-focus);
}
body.fv-tema input[readonly], body.fv-tema input:disabled { background-color: var(--c-panel); }
body.fv-tema input[type=checkbox], body.fv-tema input[type=radio] { accent-color: var(--c-brand); }

/* Botones comunes: claros con degradé, como los de la caja */
body.fv-tema .btn, body.fv-tema .btn-light, body.fv-tema .btn-outline, body.fv-tema .btn-back, body.fv-tema .btn-secondary,
body.fv-tema .prod-filters .btn-limpiar {
  background: linear-gradient(var(--c-surface), var(--c-surface-2)); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  color: var(--c-ink); box-shadow: none;
}
body.fv-tema .btn:hover, body.fv-tema .btn-light:hover, body.fv-tema .btn-outline:hover, body.fv-tema .btn-back:hover,
body.fv-tema .btn-secondary:hover, body.fv-tema .prod-filters .btn-limpiar:hover {
  background: var(--c-hover); border-color: var(--c-ink);
}
/* Botón principal: rust de la landing (como "Cobrar" de la caja) */
body.fv-tema .btn-pri, body.fv-tema .btn-primary, body.fv-tema .btn-solid, body.fv-tema .btn-ok,
body.fv-tema .prod-filters button[type="submit"], body.fv-tema button[type="submit"].btn {
  background: var(--c-accent); border: 1px solid var(--c-accent-dark); border-radius: var(--r-sm); color: #fff;
  box-shadow: 0 1px 2px rgba(20,26,20,.25);
}
body.fv-tema .btn-pri:hover, body.fv-tema .btn-primary:hover, body.fv-tema .btn-solid:hover, body.fv-tema .btn-ok:hover,
body.fv-tema .prod-filters button[type="submit"]:hover, body.fv-tema button[type="submit"].btn:hover {
  background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff;
}
body.fv-tema .btn-ghost { background: transparent; border-color: transparent; }
body.fv-tema .btn-danger, body.fv-tema .btn-del { background: var(--c-danger); border: 1px solid var(--c-danger); color: #fff; border-radius: var(--r-sm); }
body.fv-tema .btn:focus-visible, body.fv-tema button:focus-visible, body.fv-tema a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* Tablero del inicio */
body.fv-tema .tb-open { background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); box-shadow: none; color: var(--c-ink); }
body.fv-tema .tb-open:hover { background: var(--c-hover); border-color: var(--c-accent); }
body.fv-tema .tb-kpi { border-radius: var(--r-sm); box-shadow: none; border-width: 1px; border-left-width: 4px; }
body.fv-tema .tb-kpi:hover { transform: none; box-shadow: 0 2px 8px rgba(20,26,20,.14); }
body.fv-tema .tb-kpi b { font-family: var(--f-mono); }
body.fv-tema .tb-modal { border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); padding: 0; }
body.fv-tema .tb-modal-head { background: var(--c-brand); color: #fff; }
body.fv-tema .tb-modal-head h2, body.fv-tema .tb-modal-head a, body.fv-tema .tb-modal-head .tb-close { color: #fff; }
body.fv-tema .hub-card { border-width: 1px; border-radius: var(--r-sm); }
body.fv-tema .hub-card:hover { transform: none; box-shadow: 0 2px 8px rgba(20,26,20,.14); }

/* Pestañas y chips */
body.fv-tema .pd-tabs { border-bottom-color: var(--c-brand); }
body.fv-tema .pd-tabs a { color: var(--c-muted); }
body.fv-tema .pd-tabs a.on { color: var(--c-ink); border-bottom-color: var(--c-accent); }
body.fv-tema .pd-tabs a.on .n { background: var(--c-brand); }
body.fv-tema .pd-chips a { border-radius: var(--r-sm); background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-ink); }
body.fv-tema .pd-chips a.on { background: var(--c-brand); border-color: var(--c-brand-dark); color: #fff; }
body.fv-tema .chip { border-radius: var(--r-sm); background: var(--c-panel); }

/* Avisos y sugerencias */
body.fv-tema .pd-msg, body.fv-tema .alert { border-radius: var(--r-sm); }
body.fv-tema .suggestions { border-radius: 0; border-color: var(--c-line-strong); box-shadow: 0 6px 18px rgba(20,26,20,.22); }
body.fv-tema .suggestions button:hover { background: var(--c-sel); }

/* Números con la mono de la landing */
body.fv-tema .num, body.fv-tema td.num { font-variant-numeric: tabular-nums; }

/* Celulares: la solapa del recuadro se adapta al padding chico */
@media (max-width: 700px) {
  body.fv-tema .pd-card > h2 { margin: -14px -14px 12px; }
}