:root {
  color-scheme: light;
  --bg-1: #f7f4ef;
  --bg-2: #efe5d8;
  --ink: #2c2017;
  --muted: #6f5d52;
  --accent: #d76a2f;
  --accent-2: #1f6f62;
  --card: #ffffff;
  --stroke: rgba(44, 32, 23, 0.12);
  --shadow: 0 20px 45px rgba(36, 26, 18, 0.12);
  --shadow-soft: 0 12px 28px rgba(36, 26, 18, 0.08);
}

/* `hidden` controla navegación, permisos, diálogos y paneles dinámicos.
   Debe prevalecer sobre cualquier display definido por los componentes. */
[hidden] {
  display: none !important;
}

/* =========================================================
   Cakis UI 2026 · Taller profesional
   Capa visual unificada para la aplicación operativa
   ========================================================= */
@media screen {
  :root {
    --bg-1: #f4f1ea;
    --bg-2: #ece8de;
    --ink: #17241f;
    --muted: #59655f;
    --accent: #b85f36;
    --accent-hover: #984827;
    --accent-2: #174f42;
    --accent-2-hover: #103c32;
    --accent-soft: #e9f1ed;
    --wood-soft: #f7ebe4;
    --card: #ffffff;
    --surface: #faf9f6;
    --stroke: #dfe3de;
    --stroke-strong: #cbd2cc;
    --success: #287a55;
    --warning: #b26a20;
    --danger: #b33c3c;
    --info: #2f6f8f;
    --shadow: 0 18px 50px rgba(25, 45, 37, 0.11);
    --shadow-soft: 0 8px 24px rgba(25, 45, 37, 0.07);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --sidebar-width: 264px;
    --topbar-height: 72px;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg-1);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.45;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 92% 4%, rgba(184, 95, 54, 0.08), transparent 26rem),
      linear-gradient(135deg, #f7f5f0 0%, #efede6 100%);
  }

  .bg-gradient, .bg-orb { display: none; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .skip-link {
    position: fixed;
    top: 8px;
    left: 12px;
    z-index: 2000;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--accent-2);
    box-shadow: var(--shadow);
    font-weight: 700;
  }
  .skip-link:focus { transform: translateY(0); }

  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 28px 0 0;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--stroke);
    backdrop-filter: blur(14px);
  }

  .topbar-brand { display: none; }
  .topbar-section { grid-column: 2; display: grid; gap: 1px; padding-left: 30px; }
  .topbar-kicker {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .topbar-section strong { font-size: 1.05rem; }
  .topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
  }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #35a66f; box-shadow: 0 0 0 4px rgba(53, 166, 111, .12); }
  .topbar-user { grid-column: 3; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .topbar-user > span:last-child { display: grid; min-width: 0; line-height: 1.2; }
  .topbar-user strong { overflow: hidden; max-width: 180px; color: var(--ink); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user small { margin-top: 3px; color: var(--muted); font-size: .75rem; }
  .topbar-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-size: .78rem; font-weight: 800; }

  .icon-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
  }
  .icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-menu-button, .sidebar-close { display: none; }

  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    max-width: none;
    margin: 0;
    align-items: stretch;
    min-height: calc(100vh - var(--topbar-height));
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    border: 0;
    border-radius: 0;
    background: #123d34;
    color: #edf5f1;
    box-shadow: 12px 0 34px rgba(14, 48, 40, .12);
    overflow-y: auto;
  }

  .sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 0 8px; }
  .sidebar-brand, .topbar-brand { align-items: center; gap: 11px; color: inherit; text-decoration: none; }
  .sidebar-brand { display: flex; padding: 0 !important; }
  .sidebar-brand img, .topbar-brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }
  .sidebar-brand span, .topbar-brand span { display: grid; line-height: 1.15; }
  .sidebar-brand strong, .topbar-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; letter-spacing: .01em; }
  .sidebar-brand small, .topbar-brand small { margin-top: 3px; color: rgba(237, 245, 241, .72); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }

  .sidebar nav { display: grid; gap: 4px; margin: 0; }
  .sidebar nav .nav-group {
    margin: 19px 12px 7px;
    color: rgba(237, 245, 241, .72);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
  }
  .sidebar nav a.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(247, 251, 249, .76);
    font-size: .88rem;
    font-weight: 550;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  .sidebar nav a svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
  .sidebar nav a.active { background: #f7f4ed; color: #173f35; box-shadow: 0 7px 18px rgba(4, 28, 22, .2); }
  .sidebar .nav-sub { padding-left: 12px; }
  .sidebar-footnote { margin: auto 8px 0; padding-top: 18px; color: rgba(237,245,241,.72); font-size: .75rem; line-height: 1.5; }

  .auth-session {
    margin-top: 22px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
    color: #fff;
  }
  .auth-session .small { color: rgba(255,255,255,.76); }
  .auth-session .ghost { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; }
  .sidebar-backdrop { display: none; }

  main {
    grid-column: 2;
    display: block;
    min-width: 0;
    padding: 30px clamp(20px, 3vw, 48px) 64px;
  }

  .section-panel { animation: ui-enter .28s ease both; }
  @keyframes ui-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

  .panel, .dashboard-card, .admin-card, .subpanel {
    border: 1px solid var(--stroke);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
  }
  .panel { border-radius: var(--radius-lg); padding: clamp(18px, 2.4vw, 30px); animation: ui-enter .28s ease both; }
  .panel-header { align-items: flex-start; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); }
  .panel-header h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2vw, 1.75rem); color: var(--ink); }
  .panel-header p { max-width: 670px; font-size: .9rem; }

  .dashboard-panel { display: grid; gap: 22px; }
  .dashboard-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 4px 2px 2px; }
  .dashboard-welcome h1 { margin: 5px 0 7px; max-width: 720px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; }
  .dashboard-welcome p:not(.eyebrow) { margin: 0; color: var(--muted); }
  .eyebrow { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
  .dashboard-date { display: grid; flex: 0 0 auto; padding: 12px 15px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: rgba(255,255,255,.64); text-align: right; }
  .dashboard-date strong { text-transform: capitalize; font-size: .85rem; }
  .dashboard-date span { color: var(--muted); font-size: .75rem; }
  .dashboard-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
  .dashboard-summary .summary-item { position: relative; overflow: hidden; min-height: 116px; padding: 18px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-soft); }
  .dashboard-summary .summary-item::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 82px; height: 82px; border-radius: 50%; background: var(--accent-soft); }
  .dashboard-summary .summary-item p { position: relative; z-index: 1; margin: 0 0 12px; color: var(--muted); font-size: .75rem; font-weight: 650; }
  .dashboard-summary .summary-item strong { position: relative; z-index: 1; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; color: var(--accent-2); }
  .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 16px; }
  .dashboard-card { border-radius: var(--radius-lg); padding: 20px; }
  .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
  .card-heading h2 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
  .card-heading a { color: var(--accent-2); font-size: .78rem; font-weight: 700; text-decoration: none; }
  .workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .workflow-steps a { position: relative; display: grid; gap: 4px; min-height: 112px; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
  .workflow-steps a:hover { transform: translateY(-2px); border-color: rgba(23,79,66,.35); box-shadow: var(--shadow-soft); }
  .workflow-steps span { color: var(--accent); font-size: .75rem; font-weight: 750; }
  .workflow-steps strong { margin-top: auto; font-size: .9rem; }
  .workflow-steps small { color: var(--muted); font-size: .75rem; }
  .dashboard-ready ul { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
  .dashboard-ready li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; background: var(--surface); font-size: .82rem; }
  .data-note { margin: -8px 2px 0; color: var(--muted); font-size: .75rem; }

  button, input, select, textarea { font: inherit; }
  button.primary, .primary, button.ghost, .ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
  }
  button.primary, .primary { border: 1px solid var(--accent-2); background: var(--accent-2); color: #fff; box-shadow: 0 5px 12px rgba(23,79,66,.15); }
  button.primary:hover, .primary:hover { background: var(--accent-2-hover); border-color: var(--accent-2-hover); transform: translateY(-1px); }
  button.ghost, .ghost { border: 1px solid var(--stroke-strong); background: #fff; color: #33433c; }
  button.ghost:hover, .ghost:hover { border-color: rgba(23,79,66,.4); background: var(--accent-soft); color: var(--accent-2); }
  button:active { transform: translateY(0) !important; }
  button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .48; }

  .search, .stock-input, .form-row input, .form-row select, .form-row textarea, .material-row input, .material-row select {
    min-height: 40px;
    border: 1px solid var(--stroke-strong);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(18,61,52,.03);
    transition: border-color .18s, box-shadow .18s;
  }
  .search:focus, .stock-input:focus, .form-row input:focus, .form-row select:focus, .form-row textarea:focus, .material-row input:focus, .material-row select:focus {
    outline: none;
    border-color: #478578;
    box-shadow: 0 0 0 3px rgba(23,79,66,.11);
  }
  .form-row { gap: 7px; margin-bottom: 16px; color: #405049; font-size: .8rem; font-weight: 650; }
  .form-label { display: block; color: #405049; font-size: .8rem; font-weight: 650; }
  .form-row input, .form-row select, .form-row textarea { padding: 9px 11px; font-weight: 450; }
  .stock-input[readonly], .budget-mode-panel .stock-input[readonly] { background: #f3f5f2; color: #52615a; }
  .toggle { min-height: 40px; padding: 8px 11px; border: 1px solid var(--stroke); border-radius: 9px; background: #fff; }

  .product-list { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 12px; }
  .product-card { min-height: 174px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: #fff; box-shadow: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
  .product-card:hover { border-color: rgba(23,79,66,.3); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
  .product-header h3 { line-height: 1.3; }
  .product-input { border-color: var(--stroke-strong); border-radius: 9px; background: var(--surface); }
  .model-type-chip, .product-standby, .sales-location-chip { border-radius: 7px; }

  .subpanel { margin-top: 18px; padding: 18px; border-radius: var(--radius-md); box-shadow: none; }
  .subpanel h3 { font-size: 1.05rem; }
  .inventory-details { border: 1px solid var(--stroke); border-radius: var(--radius-md); background: #fff; }
  .inventory-details summary { color: var(--accent-2); }

  .table-wrap { border: 1px solid var(--stroke); border-radius: var(--radius-md); background: #fff; }
  table { border-collapse: separate; border-spacing: 0; }
  thead th { position: sticky; top: 0; z-index: 2; padding: 12px 10px; border-bottom: 1px solid var(--stroke-strong); background: #f3f5f2; color: #4f5d56; font-size: .75rem; font-weight: 750; letter-spacing: .04em; }
  tbody td { padding: 11px 10px; font-size: .84rem; vertical-align: middle; }
  tbody tr { border: 0; }
  tbody tr:not(:last-child) td { border-bottom: 1px solid #edf0ed; }
  tbody tr:hover { background: #faf8f4; }
  .group-row td { background: var(--wood-soft); color: #7c4227; font-weight: 700; }
  .highlight { color: var(--accent); }
  .purchase-summary { position: sticky; bottom: 14px; z-index: 8; margin-top: 16px; padding: 15px 18px; border: 1px solid rgba(23,79,66,.2); border-radius: var(--radius-md); background: rgba(245,250,247,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
  .purchase-summary strong { color: var(--accent-2); font-size: 1.25rem; }

  .sales-view-tabs, .toggle-group { padding: 3px; border: 1px solid var(--stroke); border-radius: 10px; background: #f3f5f2; }
  .sales-view-tab, .toggle-group button { border-radius: 7px; }
  .sales-view-tab.is-active, .toggle-group button.active { background: #fff; color: var(--accent-2); box-shadow: 0 2px 8px rgba(18,61,52,.09); }

  .budget-classic-shell { gap: 16px; }
  .budget-classic-top { gap: 12px; }
  .budget-classic-actionbar { top: calc(var(--topbar-height) + 10px); padding: 9px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
  .budget-classic-actionbar .primary:first-child { background: var(--accent); border-color: var(--accent); }
  .budget-classic-actionbar .primary:first-child:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .budget-classic-meta-pill { border-radius: 7px; background: var(--accent-soft); }
  .budget-classic-block { padding: 18px; border-radius: var(--radius-md); background: #fff; }
  .budget-classic-block-head { padding-bottom: 10px; border-bottom: 1px solid var(--stroke); }
  .budget-classic-block-head h4 { font-size: 1.05rem; }
  .budget-classic-tax-note { border-radius: 7px; }
  .budget-classic-total-card { background: var(--accent-2); color: #fff; }
  .budget-classic-total-card p, .budget-classic-total-card strong { color: #fff; }
  .summary-item { border-radius: var(--radius-md); }
  .budget-warning-box { border-radius: var(--radius-md); }

  .admin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 18px; align-items: start; }
  .admin-card { border-radius: var(--radius-md); padding: 20px; box-shadow: none; }
  .admin-card:nth-child(2) { position: sticky; top: calc(var(--topbar-height) + 18px); }
  .admin-preview-panel { border-radius: var(--radius-md); }
  .material-row { padding: 9px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--surface); }
  .form-section-label { display: flex; align-items: center; gap: 9px; margin: 24px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--stroke); color: var(--accent-2); }
  .form-section-label:first-child { margin-top: 0; }
  .form-section-label span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-2); font-size: .75rem; font-weight: 800; }
  .form-section-label strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }

  .modal { background: rgba(11,30,25,.5); backdrop-filter: blur(7px); }
  .modal-card { border: 1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: 0 28px 80px rgba(8,27,22,.28); }
  .auth-gate { background: radial-gradient(circle at 20% 10%, rgba(184,95,54,.2), transparent 30rem), #123d34; backdrop-filter: none; }
  .auth-card { position: relative; overflow: hidden; padding: 28px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); box-shadow: 0 35px 100px rgba(4,25,20,.35); }
  .auth-card::before { content: none; }
  .auth-brand { display: grid; justify-items: center; gap: 7px; margin: -8px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); text-align: center; }
  .auth-brand img { display: block; width: min(230px, 72vw); height: 145px; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
  .auth-brand span { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .auth-card h2 { font-size: 1.65rem; color: var(--accent-2); }
  .auth-login-actions .primary { width: 100%; min-height: 44px; }

  footer { margin-left: var(--sidebar-width); padding: 18px 28px 32px; border-top: 1px solid var(--stroke); background: rgba(255,255,255,.4); }
}

#compras th.purchase-controls,
#compras td.purchase-controls {
  width: 92px;
  text-align: center;
}

#compras td.purchase-controls .purchase-cell {
  min-height: 44px;
  justify-content: center;
}

#compras td.purchase-controls .checkbox-input {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

@media screen and (max-width: 1050px) {
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-card:nth-child(2) { position: static; }
}

@media screen and (max-width: 900px) {
  :root { --topbar-height: 64px; }
  body.nav-open { overflow: hidden; }
  .app-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; height: var(--topbar-height); padding: 0 14px; }
  .mobile-menu-button { display: inline-grid; }
  .topbar-brand { display: flex; min-width: 0; color: var(--ink); text-decoration: none; }
  .topbar-brand img { width: 38px; height: 38px; }
  .topbar-brand small { color: var(--muted); }
  .topbar-section { display: none; }
  .topbar-status span:last-child, .topbar-user > span:last-child { display: none; }
  .layout { display: block; min-height: calc(100vh - var(--topbar-height)); }
  .sidebar { width: min(310px, 86vw); transform: translateX(-105%); transition: transform .24s ease; box-shadow: 18px 0 50px rgba(4,25,20,.28); }
  .sidebar-close { display: inline-grid; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 95; display: block; border: 0; background: rgba(8,27,22,.48); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  body.nav-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  main { grid-column: auto; padding: 22px 18px 50px; }
  footer { margin-left: 0; }
  .panel-header { flex-direction: column; align-items: stretch; }
  .panel-header .controls { width: 100%; }
  .budget-classic-actionbar { top: calc(var(--topbar-height) + 6px); }
}

@media screen and (max-width: 700px) {
  main { padding: 18px 12px 42px; }
  .panel { padding: 16px; border-radius: 14px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .dashboard-welcome h1 { font-size: 1.75rem; }
  .dashboard-date { width: 100%; text-align: left; }
  .dashboard-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dashboard-summary .summary-item { min-height: 100px; padding: 13px; }
  .dashboard-summary .summary-item strong { font-size: 1.3rem; }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
  .workflow-steps a { min-height: 100px; }
  .controls { display: grid; grid-template-columns: 1fr; }
  .controls > *, .controls button, .controls .search { width: 100%; }
  button.primary, .primary, button.ghost, .ghost { min-height: 44px; }
  .budget-classic-actionbar { position: sticky; top: calc(var(--topbar-height) + 6px); z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-classic-actionbar > * { width: 100%; }
  .budget-classic-actionbar .budget-classic-meta-pill { display: none; }
  .budget-classic-block { padding: 13px; }
  .purchase-summary { bottom: 8px; }

  .table-wrap { border: 0; background: transparent; overflow: visible; }
  .table-wrap table.is-responsive { min-width: 0; border-collapse: separate; border-spacing: 0 9px; }
  .table-wrap table.is-responsive thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .table-wrap table.is-responsive tbody tr { display: block; padding: 7px 10px; border: 1px solid var(--stroke); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(18,61,52,.04); }
  .table-wrap table.is-responsive tbody td { display: grid; grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 3px; border: 0; border-top: 1px dashed var(--stroke); font-size: .82rem; }
  .table-wrap table.is-responsive tbody td:first-child { border-top: 0; }
  .table-wrap table.is-responsive tbody td::before { content: attr(data-label); color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .03em; }
  .table-wrap table.is-responsive .stock-input, .table-wrap table.is-responsive .location-input { width: 100%; }
  .table-wrap table.is-responsive .purchase-cell, .table-wrap table.is-responsive .standby-actions { justify-content: flex-end; }
  .table-wrap table.is-responsive td[colspan] { display: block; }
  .table-wrap table.is-responsive td[colspan]::before { display: none; }
}

@media screen and (max-width: 430px) {
  .topbar-brand small { display: none; }
  .topbar-brand strong { font-size: 1rem; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: 1fr; }
  .dashboard-card { padding: 15px; }
  .panel-header h2 { font-size: 1.35rem; }
  .sales-view-tabs { display: grid; width: 100%; }
  .budget-classic-actionbar button { padding-inline: 8px; font-size: .75rem; }
}

.admin-catalog-flags{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 18px}.admin-gallery-upload{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:max-content}.admin-gallery-list{display:grid;gap:10px;margin-top:12px}.admin-gallery-item{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:9px;border:1px solid var(--line,#ddd7ce);border-radius:10px;background:var(--surface-soft,#faf8f4)}.admin-gallery-item img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:8px}.admin-gallery-item input{min-width:0}.admin-gallery-actions{display:flex;gap:5px}.admin-gallery-actions button{min-width:38px;padding:7px}.admin-catalog-settings-card{grid-column:1/-1}.catalog-request-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}.catalog-request-summary>div{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line,#ddd7ce);border-radius:12px;padding:16px;background:var(--surface-soft,#faf8f4)}.catalog-request-summary strong{font-size:1.45rem;color:var(--brand-deep,#274b48)}.catalog-request-summary span{font-size:.78rem;color:var(--text-muted,#69716f)}.catalog-request-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.catalog-request-card{border:1px solid var(--line,#ddd7ce);border-radius:14px;padding:18px;background:#fff}.catalog-request-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.catalog-request-card h3{margin:4px 0}.catalog-request-card header p{margin:0;font-size:.78rem;color:var(--text-muted,#69716f)}.catalog-request-ref{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--accent,#c75a1a)}.catalog-request-status{padding:6px 9px;border-radius:999px;font-size:.72rem;font-weight:800;background:#eee}.catalog-request-status.is-new{background:#fff1d2;color:#755400}.catalog-request-status.is-in_progress{background:#e6f0fb;color:#285381}.catalog-request-status.is-quoted{background:#e1f4ed;color:#176847}.catalog-request-status.is-closed{background:#ececed;color:#53565c}.catalog-request-contact{display:flex;gap:8px 14px;flex-wrap:wrap;margin:14px 0;font-size:.85rem}.catalog-request-card ul{list-style:none;margin:0;padding:10px;background:var(--surface-soft,#faf8f4);border-radius:9px}.catalog-request-card li{display:flex;justify-content:space-between;gap:12px;padding:5px}.catalog-request-message{white-space:pre-line;border-left:3px solid var(--accent,#c75a1a);padding-left:10px;font-size:.85rem}.catalog-request-card>footer{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}.catalog-request-card>footer select{max-width:170px}.empty-state{text-align:center;padding:45px;border:1px dashed var(--line,#ddd7ce);border-radius:12px;grid-column:1/-1}.empty-state p{color:var(--text-muted,#69716f)}
@media(max-width:760px){.catalog-request-summary{grid-template-columns:1fr 1fr}.catalog-request-list{grid-template-columns:1fr}.catalog-request-card>footer{align-items:stretch;flex-direction:column}.catalog-request-card>footer select{max-width:none}.admin-gallery-item{grid-template-columns:58px 1fr}.admin-gallery-item img{width:58px;height:58px}.admin-gallery-actions{grid-column:1/-1;justify-content:flex-end}}
.catalog-request-project{margin-top:12px;padding:14px;border:1px solid color-mix(in srgb,var(--accent,#c75a1a) 26%,#ddd7ce);border-radius:11px;background:#fff8f1}.catalog-request-project-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 12px}.catalog-request-project-heading span{color:var(--accent,#c75a1a);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.catalog-request-project-heading strong{font-size:1rem}.catalog-request-project-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.catalog-request-project-meta span{padding:5px 8px;border-radius:999px;background:#fff;color:var(--text-muted,#69716f);font-size:.75rem}.catalog-request-project p{margin:11px 0 0;white-space:pre-line;font-size:.86rem}.catalog-request-project-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.catalog-request-project-images a{display:block;width:76px;height:76px;overflow:hidden;border:1px solid var(--line,#ddd7ce);border-radius:9px;background:#fff}.catalog-request-project-images img{width:100%;height:100%;object-fit:contain}.catalog-request-project-images a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent,#c75a1a) 45%,transparent);outline-offset:2px}
.admin-catalog-cover-choice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}.admin-catalog-cover-choice .small{margin:0}.admin-gallery-actions{flex-wrap:wrap;justify-content:flex-end}.admin-gallery-actions .is-cover{border-color:var(--accent,#c75a1a);background:#fff0e6;color:#a84310}

.agenda-toolbar { max-width: 760px; }
.agenda-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.agenda-summary article { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-soft); }
.agenda-summary span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.agenda-summary strong { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.agenda-months { display: grid; gap: 22px; }
.agenda-month-block { overflow: hidden; border: 1px solid var(--stroke); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); }
.agenda-month-block > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; background: var(--ink); color: #fff; }
.agenda-month-block > header span { display: block; margin-bottom: 2px; color: rgba(255,255,255,.65); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agenda-month-block > header h3 { margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.agenda-month-block > header > strong { color: var(--accent-warm); font-size: .78rem; }
.agenda-month-block .table-wrap { border: 0; border-radius: 0; }
.agenda-table { min-width: 1320px; font-size: .75rem; }
.agenda-table th { white-space: nowrap; }
.agenda-table td { min-width: 92px; padding: 6px; }
.agenda-table td:nth-child(1), .agenda-table td:nth-child(6) { min-width: 58px; text-align: center; }
.agenda-table td:nth-child(3), .agenda-table td:nth-child(4), .agenda-table td:nth-child(5), .agenda-table td:nth-child(11) { min-width: 155px; }
.agenda-input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: inherit; font: inherit; }
.agenda-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(199,90,26,.1); outline: 0; }
.agenda-table tr.agenda-done td { background: #edf7f1; color: #1d644a; }
.agenda-table tr.agenda-done .agenda-input { color: #1d644a; }
.agenda-delete { min-height: 32px; padding: 5px 8px; color: var(--danger); }
#agenda-print-sheet { display: none; }
.agenda-print-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #1b263b; }
.agenda-print-brand img { width: 56px; height: 56px; object-fit: contain; }
.agenda-print-brand div { display: grid; }
.agenda-print-brand strong { font-size: 1.3rem; }
.agenda-print-brand span { color: #667085; font-size: .8rem; }

@media (max-width: 900px) {
  .agenda-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-table { min-width: 0; }
  .agenda-table td { min-width: 0 !important; }
  .agenda-table .agenda-input { min-height: 40px; border-color: var(--stroke); background: #fff; }
}

@media (max-width: 520px) { .agenda-summary { grid-template-columns: 1fr; } }

@media print {
  body.print-agenda { margin: 0; padding: 0; background: #fff; overflow: visible; }
  body.print-agenda > :not(#agenda-print-sheet) { display: none !important; }
  body.print-agenda #agenda-print-sheet { display: block !important; position: static; width: 100%; padding: 0; }
  body.print-agenda #agenda-print-sheet,
  body.print-agenda #agenda-print-sheet * { visibility: visible !important; }
  body.print-agenda .agenda-panel { padding: 0; }
  body.print-agenda .panel-header { margin-bottom: 10px; padding-bottom: 8px; }
  body.print-agenda .agenda-summary { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
  body.print-agenda .agenda-summary article { padding: 7px; box-shadow: none; }
  body.print-agenda .agenda-summary strong { font-size: 1rem; }
  body.print-agenda .agenda-months { gap: 10px; }
  body.print-agenda .agenda-month-block { border-radius: 0; box-shadow: none; break-inside: avoid; }
  body.print-agenda .agenda-month-block > header { padding: 6px 9px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.print-agenda .agenda-table { min-width: 0; table-layout: fixed; font-size: 6.5pt; }
  body.print-agenda .agenda-table th, body.print-agenda .agenda-table td { min-width: 0; padding: 3px; overflow-wrap: anywhere; }
  body.print-agenda .agenda-table tr.agenda-done td { background: #edf7f1 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  body.print-budget-quote .quote-page {
    color: #1d2823;
    font-family: Arial, Helvetica, sans-serif;
    break-inside: auto;
    page-break-inside: auto;
    break-after: auto;
    page-break-after: auto;
  }
  body.print-budget-quote .quote-head {
    padding-bottom: 5mm;
    border-bottom: 2px solid #174f42;
  }
  body.print-budget-quote .quote-number-box {
    border: 0;
    border-radius: 3mm;
    background: #174f42 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.print-budget-quote .quote-client-grid,
  body.print-budget-quote .quote-photo-section,
  body.print-budget-quote .quote-notes,
  body.print-budget-quote .quote-totals {
    border-color: #cfd8d2;
  }
  body.print-budget-quote .quote-table { border-collapse: separate; border-spacing: 0; }
  body.print-budget-quote .quote-table thead { display: table-header-group; }
  body.print-budget-quote .quote-table caption { padding: 2mm 0; color: #52615a; font-size: 8pt; text-align: right; }
  body.print-budget-quote .quote-table th {
    background: #174f42 !important;
    color: #fff !important;
    border-color: #174f42;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.print-budget-quote .quote-table td { border-color: #d7ded9; }
  body.print-budget-quote .quote-table tr,
  body.print-budget-quote .quote-head,
  body.print-budget-quote .quote-client-grid,
  body.print-budget-quote .quote-photo-section,
  body.print-budget-quote .quote-footer,
  body.print-budget-quote .quote-totals { break-inside: avoid; page-break-inside: avoid; }
  body.print-budget-quote .quote-totals .grand {
    background: #e8f0ec !important;
    color: #174f42;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .app-topbar, .sidebar, .sidebar-backdrop { display: none !important; }
}

/* =========================================================
   Identidad Muebles Cakis · aplicada desde brand.png
   Montserrat para títulos, Lato para lectura operativa.
   Las familias incluyen alternativas locales para mantener
   la app autónoma y sin servicios tipográficos externos.
   ========================================================= */
@media screen {
  :root {
    --bg-1: #f5f0e9;
    --bg-2: #ede5db;
    --ink: #354356;
    --brand-navy: #405a64;
    --muted: #6f7882;
    --accent: #c75a1a;
    --accent-hover: #a94712;
    --accent-2: #006d6f;
    --accent-2-hover: #00575a;
    --accent-soft: #e2f0ee;
    --wood-soft: #f2e8db;
    --card: #fffdf9;
    --surface: #f9f6f1;
    --stroke: #e1d8ce;
    --stroke-strong: #cec4b9;
    --success: #006d6f;
    --warning: #d59317;
    --danger: #b43a32;
    --info: #315b79;
    --shadow: 0 18px 46px rgba(53, 67, 86, 0.09);
    --shadow-soft: 0 7px 20px rgba(53, 67, 86, 0.055);
  }

  body {
    color: var(--ink);
    background: var(--bg-1);
    font-family: "Lato", "Segoe UI", Arial, sans-serif;
  }

  body::before {
    background:
      radial-gradient(circle at 94% 2%, rgba(199, 90, 26, 0.055), transparent 27rem),
      linear-gradient(135deg, #faf7f2 0%, #eee7de 100%);
  }

  h1, h2, h3, h4,
  .panel-header h2,
  .dashboard-welcome h1,
  .dashboard-summary .summary-item strong,
  .card-heading h2,
  .form-section-label strong,
  .sidebar-brand strong,
  .topbar-brand strong {
    font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: -0.015em;
  }

  .sidebar {
    background: #405a64;
    color: #fff;
    box-shadow: 10px 0 28px rgba(53, 67, 86, 0.11);
  }

  .sidebar-brand img,
  .topbar-brand img {
    border: 1px solid rgba(242, 232, 219, 0.42);
    background: #fff;
  }

  .sidebar-brand small,
  .sidebar nav .nav-group,
  .sidebar-footnote {
    color: rgba(248, 241, 232, 0.76);
  }

  .sidebar nav a.nav-link {
    color: rgba(255, 255, 255, 0.86);
  }

  .sidebar nav a:hover {
    background: rgba(248, 241, 232, 0.11);
    color: #fff;
  }

  .sidebar nav a.active {
    background: #f3e9dd;
    color: #354356;
    box-shadow: 0 6px 15px rgba(53, 67, 86, 0.14);
  }

  .sidebar nav a.active svg {
    color: #c75a1a;
  }

  .sidebar nav a svg,
  .icon-button svg {
    stroke-width: 1.65;
  }

  .topbar-avatar {
    background: #f2e8db;
    color: #354356;
  }

  .status-dot {
    background: #006d6f;
    box-shadow: 0 0 0 4px rgba(0, 109, 111, 0.13);
  }

  button.primary,
  .primary {
    border-color: #405a64;
    background: #405a64;
    box-shadow: 0 5px 12px rgba(53, 67, 86, 0.13);
  }

  button.primary:hover,
  .primary:hover {
    border-color: #344c56;
    background: #344c56;
  }

  .budget-classic-actionbar .primary:first-child {
    border-color: #c75a1a;
    background: #c75a1a;
  }

  .budget-classic-actionbar .primary:first-child:hover {
    border-color: #a94712;
    background: #a94712;
  }

  button.ghost:hover,
  .ghost:hover {
    border-color: rgba(0, 109, 111, 0.42);
    background: #e2f0ee;
    color: #006d6f;
  }

  .search:focus,
  .stock-input:focus,
  .form-row input:focus,
  .form-row select:focus,
  .form-row textarea:focus,
  .material-row input:focus,
  .material-row select:focus {
    border-color: #006d6f;
    box-shadow: 0 0 0 3px rgba(0, 109, 111, 0.13);
  }

  .dashboard-summary .summary-item::after,
  .budget-classic-meta-pill,
  .form-section-label span {
    background: #f2e8db;
  }

  .dashboard-summary .summary-item strong,
  .card-heading a,
  .inventory-details summary,
  .form-section-label,
  .form-section-label span {
    color: #006d6f;
  }

  .eyebrow,
  .workflow-steps span,
  .highlight {
    color: #c75a1a;
  }

  thead th {
    background: #f2e8db;
    color: #354356;
  }

  .group-row td {
    background: #f2e8db;
    color: #9d4315;
  }

  .budget-classic-total-card {
    background: #405a64;
  }

  .auth-gate {
    background:
      radial-gradient(circle at 18% 8%, rgba(199, 90, 26, 0.2), transparent 31rem),
      #405a64;
  }

  .auth-card {
    border-color: rgba(242, 232, 219, 0.24);
    box-shadow: 0 35px 100px rgba(5, 13, 28, 0.42);
  }

  .auth-brand span {
    color: #c75a1a;
  }

  .auth-card h2 {
    color: #354356;
  }

  .recipe-material-thumbnail {
    width: 56px;
    min-width: 56px;
    height: 56px;
    aspect-ratio: 1;
    padding: 3px;
    background: #fff;
  }

  .recipe-material-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
  }

  .material-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(90px, 0.65fr) minmax(90px, 0.65fr) 56px auto;
  }

  .admin-model-photo-field {
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface);
  }

  .admin-model-photo-editor {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .admin-model-photo-preview {
    width: 144px;
    height: 108px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--stroke-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: .78rem;
  }

  .admin-model-photo-preview img,
  .admin-preview-model-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  .admin-model-photo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .admin-model-photo-upload {
    cursor: pointer;
  }

  .admin-model-photo-field > .small {
    margin: 0;
  }

  .admin-preview-model-photo {
    width: 96px;
    height: 72px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 9px;
    background: #fff;
  }

  .budget-classic-block-lines .budget-classic-block-head {
    align-items: center;
  }

  .budget-classic-block-lines .budget-classic-block-head .small {
    max-width: 520px;
    text-align: right;
  }

  .budget-classic-lines-table {
    table-layout: fixed;
    min-width: 1080px;
  }

  .budget-classic-lines-table th,
  .budget-classic-lines-table td {
    vertical-align: top;
  }

  .budget-classic-lines-table th:nth-child(1) { width: 24%; }
  .budget-classic-lines-table th:nth-child(2) { width: 13%; }
  .budget-classic-lines-table th:nth-child(3) { width: 9%; }
  .budget-classic-lines-table th:nth-child(4) { width: 10%; }
  .budget-classic-lines-table th:nth-child(5) { width: 10%; }
  .budget-classic-lines-table th:nth-child(6) { width: 18%; }
  .budget-classic-lines-table th:nth-child(7) { width: 9%; }
  .budget-classic-lines-table th:nth-child(8) { width: 7%; }

  .budget-classic-lines-table .stock-input {
    display: block;
    margin: 0;
  }

  .budget-classic-lines-table .budget-line-photo-editor {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    min-width: 0;
  }

  .budget-classic-lines-table .budget-line-photo-thumb {
    width: 54px;
    height: 54px;
    justify-self: start;
  }

  .budget-classic-lines-table .budget-line-photo-actions {
    display: grid;
    gap: 5px;
    align-content: start;
  }

  .budget-classic-lines-table .budget-line-photo-actions .ghost {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    white-space: normal;
    text-align: center;
  }

  .budget-classic-lines-table .budget-line-photo-caption {
    grid-column: 1 / -1;
  }

  .app-topbar {
    background: rgba(255, 253, 249, 0.96);
  }

  .panel,
  .dashboard-card,
  .admin-card,
  .subpanel {
    background: #fffdf9;
  }
}

@media screen and (max-width: 700px) {
  .recipe-material-thumbnail {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  .budget-classic-block-lines .budget-classic-block-head {
    align-items: flex-start;
  }

  .budget-classic-block-lines .budget-classic-block-head .small {
    text-align: left;
  }

  .budget-classic-lines-table {
    min-width: 0;
    table-layout: auto;
  }

  .admin-model-photo-editor {
    grid-template-columns: 1fr;
  }

  .admin-model-photo-preview {
    width: 96px;
    height: 96px;
  }
}

@media print {
  body.print-budget-quote .quote-page {
    color: #263548;
    font-family: "Lato", Arial, Helvetica, sans-serif;
  }

  body.print-budget-quote .quote-page h1,
  body.print-budget-quote .quote-page h2,
  body.print-budget-quote .quote-page h3,
  body.print-budget-quote .quote-number-box {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
  }

  body.print-budget-quote .quote-head {
    border-bottom-color: #c75a1a;
  }

  body.print-budget-quote .quote-number-box,
  body.print-budget-quote .quote-table th {
    border-color: #30465a;
    background: #30465a !important;
  }

  body.print-budget-quote .quote-totals .grand {
    background: #f2e8db !important;
    color: #263548;
  }
}

/* El CSS histórico permanece aislado como compatibilidad funcional.
   La capa visual moderna, sin layer, tiene prioridad en la cascada. */
@layer legacy {
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Work Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg-1);
  line-height: 1.5;
  min-height: 100vh;
}

body.auth-required {
  overflow: hidden;
}

.section-panel[hidden] {
  display: none;
}

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="tab"],
    [tabindex]
  ):focus-visible {
  outline: 3px solid rgba(31, 111, 98, 0.45);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 12, 8, 0.35);
  backdrop-filter: blur(2px);
  z-index: 999;
  padding: 24px;
}

.modal.open {
  display: flex;
}

.modal-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  padding: 20px 22px;
  width: min(440px, 100%);
  box-shadow: 0 24px 60px rgba(28, 20, 14, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-header h3 {
  margin: 0;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 1.1rem;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted);
  border-radius: 10px;
  padding: 4px 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 13, 9, 0.45);
  backdrop-filter: blur(4px);
}

.auth-gate[hidden] {
  display: none !important;
}

.auth-card {
  width: min(420px, 100%);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 30px 80px rgba(28, 20, 14, 0.28);
  padding: 20px;
}

.auth-card h2 {
  margin: 0 0 8px;
  font-family: "Fraunces", "Georgia", serif;
}

.auth-login-form {
  margin-top: 14px;
}

.auth-login-form .form-row span {
  font-weight: 600;
}

.auth-login-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.auth-error {
  margin: 6px 0 0;
  color: #9b2f2f;
  font-size: 0.85rem;
  font-weight: 600;
}

.bg-gradient {
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 500px at 12% 12%, rgba(215, 106, 47, 0.18), transparent 60%),
    radial-gradient(800px 520px at 88% 8%, rgba(31, 111, 98, 0.18), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  z-index: -3;
}

.bg-orb {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.25;
  z-index: -2;
}

.orb-1 {
  top: 120px;
  left: -80px;
  background: radial-gradient(circle, rgba(196, 104, 44, 0.6), transparent 70%);
}

.orb-2 {
  bottom: 80px;
  right: -60px;
  background: radial-gradient(circle, rgba(47, 111, 109, 0.6), transparent 70%);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  padding: 44px 6vw 20px;
  max-width: 1280px;
  margin: 0 auto;
  animation: rise 0.8s ease-out;
}

.hero-copy h1 {
  font-family: "Fraunces", "Georgia", serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin: 12px 0 16px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--accent-2);
  margin: 0;
  font-weight: 600;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  text-decoration: none;
  color: inherit;
}

.app-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(44, 32, 23, 0.12);
  background: rgba(255, 255, 255, 0.8);
  padding: 4px;
}

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 560px;
}

.hero-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  align-self: center;
  animation: float-in 0.9s ease-out;
  min-width: 320px;
}

.hero-card h2 {
  font-family: "Fraunces", "Georgia", serif;
  margin-top: 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.summary-preview {
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(44, 32, 23, 0.08);
}

.summary-preview ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.summary-preview li {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}

.summary-preview .pill {
  color: var(--accent-2);
  background: rgba(31, 111, 98, 0.1);
  border: 1px solid rgba(31, 111, 98, 0.2);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.summary-item {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(44, 32, 23, 0.1);
}

.summary-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.summary-item strong {
  display: block;
  font-size: 1.2rem;
  margin-top: 4px;
}

.small {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0;
}

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 0 6vw 56px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

main {
  display: grid;
  gap: 32px;
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}

.sidebar h3 {
  margin-top: 0;
  font-family: "Fraunces", "Georgia", serif;
}

.sidebar nav {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.sidebar a {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 10px;
}

.sidebar a:hover {
  background: rgba(31, 111, 98, 0.08);
}

.sidebar a:focus-visible {
  background: rgba(31, 111, 98, 0.12);
}

.sidebar a.active {
  color: var(--accent);
  background: rgba(215, 106, 47, 0.15);
}

.sidebar .nav-group {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 6px;
}

.sidebar .nav-sub {
  padding-left: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.auth-session {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(31, 111, 98, 0.18);
  background: rgba(31, 111, 98, 0.06);
  display: grid;
  gap: 6px;
}

.auth-session strong {
  line-height: 1.15;
}

.auth-session .small {
  margin: 0;
}

.auth-session .ghost {
  width: 100%;
  justify-content: center;
}

.panel {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  animation: rise 1s ease-out;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.panel-header h2 {
  margin: 0 0 6px;
  font-family: "Fraunces", "Georgia", serif;
}

.panel-header p {
  margin: 0;
  color: var(--muted);
}

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.controls > * {
  max-width: 100%;
}

.toggle-group {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(44, 32, 23, 0.12);
  display: flex;
  gap: 8px;
}

.mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

.mode-btn:disabled {
  color: rgba(111, 93, 82, 0.7);
}

.mode-btn.active {
  background: rgba(31, 111, 98, 0.15);
  color: var(--accent-2);
}

.budget-mode-switch {
  margin-bottom: 16px;
}

.budget-iva-label {
  font-weight: 600;
}

.search.budget-iva-input {
  max-width: 110px;
  min-width: 110px;
}

.budget-mode-panel {
  display: grid;
  gap: 12px;
}

.budget-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}

.budget-inline-field {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.budget-inline-field input {
  min-width: 150px;
}

.budget-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.budget-actions + .inventory-details {
  margin-top: 22px;
}

.budget-classic-shell {
  display: grid;
  gap: 14px;
}

.budget-classic-top {
  display: grid;
  gap: 10px;
}

.budget-classic-intro h3 {
  margin-bottom: 4px;
}

.budget-classic-intro p {
  margin: 0;
}

.budget-classic-actionbar {
  position: sticky;
  top: 10px;
  z-index: 6;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(44, 32, 23, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(36, 26, 18, 0.08);
  margin-top: 0;
}

.budget-classic-meta-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(31, 111, 98, 0.2);
  background: rgba(31, 111, 98, 0.08);
  color: var(--accent-2);
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.budget-classic-meta-pill.is-muted {
  border-color: rgba(44, 32, 23, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
}

.budget-classic-block {
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 10px;
}

.budget-classic-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.budget-classic-block-head h4 {
  margin: 0;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 1rem;
}

.budget-classic-block-head .small {
  margin: 2px 0 0;
}

.budget-classic-tax-note {
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(215, 106, 47, 0.25);
  background: rgba(215, 106, 47, 0.08);
  color: #9b4d20;
  padding: 4px 10px;
  font-weight: 600;
}

.budget-classic-composer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 0;
}

.budget-classic-composer .budget-inline-field {
  min-width: 0;
}

.budget-classic-composer .budget-inline-field .stock-input {
  width: 100%;
  min-width: 0;
}

.budget-classic-composer .ghost {
  min-height: 42px;
  white-space: nowrap;
}

.budget-classic-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 0;
}

.budget-classic-cost-grid .budget-inline-field {
  min-width: 0;
}

.budget-classic-cost-grid .budget-inline-field .stock-input {
  width: 100%;
  min-width: 0;
}

.budget-classic-total-card {
  border: 1px solid rgba(31, 111, 98, 0.22);
  background: rgba(31, 111, 98, 0.08);
}

.budget-classic-secondary {
  display: grid;
  gap: 14px;
}

.budget-classic-secondary .inventory-details {
  margin-top: 0;
}

.budget-classic-library-slot > .inventory-details {
  margin-top: 0;
}

.budget-origin-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

.budget-custom-details {
  margin-top: 8px;
  border: 1px dashed var(--stroke);
  border-radius: 10px;
  padding: 6px 8px;
}

.budget-custom-details summary {
  cursor: pointer;
  color: var(--accent-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.budget-custom-grid {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.budget-custom-grid .budget-custom-grid-wide {
  grid-column: 1 / -1;
}

.budget-custom-grid .stock-input {
  width: 100%;
}

.budget-other-costs-details {
  margin-top: 4px;
}

.budget-other-cost-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.budget-other-cost-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(130px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid rgba(44, 32, 23, 0.08);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.budget-other-cost-row .budget-inline-field {
  min-width: 0;
}

.budget-other-cost-row .budget-inline-field .stock-input {
  width: 100%;
  min-width: 0;
}

.budget-other-cost-remove {
  white-space: nowrap;
  min-height: 40px;
}

.budget-other-cost-actions {
  margin-top: 8px;
}

.budget-other-cost-empty {
  margin: 0;
}

.budget-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.budget-mode-panel .stock-input[readonly] {
  background: rgba(27, 25, 22, 0.06);
}

.budget-warning-box {
  border: 1px solid rgba(196, 104, 44, 0.35);
  background: rgba(215, 106, 47, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.budget-warning-box p {
  margin: 0;
  color: #9b4d20;
  font-size: 0.86rem;
}

.budget-warning-box p + p {
  margin-top: 6px;
}

.budget-row-warning td {
  background: rgba(215, 106, 47, 0.08);
}

.budget-summary-grid {
  margin-top: 12px;
}

.budget-doc-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.budget-doc-grid .budget-inline-field .stock-input {
  width: 100%;
}

.budget-doc-grid textarea.stock-input {
  min-height: 70px;
  resize: vertical;
}

.budget-doc-grid .budget-doc-wide {
  grid-column: 1 / -1;
}

.budget-doc-photo-upload {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.budget-doc-photo-upload .budget-inline-field {
  flex: 1 1 260px;
}

.budget-doc-photo-upload .ghost {
  flex: 0 0 auto;
}

.budget-doc-photo-slot {
  display: grid;
  gap: 8px;
}

.budget-doc-photo-slot .small {
  margin: 0;
}

.budget-doc-photo-frame {
  border: 1px dashed rgba(44, 32, 23, 0.35);
  border-radius: 12px;
  min-height: 170px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
}

.budget-doc-photo-frame img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.budget-doc-photo-placeholder {
  color: #65584b;
  text-align: center;
  font-size: 0.86rem;
}

.budget-line-photo-editor {
  display: grid;
  grid-template-columns: minmax(110px, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 130px;
}

.budget-line-photo-thumb {
  width: 84px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: #f4f5f2;
  color: var(--muted);
  font-size: 0.7rem;
  justify-self: center;
}

.budget-line-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.budget-line-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.budget-line-photo-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.budget-line-photo-caption {
  width: 100%;
}

.quote-line-photo {
  width: 100%;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.quote-line-photo img {
  width: 88px;
  height: 70px;
  display: block;
  object-fit: contain;
}

.quote-line-photo figcaption {
  max-width: 100%;
  color: #4d5752;
  font-size: 8px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

#budget-quote-print {
  display: none;
}

#admin-preview-print-sheet {
  display: none;
}

.admin-preview-print-page {
  width: min(210mm, 100%);
  margin: 0 auto;
  padding: 12mm;
  background: #fff;
  color: #111;
  box-sizing: border-box;
}

.admin-preview-print-head {
  border-bottom: 1px solid #d6cec5;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.admin-preview-print-head h2 {
  margin: 0;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 1.2rem;
}

.admin-preview-print-head p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #4b4036;
}

.quote-page {
  width: min(210mm, 100%);
  min-height: auto;
  margin: 0 auto;
  padding: 12mm;
  background: #fff;
  color: #111;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

.quote-head {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 16px;
  border: 1px solid #444;
}

.quote-brand {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  border-right: 1px solid #444;
  padding: 8px;
}

.quote-brand p {
  margin: 0;
  line-height: 1.25;
}

.logo-box {
  display: grid;
  place-items: center;
  border: 1px solid #bbb;
  background: #fff;
  padding: 6px;
}

.logo-box img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.quote-company-title {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.quote-number-box {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
}

.quote-number-box h2 {
  margin: 0;
  font-size: 1.85rem;
  letter-spacing: 0.04em;
}

.quote-number-box strong {
  font-size: 2rem;
}

.quote-date {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
}

.quote-client-grid {
  margin-top: 8px;
  border: 1px solid #444;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quote-client-grid > div {
  padding: 4px 6px;
  border-top: 1px solid #ddd;
  min-height: 24px;
}

.quote-client-grid > div:nth-child(-n + 2) {
  border-top: none;
}

.quote-client-grid strong {
  display: inline-block;
  min-width: 92px;
}

.quote-photo-section {
  margin-top: 8px;
  border: 1px solid #444;
}

.quote-photo-head {
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
  display: grid;
  gap: 4px;
}

.quote-photo-head strong {
  font-size: 12px;
}

.quote-photo-head span {
  min-height: 14px;
  color: #444;
}

.quote-photo-frame {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 8px;
}

.quote-photo-frame img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.quote-photo-placeholder {
  width: 100%;
  min-height: 128px;
  border: 1px dashed #888;
  display: grid;
  place-items: center;
  text-align: center;
  color: #555;
  padding: 10px;
}

.quote-table {
  margin-top: 8px;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 0;
}

.quote-table th,
.quote-table td {
  border: 1px solid #444;
  padding: 4px 6px;
}

.quote-table th {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
}

.quote-table .c {
  text-align: center;
}

.quote-table .r {
  text-align: right;
  white-space: nowrap;
}

.quote-item-meta {
  display: block;
  margin-top: 2px;
  color: #444;
  font-size: 11px;
  line-height: 1.2;
}

.quote-footer {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 10px;
  margin-top: 8px;
}

.quote-notes {
  border: 1px solid #444;
  min-height: 120px;
  padding: 6px;
}

.quote-notes h4 {
  margin: 0 0 6px;
  font-size: 12px;
}

.quote-notes p {
  margin: 0;
  white-space: pre-wrap;
}

.quote-totals {
  border: 1px solid #444;
}

.quote-totals div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 4px 8px;
  border-top: 1px solid #ddd;
  font-size: 13px;
}

.quote-totals div:first-child {
  border-top: none;
}

.quote-totals .grand {
  font-weight: 700;
  font-size: 16px;
}

.subpanel h4 {
  margin: 18px 0 8px;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 1rem;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.toggle input {
  accent-color: var(--accent-2);
}

.ghost {
  border: 1px solid rgba(31, 111, 98, 0.4);
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent-2);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.ghost:disabled {
  border-color: rgba(31, 111, 98, 0.18);
  color: rgba(31, 111, 98, 0.6);
  background: rgba(255, 255, 255, 0.55);
}

.primary {
  border: none;
  background: linear-gradient(135deg, #d76a2f, #e3864d);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(215, 106, 47, 0.25);
}

.primary:disabled {
  box-shadow: none;
  filter: saturate(0.6);
}

.search {
  border: 1px solid rgba(44, 32, 23, 0.12);
  padding: 10px 12px;
  border-radius: 12px;
  width: min(320px, 100%);
  max-width: 100%;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.9);
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.product-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(31, 111, 98, 0.1);
  box-shadow: 0 10px 18px rgba(36, 26, 18, 0.08);
  display: grid;
  gap: 12px;
  animation: fade-up 0.6s ease-out;
}

.product-header h3 {
  margin: 0;
  font-size: 1rem;
}

.product-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.product-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.table-product-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.model-type-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.model-type-chip.is-standard {
  color: #1f6f62;
  background: rgba(31, 111, 98, 0.14);
  border: 1px solid rgba(31, 111, 98, 0.3);
}

.model-type-chip.is-custom {
  color: #9b4d20;
  background: rgba(215, 106, 47, 0.15);
  border: 1px solid rgba(215, 106, 47, 0.35);
}

.product-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(44, 32, 23, 0.12);
  border-radius: 12px;
  padding: 6px 10px;
}

.product-input input {
  width: 70px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  text-align: center;
}

.product-input input:focus {
  outline: none;
}

.product-input:focus-within {
  border-color: rgba(31, 111, 98, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 111, 98, 0.12);
}

.product-input span {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.product-actions .primary {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: 12px;
  white-space: nowrap;
}

.product-footer {
  display: flex;
  justify-content: flex-start;
}

.product-standby {
  font-size: 0.8rem;
  color: var(--accent-2);
  background: rgba(47, 111, 109, 0.1);
  border: 1px solid rgba(47, 111, 109, 0.25);
  padding: 4px 8px;
  border-radius: 999px;
}

.subpanel {
  margin-top: 24px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--stroke);
}

.subpanel h3 {
  margin-top: 0;
  font-family: "Fraunces", "Georgia", serif;
}

.data-note-line {
  display: block;
}

.flow-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.flow-guide div {
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed rgba(44, 32, 23, 0.15);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.inventory-details {
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(47, 111, 109, 0.4);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
}

.inventory-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-2);
}

.inventory-details[open] summary {
  margin-bottom: 12px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.table-wide {
  min-width: 860px;
}

thead th {
  text-align: left;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 12px;
}

tbody tr {
  border-top: 1px solid rgba(44, 32, 23, 0.08);
  animation: fade-up 0.4s ease-out;
}

tbody td {
  padding: 12px 8px;
  font-size: 0.95rem;
}

tbody tr:hover {
  background: rgba(215, 106, 47, 0.06);
}

.stock-input {
  width: 90px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(44, 32, 23, 0.12);
  border-radius: 8px;
}

.location-input {
  width: 140px;
}

.checkbox-input {
  transform: scale(1.1);
  accent-color: var(--accent-2);
}

.purchase-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.build-cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.build-cell .stock-input {
  width: 100%;
}

.standby-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sales-summary-grid {
  margin-top: 0;
}

.sales-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sales-view-tabs {
  flex-wrap: wrap;
  align-items: center;
}

.sales-tab-panel[hidden] {
  display: none;
}

.sales-location-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.sales-location-chip-list .small {
  margin: 0;
}

.sales-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(31, 111, 98, 0.22);
  background: rgba(31, 111, 98, 0.08);
  color: var(--accent-2);
  font-size: 0.8rem;
}

.sales-location-chip small {
  font-size: 0.7rem;
  color: var(--muted);
}

.sales-location-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.9rem;
}

.sales-location-chip.is-auto {
  border-color: rgba(44, 32, 23, 0.14);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
}

.sales-location-chip.is-auto small {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sales-location-manager-panel {
  margin-top: 8px;
}

#sales-location-manager {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.sales-location-manager-grid {
  display: grid;
  gap: 10px;
}

.sales-location-manager-row {
  border: 1px solid rgba(44, 32, 23, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 8px;
}

.sales-location-manager-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.sales-location-manager-head strong {
  display: block;
}

.sales-location-sources {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sales-location-source {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(44, 32, 23, 0.14);
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
}

.sales-location-source.is-manual {
  color: var(--accent-2);
  border-color: rgba(31, 111, 98, 0.25);
  background: rgba(31, 111, 98, 0.08);
}

.sales-location-source.is-detected {
  color: #9b4d20;
  border-color: rgba(215, 106, 47, 0.25);
  background: rgba(215, 106, 47, 0.08);
}

.sales-location-alias-list {
  margin: 0;
}

.sales-location-manager-actions {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sales-location-manager-actions .search {
  width: 100%;
  min-width: 0;
}

.sales-location-manager-actions .ghost {
  white-space: nowrap;
}

.sales-location-manager-help {
  margin: 0;
}

.sales-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sales-section-head h3 {
  margin-bottom: 4px;
}

.sales-section-head .small {
  margin: 0;
}

.sales-controls {
  gap: 10px;
}

.sales-controls .search {
  min-width: 170px;
}

.sales-history-controls {
  margin-bottom: 10px;
  align-items: flex-end;
}

.sales-date-filter {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.sales-date-filter .search {
  min-width: 150px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-header h3 {
  margin: 0;
}

.admin-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  min-width: 0;
  overflow: hidden;
}

.admin-card h3 {
  margin-top: 0;
  font-family: "Fraunces", "Georgia", serif;
}

.admin-card .table-wrap {
  max-height: 420px;
  border-radius: 14px;
  border: 1px solid rgba(44, 32, 23, 0.1);
  background: #fff;
}

.admin-table {
  min-width: 0;
  table-layout: fixed;
}

.admin-table th,
.admin-table td {
  padding: 10px 6px;
}

.admin-table td:first-child {
  width: 45%;
  word-break: break-word;
}

.admin-card .stock-input {
  width: 100%;
}

.admin-mode-row,
.admin-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-list-header {
  margin-top: 18px;
}

.admin-list-header h4 {
  margin: 0 0 4px;
}

.admin-list-header .small {
  margin: 0;
}

.admin-list-header .search {
  width: min(280px, 100%);
}

.admin-edit-status {
  margin: 0;
  max-width: 620px;
}

.admin-material-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.admin-table-actions {
  white-space: nowrap;
}

.admin-preview-empty {
  border: 1px dashed rgba(44, 32, 23, 0.2);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.75);
}

.admin-preview-empty p {
  margin: 6px 0 0;
}

.admin-preview-panel {
  display: grid;
  gap: 12px;
}

.admin-preview-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid rgba(44, 32, 23, 0.1);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
}

.admin-preview-hero h4 {
  margin: 2px 0 4px;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 1rem;
}

.admin-preview-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-preview-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(31, 111, 98, 0.2);
  background: rgba(31, 111, 98, 0.08);
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.78rem;
}

.admin-preview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.admin-preview-metric {
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(44, 32, 23, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

.admin-preview-metric p {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-preview-metric strong {
  display: block;
  line-height: 1.2;
}

.admin-preview-block {
  border-radius: 14px;
  border: 1px solid rgba(44, 32, 23, 0.08);
  background: rgba(255, 255, 255, 0.85);
  padding: 12px;
}

.admin-preview-block > p {
  margin: 0 0 8px;
}

.admin-preview-block > p:last-child {
  margin-bottom: 0;
}

.admin-preview-materials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.admin-preview-materials li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
  border: 1px solid rgba(44, 32, 23, 0.08);
  background: #fff;
  padding: 8px 10px;
}

.admin-preview-materials li strong {
  display: block;
  margin-bottom: 2px;
}

.admin-preview-materials li small {
  display: block;
  color: var(--muted);
  line-height: 1.25;
}

.admin-preview-materials li > span {
  font-weight: 600;
  white-space: nowrap;
}

.admin-preview-materials li.is-empty > span {
  color: var(--muted);
  font-weight: 400;
}

.admin-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.group-row td {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: rgba(31, 111, 98, 0.06);
  padding: 8px;
}

.sales-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.purchase-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.purchase-summary strong {
  font-size: 1.1rem;
}

.purchase-print-header {
  margin-bottom: 12px;
}

.print-only {
  display: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(31, 111, 98, 0.12);
  color: var(--accent-2);
  border: 1px solid rgba(31, 111, 98, 0.25);
}

.status-pill.annulled {
  background: rgba(215, 106, 47, 0.12);
  color: var(--accent);
  border-color: rgba(215, 106, 47, 0.35);
}

.cutting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cutting-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  align-items: end;
}

.cutting-settings .form-row {
  min-width: 0;
}

.cutting-settings select,
.cutting-settings input {
  width: 100%;
  min-width: 0;
}

.cutting-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  grid-column: 1 / -1;
}

.cutting-settings .small {
  grid-column: 1 / -1;
}

.cutting-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.cutting-card h3 {
  margin: 0;
  font-family: "Fraunces", "Georgia", serif;
}

.cut-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cut-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.cut-pieces {
  display: grid;
  gap: 8px;
}

.cut-piece-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 0.8fr)) auto;
  gap: 8px;
  align-items: center;
}

.cut-field {
  display: grid;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.cut-field input {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  min-width: 0;
}

.cut-piece-row button {
  border: none;
  background: rgba(196, 104, 44, 0.12);
  color: var(--accent);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.cut-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cut-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.sheet-card {
  display: grid;
  gap: 6px;
}

.sheet-title {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sheet-preview {
  position: relative;
  border-radius: 12px;
  border: 1px dashed rgba(44, 32, 23, 0.2);
  background: rgba(255, 255, 255, 0.95);
  min-height: 180px;
  overflow: hidden;
}

.sheet-piece {
  position: absolute;
  border: 1px solid rgba(31, 111, 98, 0.45);
  background: rgba(31, 111, 98, 0.15);
  color: var(--accent-2);
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
}

.sheet-piece.is-draggable {
  cursor: grab;
  border-color: rgba(215, 106, 47, 0.5);
  background: rgba(215, 106, 47, 0.12);
  color: #9b4d20;
  touch-action: none;
  user-select: none;
}

.sheet-piece.is-dragging {
  cursor: grabbing;
  opacity: 0.85;
}

.projector {
  position: fixed;
  inset: 0;
  background: #fdfbf7;
  color: #1d1610;
  z-index: 1000;
  display: none;
  flex-direction: column;
}

body.projector-mode .projector {
  display: flex;
}

body.projector-mode header,
body.projector-mode .layout,
body.projector-mode footer,
body.projector-mode .modal,
body.projector-mode .bg-gradient,
body.projector-mode .bg-orb {
  display: none !important;
}

.projector-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(44, 32, 23, 0.1);
  background: #fffaf2;
}

.projector-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.projector-controls input[type="range"] {
  width: 140px;
  max-width: 100%;
}

.projector-controls input[type="number"] {
  width: 80px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
}

.projector-meta {
  margin-left: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.projector-stage {
  flex: 1;
  overflow: auto;
  padding: 16px 18px 24px;
  display: grid;
  gap: 16px;
}

.projector-calibration {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.calibration-bar {
  height: 8px;
  background: #1f6f62;
  border-radius: 999px;
}

.projector-sheet {
  position: relative;
  border: 2px solid rgba(31, 111, 98, 0.5);
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.projector-sheet-wrap {
  display: grid;
  gap: 6px;
}

.projector-sheet-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.projector-piece {
  position: absolute;
  border: 1px solid rgba(215, 106, 47, 0.55);
  background: rgba(215, 106, 47, 0.15);
  color: #9b4d20;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
}

.form-row {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.form-row input,
.form-row select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
}

.form-row textarea {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.inline-form .form-row {
  margin-bottom: 0;
  min-width: 180px;
}

.material-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(90px, 0.65fr) minmax(90px, 0.65fr) minmax(110px, 0.75fr) auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
  width: 100%;
}

.material-row input,
.material-row select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  min-width: 0;
}

.material-row button {
  border: none;
  background: rgba(196, 104, 44, 0.12);
  color: var(--accent);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.material-thumbnail {
  width: 64px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: #f3f5f2;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.1;
  text-align: center;
}

.material-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recipe-material-thumbnail {
  width: 100%;
  min-width: 86px;
  height: 42px;
}

.inventory-photo-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 190px;
}

.material-photo-upload,
.material-photo-clear {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 0.72rem;
}

.material-name-hover {
  position: relative;
  display: inline-block;
  font-weight: 650;
}

.material-name-hover[tabindex] {
  cursor: zoom-in;
  text-decoration: underline dotted rgba(23, 79, 66, 0.5);
  text-underline-offset: 4px;
}

.material-hover-preview {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 40;
  width: 220px;
  height: 165px;
  padding: 6px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.material-hover-preview img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: contain;
  background: #f7f7f5;
}

.material-name-hover:hover .material-hover-preview,
.material-name-hover:focus .material-hover-preview,
.material-name-hover:focus-within .material-hover-preview {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

#admin-product-form .ghost {
  width: fit-content;
}

#admin-custom-fields {
  border: 1px dashed var(--stroke);
  border-radius: 10px;
  padding: 10px 10px 2px;
  margin-bottom: 12px;
}

#admin-product-form .primary {
  margin-top: 8px;
}

.highlight {
  color: var(--accent);
  font-weight: 600;
}

footer {
  padding: 20px 6vw 36px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

footer p {
  margin: 0;
}

footer p + p {
  margin-top: 4px;
}

footer .footer-brand {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

footer .footer-coflow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

footer .footer-coflow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

footer a {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
    gap: 20px;
  }

  .hero-card {
    order: -1;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar {
    position: static;
    top: auto;
  }

  .sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sidebar .nav-group {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: stretch;
  }

  .projector-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .projector-controls {
    width: 100%;
  }

  .projector-controls input[type="range"] {
    width: 100%;
    flex: 1 1 180px;
  }

  .cut-piece-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cut-piece-row button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .sidebar nav {
    grid-template-columns: 1fr;
  }

  .sidebar .nav-sub {
    padding-left: 10px;
  }

  .inventory-details {
    padding: 10px 12px;
  }

  .budget-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .budget-inline-field {
    width: 100%;
  }

  .budget-inline-field input,
  .budget-inline-field select,
  .budget-inline-field textarea {
    width: 100%;
    min-width: 0;
  }

  .budget-actions .ghost,
  .budget-actions .primary {
    width: 100%;
    justify-content: center;
  }

  .budget-classic-actionbar {
    top: 6px;
    padding: 10px;
  }

  .budget-classic-meta-pill {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .budget-classic-composer,
  .budget-classic-cost-grid,
  .budget-classic-secondary {
    grid-template-columns: 1fr;
  }

  .budget-classic-block {
    padding: 12px;
  }

  .budget-classic-tax-note {
    width: 100%;
    text-align: center;
  }

  .budget-other-cost-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .budget-other-cost-remove {
    width: 100%;
    justify-content: center;
  }

  .table-product-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .admin-mode-row,
  .admin-list-header {
    align-items: stretch;
  }

  .admin-list-header .search {
    width: 100%;
  }

  .admin-actions-row .ghost,
  .admin-actions-row .primary,
  .sales-actions .ghost,
  .sales-actions .primary {
    width: 100%;
    justify-content: center;
  }

  .purchase-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .sales-location-manager-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sales-location-manager-actions .ghost {
    width: 100%;
    justify-content: center;
  }

  .quote-client-grid {
    grid-template-columns: 1fr;
  }

  .quote-client-grid > div:nth-child(-n + 2) {
    border-top: 1px solid #ddd;
  }

  .quote-client-grid > div:first-child {
    border-top: none;
  }

  .table-wrap table.is-responsive {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .table-wrap table.is-responsive thead {
    display: none;
  }

  .table-wrap table.is-responsive tbody tr {
    display: block;
    border: 1px solid rgba(44, 32, 23, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    padding: 6px 8px;
    margin: 0;
  }

  .table-wrap table.is-responsive tbody td {
    display: grid;
    grid-template-columns: minmax(100px, 42%) 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 4px;
    border-top: 1px dashed rgba(44, 32, 23, 0.08);
  }

  .table-wrap table.is-responsive tbody td:first-child {
    border-top: none;
  }

  .table-wrap table.is-responsive tbody td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
  }

  .table-wrap table.is-responsive tbody td[colspan] {
    display: block;
    border-top: none;
    padding: 6px 2px;
  }

  .table-wrap table.is-responsive tbody td[colspan]::before {
    content: none;
  }

  .table-wrap table.is-responsive .stock-input,
  .table-wrap table.is-responsive .location-input {
    width: 100%;
    min-width: 0;
  }

  .table-wrap table.is-responsive .purchase-cell,
  .table-wrap table.is-responsive .standby-actions,
  .table-wrap table.is-responsive .build-cell,
  .table-wrap table.is-responsive .table-product-cell {
    width: 100%;
  }

  .table-wrap table.is-responsive .build-cell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .layout,
  .hero,
  footer {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .hero-card {
    min-width: 0;
  }

  .toggle-group {
    flex-direction: column;
    border-radius: 16px;
  }

  table {
    min-width: 620px;
  }

  .search {
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    padding: 14px;
  }

  .flow-guide {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: stretch;
  }

  .controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .controls .search {
    width: 100%;
    min-width: 0;
  }

  .controls .ghost,
  .controls .primary {
    width: 100%;
    justify-content: center;
  }

  .sales-toolbar {
    align-items: stretch;
  }

  .sales-view-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .sales-date-filter {
    width: 100%;
  }

  .sales-date-filter .search {
    min-width: 0;
    width: 100%;
  }

  .toggle {
    width: 100%;
    justify-content: space-between;
  }

  .material-row {
    grid-template-columns: 1fr;
  }

  .material-row button {
    width: 100%;
  }

  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-form .form-row {
    width: 100%;
    min-width: 0;
  }

  .product-actions {
    grid-template-columns: 1fr;
  }

  .product-actions .primary {
    width: 100%;
    justify-content: center;
  }

  .product-input {
    width: 100%;
    justify-content: space-between;
  }

  .build-cell {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 18px;
  }

  .subpanel {
    padding: 14px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .cutting-settings {
    grid-template-columns: 1fr;
  }

  .cut-result-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .purchase-summary {
    align-items: flex-start;
  }

  .cut-piece-row {
    grid-template-columns: 1fr;
  }

  .cut-piece-row button {
    width: 100%;
  }

  .cut-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cut-actions .ghost,
  .cut-actions .primary {
    width: 100%;
    justify-content: center;
  }

  .budget-custom-grid {
    grid-template-columns: 1fr;
  }

  .projector-toolbar {
    padding: 10px 12px;
  }

  .projector-stage {
    padding: 12px;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body:not(.print-budget-quote) * {
    visibility: hidden;
  }

  body:not(.print-budget-quote) #compras,
  body:not(.print-budget-quote) #compras * {
    visibility: visible;
  }

  body:not(.print-budget-quote) #compras {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  body.print-budget-quote {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
  }

  body.print-budget-quote > :not(#budget-quote-print) {
    display: none !important;
  }

  body.print-budget-quote #budget-quote-print {
    display: block !important;
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.print-budget-quote #budget-quote-print,
  body.print-budget-quote #budget-quote-print * {
    visibility: visible !important;
  }

  body.print-budget-quote .quote-page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 10.4px;
    line-height: 1.16;
    break-inside: auto;
    page-break-inside: auto;
    break-after: auto;
    page-break-after: auto;
  }

  body.print-budget-quote .quote-head {
    gap: 8px;
  }

  body.print-budget-quote .quote-brand {
    grid-template-columns: 86px 1fr;
    gap: 6px;
    padding: 6px;
  }

  body.print-budget-quote .logo-box {
    padding: 4px;
  }

  body.print-budget-quote .logo-box img {
    max-height: 56px;
  }

  body.print-budget-quote .quote-number-box {
    padding: 6px;
  }

  body.print-budget-quote .quote-number-box h2 {
    font-size: 1.3rem;
  }

  body.print-budget-quote .quote-number-box strong {
    font-size: 1.45rem;
  }

  body.print-budget-quote .quote-date {
    margin-top: 4px;
    font-size: 10px;
  }

  body.print-budget-quote .quote-client-grid {
    margin-top: 5px;
  }

  body.print-budget-quote .quote-client-grid > div {
    padding: 2px 4px;
    min-height: 0;
  }

  body.print-budget-quote .quote-client-grid strong {
    min-width: 78px;
  }

  body.print-budget-quote .quote-photo-section {
    margin-top: 5px;
  }

  body.print-budget-quote .quote-photo-head {
    padding: 2px 4px;
    gap: 2px;
  }

  body.print-budget-quote .quote-photo-frame {
    min-height: 94px;
    padding: 4px;
  }

  body.print-budget-quote .quote-photo-frame img {
    max-height: 130px;
  }

  body.print-budget-quote .quote-photo-placeholder {
    min-height: 78px;
    padding: 6px;
  }

  body.print-budget-quote .quote-table {
    margin-top: 5px;
    font-size: 9.8px;
    table-layout: fixed;
  }

  body.print-budget-quote .quote-table th,
  body.print-budget-quote .quote-table td {
    padding: 2px 4px;
    overflow-wrap: anywhere;
    color: #000;
  }

  body.print-budget-quote .quote-table th:nth-child(2),
  body.print-budget-quote .quote-table td:nth-child(2) {
    width: 38%;
  }

  body.print-budget-quote .quote-table th:nth-child(3),
  body.print-budget-quote .quote-table td:nth-child(3) { width: 20%; }

  body.print-budget-quote .quote-line-photo img {
    width: 24mm;
    height: 20mm;
  }

  body.print-budget-quote .quote-line-photo figcaption { font-size: 7pt; }

  body.print-budget-quote .quote-footer {
    margin-top: 5px;
    grid-template-columns: 1fr 226px;
    gap: 6px;
  }

  body.print-budget-quote .quote-notes {
    min-height: 80px;
    padding: 4px;
  }

  body.print-budget-quote .quote-notes h4 {
    margin-bottom: 4px;
  }

  body.print-budget-quote .quote-totals div {
    padding: 2px 6px;
    font-size: 10.8px;
  }

  body.print-budget-quote .quote-totals .grand {
    font-size: 13px;
  }

  body.print-admin-preview {
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
  }

  body.print-admin-preview > :not(#admin-preview-print-sheet) {
    display: none !important;
  }

  body.print-admin-preview #admin-preview-print-sheet {
    display: block !important;
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.print-admin-preview #admin-preview-print-sheet,
  body.print-admin-preview #admin-preview-print-sheet * {
    visibility: visible !important;
  }

  body.print-admin-preview .admin-preview-print-page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 10mm;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  body.print-admin-preview .admin-preview-print-head {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  body.print-admin-preview .admin-preview-print-page {
    break-inside: auto;
    page-break-inside: auto;
  }

  body.print-admin-preview .admin-preview-materials {
    max-height: none !important;
    overflow: visible !important;
  }

  body.print-admin-preview .admin-preview-materials li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .no-print {
    display: none !important;
  }

  #compras .print-only {
    display: block !important;
  }

  .purchase-groups .subpanel {
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }

  .purchase-groups .subpanel:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .panel {
    box-shadow: none;
    border: none;
    background: #fff;
    padding: 16px;
  }

  .table-wrap {
    overflow: visible;
  }

  table {
    min-width: 0;
    width: 100%;
  }

  .purchase-cell .checkbox-input {
    display: inline-block;
  }

  .purchase-cell .stock-input {
    border: none;
    background: transparent;
    padding: 0;
    height: auto;
  }
}
}

@media screen {
  .modal { background: rgba(20, 31, 45, 0.58); backdrop-filter: blur(7px); }
  .modal-card { position: relative; overflow: hidden; width: min(480px, 100%); padding: 26px; border: 1px solid #e3d8ca; border-radius: 20px; background: #fbfaf7; box-shadow: 0 28px 80px rgba(18, 31, 48, 0.28); }
  .modal-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, #1b263b 0 72%, #c75a1a 72%); }
  .modal-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #c75a1a; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
  .modal-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; }
  .modal-header { align-items: flex-start; margin-bottom: 10px; }
  .modal-header h3 { color: #1b263b; font-family: Montserrat, "Segoe UI", sans-serif; font-size: 1.35rem; line-height: 1.2; }
  .modal-close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: #f2e8db; color: #1b263b; }
  #modal-message { margin: 0; color: #596373; line-height: 1.55; white-space: pre-line; }
  .modal-input-wrap { display: grid; gap: 7px; margin-top: 18px; color: #1b263b; font-size: 0.78rem; font-weight: 800; }
  .modal-input-wrap input { width: 100%; min-height: 46px; border: 1px solid #d8d2c9; border-radius: 10px; background: #fff; color: #1b263b; padding: 0 13px; }
  .modal-actions { gap: 10px; margin-top: 24px; }
  .modal-actions button { min-height: 44px; padding-inline: 18px; }
  .modal[data-tone="danger"] .modal-card::before { background: linear-gradient(90deg, #1b263b 0 58%, #b33c3c 58%); }
  .modal[data-tone="danger"] #modal-ok { background: #a93636; }
  @media (max-width: 520px) {
    .modal { align-items: flex-end; padding: 12px; }
    .modal-card { width: 100%; padding: 22px 20px; border-radius: 18px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions button { width: 100%; }
  }
}