/* NitroFact · apariencia de pantalla. Los documentos de impresión conservan su formato. */
@media screen {
  :root {
    --bg: #f5f6fa;
    --card: #ffffff;
    --text: #1d2738;
    --muted: #6d788a;
    --border: #e7eaf0;
    --surface-soft: #f8f9fc;
    --shadow: 0 4px 24px -16px rgba(25, 36, 60, .2);
    --radius: 16px;
  }
  html { font-size: 14px; scrollbar-color: #b7bfce transparent; }
  body { letter-spacing: -.15px; -webkit-font-smoothing: antialiased; }
  ::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 3px; }
  input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
  .sidebar { width: 238px; padding: 12px 10px; border-right: 1px solid rgba(255,255,255,.05); }
  .brand { height: 74px; padding: 12px 14px; font-size: 17px; letter-spacing: -.5px; gap: 2px; }
  .brand-mark { border-radius: 12px; background: var(--primary); box-shadow: none; flex-shrink: 0; }
  .app-brand-logo { border-radius: 12px; padding: 5px; flex-shrink: 0; }
  .menu { padding: 0 0 20px; }
  .menu-label { color: #a6afc4; opacity: .8; padding: 23px 15px 9px; font-size: 10px; letter-spacing: 1.6px; }
  .menu a { position: relative; margin: 3px 0; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 500; gap: 12px; color: #c6ccdc; min-height: 42px; }
  .menu a i { width: 22px; font-size: 20px; opacity: .85; }
  .menu a:hover { background: rgba(255,255,255,.055); }
  .menu a.active { background: color-mix(in srgb, var(--primary) 75%, var(--sidebar)); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
  .menu a.active i { opacity: 1; }
  .main { margin-left: 238px; }
  .topbar { height: 76px; padding: 0 32px; border-bottom: 1px solid var(--border); box-shadow: none; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(14px); }
  .topbar-left { min-width: 0; }
  .topbar-left > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .topbar-right { gap: 12px; flex-shrink: 0; }
  .topbar-user-name { font-size: 12px; }
  .topbar-user-name .small { font-size: 11px; }
  .avatar { width: 37px; height: 37px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-size: 14px; }
  .icon-btn { border-radius: 10px; width: 38px; height: 38px; }
  .icon-btn:hover { background: var(--surface-soft); color: var(--primary); }
  .content { padding: 30px 32px; max-width: 1740px; }
  .page-head { margin-bottom: 26px; align-items: center; }
  .page-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -.85px; }
  .breadcrumb { margin-top: 7px; font-size: 12px; }
  .card, .category-card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .card { margin-bottom: 22px; }
  .card-header { padding: 19px 22px; min-height: 68px; }
  .card-title { font-size: 14px; letter-spacing: -.2px; font-weight: 650; }
  .card-body { padding: 22px; }
  .grid { gap: 18px; }
  .stat { padding: 23px; align-items: flex-start; }
  .stat-value { font-size: clamp(23px, 2.1vw, 30px); letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 12px; }
  .stat-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
  .badge { font-size: 10px; letter-spacing: .1px; font-weight: 650; padding: 5px 9px; text-transform: none; border-radius: 7px; }
  .badge-muted { background: var(--surface-soft); color: var(--muted); }
  .btn { min-height: 42px; padding: 10px 16px; border-radius: 10px; font-size: 12px; font-weight: 650; box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s; }
  .btn:hover { transform: none; filter: none; box-shadow: 0 3px 10px rgba(25,36,60,.06); }
  .btn-primary:hover { background: var(--primary-dark); }
  .btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
  .btn-light { background: var(--card); border: 1px solid var(--border); }
  .btn-light:hover { background: var(--surface-soft); }
  .btn-outline { color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--card)); border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); }
  .btn-sm { min-height: 34px; padding: 7px 11px; font-size: 11px; border-radius: 8px; }
  .form-group { margin-bottom: 17px; min-width: 0; }
  .form-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05px; margin-bottom: 7px; }
  .form-control { height: 44px; border-color: var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px; background: var(--card); color: var(--text); }
  .form-control::placeholder { color: #929bab; }
  .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
  .form-control:disabled { background: var(--surface-soft); color: var(--muted); }
  .input-group .form-control { border-radius: 9px 0 0 9px; min-width: 0; }
  .input-group .btn { border-radius: 0 9px 9px 0; }
  .table th { background: var(--surface-soft); font-size: 10px; letter-spacing: .6px; padding: 13px 20px; }
  .table td { padding: 15px 20px; font-size: 12px; }
  .table tbody tr { transition: background .12s; }
  .table tbody tr:hover { background: color-mix(in srgb, var(--surface-soft) 65%, transparent); }
  .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
  .table td .small { margin-top: 3px; font-size: 10px; }
  .tabs, .report-tabs { gap: 14px; }
  .tab, .report-tabs a { font-size: 12px; font-weight: 550; }
  .alert { border-radius: 11px; font-size: 12px; padding: 13px 16px; border: 1px solid transparent; }
  .alert-info { background: #edf5fd; color: #286390; border-color: #dfebf7; }
  .alert-success { background: #eef8f3; color: #25694d; border-color: #dceee3; }
  .alert-danger { background: #fff1f1; color: #a43b3b; border-color: #f8dede; }
  .alert-warning { background: #fff8e9; color: #8f6520; border-color: #f6e9c8; }
  .warehouse-card, .category-actions, .designer-options label { background: var(--surface-soft); border-radius: 10px; }
  .action-menu summary, .action-menu>div, .format-tab { background: var(--card); color: var(--text); border-radius: 9px; }
  .empty-state { padding: 45px 20px; font-size: 12px; }
  .empty-state .empty-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; background: var(--surface-soft); color: var(--primary); }
  .empty-state strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 5px; }
  .mvk-dialog { border-radius: 18px; }
  .mvk-dialog::backdrop, .quick-customer-modal { background: rgba(15,23,42,.4); backdrop-filter: blur(5px); }
  .quick-customer-modal { grid-template-columns: minmax(0, 1fr); }
  .quick-customer-card { border-radius: 18px; width: min(650px, 100%); min-width: 0; max-width: 100%; }
  .quick-customer-card .actions { flex-wrap: wrap; }
  .loading-overlay { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(2px); }
  .auth-page { background: var(--bg); padding: 22px; gap: 22px; }
  .auth-hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--sidebar); padding: 64px; }
  .auth-hero::after { content: ''; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; bottom: -235px; right: -90px; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.015); pointer-events: none; }
  .auth-hero h1 { margin-top: 48px; font-size: clamp(32px,3.6vw,54px); font-weight: 650; line-height: 1.12; letter-spacing: -2px; }
  .auth-hero p { line-height: 1.8; }
  .auth-panel { background: var(--card); border-radius: 24px; }
  .auth-box h2 { letter-spacing: -.8px; }
  .auth-box .btn, .auth-box .form-control { min-height: 48px; }
  .auth-box .check-line { font-size: 12px; margin: 8px 0 16px; }
  .login-brand { padding: 0; }
  .login-brand img { max-width: 150px; height: 70px; border-radius: 14px; }

  /* Catálogo y cobro: los enlaces Livewire se mantienen en sus controles. */
  .sale-workspace .sale-config { box-shadow: none; }
  .sale-config .card-body { padding: 18px 22px; }
  .sale-config .form-group { margin-bottom: 0; }
  .sale-config-heading { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; color: var(--text); font-weight: 650; font-size: 12px; }
  .sale-config-heading i { color: var(--primary); font-size: 18px; }
  .pos-layout { grid-template-columns: minmax(0,1fr) 382px; gap: 24px; }
  .pos-catalog { background: transparent; box-shadow: none; border: 0; }
  .pos-catalog .card-header { padding: 0 0 18px; border: 0; display: block; }
  .pos-catalog .card-body { padding: 0; }
  .catalog-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 3px 0 18px; }
  .catalog-title-row h3 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
  .catalog-title-row .small { margin-top: 3px; }
  .catalog-search { position: relative; }
  .catalog-search i { position: absolute; left: 16px; top: 14px; font-size: 22px; color: var(--muted); pointer-events: none; }
  .catalog-search input { height: 50px; padding-left: 48px; border-radius: 12px; box-shadow: var(--shadow); }
  .product-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 16px; }
  .product-tile { position: relative; border-radius: 15px; padding: 10px; min-height: 224px; background: var(--card); box-shadow: 0 3px 14px -12px rgba(25,36,60,.18); display: flex; flex-direction: column; }
  .product-tile:hover { border-color: color-mix(in srgb,var(--primary) 48%,var(--border)); transform: translateY(-3px); box-shadow: 0 10px 22px -14px color-mix(in srgb,var(--primary) 30%,transparent); }
  .product-tile:disabled { opacity: .55; }
  .product-image { width: 100%; height: 128px; border-radius: 10px; background: var(--surface-soft); margin-bottom: 12px; font-size: 42px; color: #a2acbd; }
  .product-image img { object-fit: contain; padding: 10px; }
  .product-name { min-height: 34px; font-size: 12px; line-height: 1.4; padding: 0 3px; }
  .product-tile > .small { padding: 2px 3px; font-size: 10px; }
  .product-meta { align-items: flex-end; gap: 6px; padding: 8px 3px 3px; margin-top: auto; }
  .product-meta strong { color: var(--primary); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
  .product-meta > span { font-size: 9px; color: var(--muted); }
  .product-add-mark { position: absolute; top: 18px; right: 18px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--primary); box-shadow: 0 2px 8px rgba(25,36,60,.07); font-size: 20px; }
  .cart-panel { top: 98px; }
  .cart-panel > .card { border-radius: 18px; overflow: hidden; box-shadow: 0 8px 32px -20px rgba(25,36,60,.25); }
  .cart-panel .card-header { padding: 21px; background: color-mix(in srgb,var(--primary) 3%,var(--card)); }
  .cart-panel .card-header .card-title { display: flex; gap: 10px; align-items: center; font-size: 16px; }
  .cart-panel .card-header .card-title i { color: var(--primary); }
  .cart-panel .card-body { padding: 20px; }
  .cart-panel .form-group { margin-bottom: 12px; }
  .cart-line { grid-template-columns: minmax(0,1fr) minmax(90px,1fr) 32px; padding: 16px 0; gap: 12px; }
  .cart-line > div:first-child { grid-column: 1/-1; }
  .cart-line > .icon-btn { align-self: end; height: 38px; width: 32px; }
  .cart-line .small { font-size: 10px; }
  .quantity-stepper { grid-template-columns: 32px minmax(36px,1fr) 32px; margin-top: 4px; }
  .quantity-stepper button { background: var(--surface-soft); color: var(--text); border-color: var(--border); height: 38px; }
  .quantity-stepper button:first-child { border-radius: 8px 0 0 8px; }
  .quantity-stepper button:last-child { border-radius: 0 8px 8px 0; }
  .quantity-stepper input, .cart-line input { height: 38px; font-size: 12px; }
  .cart-line > div:nth-child(3) input { margin-top: 4px; }
  .cart-line input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .cart-total { margin: 18px -20px; padding: 20px; background: var(--surface-soft); font-size: 26px; letter-spacing: -.8px; align-items: center; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
  .cart-total > span:first-child { font-size: 12px; letter-spacing: 0; color: var(--muted); font-weight: 500; }
  .cart-total small { font-size: 10px; color: var(--muted); letter-spacing: 0; font-weight: 500; }
  .cart-panel .touch-btn { min-height: 50px; font-size: 14px; background: var(--primary); color: #fff; border-radius: 11px; box-shadow: 0 5px 14px -7px var(--primary); }
  .cart-panel .touch-btn:hover { background: var(--primary-dark); }
  .cart-panel .empty-state { padding: 32px 14px; }

  html[data-theme=dark] { color-scheme: dark; --bg:#10151e; --card:#19212e; --text:#e6eaf2; --muted:#a0abc0; --border:#2c3647; --surface-soft:#151c28; --shadow:0 4px 24px -16px rgba(0,0,0,.4); }
  html[data-theme=dark] .card, html[data-theme=dark] .product-tile, html[data-theme=dark] .category-card { border-color: var(--border); }
  html[data-theme=dark] .form-control, html[data-theme=dark] .btn-light, html[data-theme=dark] .action-menu>div, html[data-theme=dark] .action-menu summary { background: var(--card); color: var(--text); border-color: var(--border); }
  html[data-theme=dark] .product-image, html[data-theme=dark] .quantity-stepper button, html[data-theme=dark] .warehouse-card, html[data-theme=dark] .category-actions, html[data-theme=dark] .designer-options label { background: var(--surface-soft); color: var(--muted); }
  html[data-theme=dark] .product-meta strong, html[data-theme=dark] .btn-outline, html[data-theme=dark] .stat-icon, html[data-theme=dark] .avatar { color: color-mix(in srgb,var(--primary) 55%,#fff); }
  html[data-theme=dark] .badge-success, html[data-theme=dark] .text-success { color:#80dcb5; }
  html[data-theme=dark] .badge-warning { color:#f1d090; }
  html[data-theme=dark] .badge-danger, html[data-theme=dark] .text-danger { color:#ffa9a9; }
  html[data-theme=dark] .badge-info { color:#9bccf7; }
  html[data-theme=dark] .alert-info { background:#1a3046; color:#abd0f3; border-color:#2d4761; }
  html[data-theme=dark] .alert-success { background:#1c352e; color:#93d7b8; border-color:#2c4c40; }
  html[data-theme=dark] .alert-danger { background:#3b252d; color:#ffb5b9; border-color:#54353e; }
  html[data-theme=dark] .alert-warning { background:#383122; color:#ebd094; border-color:#50462e; }
  html[data-theme=dark] .auth-panel { background: var(--card); }
  html[data-theme=dark] .category-product:hover, html[data-theme=dark] .action-menu a:hover { background: var(--surface-soft); }
  html[data-theme=dark] .auth-hero { background: var(--sidebar); }
  @media (min-width:1600px) { .pos-layout { grid-template-columns: minmax(0,1fr) 410px; } .product-grid { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); } .product-image { height:145px; } }
  @media (min-width:821px) and (max-width:1200px) { .content { padding:24px; } .pos-layout { grid-template-columns: minmax(0,1fr) 330px; gap:18px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .sale-config .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cart-panel { position:static; } .cart-panel .card-body { padding:16px; } .cart-total { margin-left:-16px; margin-right:-16px; padding:18px 16px; } }
  @media (max-width:1000px) and (min-width:821px) { .pos-layout { grid-template-columns:minmax(0,1fr); } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (max-width:820px) { .main { margin-left:0; } .topbar { height:66px; padding:0 18px; } .content { padding:22px 18px; } .page-head { align-items:flex-start; flex-direction:row; flex-wrap:wrap; } .pos-layout { grid-template-columns:minmax(0,1fr); gap:4px; } .cart-panel { position:static; } .sale-config .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .auth-page { padding:0; } .auth-panel { border-radius:0; min-height:100vh; } .sidebar { width:250px; } .card-header { padding:17px 18px; } .card-body { padding:18px; } .grid-3>.card[style*="span 2"] { grid-column:1/-1!important; } }
  @media (max-width:520px) { .topbar-right { gap:6px; } .topbar-left>span { max-width:145px; } .content { padding:20px 14px; } .page-title { font-size:23px; } .breadcrumb { font-size:11px; } .card { border-radius:14px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .product-tile { padding:9px; min-height:220px; } .product-image { height:124px; } .product-meta strong { font-size:14px; } .product-meta>span { font-size:9px; } .sale-config .card-body { padding:16px; } .form-control { font-size:16px; } .cart-panel .form-control { font-size:14px; } .filter-bar .btn { width:100%; } .table td { padding:12px 15px; } .auth-hero { display:none; } }
  @media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
}