/* FarmaPOS — sistema visual
   Una familia (Manrope), cifras tabulares, verde farmacia como único acento.
   Lo característico: la cápsula farmacia/tienda y la barra de vencimientos. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../vendor/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fp-bg: #F6F7F5;
  --fp-surface: #FFFFFF;
  --fp-surface-2: #EEF1EE;
  --fp-line: #E1E6E2;
  --fp-ink: #17211C;
  --fp-muted: #5F6B65;
  --fp-primary: #0E7C5A;
  --fp-primary-ink: #075A41;
  --fp-primary-soft: #E3F2EC;
  --fp-danger: #C2382F;
  --fp-danger-soft: #FBE9E7;
  --fp-warning: #8A5200;
  --fp-warning-soft: #FDF1DC;
  --fp-notice: #8A6D00;
  --fp-notice-soft: #FAF5DA;
  --fp-info: #2F6FB0;
  --fp-info-soft: #E5EEF8;
  --fp-radius: 10px;
  --fp-radius-lg: 14px;
  --fp-shadow: 0 1px 2px rgba(23, 33, 28, .05), 0 2px 8px rgba(23, 33, 28, .04);
  --fp-sidebar: 248px;

  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--fp-ink);
  --bs-body-bg: var(--fp-bg);
  --bs-border-color: var(--fp-line);
  --bs-primary: var(--fp-primary);
  --bs-primary-rgb: 14, 124, 90;
  --bs-link-color: var(--fp-primary-ink);
  --bs-link-color-rgb: 7, 90, 65;
  --bs-link-hover-color: var(--fp-primary);
  --bs-secondary-color: var(--fp-muted);
  --bs-border-radius: var(--fp-radius);
  --bs-focus-ring-color: rgba(14, 124, 90, .25);
}

body { font-feature-settings: "tnum" 0; letter-spacing: -.005em; }
.num, .table td.num, .table th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
h1, .h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h2, .h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.text-muted, .form-text { color: var(--fp-muted) !important; }
a { text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

/* ---------- layout */
.fp-shell { display: grid; grid-template-columns: var(--fp-sidebar) 1fr; min-height: 100vh; }
.fp-sidebar { background: var(--fp-surface); border-right: 1px solid var(--fp-line); position: sticky; top: 0;
  height: 100vh; overflow-y: auto; padding: 1rem .75rem 1.5rem; }
.fp-brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; color: var(--fp-ink); text-decoration: none; }
.fp-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--fp-primary); position: relative; flex: none; }
.fp-brand-mark::before, .fp-brand-mark::after { content: ""; position: absolute; background: #fff; border-radius: 2px; }
.fp-brand-mark::before { left: 15px; top: 8px; width: 4px; height: 18px; }
.fp-brand-mark::after { left: 8px; top: 15px; width: 18px; height: 4px; }
.fp-brand-name { font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.02em; }
.fp-brand-company { font-size: .78rem; color: var(--fp-muted); line-height: 1.2; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nav-title { font-size: .75rem; font-weight: 600; color: var(--fp-muted); padding: 1rem .65rem .35rem; }
.fp-nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 8px;
  color: var(--fp-ink); text-decoration: none; font-weight: 500; font-size: .9rem; }
.fp-nav a .bi { font-size: 1.05rem; color: var(--fp-muted); }
.fp-nav a:hover { background: var(--fp-surface-2); }
.fp-nav a.active { background: var(--fp-primary-soft); color: var(--fp-primary-ink); font-weight: 650; }
.fp-nav a.active .bi { color: var(--fp-primary); }

.fp-backdrop { display: none; }
.fp-main { min-width: 0; display: flex; flex-direction: column; grid-column: 2; }
.fp-topbar { position: sticky; top: 0; z-index: 1020; background: rgba(246, 247, 245, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fp-line); display: flex; align-items: center; gap: .75rem; padding: .6rem 1.5rem; }
.fp-search { flex: 1; max-width: 520px; position: relative; }
.fp-search .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--fp-muted); }
.fp-search input { padding-left: 2.3rem; background: var(--fp-surface); }
.fp-content { padding: 1.5rem; max-width: 1440px; width: 100%; }
.fp-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.fp-page-head p { margin: .25rem 0 0; color: var(--fp-muted); }
.fp-menu-btn { display: none; }

@media (max-width: 991.98px) {
  .fp-shell { grid-template-columns: 1fr; }
  .fp-main { grid-column: 1; }
  .fp-sidebar { position: fixed; z-index: 1045; left: 0; width: 280px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--fp-shadow); }
  .fp-sidebar.open { transform: none; }
  .fp-backdrop { position: fixed; inset: 0; background: rgba(23, 33, 28, .35); z-index: 1040; display: none; }
  .fp-backdrop.show { display: block; }
  .fp-menu-btn { display: inline-flex; }
  .fp-topbar { padding: .5rem .75rem; }
  .fp-content { padding: 1rem .75rem; }
}

/* ---------- superficies */
.fp-card { background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow); }
.fp-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--fp-line); }
.fp-card-body { padding: 1.1rem; }
.fp-section + .fp-section { margin-top: 1.25rem; }
.fp-subtle { background: var(--fp-surface-2); border-radius: var(--fp-radius); padding: .75rem 1rem; }

/* KPI: número grande, etiqueta debajo (no encima) */
.fp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1279.98px) { .fp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-kpi { background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: .9rem 1rem; text-decoration: none; color: inherit; display: block; }
a.fp-kpi:hover { border-color: #C8D2CC; }
.fp-kpi-value { font-size: 1.45rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; }
.fp-kpi-label { color: var(--fp-muted); font-size: .85rem; margin-top: .15rem; }
.fp-kpi.is-danger .fp-kpi-value { color: var(--fp-danger); }
.fp-kpi.is-warning .fp-kpi-value { color: var(--fp-warning); }

/* ---------- tablas */
.table { --bs-table-bg: transparent; margin: 0; font-size: .9rem; }
.table > :not(caption) > * > * { padding: .6rem .75rem; border-bottom-color: var(--fp-line); }
.table thead th { font-size: .8rem; font-weight: 650; color: var(--fp-muted); background: var(--fp-surface-2); border-bottom: 1px solid var(--fp-line); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F7FAF8; }
.fp-table-wrap { overflow-x: auto; }
.fp-row-sub { color: var(--fp-muted); font-size: .8rem; }
.fp-row-link { color: var(--fp-ink); font-weight: 600; text-decoration: none; }
.fp-row-link:hover { color: var(--fp-primary-ink); text-decoration: underline; }
tr.is-inactive td { color: var(--fp-muted); }

/* ---------- cápsula farmacia / tienda */
.fp-capsule { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; font-size: .72rem; font-weight: 700; line-height: 1; border: 1px solid var(--fp-primary); vertical-align: middle; }
.fp-capsule span { padding: .28rem .5rem; }
.fp-capsule span:first-child { background: var(--fp-primary); color: #fff; }
.fp-capsule span:last-child { color: var(--fp-primary-ink); background: #fff; }
.fp-capsule.is-store { border-color: #C9D1CC; }
.fp-capsule.is-store span:first-child { background: var(--fp-surface-2); color: var(--fp-muted); }
.fp-capsule.is-store span:last-child { color: var(--fp-muted); }

.fp-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 650; border-radius: 6px; padding: .2rem .45rem; line-height: 1.1; white-space: nowrap; }
.fp-tag.ok { background: var(--fp-primary-soft); color: var(--fp-primary-ink); }
.fp-tag.danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-tag.warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-tag.notice { background: var(--fp-notice-soft); color: var(--fp-notice); }
.fp-tag.info { background: var(--fp-info-soft); color: var(--fp-info); }
.fp-tag.neutral { background: var(--fp-surface-2); color: var(--fp-muted); }

.fp-qty-in { color: var(--fp-primary-ink); font-weight: 650; }
.fp-qty-out { color: var(--fp-danger); font-weight: 650; }

/* ---------- barra de vencimientos */
.fp-expiry-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--fp-surface-2); }
.fp-expiry-bar > div { min-width: 3px; }
.fp-expiry-bar .danger { background: var(--fp-danger); }
.fp-expiry-bar .warning { background: #E0A43A; }
.fp-expiry-bar .ok { background: var(--fp-primary); }
.fp-expiry-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-top: .9rem; }
.fp-expiry-legend a { display: block; text-decoration: none; color: inherit; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--fp-line); background: var(--fp-surface); }
.fp-expiry-legend a:hover, .fp-expiry-legend a.active { border-color: var(--fp-primary); }
.fp-expiry-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.fp-expiry-legend .dot.danger { background: var(--fp-danger); }
.fp-expiry-legend .dot.warning { background: #E0A43A; }
.fp-expiry-legend .dot.ok { background: var(--fp-primary); }
.fp-expiry-legend strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }

/* ---------- ficha farmacéutica compacta */
.fp-pharma-line { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--fp-muted); font-size: .85rem; }
.fp-pharma-line b { color: var(--fp-ink); font-weight: 650; }
.fp-product-img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--fp-radius); background: var(--fp-surface-2); border: 1px solid var(--fp-line); }
.fp-product-img.placeholder { display: grid; place-items: center; color: var(--fp-muted); font-size: 2rem; }
.fp-dl { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.fp-dl dt { color: var(--fp-muted); font-weight: 500; }
.fp-dl dd { margin: 0; font-weight: 600; }

/* ---------- formularios */
.form-control, .form-select { border-color: #D3DBD6; border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: var(--fp-primary); box-shadow: 0 0 0 .2rem rgba(14, 124, 90, .15); }
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--fp-primary); border-color: var(--fp-primary); }
.fp-fieldset { border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg); background: var(--fp-surface); padding: 1.1rem; }
.fp-fieldset > legend { float: none; width: auto; font-size: 1rem; font-weight: 700; padding: 0; margin-bottom: .8rem; }
.fp-fieldset.is-pharma { border-color: #B9DCCD; background: linear-gradient(0deg, #FBFDFC, #FBFDFC); }
.fp-fieldset.is-pharma > legend::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fp-primary); margin-right: .45rem; vertical-align: 1px; }
[hidden] { display: none !important; }
.fp-sticky-actions { position: sticky; bottom: 0; background: rgba(246, 247, 245, .95); backdrop-filter: blur(6px); border-top: 1px solid var(--fp-line); padding: .75rem 0; margin-top: 1.25rem; display: flex; gap: .5rem; justify-content: flex-end; z-index: 5; }

.btn { font-weight: 600; border-radius: 8px; }
.btn-primary { --bs-btn-bg: var(--fp-primary); --bs-btn-border-color: var(--fp-primary); --bs-btn-hover-bg: var(--fp-primary-ink); --bs-btn-hover-border-color: var(--fp-primary-ink); --bs-btn-active-bg: var(--fp-primary-ink); --bs-btn-disabled-bg: var(--fp-primary); }
.btn-outline-primary { --bs-btn-color: var(--fp-primary-ink); --bs-btn-border-color: #A9CFBF; --bs-btn-hover-bg: var(--fp-primary-soft); --bs-btn-hover-color: var(--fp-primary-ink); --bs-btn-hover-border-color: var(--fp-primary); --bs-btn-active-bg: var(--fp-primary-soft); --bs-btn-active-color: var(--fp-primary-ink); }
.btn-light { --bs-btn-bg: var(--fp-surface); --bs-btn-border-color: var(--fp-line); --bs-btn-hover-bg: var(--fp-surface-2); --bs-btn-hover-border-color: #CBD3CE; }
.btn-touch { min-height: 44px; }

.fp-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fp-filters .form-control, .fp-filters .form-select { width: auto; min-width: 150px; }
.fp-filters .grow { flex: 1; min-width: 220px; }

/* autocompletar */
.fp-ac { position: relative; }
.fp-ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); box-shadow: 0 8px 24px rgba(23, 33, 28, .12); max-height: 340px; overflow-y: auto; }
.fp-ac-item { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; cursor: pointer; border-bottom: 1px solid var(--fp-surface-2); }
.fp-ac-item:last-child { border-bottom: 0; }
.fp-ac-item.active, .fp-ac-item:hover { background: var(--fp-primary-soft); }
.fp-ac-item small { color: var(--fp-muted); }
.fp-selected-product { border: 1px solid #B9DCCD; background: var(--fp-primary-soft); border-radius: var(--fp-radius); padding: .65rem .85rem; }

/* permisos */
.fp-perm-group { border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: .75rem .9rem; background: var(--fp-surface); }
.fp-perm-group h3 { font-size: .9rem; font-weight: 700; margin: 0 0 .5rem; text-transform: capitalize; }
.fp-perm-code { font-size: .75rem; color: var(--fp-muted); }

/* alertas flash */
.fp-flash { border-radius: var(--fp-radius); border: 1px solid transparent; padding: .7rem 1rem; margin-bottom: .75rem; display: flex; gap: .6rem; align-items: flex-start; }
.fp-flash.success { background: var(--fp-primary-soft); border-color: #B9DCCD; color: var(--fp-primary-ink); }
.fp-flash.danger { background: var(--fp-danger-soft); border-color: #F1C4BF; color: #8F2620; }
.fp-flash.info { background: var(--fp-info-soft); border-color: #C7D9EE; color: #24578C; }
.fp-flash.warning { background: var(--fp-warning-soft); border-color: #F2D7A8; color: #7A4A00; }

.fp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--fp-muted); }
.fp-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; color: #AAB6AF; }

/* login */
.fp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
.fp-auth-side { background: var(--fp-primary-ink); color: #E7F3EE; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.fp-auth-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 180px; border-radius: 999px; background: rgba(255, 255, 255, .06); transform: rotate(-28deg); }
.fp-auth-side h1 { font-size: 2.2rem; line-height: 1.15; max-width: 16ch; color: #fff; }
.fp-auth-side p { max-width: 44ch; color: #BFDCCF; }
.fp-auth-form { background: var(--fp-surface); display: flex; align-items: center; padding: 2.5rem; }
.fp-auth-form > div { width: 100%; }
@media (max-width: 767.98px) { .fp-auth { grid-template-columns: 1fr; } .fp-auth-side { display: none; } .fp-auth-form { padding: 1.5rem; } }

/* paginación */
.fp-pager { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1.1rem; border-top: 1px solid var(--fp-line); font-size: .85rem; color: var(--fp-muted); }

/* etiquetas de código de barras */
.fp-labels { display: grid; grid-template-columns: repeat(auto-fill, 50mm); gap: 3mm; }
.fp-label { width: 50mm; height: 30mm; border: 1px dashed #C9D1CC; border-radius: 2mm; padding: 1.5mm 2mm; display: flex; flex-direction: column; justify-content: space-between; background: #fff; overflow: hidden; }
.fp-label-name { font-size: 7.5pt; font-weight: 700; line-height: 1.1; max-height: 2.2em; overflow: hidden; }
.fp-label-price { font-size: 10pt; font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-label svg { width: 100%; height: 14mm; }
.fp-only-print { display: none; }
.fp-shelf-label { width: 70mm; height: 40mm; }
.fp-shelf-label-code { font-size: 20pt; font-weight: 800; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.fp-shelf-label svg { height: 18mm; }
@media print {
  @page { margin: 6mm; }
  body { background: #fff; }
  .fp-sidebar, .fp-topbar, .fp-no-print, .fp-flash { display: none !important; }
  .fp-only-print { display: table-cell !important; }
  .fp-shell { display: block; }
  .fp-content { padding: 0; max-width: none; }
  .fp-label { border: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* administración */
.fp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--fp-line); }
.fp-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .35rem 1rem; padding: .75rem 1rem; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-surface); }
.fp-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.fp-perm-grid .form-check { margin-bottom: .35rem; }
.fp-perm-title { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: .95rem; font-weight: 700; margin-bottom: .6rem; float: none; }
.fp-code { font-size: .78rem; color: var(--fp-muted); background: var(--fp-surface-2); padding: .05rem .35rem; border-radius: 4px; white-space: nowrap; }
.fp-tabs { display: flex; gap: .25rem; flex-wrap: wrap; position: sticky; top: 64px; z-index: 5; background: var(--fp-bg); padding: .25rem 0; }
.fp-tabs a { padding: .4rem .8rem; border-radius: 999px; color: var(--fp-ink); text-decoration: none; font-weight: 600; font-size: .875rem; }
.fp-tabs a:hover, .fp-tabs a:focus-visible { background: var(--fp-surface-2); }
.fp-logo-preview { max-height: 72px; max-width: 100%; object-fit: contain; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: .4rem; background: #fff; }
.fp-diff { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: .4rem 0 0; font-size: .8rem; }
.fp-diff dt { font-weight: 600; color: var(--fp-muted); }
.fp-diff dd { margin: 0; word-break: break-word; }
.fp-diff del { color: var(--fp-danger); }
details > summary { cursor: pointer; color: var(--fp-primary-ink); font-weight: 600; }
section[id] { scroll-margin-top: 120px; }

/* autocompletar */
.fp-ac-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; padding: .55rem .8rem; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--fp-line); }
.fp-ac-item small { display: block; color: var(--fp-muted); }
.fp-ac-item.active, .fp-ac-item:hover { background: var(--fp-primary-soft); }
.fp-ac-stock { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.fp-ac-empty { padding: .7rem .8rem; color: var(--fp-muted); font-size: .875rem; }

/* caja */
.fp-register-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.fp-register { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .9rem; border: 2px solid var(--fp-line); border-radius: var(--fp-radius); cursor: pointer; background: var(--fp-surface); }
.fp-register input { position: absolute; opacity: 0; pointer-events: none; }
.fp-register:has(input:checked) { border-color: var(--fp-primary); background: var(--fp-primary-soft); }
.fp-register:has(input:focus-visible) { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
.fp-register.is-busy { opacity: .65; cursor: not-allowed; }
.fp-denoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.fp-denom { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-denom span { min-width: 58px; text-align: right; }
.fp-close-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.fp-close-result > div { background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg); padding: .8rem 1rem; }
.fp-close-result span { display: block; font-size: .8rem; font-weight: 700; color: var(--fp-muted); }
.fp-close-result strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.fp-close-result.ok > div:last-child { background: var(--fp-primary-soft); border-color: transparent; }
.fp-close-result.warning > div:last-child { background: var(--fp-warning-soft); border-color: transparent; }
.fp-close-result.danger > div:last-child { background: var(--fp-danger-soft); border-color: transparent; color: var(--fp-danger); }
.fp-pre { background: var(--fp-surface-2); border-radius: var(--fp-radius); padding: .8rem 1rem; font-size: .82rem; white-space: pre-wrap; }
.fp-tag.info { background: var(--fp-info-soft); color: var(--fp-info); }

/* compras */
.fp-lines td { vertical-align: top; }
.fp-lines .form-control-sm.num { text-align: right; }
.fp-line-product { min-width: 220px; }
.fp-lot-inputs { display: grid; grid-template-columns: minmax(110px, 1fr) 142px 142px; gap: .3rem; }
.fp-lines tr.is-error td { background: var(--fp-danger-soft); }
.fp-doc-totals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem 1.6rem; padding-top: .9rem; margin-top: .6rem; border-top: 1px solid var(--fp-line); font-variant-numeric: tabular-nums; }
.fp-doc-totals span { display: block; font-size: .75rem; color: var(--fp-muted); font-weight: 600; }
.fp-doc-totals strong { font-size: 1.05rem; }
.fp-doc-totals .is-total strong { font-size: 1.5rem; color: var(--fp-primary-ink); }
.fp-aging { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.fp-aging > * { background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg); padding: .75rem 1rem; color: var(--fp-ink); text-decoration: none; }
.fp-aging span { display: block; font-size: .78rem; font-weight: 700; color: var(--fp-muted); }
.fp-aging strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.fp-aging .danger { border-color: #F1C4BF; background: var(--fp-danger-soft); }
.fp-aging .danger strong { color: var(--fp-danger); }
.fp-aging .warning { background: var(--fp-warning-soft); border-color: #F2D7A8; }
.fp-close-result .is-due { background: var(--fp-warning-soft); border-color: transparent; }
@media (max-width: 767.98px) { .fp-aging { grid-template-columns: repeat(2, 1fr); } .fp-lot-inputs { grid-template-columns: 1fr; } }

.fp-tabs a.active { background: var(--fp-primary-soft); color: var(--fp-primary-ink); }
.fp-attachment { max-width: 100%; max-height: 420px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); }

.fp-bell { position: relative; }
.fp-bell-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--fp-danger); color: #fff; font-size: .7rem; font-weight: 800; line-height: 19px; text-align: center; }

.fp-section-title { font-size: .95rem; font-weight: 700; color: var(--fp-muted); margin: 1.25rem 0 .6rem; }
.fp-kpi.is-hero { background: var(--fp-primary); border-color: var(--fp-primary); }
.fp-kpi.is-hero .fp-kpi-value, .fp-kpi.is-hero .fp-kpi-label { color: #fff; }
.fp-chart { position: relative; height: 280px; }
.fp-chart.is-tall { height: 340px; }

/* reportes, alertas y búsqueda */
.fp-report-groups, .fp-search-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.fp-report-list { list-style: none; margin: 0; padding: 0; }
.fp-report-list a { display: flex; flex-direction: column; padding: .65rem 1.1rem; border-top: 1px solid var(--fp-line); color: var(--fp-ink); text-decoration: none; }
.fp-report-list li:first-child a { border-top: 0; }
.fp-report-list a:hover, .fp-report-list a:focus-visible { background: var(--fp-primary-soft); }
.fp-report-table tfoot td { font-weight: 800; border-top: 2px solid var(--fp-primary); background: var(--fp-surface-2); }
.fp-alert-types { display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-alert-types a { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--fp-line); background: var(--fp-surface); color: var(--fp-ink); text-decoration: none; font-size: .85rem; }
.fp-alert-types a.active { background: var(--fp-primary-soft); border-color: var(--fp-primary); color: var(--fp-primary-ink); }
.fp-alert-list { list-style: none; margin: 0; padding: 0; }
.fp-alert-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1.1rem; border-top: 1px solid var(--fp-line); }
.fp-alert-list li:first-child { border-top: 0; }
.fp-alert-list li > .bi { font-size: 1.15rem; margin-top: .1rem; }
.fp-alert-list .sev-critica > .bi { color: var(--fp-danger); }
.fp-alert-list .sev-advertencia > .bi { color: var(--fp-warning); }
.fp-alert-list .sev-info > .bi { color: var(--fp-info); }
.fp-alert-list li.is-unread { background: #FBFCFB; box-shadow: inset 3px 0 0 var(--fp-primary); }
.fp-alert-list li:not(.is-unread) { opacity: .8; }
@media print { .fp-filters, .fp-bell { display: none !important; } }

.fp-bg-preview { width: 100%; max-width: 260px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--fp-line); }

.fp-close-table th, .fp-close-table td { padding: .45rem .35rem; }
.fp-close-table tbody th { font-weight: 600; }
.fp-close-total th, .fp-close-total td { font-weight: 800; border-top: 2px solid var(--fp-line); }

/* Presentaciones del producto */
.fp-pack-row { display: grid; grid-template-columns: 1fr 6.5rem 9rem auto auto; gap: .4rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--fp-line); }
.fp-pack-name { display: flex; flex-direction: column; line-height: 1.2; }
@media (max-width: 575px) { .fp-pack-row { grid-template-columns: 1fr 1fr; } }
.fp-logout { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }

/* Estantes: código editable en la lista de existencias */
.fp-loc-form .form-control { width: 7.5rem; min-width: 6rem; font-weight: 600; text-transform: uppercase; }
.fp-loc-form .form-control::placeholder { text-transform: none; font-weight: 400; }
.fp-loc-cell { white-space: nowrap; }
.fp-loc-code { font-family: var(--bs-font-monospace); font-weight: 700; letter-spacing: .02em; }

/* Retención al pagar a proveedores */
.fp-retention { padding: .6rem .75rem; border-radius: 10px; background: #EEF6FF; border: 1px solid #C9DDF5; }