/*
 * AbarroNexo Premium Lock
 * Capa visual de protección. No contiene lógica ni altera flujos.
 * Debe cargarse después de app.css.
 */
:root{
  --premium-surface:#ffffff;
  --premium-surface-soft:#f8fbf9;
  --premium-surface-tint:color-mix(in srgb,var(--green-900),white 96%);
  --premium-border:color-mix(in srgb,var(--green-900),white 88%);
  --premium-text:#16211e;
  --premium-muted:#6c7874;
  --premium-shadow-sm:0 10px 30px rgba(4,59,48,.055);
  --premium-shadow:0 20px 55px rgba(4,59,48,.095);
  --premium-shadow-lg:0 30px 90px rgba(4,59,48,.14);
  --premium-radius-sm:14px;
  --premium-radius:20px;
  --premium-radius-lg:28px;
  --premium-ring:0 0 0 4px color-mix(in srgb,var(--green-900),transparent 90%);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{color:var(--premium-text)}
.app-body{background:
  radial-gradient(circle at 78% -10%,color-mix(in srgb,var(--orange),transparent 93%),transparent 30%),
  radial-gradient(circle at 14% 25%,color-mix(in srgb,var(--green-900),transparent 95%),transparent 28%),
  #f4f7f5}

/* Navegación */
.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--green-900),black 6%) 0%,var(--green-900) 46%,color-mix(in srgb,var(--green-900),black 15%) 100%);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:18px 0 55px rgba(3,35,29,.11);
}
.brand--sidebar{min-height:66px;display:flex;align-items:center}
.brand--sidebar img{filter:drop-shadow(0 8px 18px rgba(0,0,0,.08))}
.main-nav{padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav-section{margin-top:3px;color:rgba(255,255,255,.46)}
.nav-item{
  min-height:46px;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.nav-item:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.nav-item.active{background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.09));border-color:rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.nav-icon{display:grid;place-items:center;min-width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.055)}
.nav-item.active .nav-icon{background:rgba(255,255,255,.14)}
.sidebar-footer{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:13px 12px;margin:18px 2px 0}
.topbar{
  background:rgba(255,255,255,.84);border-bottom:1px solid rgba(219,230,225,.88);box-shadow:0 8px 30px rgba(12,50,41,.035);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)
}
.notification-bell,.icon-button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.notification-bell:hover,.icon-button:hover{transform:translateY(-1px);box-shadow:var(--premium-shadow-sm)}
.avatar{box-shadow:0 9px 24px color-mix(in srgb,var(--orange),transparent 72%)}

/* Jerarquía de páginas */
.page-content{padding-top:36px}
.page-heading{gap:24px;align-items:center}
.page-heading h1{letter-spacing:-.035em;line-height:1.08;color:#10201b}
.page-heading p{max-width:780px;line-height:1.65}
.eyebrow{font-weight:850;letter-spacing:.12em}
.date-chip{border-color:var(--premium-border);box-shadow:var(--premium-shadow-sm)}

/* Superficies */
.panel,.stat-card,.quick-card,.product-card,.summary-card,.metric-card:not(.auth-visual .metric-card),.config-card,.settings-card,.report-card,.order-card,.customer-card,.supplier-card,.warehouse-card,.help-article-card,.help-category-card{
  border-color:var(--premium-border);box-shadow:var(--premium-shadow-sm)
}
.panel{background:linear-gradient(180deg,#fff 0%,#fff 68%,#fdfefd 100%)}
.panel,.stat-card,.quick-card,.product-card,.config-card,.settings-card,.report-card,.order-card,.customer-card,.supplier-card,.warehouse-card{transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease}
.panel:hover{border-color:color-mix(in srgb,var(--green-900),white 81%)}
.quick-card:hover,.product-card:hover,.config-card:hover,.settings-card:hover,.report-card:hover,.order-card:hover,.customer-card:hover,.supplier-card:hover,.warehouse-card:hover{
  transform:translateY(-3px);box-shadow:var(--premium-shadow);border-color:color-mix(in srgb,var(--green-900),white 78%)
}
.stat-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#fff 72%,var(--premium-surface-tint) 100%)}
.stat-card:after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;right:-36px;top:-36px;background:color-mix(in srgb,var(--green-900),transparent 96%);pointer-events:none}
.stat-card strong{letter-spacing:-.025em}
.stat-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.panel-heading{margin-bottom:4px}
.panel-heading h2{letter-spacing:-.018em;color:#173028}

/* Botones */
.button{
  min-height:43px;border-radius:13px;box-shadow:0 8px 20px color-mix(in srgb,var(--green-900),transparent 84%);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease
}
.button:hover{transform:translateY(-2px);box-shadow:0 13px 28px color-mix(in srgb,var(--green-900),transparent 78%)}
.button:active{transform:translateY(0);box-shadow:0 4px 12px color-mix(in srgb,var(--green-900),transparent 84%)}
.button:focus-visible,.icon-button:focus-visible,.nav-item:focus-visible,a:focus-visible{outline:2px solid color-mix(in srgb,var(--orange),white 12%);outline-offset:3px}
.button--ghost{box-shadow:none;border:1px solid color-mix(in srgb,var(--green-900),white 84%);background:#f5f9f7}
.button--ghost:hover{background:var(--green-100);border-color:color-mix(in srgb,var(--green-900),white 70%)}
.button--small{min-height:36px}
.button[disabled],.button:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Formularios */
.field{gap:9px}
.field>span,.field>label{color:#243630;font-weight:780}
.field input,.field select,.field textarea,
.filter-bar input,.filter-bar select,.search-field input,.search-field select,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="date"],input[type="datetime-local"],input[type="search"],select,textarea{
  border:1px solid #d9e4df;background:#fbfdfc;border-radius:13px;min-height:44px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
textarea{min-height:96px}
.field input:hover,.field select:hover,.field textarea:hover,input:hover,select:hover,textarea:hover{border-color:#c6d7d0}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--green-900),white 28%);box-shadow:var(--premium-ring);background:#fff
}
input::placeholder,textarea::placeholder{color:#98a49f}
.form-grid{gap:20px}
.form-section-title{border-top:1px solid var(--premium-border);padding-top:20px;margin-top:4px}
.form-section-title:first-child{border-top:0;padding-top:0}

/* Tablas */
.table-wrap,.data-table-wrap,.table-responsive{border:1px solid var(--premium-border);border-radius:18px;background:#fff;box-shadow:var(--premium-shadow-sm);overflow:auto}
table{border-collapse:separate;border-spacing:0}
table thead th{background:#f6faf8;color:#4f5f59;font-size:.71rem;text-transform:uppercase;letter-spacing:.055em;font-weight:850;white-space:nowrap;border-bottom:1px solid var(--premium-border)}
table tbody tr{transition:background .16s ease}
table tbody tr:hover{background:#f9fcfa}
table tbody td{border-bottom-color:#edf1ef}
table tbody tr:last-child td{border-bottom:0}
.table-subtext{color:var(--premium-muted)}

/* Estados */
.badge,.status-pill{font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.alert{border-radius:15px;box-shadow:0 9px 24px rgba(15,52,43,.035)}
.empty-state{border:1px dashed #cfdcd6;border-radius:20px;background:linear-gradient(180deg,#fff,#fafcfb)}

/* Dashboard */
.stats-grid{gap:20px}
.dashboard-grid{gap:22px}
.quick-grid{gap:15px}
.quick-card{background:linear-gradient(145deg,#fff,#fbfdfc);border:1px solid var(--premium-border)}
.quick-card>span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.progress-track{box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.milestone{background:#fff;border-color:var(--premium-border)}

/* Autenticación e instalación */
.auth-body{background:#edf4f0}
.auth-visual{background:
  radial-gradient(circle at 80% 14%,color-mix(in srgb,var(--orange),transparent 70%),transparent 20%),
  radial-gradient(circle at 18% 88%,rgba(255,255,255,.06),transparent 22%),
  linear-gradient(145deg,color-mix(in srgb,var(--green-900),black 10%),color-mix(in srgb,var(--green-900),black 22%))}
.auth-panel{position:relative;background:linear-gradient(180deg,#fff,#fbfdfc)}
.auth-panel:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--green-900),var(--orange));opacity:.9}
.auth-panel-inner{background:#fff;border:1px solid #e7eeea;border-radius:26px;padding:34px;box-shadow:var(--premium-shadow-lg)}
.auth-panel-inner--wide{padding:36px}
.auth-panel h2{letter-spacing:-.04em;color:#10201b}
.metric-card,.visual-features>div{box-shadow:0 18px 38px rgba(0,0,0,.09)}
.error-card{border:1px solid var(--premium-border);border-radius:28px;box-shadow:var(--premium-shadow-lg);background:#fff}

/* Tienda pública */
.storefront-body{background:#f6f9f7}
.storefront-header{background:rgba(255,255,255,.9);border-bottom:1px solid var(--premium-border);box-shadow:0 8px 28px rgba(6,78,59,.04);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.storefront-header-inner{max-width:1280px}
.storefront-header nav a{font-weight:750;transition:color .18s ease,background .18s ease}
.storefront-header nav a:hover{color:var(--green-900);background:var(--green-100)}
.storefront-brand img{filter:drop-shadow(0 7px 16px rgba(6,78,59,.08))}
.storefront-footer{border-top:1px solid var(--premium-border);background:#fff}
.storefront-product,.store-product-card,.catalog-product-card{border-color:var(--premium-border);box-shadow:var(--premium-shadow-sm);transition:.2s ease}
.storefront-product:hover,.store-product-card:hover,.catalog-product-card:hover{transform:translateY(-4px);box-shadow:var(--premium-shadow)}

/* Modales y menús flotantes */
.modal,.dialog-backdrop,[data-modal-backdrop]{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-card,.dialog,.modal-content{border:1px solid var(--premium-border);border-radius:24px;box-shadow:var(--premium-shadow-lg);background:#fff}
.dropdown-menu,.popover{border:1px solid var(--premium-border);border-radius:16px;box-shadow:var(--premium-shadow);background:#fff}

/* WhatsApp */
.whatsapp-button,.button--whatsapp,a[href*="wa.me"],a[href*="whatsapp.com"]{background:#16a34a;color:#fff;border-color:#16a34a;box-shadow:0 10px 24px rgba(22,163,74,.22)}
.whatsapp-button:hover,.button--whatsapp:hover,a[href*="wa.me"]:hover,a[href*="whatsapp.com"]:hover{background:#15803d;color:#fff}

/* Utilidades de lectura */
.muted,.table-subtext,.panel p,.card p{color:var(--premium-muted)}
hr{border:0;border-top:1px solid var(--premium-border)}
::selection{background:color-mix(in srgb,var(--orange),white 68%);color:#16211e}

/* Responsive */
@media(max-width:1180px){
  .page-content{padding-left:26px;padding-right:26px}
  .stats-grid{gap:14px}
}
@media(max-width:860px){
  .topbar{height:70px;padding:0 18px}
  .page-content{padding:24px 18px 46px}
  .page-heading{align-items:flex-start;flex-direction:column}
  .page-heading h1{font-size:2rem}
  .auth-panel{padding:26px 20px}
  .auth-panel-inner,.auth-panel-inner--wide{padding:26px;border-radius:22px}
}
@media(max-width:600px){
  .page-content{padding:20px 14px 38px}
  .panel{padding:18px;border-radius:18px}
  .stat-card{padding:17px;border-radius:18px}
  .button{min-height:44px}
  .page-heading h1{font-size:1.72rem}
  .auth-panel{padding:18px 14px}
  .auth-panel-inner,.auth-panel-inner--wide{padding:22px 18px;border-radius:20px}
  .user-meta{display:none}
  .table-wrap,.data-table-wrap,.table-responsive{border-radius:15px}
}
@media(max-width:390px){
  .page-content{padding-left:12px;padding-right:12px}
  .panel,.stat-card{border-radius:16px}
  .button{padding-left:14px;padding-right:14px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print{
  .print-body{background:#fff!important}
  .print-body *{box-shadow:none!important;text-shadow:none!important}
}

/* Instalación: referencia de diagnóstico discreta y legible */
.install-reference{display:block;margin-top:8px;font-size:.72rem;font-weight:800;letter-spacing:.04em;opacity:.78}