/* ==========================================================================
   SalesPro ERP 2.2.0 — módulos internos + acceso flotante POS
   Aplica a listados, formularios, páginas internas, modales y responsive.
   ========================================================================== */

:root{
  --spm-bg:#f8fafc;
  --spm-card:#ffffff;
  --spm-soft:#f1f5f9;
  --spm-line:#dbe3ed;
  --spm-line-soft:#e9eef5;
  --spm-text:#0f172a;
  --spm-muted:#64748b;
  --spm-primary:#111827;
  --spm-accent:#4f46e5;
  --spm-accent-soft:#eef2ff;
  --spm-success:#059669;
  --spm-success-soft:#ecfdf5;
  --spm-warning:#d97706;
  --spm-warning-soft:#fffbeb;
  --spm-danger:#dc2626;
  --spm-danger-soft:#fef2f2;
  --spm-radius:20px;
  --spm-radius-sm:13px;
  --spm-shadow:0 16px 44px rgba(15,23,42,.07);
  --spm-transition:180ms ease;
}

/* --------------------------------------------------------------------------
   Global quick access: Ventas POS
   -------------------------------------------------------------------------- */
.sp-pos-fab{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:1250;
  min-width:178px;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px 10px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:21px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 8%,rgba(99,102,241,.55),transparent 35%),
    linear-gradient(135deg,#111827,#172554);
  box-shadow:0 20px 45px rgba(15,23,42,.30);
  text-decoration:none;
  transition:transform var(--spm-transition),box-shadow var(--spm-transition);
  isolation:isolate;
}
.sp-pos-fab::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:25px;
  background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(16,185,129,.14));
  opacity:0;
  transition:opacity var(--spm-transition);
}
.sp-pos-fab:hover{
  color:#fff;
  transform:translateY(-4px);
  box-shadow:0 26px 58px rgba(15,23,42,.38);
}
.sp-pos-fab:hover::after{opacity:1}
.sp-pos-fab-icon{
  width:43px;
  height:43px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.sp-pos-fab svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sp-pos-fab-copy{display:grid;line-height:1.05}
.sp-pos-fab-copy small{
  color:#a5b4fc;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sp-pos-fab-copy strong{
  margin-top:5px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

/* --------------------------------------------------------------------------
   Shared page structure for pending modules
   -------------------------------------------------------------------------- */
.route-sales .content-area,
.route-sales_pos .content-area,
.route-branches .content-area,
.route-branch_form .content-area,
.route-warehouses .content-area,
.route-warehouse_form .content-area,
.route-inventory_stocks .content-area,
.route-inventory_adjust .content-area,
.route-inventory_kardex .content-area,
.route-transfers .content-area,
.route-transfer_form .content-area,
.route-clients .content-area,
.route-client_form .content-area,
.route-quotes .content-area,
.route-quote_form .content-area,
.route-catalogs .content-area,
.route-catalog_form .content-area,
.route-catalog_view .content-area,
.route-users .content-area,
.route-user_form .content-area{
  max-width:1460px;
}

:is(
  .route-sales,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:0 0 20px;
  padding:24px 26px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--spm-shadow);
  backdrop-filter:blur(12px);
}
:is(
  .route-sales,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .page-head h1{
  margin:4px 0 0;
  color:var(--spm-text);
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.06;
  letter-spacing:-.045em;
}
:is(
  .route-sales,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .eyebrow{
  color:#4f46e5;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.muted{color:var(--spm-muted)!important}

/* Buttons */
:is(
  .route-sales,.route-sales_pos,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--spm-primary);
  border-radius:13px;
  color:#fff;
  background:var(--spm-primary);
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--spm-transition),background var(--spm-transition),border-color var(--spm-transition);
}
:is(
  .route-sales,.route-sales_pos,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .btn:hover{transform:translateY(-1px)}
:is(
  .route-sales,.route-sales_pos,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .btn.secondary,
:is(
  .route-sales,.route-sales_pos,
  .route-branches,.route-branch_form,
  .route-warehouses,.route-warehouse_form,
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfers,.route-transfer_form,
  .route-clients,.route-client_form,
  .route-quotes,.route-quote_form,
  .route-catalogs,.route-catalog_form,
  .route-users,.route-user_form
) .btn.light{
  color:#334155;
  border-color:var(--spm-line);
  background:#fff;
  box-shadow:none;
}
.btn.success{
  border-color:var(--spm-success)!important;
  background:var(--spm-success)!important;
}

/* Tables */
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card{
  overflow:hidden;
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--spm-shadow);
}
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card thead th{
  padding:14px 16px;
  border-bottom:1px solid var(--spm-line);
  color:#64748b;
  background:#f8fafc;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  text-align:left;
  text-transform:uppercase;
}
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card tbody td{
  padding:15px 16px;
  border-bottom:1px solid #edf2f7;
  color:#334155;
  font-size:12px;
  vertical-align:middle;
}
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card tbody tr:last-child td{border-bottom:0}
:is(
  .route-sales,
  .route-branches,.route-warehouses,
  .route-inventory_stocks,.route-inventory_kardex,
  .route-transfers,.route-clients,
  .route-quotes,.route-catalogs,.route-users
) .table-card tbody tr:hover{background:#fbfdff}

/* Action links become buttons */
.actions-cell,.row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.actions-cell a,.row-actions a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border:1px solid var(--spm-line);
  border-radius:10px;
  color:#334155;
  background:#fff;
  font-size:10px;
  font-weight:850;
  text-decoration:none;
  transition:background var(--spm-transition),border-color var(--spm-transition),transform var(--spm-transition);
}
.actions-cell a:hover,.row-actions a:hover{
  transform:translateY(-1px);
  border-color:#c7d2fe;
  color:#4338ca;
  background:#eef2ff;
}
.actions-cell a.danger-link,.row-actions a.danger-link{
  color:#b42318;
  border-color:#fecaca;
  background:#fff7f7;
}

/* Forms */
:is(
  .route-branch_form,.route-warehouse_form,
  .route-client_form,.route-user_form
) .card,
:is(
  .route-inventory_adjust,
  .route-transfer_form
) form:not(.toolbar){
  padding:22px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--spm-shadow);
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.form-grid label,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) label{
  min-width:0;
  display:grid;
  gap:7px;
  color:#334155;
  font-size:11px;
  font-weight:850;
}
.form-grid input,
.form-grid select,
.form-grid textarea,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) input,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) select,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) textarea{
  width:100%;
  min-width:0;
  min-height:43px;
  padding:10px 12px;
  border:1px solid var(--spm-line);
  border-radius:12px;
  color:var(--spm-text);
  background:#f8fafc;
  font:inherit;
  transition:border-color var(--spm-transition),box-shadow var(--spm-transition),background var(--spm-transition);
}
.form-grid textarea,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) textarea{
  min-height:100px;
  resize:vertical;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) input:focus,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) select:focus,
:is(.route-inventory_adjust,.route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos) textarea:focus{
  outline:0;
  border-color:#818cf8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(99,102,241,.10);
}
.full-row,.sp-full{grid-column:1/-1}

/* Filter bars */
.toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:10px;
  margin-bottom:16px;
  padding:14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.045);
}
.toolbar input,.toolbar select{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--spm-line);
  border-radius:12px;
  background:#f8fafc;
}

/* Badges and status */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:0 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.badge.info{color:#4338ca;background:#eef2ff}
.badge.ok,.badge.success{color:#047857;background:#ecfdf5}
.badge.off{color:#64748b;background:#f1f5f9}

/* Internal cards / panels */
:is(
  .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
  .route-transfer_form,.route-quote_form,.route-catalog_form,.route-sales_pos
) :is(.card,.panel,.quote-section,.catalog-products-panel,.catalog-form-grid,.catalog-options,.transfer-card,.location-card){
  border-color:rgba(148,163,184,.22)!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(15,23,42,.055)!important;
}

/* Modals and popup surfaces in any pending module */
:is(
  .route-sales_pos,.route-inventory_adjust,.route-transfer_form,
  .route-client_form,.route-quote_form,.route-catalog_form
) :is(.modal,.modal-overlay,.popup-overlay,[role="dialog"]){
  max-width:100%;
}
:is(
  .route-sales_pos,.route-inventory_adjust,.route-transfer_form,
  .route-client_form,.route-quote_form,.route-catalog_form
) :is(.modal-content,.modal-card,.popup-card,[role="dialog"]>div){
  max-width:min(680px,calc(100vw - 28px));
  max-height:calc(100dvh - 36px);
  overflow:auto;
  border:1px solid rgba(148,163,184,.24);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.25);
}

/* Catalog product cards */
.route-catalog_form .catalog-product-card{
  border:1px solid var(--spm-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(15,23,42,.055)!important;
  transition:transform var(--spm-transition),border-color var(--spm-transition),box-shadow var(--spm-transition)!important;
}
.route-catalog_form .catalog-product-card:hover{
  transform:translateY(-3px);
  border-color:#c7d2fe!important;
  box-shadow:0 18px 38px rgba(79,70,229,.10)!important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .sp-pos-fab{
    right:14px;
    bottom:14px;
    min-width:0;
    width:58px;
    height:58px;
    min-height:58px;
    padding:8px;
    border-radius:18px;
  }
  .sp-pos-fab-icon{width:42px;height:42px}
  .sp-pos-fab-copy{display:none}

  :is(
    .route-sales,
    .route-branches,.route-branch_form,
    .route-warehouses,.route-warehouse_form,
    .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
    .route-transfers,.route-transfer_form,
    .route-clients,.route-client_form,
    .route-quotes,.route-quote_form,
    .route-catalogs,.route-catalog_form,
    .route-users,.route-user_form
  ) .page-head{
    align-items:flex-start;
    padding:20px;
  }
}

@media(max-width:720px){
  :is(
    .route-sales,
    .route-branches,.route-branch_form,
    .route-warehouses,.route-warehouse_form,
    .route-inventory_stocks,.route-inventory_adjust,.route-inventory_kardex,
    .route-transfers,.route-transfer_form,
    .route-clients,.route-client_form,
    .route-quotes,.route-quote_form,
    .route-catalogs,.route-catalog_form,
    .route-users,.route-user_form
  ) .page-head{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    border-radius:20px;
  }

  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card{
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card table,
  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card tbody{
    display:grid;
    gap:13px;
    width:100%;
  }

  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card thead{display:none}

  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card tr{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    overflow:hidden;
    border:1px solid var(--spm-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.055);
  }

  :is(
    .route-sales,
    .route-branches,.route-warehouses,
    .route-inventory_stocks,.route-inventory_kardex,
    .route-transfers,.route-clients,
    .route-quotes,.route-catalogs,.route-users
  ) .table-card td{
    display:block;
    width:100%;
    min-width:0;
    padding:11px 14px!important;
    overflow-wrap:anywhere;
  }

  .actions-cell,.row-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .actions-cell a,.row-actions a{width:100%}

  .form-grid{grid-template-columns:1fr}
  .full-row,.sp-full{grid-column:auto}
  .toolbar{grid-template-columns:1fr}
  .toolbar .btn{width:100%}

  .route-catalog_form .catalog-form-grid,
  .route-catalog_form .catalog-options-grid,
  .route-catalog_form .catalog-filters{
    grid-template-columns:1fr!important;
  }
  .route-catalog_form .catalog-product-grid{
    grid-template-columns:1fr!important;
  }

  .route-transfer_form .transfer-locations{
    grid-template-columns:1fr!important;
  }
  .route-transfer_form .transfer-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }

  .route-quote_form .quote-client-grid,
  .route-quote_form .quote-meta-grid,
  .route-sales_pos .pos-layout{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:420px){
  .actions-cell,.row-actions{grid-template-columns:1fr}
  .sp-pos-fab{
    width:54px;
    height:54px;
    min-height:54px;
  }
  .sp-pos-fab-icon{width:38px;height:38px}
}