/* Brand palette: industrial navy/graphite with a restrained gold accent,
   per the client-provided brand guidelines (Sep 2026). Kept as generic
   variable names since the underlying brand name isn't final yet. */
:root {
  --navy: #071A33;        /* primary — brand navy */
  --navy-hover: #0D2747;  /* "industrial blue" — hover/active shade of navy */
  --slate: #343A40;       /* graphite — secondary dark, surfaces */
  --slate-light: #7B838C; /* steel gray — muted text, borders */
  --amber: #C8A24A;       /* gold accent — used sparingly, per guidelines */
  --amber-dark: #a8843c;
  --bg: #F4F2ED;          /* off-white */
  --card: #ffffff;
  --border: #e3ded3;
  --text: #1c2226;
  --text-dim: #7B838C;
  --green: #2f8f52;
  --red: #c1443a;
  --radius: 12px;
}

/* Global readability bump — almost every font-size in this file is in rem,
   so raising the root size here (browsers default html to 16px) scales
   headings, body text, table text, buttons, labels, and badges everywhere
   at once, proportionally, instead of hunting down each one by hand. This
   is the actual lever for "make the whole page bigger, easier to read
   without squinting" — the sidebar below gets an further, additional bump
   on top of this since it was called out specifically. */
html { font-size: 18px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, .brand, button.btn, th, .badge {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header.topbar {
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.topbar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

header.topbar .brand span { color: var(--amber); }

header.topbar .topbar-tagline {
  color: var(--amber);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

header.topbar button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
}
header.topbar button:hover { background: rgba(255,255,255,0.1); }

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* The admin app (tables of suppliers/catalog/pricing that only grow over
   time) gets a much roomier container than the default — the 1000px cap
   above is kept as-is for the client-facing pages, which are short forms
   with no tables and read better narrower. No width or max-width set here
   at all: .main-content's margin-left is the only offset (past the fixed
   sidebar), and a block element left at its default width:auto fills
   exactly the remaining space out to the edge of the viewport on its own —
   setting width:100% here as well would double-count that offset and push
   the page 210px past the right edge. This way it fills the full window on
   any monitor, and grows/shrinks with it as it's resized, with no capped
   size to snap to. */
main.admin-main {
  max-width: none;
  margin-right: 0;
  padding: 28px 32px 80px;
}
@media (max-width: 900px) {
  main.admin-main { padding: 20px 16px 60px; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ---- Admin app shell: fixed header + sidebar + tabs, replacing the old
   single-column page for admin.html only (index.html/client.html keep
   header.topbar above, untouched). ---- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--navy);
  border-bottom: 1px solid var(--slate);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.header-left { display: flex; align-items: center; gap: 16px; color: var(--bg); }
.logo-text { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; }
.header .tagline { color: var(--amber); font-size: 0.6875rem; letter-spacing: 0.8px; text-transform: uppercase; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-right button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--bg);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.header-right button:hover { background: rgba(255,255,255,0.1); border-color: var(--amber); }

.hamburger-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--bg);
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--amber); }

.sidebar {
  position: fixed;
  left: 0;
  top: 56px;
  width: 240px;
  height: calc(100vh - 56px);
  background: var(--navy);
  border-right: 1px solid var(--slate);
  padding: 16px 0;
  overflow-y: auto;
  z-index: 50;
}

/* Backdrop behind the sidebar on mobile — tapping it closes the menu,
   same as tapping outside any other overlay in this app. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(7,26,51,0.5);
  z-index: 45;
}
.sidebar-backdrop.open { display: block; }
.nav-item {
  padding: 15px 20px;
  color: #c0c4c8;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  user-select: none;
}
.nav-item:hover { background: rgba(200,162,74,0.1); color: var(--bg); }
.nav-item.active { border-left-color: var(--amber); background: rgba(200,162,74,0.08); color: var(--bg); font-weight: 600; }

/* Catálogo's expandable sub-list of the 9 service-line catalogs — same
   language as .nav-item, just indented and a touch smaller/dimmer until
   active, so the hierarchy (one tab, many catalogs inside it) reads clearly. */
.nav-subitem {
  padding: 13px 20px 13px 42px;
  color: #98a0a8;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s;
  user-select: none;
}
.nav-subitem:hover { background: rgba(200,162,74,0.1); color: var(--bg); }
.nav-subitem.active { border-left-color: var(--amber); background: rgba(200,162,74,0.08); color: var(--amber); font-weight: 600; }

.main-content { margin-left: 240px; margin-top: 56px; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; }
.page-title-section h1 { margin: 0 0 6px; font-size: 1.8rem; font-weight: 700; color: var(--text); font-family: 'Montserrat', sans-serif; }
.page-title-section p { font-size: 0.9rem; color: var(--text-dim); margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 28px; }

/* Dashboard "quick action" alert cards — colored left border + dot per
   card, click-through to the relevant tab. Distinct from .kpi-card (no
   top gradient bar; the color signal lives on the left edge instead). */
.alert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.alert-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  border-left: 4px solid var(--alert-color, var(--border));
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}
.alert-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.alert-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--alert-color, var(--border)); flex-shrink: 0; }
.alert-number { font-size: 1.6rem; font-weight: 700; color: var(--text); font-family: 'Montserrat', sans-serif; line-height: 1.1; }
.alert-label { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

/* Procurement pipeline funnel — numbered gradient badges connected by a
   gradient line, one per real stage (Solicitud -> Cotizada -> Aprobada ->
   En Tránsito -> Entregada). */
.pipeline-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; overflow-x: auto; padding: 8px 0; }
.pipeline-stage { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 90px; text-align: center; transition: transform 0.2s ease; }
.pipeline-stage:hover { transform: translateY(-3px); }
.pipeline-stage:hover .pipeline-badge { box-shadow: 0 6px 16px rgba(200,162,74,0.5); }
.pipeline-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), #e5d9c3);
  color: var(--navy); font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(200,162,74,0.35);
  margin-bottom: 8px;
}
.pipeline-connector { flex: 1; height: 3px; background: linear-gradient(90deg, var(--amber), #e5d9c3); margin: 26px -6px 0; min-width: 20px; }
.pipeline-count { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.pipeline-label { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 900px) { .pipeline-connector { display: none; } .pipeline-flow { flex-wrap: wrap; } }
.kpi-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber), #e5d9c3); }
.kpi-label { font-size: 0.7rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--text); font-family: 'Montserrat', sans-serif; line-height: 1.1; }

/* "⋮" menu button + dropdown — currently just holds a real "Print" action
   (see the @media print block below); add more items here only once
   they're backed by something real. */
.page-controls { position: relative; }
.menu-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--slate);
  transition: all 0.15s ease;
}
.menu-btn:hover { border-color: var(--amber); background: var(--bg); }

.dropdown-menu {
  position: absolute;
  top: 48px;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 500;
  min-width: 180px;
  display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate);
  transition: all 0.15s ease;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--bg); color: var(--amber-dark); }

/* Print a tab: hide everything that isn't the report itself. The active
   tab's own content already shows via .tab-content.active — this just
   strips the app chrome around it. */
@media print {
  /* The on-screen accessibility bump (html { font-size: 18px }, see above)
     has no business also inflating paper output — every rem-based size in
     this file (text, padding, row height) would print proportionally
     oversized right along with it, which is the root cause of a table
     turning into dozens of nearly-empty pages. Print gets its own, much
     more modest root size instead, independent of whatever the on-screen
     lever is set to. */
  html { font-size: 13px; }

  .header, .sidebar, .sidebar-backdrop, .hamburger-btn,
  .dropdown-menu, .modal-overlay, .drawer-overlay, .menu-btn,
  button.btn, .filter-bar, details {
    display: none !important;
  }
  .main-content { margin: 0; padding: 12px; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .kpi-card:hover { transform: none; box-shadow: none; }
  .card, table, tr { page-break-inside: avoid; }

  /* Printing one supplier's own catalog (see printSupplierCatalog() in
     admin.html): scope down to just that card — the supplier list/search/
     add-supplier card and the page's own header would otherwise print
     stacked above it, which isn't what "print this table" means here. */
  body.printing-supplier-catalog #proveedores-page-header,
  body.printing-supplier-catalog #proveedores-list-card,
  body.printing-supplier-catalog .grid-4 {
    display: none !important;
  }

  /* Printing the Catálogo product list (see printCatalogProducts() in
     admin.html): same "just the table" scoping as the supplier catalog
     above, plus the opposite balance on sizing — the photo is the one
     thing that needs to print BIGGER (it's the whole point of a printed
     reference sheet: match what's in hand to a picture), while the rest of
     each row goes tighter so the table doesn't sprawl across dozens of
     pages. .catalog-photo-cell already carries an inline width/height from
     the on-screen 32px thumbnail — !important is what lets this win over
     that inline style. */
  body.printing-catalog-products #catalogo-breadcrumb,
  body.printing-catalog-products #catalogo-subtitle,
  body.printing-catalog-products #catalog-upload-readonly-note,
  body.printing-catalog-products #catalog-review-section,
  body.printing-catalog-products #catalog-filter-bar {
    display: none !important;
  }
  body.printing-catalog-products .catalog-photo-cell {
    width: 90px !important;
    height: 90px !important;
  }
  body.printing-catalog-products table {
    font-size: 8.5pt;
  }
  body.printing-catalog-products th,
  body.printing-catalog-products td {
    padding: 4px 6px;
  }
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .hamburger-btn { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.2);
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .kpi-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
}

.card h2 { margin-top: 0; font-size: 1.15rem; font-weight: 700; }
.card h3 { font-size: 1rem; font-weight: 600; color: var(--slate); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Every paired form row (name/price, description/code, etc.) in the app
     uses this — capped so a single text/number field never stretches to
     several hundred awkward pixels just because the surrounding card grew.
     Tables aren't grid-2, so they're unaffected and can still go full width. */
  max-width: 720px;
}
@media (max-width: 620px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Filter bars (category/search/sort, above a table) — same idea as
   grid-2, just wider since these hold selects and a search box rather
   than a single value, and there are more of them side by side. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 980px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1280px;
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 1520px;
}
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: 1fr; }
}

label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  margin-top: 12px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(200,162,74,0.15);
}

textarea { resize: vertical; min-height: 60px; }

button.btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
button.btn:hover { background: var(--navy-hover); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(7,26,51,0.2); }
button.btn:active { transform: translateY(0); }
button.btn:disabled { background: #a9b0b6; cursor: not-allowed; transform: none; box-shadow: none; }

button.btn.amber { background: var(--amber); color: var(--navy); font-weight: 700; }
button.btn.amber:hover { background: var(--amber-dark); color: #fff; box-shadow: 0 4px 12px rgba(200,162,74,0.35); }

button.btn.ghost {
  background: #fff;
  color: var(--slate);
  border: 1px solid var(--border);
}
button.btn.ghost:hover { background: var(--bg); border-color: var(--amber); color: var(--navy); box-shadow: 0 2px 8px rgba(200,162,74,0.15); }

button.btn.small { padding: 5px 10px; font-size: 0.8rem; }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.tabs button {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-dim);
}
.tabs button:first-child { border-radius: 6px 0 0 6px; }
.tabs button:last-child { border-radius: 0 6px 6px 0; }
.tabs button.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.error-msg {
  background: #fdecea;
  color: var(--red);
  border: 1px solid #f5c2bd;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-top: 10px;
}
.success-msg {
  background: #e8f6ec;
  color: var(--green);
  border: 1px solid #bfe4cb;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-top: 10px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Navy header row + hover highlight, matching the app shell — pure CSS on
   the existing semantic <table>/<thead>, no markup changes needed anywhere
   the dozens of tables in this app are generated. */
thead tr { background: var(--navy); }
thead th { color: #fff; border-bottom: none; padding: 10px 8px; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--bg); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.submitted { background: #f7ecd6; color: var(--amber-dark); }
.badge.quoted { background: #e1e6ea; color: var(--navy-hover); }
.badge.ordered { background: #e8f6ec; color: var(--green); }
.badge.closed { background: #eceef1; color: var(--text-dim); }

.cheapest { color: var(--green); font-weight: 700; }

button.btn.danger { background: transparent; color: var(--red); border: 1px solid #f0c6c2; }
button.btn.danger:hover { background: #fdecea; }

.confidence-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.confidence-badge.high { background: #e8f6ec; color: var(--green); }
.confidence-badge.medium { background: #f7ecd6; color: var(--amber-dark); }
.confidence-badge.low, .confidence-badge.none { background: #fdecea; color: var(--red); }
.confidence-badge.manual { background: #e1e6ea; color: var(--navy-hover); }

.price-age {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.price-age.current { background: #e8f6ec; color: var(--green); }
.price-age.older { background: #f7ecd6; color: var(--amber-dark); }
.price-age.stale { background: #fdecea; color: var(--red); }

/* Region is free text, not a fixed enum (see suppliers.region in db.js), so
   only the two regions seen in the mockup get a dedicated color; anything
   else falls back to a neutral badge instead of failing to render one. */
.region-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.region-badge.venezuela { background: #fdf3d4; color: #9a7b0a; }
.region-badge.china { background: #fdecea; color: var(--red); }
.region-badge.other { background: #e1e6ea; color: var(--navy-hover); }

/* ---- Solicitudes tab ---- */

.solicitudes-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 20px; font-size: 0.92rem; color: var(--text-dim); }
.solicitudes-stats strong { color: var(--text); font-size: 1.2rem; font-family: 'Montserrat', sans-serif; margin-right: 6px; }

.solicitudes-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.solicitudes-filters input, .solicitudes-filters select { flex: 1 1 200px; min-width: 160px; }

.solicitudes-table tbody tr { cursor: pointer; }
/* ~52px row height at this table's font size. */
.solicitudes-table td, .solicitudes-table th { padding: 16px 10px; }

/* Estado badges — reuses the .badge base rule already defined above (padding,
   radius, uppercase). Status names are the Solicitudes-tab-facing labels,
   mapped from the underlying proposals.status in JS (see solicitudStatusInfo). */
.badge.pendiente { background: #fdead9; color: #b5540a; }
.badge.en-progreso { background: #dbe9fb; color: #1d5fae; }
.badge.completada { background: #e8f6ec; color: var(--green); }
.badge.por-revisar { background: #f7ecd6; color: var(--amber-dark); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 51, 0.5);
  z-index: 1000;
}
/* Same specificity tie as .modal-overlay[hidden] — see that rule's comment. */
.drawer-overlay[hidden] { display: none; }
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: var(--card);
  box-shadow: -20px 0 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.drawer-header {
  background: var(--navy);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}
.drawer-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.drawer-close:hover { background: rgba(255,255,255,0.15); }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-section { margin-top: 20px; }
.drawer-section:first-child { margin-top: 0; }
.drawer-section h4 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }

/* Contabilidad's 4 sub-views (Facturas / Desglose / Varianza / Proveedores) —
   bottom-border tabs, distinct from .nav-subitem (that's the sidebar's own
   Procuramiento sub-pages, a different UI position). */
.conta-view-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.conta-view-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); padding: 10px 16px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; font-family: inherit;
}
.conta-view-btn:hover { color: var(--text); }
.conta-view-btn.active { color: var(--amber-dark); border-bottom-color: var(--amber); }
.conta-view { display: none; }
.conta-view.active { display: block; }
.drawer-field { margin-bottom: 10px; font-size: 0.9rem; }
.drawer-field .label { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.drawer-photo { width: 100%; height: 200px; object-fit: contain; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); display: block; }
.drawer-photo-placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}
.drawer-doc-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.drawer-doc-icon { font-size: 1.7rem; flex-shrink: 0; }
.drawer-doc-info { flex: 1; min-width: 0; }
.drawer-doc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-doc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- Clientes tab: client detail page ---- */

/* Reuses .kpi-card/.kpi-label/.kpi-value as-is (same look as the Dashboard
   cards) — just a smaller, non-wrapping row instead of the Dashboard's full
   grid, since there are only 2-3 of these at a time. */
.client-detail-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.client-detail-stats .kpi-card { min-width: 130px; padding: 14px 16px; margin-bottom: 0; }
.client-detail-stats .kpi-value { font-size: 1.4rem; }

/* ---- Procuramiento: Cotizar Solicitudes / Crear Orden de Compra / Panel ---- */

/* PO status badges. 'pendiente'/'en-progreso'/'completada' are reused
   as-is from the Solicitudes badges above (Pendiente/En Tránsito/Entregada
   happen to be the same orange/blue/green) — only 'cancelada' and the
   overdue 'vencida' alert are new. */
.badge.cancelada { background: #fdecea; color: var(--red); }
.badge.vencida { background: #fdead9; color: #b5540a; animation: badge-pulse 1.6s ease-in-out infinite; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.kpi-card.alert .kpi-value { color: #b5540a; }
.kpi-card.alert::before { background: linear-gradient(90deg, #e0873a, #f0c896); }

.item-photo-80 {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.item-photo-80-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px dashed var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 1.4rem;
}

.supplier-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.supplier-pick-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.supplier-pick-card:hover { border-color: var(--amber); }
.supplier-pick-card.selected { border-color: var(--amber); background: rgba(200,162,74,0.08); }
.supplier-pick-card .name { font-weight: 700; margin-bottom: 4px; }
.supplier-pick-card .meta { font-size: 0.8rem; color: var(--text-dim); }

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 10px;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; }
.cart-item-category { font-size: 0.78rem; color: var(--text-dim); }
.cart-item-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-item-controls select, .cart-item-controls input[type="number"] { width: auto; min-width: 120px; }
.cart-item-total { font-weight: 700; min-width: 90px; text-align: right; }

.photo-thumb { position: relative; display: inline-block; }
.photo-thumb .photo-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; line-height: 16px;
  border-radius: 50%; background: var(--red); color: #fff;
  border: none; cursor: pointer; font-size: 0.7rem; padding: 0;
}

.supplier-batch-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fbfcfd;
}
.review-item-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
}

.item-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fbfcfd;
}

.muted { color: var(--text-dim); font-size: 0.85rem; }

.proposal-list-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
}
.proposal-list-item:hover { border-color: var(--amber); box-shadow: 0 2px 8px rgba(200,162,74,0.15); }
.proposal-list-item.active { border-color: var(--navy); background: #f0f3f7; }

a.link { color: var(--slate); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
/* [hidden] and .modal-overlay both have one-class-level specificity, so
   without this the "display: flex" above wins the tie and the overlay
   shows up regardless of the hidden attribute — this rule is the one that
   actually makes hidden work. */
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden; /* clips the header's corners to match the box's own radius */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-header {
  background: var(--navy);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.15); }
.modal-body {
  padding: 20px;
  overflow-y: auto;
}
.picker-result {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.picker-result:hover { border-color: var(--amber); background: var(--bg); }

/* details/summary disclosure triangles ("+ Add supplier", "+ Add client",
   review-queue rows, etc.) — many are given an inline color style directly
   in the generated HTML, which normally beats a stylesheet :hover rule, so
   this one rule needs !important to actually take effect on all of them. */
details summary { transition: color 0.15s ease; }
details summary:hover,
details[open] summary {
  color: var(--amber) !important;
}

.remove-item-btn {
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 0.8rem;
}