/* =========================================================
   SisQuetzal App Theme (Overrides sobre Argon/dash.css)
   Cargar SIEMPRE después de dash.css
   ========================================================= */

/* 1) Variables: aquí “matamos” la paleta Argon
   Argon usa :root con --primary, --success, etc.【dash.css】
*/
:root{
  /* Base */
  --font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --radius: 14px;

  /* Tema oscuro corporativo */
  --sq-bg: #0b1220;           /* fondo app */
  --sq-surface: #0f1a2e;      /* cards / panels */
  --sq-surface-2: #12213a;    /* hover / elevaciones */
  --sq-border: rgba(255,255,255,.10);
  --sq-text: rgba(255,255,255,.88);
  --sq-muted: rgba(255,255,255,.62);

  /* Acento corporativo (azul serio) */
  --sq-accent: #3b82f6;
  --sq-accent-2: #2563eb;

  /* Re-mapeo de Argon/Bootstrap variables */
  --primary: var(--sq-accent);
  --info: #38bdf8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --secondary: rgba(255,255,255,.10);
  --default: #0b1220;

  /* Body */
  --body-bg: var(--sq-bg);
  --body-color: var(--sq-text);
}

/* 2) Base */
html, body{
  background: var(--sq-bg) !important;
  color: var(--sq-text) !important;
  font-family: var(--font-family-sans-serif) !important;
}

/* Fondo con textura suave corporativa */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(34,197,94,.10), transparent 65%),
    radial-gradient(1200px 800px at 50% 100%, rgba(255,255,255,.05), transparent 60%);
  opacity: .9;
  z-index: 0;
}

/* 3) Navbar / Topbar (quita barras verdes y arregla padding/altura) */
.navbar,
.navbar-vertical,
.navbar-horizontal{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2000 !important; /* por encima de todo */
  background: rgba(15,26,46,.78) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sq-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}

.navbar .navbar-brand{
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.navbar .navbar-brand img{
  height: 34px !important; /* evita que “tape” y se vea pegado */
  width: auto;
}

/* Ajuste de “scroll pegado arriba” */
body{
  scroll-padding-top: 76px; /* para anchors / scroll */
}

/* 4) Cards / panels */
.card, .shadow, .shadow-sm{
  background: rgba(15,26,46,.85) !important;
  border: 1px solid var(--sq-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
}
.card-header, .card-footer{
  background: transparent !important;
  border-color: var(--sq-border) !important;
}

/* 5) Texto */
.text-muted{ color: var(--sq-muted) !important; }
h1,h2,h3,h4,h5,h6{ color: rgba(255,255,255,.92) !important; }

/* 6) Forms */
.form-control, .custom-select, .input-group-text{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--sq-text) !important;
  border-radius: 12px !important;
}

.form-control::placeholder{ color: rgba(255,255,255,.45) !important; }

.form-control:focus, .custom-select:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 .20rem rgba(59,130,246,.18) !important;
}

/* 7) Buttons */
.btn{
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.btn-primary{
  background: linear-gradient(180deg, var(--sq-accent), var(--sq-accent-2)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.btn-primary:hover{
  filter: brightness(1.05);
}

/* 8) Dropdowns */
.dropdown-menu{
  background: rgba(15,26,46,.98) !important;
  border: 1px solid var(--sq-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
}
.dropdown-item{
  color: rgba(255,255,255,.82) !important;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* 9) Tables */
.table{
  color: var(--sq-text) !important;
}
.table thead th{
  border-bottom: 1px solid var(--sq-border) !important;
  color: rgba(255,255,255,.70) !important;
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* 10) Modals */
.modal-content{
  background: rgba(15,26,46,.98) !important;
  border: 1px solid var(--sq-border) !important;
  border-radius: 16px !important;
}
.modal-header, .modal-footer{
  border-color: var(--sq-border) !important;
}

/* 11) Links */
a{ color: rgba(147,197,253,.95); }
a:hover{ color: #fff; }

/* =========================================================
   PATCH: DataTables + Header overlays + coherencia dark
   Pegar al FINAL de sisquetzal-app.css
   ========================================================= */

/* 1) Elimina overlays / barras de fondo de Argon dentro del content */
.sq-app .main-content,
.sq-app .content,
.sq-app .container-fluid{
  background: transparent !important;
}

.sq-app .header,
.sq-app .bg-gradient-primary,
.sq-app .bg-primary,
.sq-app .bg-info,
.sq-app .bg-success,
.sq-app .bg-default{
  background: transparent !important;
}

/* 2) Mejora el fondo general (menos “mancha”, más corporativo) */
.sq-app{
  background:
    radial-gradient(1000px 650px at 15% 10%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #070b16 100%) !important;
}

/* 3) Card “contenedora” de la tabla (más limpia) */
.sq-app .card{
  background: rgba(15,26,46,.82) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
}

/* 4) DataTables wrapper */
.sq-app .dataTables_wrapper{
  color: rgba(255,255,255,.80) !important;
}

/* 5) Tabla: vuelve el “blanco” a dark premium */
.sq-app table,
.sq-app table.dataTable{
  background: transparent !important;
}

.sq-app table thead{
  background: rgba(255,255,255,.05) !important;
}

.sq-app table thead th{
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.75) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  font-weight: 700 !important;
}

.sq-app table tbody tr{
  background: transparent !important;
}

.sq-app table tbody tr:hover{
  background: rgba(255,255,255,.04) !important;
}

.sq-app table tbody td{
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
}

/* 6) Search input y selects */
.sq-app .dataTables_filter input,
.sq-app .dataTables_length select{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}

.sq-app .dataTables_filter input:focus,
.sq-app .dataTables_length select:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 .18rem rgba(59,130,246,.16) !important;
}

/* 7) Botones CSV/Excel (si son DataTables Buttons) */
.sq-app .dt-buttons .btn,
.sq-app .dt-button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.86) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-right: 8px !important;
}

.sq-app .dt-buttons .btn:hover,
.sq-app .dt-button:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

/* 8) Paginación */
.sq-app .dataTables_paginate .paginate_button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
}

.sq-app .dataTables_paginate .paginate_button.current{
  background: rgba(59,130,246,.22) !important;
  border-color: rgba(59,130,246,.28) !important;
  color: #fff !important;
}

/* 9) Botones dentro de tabla (ej: "Ver") */
.sq-app .btn-info,
.sq-app .btn.btn-info{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9) !important;
  border: 0 !important;
  color: #06101f !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(14,165,233,.20);
}

/* 10) Texto “Showing x to y…” */
.sq-app .dataTables_info{
  color: rgba(255,255,255,.62) !important;
}

/* ====== KILL GREEN TABLE HEADER (forzado) ====== */

/* por si el <thead> / <tr> tiene bg-success o similar */
.sq-app .bg-success,
.sq-app .bg-green,
.sq-app .table-success{
  background: transparent !important;
}

/* fuerza el encabezado de TODAS las tablas a dark */
.sq-app table thead,
.sq-app table thead tr,
.sq-app table thead th,
.sq-app .table thead,
.sq-app .table thead tr,
.sq-app .table thead th,
.sq-app table.dataTable thead th,
.sq-app table.dataTable thead td{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* si el verde viene de un "box-shadow" o borde */
.sq-app table thead th{
  box-shadow: none !important;
}

/* zebra de bootstrap que mete blanco fuerte */
.sq-app .table-striped tbody tr:nth-of-type(odd){
  background: rgba(255,255,255,.02) !important;
}
.sq-app .table-striped tbody tr:nth-of-type(even){
  background: transparent !important;
}

/* ===== FIX DROPDOWN Z-INDEX ===== */

.navbar,
.navbar-vertical,
.navbar-horizontal{
  z-index: 1040 !important;
}

.dropdown-menu{
  z-index: 1055 !important;
}

.header,
.bg-gradient-primary{
  z-index: 1 !important;
}

  /* ================================
     Reportes - Wizard corporativo (Dark)
     ================================ */

  /* Evita que el header teal de Argon tape/interfiera */
  .header.pb-6{ display:none !important; }

  /* Layout limpio */
  .sq-page-wrap{
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }

  .sq-title{
    font-weight: 900;
    letter-spacing: .2px;
    margin: 0 0 1rem 0;
    color: rgba(255,255,255,.92);
  }

  /* Card refinada */
  .sq-card{
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(15,26,46,.82) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
  }
  .sq-card .card-header{
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  /* Wizard */
  #regForm{
    width: 100%;
    margin: 0;
  }

  .tab{ display:none; }

  .sq-section-title{
    font-size: 18px;
    font-weight: 800;
    margin: 18px 0 10px;
    color: rgba(255,255,255,.90);
  }

  label{
    color: rgba(255,255,255,.72);
    font-weight: 700;
  }

  /* Inputs / selects oscuros */
  .form-control, select.form-control{
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    height: calc(2.6rem + 2px) !important;
  }
  .form-control:focus, select.form-control:focus{
    border-color: rgba(59,130,246,.55) !important;
    box-shadow: 0 0 0 .18rem rgba(59,130,246,.16) !important;
  }

  /* Importante: intenta oscurecer el dropdown del select (cuando el navegador lo permite) */
  select.form-control option{
    background: #0f1a2e;
    color: rgba(255,255,255,.90);
  }

  /* Radios estilo tarjeta */
  .containeroption{
    display:block;
    position:relative;
    padding: 14px 14px 14px 48px;
    margin: 10px 0;
    cursor:pointer;
    user-select:none;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.85);
    font-weight: 800;
  }
  .containeroption:hover{
    background: rgba(255,255,255,.06);
  }
  .containeroption input{
    position:absolute;
    opacity:0;
    cursor:pointer;
  }
  .checkmark{
    position:absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.22);
    background: transparent;
  }
  .containeroption input:checked ~ .checkmark{
    border-color: rgba(59,130,246,.60);
    box-shadow: 0 0 0 4px rgba(59,130,246,.14);
    background: rgba(59,130,246,.30);
  }

  /* Botonera */
  .sq-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 18px;
  }
  .sq-btn{
    border-radius: 12px !important;
    font-weight: 900 !important;
    padding: 10px 14px !important;
  }
  .sq-btn-primary{
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border: 0 !important;
  }
  .sq-btn-secondary{
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.90) !important;
  }

  /* Steps */
  .sq-steps{
    text-align:center;
    margin-top: 26px;
  }
  .step{
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: rgba(255,255,255,.18);
    border-radius: 50%;
    display: inline-block;
  }
  .step.active{
    background-color: rgba(59,130,246,.70);
  }
  .step.finish{
    background-color: rgba(34,197,94,.60);
  }

  /* ===================================
   SELECT CORPORATIVO
=================================== */

select.form-control,
.form-control{
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
}

select.form-control:focus,
.form-control:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 .18rem rgba(59,130,246,.16) !important;
}

select.form-control option{
  background: #0f1a2e;
  color: #ffffff;
}

.sq-page-wrap{
    padding: 22px 18px 32px;
  }

  .sq-page-title{
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 14px;
    color: rgba(255,255,255,.92);
    text-align: center;
  }

  .sq-panel{
    background: rgba(10, 18, 33, .72);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,.35);
    padding: 16px;
  }

  .sq-kpis{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 10px 0 14px;
  }
  @media (max-width: 1200px){
    .sq-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px){
    .sq-kpis{ grid-template-columns: 1fr; }
  }

  .sq-kpi{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px 12px;
    min-height: 76px;
  }
  .sq-kpi .kpi-label{
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin: 0 0 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
  }
  .sq-kpi .kpi-value{
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    line-height: 1.25;
  }

  .sq-actions{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 18px;
    flex-wrap: wrap;
  }

  .sq-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    text-decoration: none !important;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .sq-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
  }
  .sq-btn-primary{
    background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.92));
    border-color: rgba(59,130,246,.55);
  }
  .sq-btn-primary:hover{
    background: linear-gradient(180deg, rgba(59,130,246,1), rgba(37,99,235,1));
    border-color: rgba(59,130,246,.75);
  }

  /* Importante: evitar que contenedores recorten menús/flotantes */
  .sq-panel,
  .card, .card-body,
  .container-fluid, .container, .row, .col-xl-12{
    overflow: visible !important;
  }

  /* DataTables look oscuro */
  table.dataTable{
    border-collapse: separate !important;
    border-spacing: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
  }
  table.dataTable thead th{
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 12px;
  }
  table.dataTable tbody td{
    color: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
  }
  table.dataTable tbody tr:hover td{
    background: rgba(255,255,255,.05) !important;
  }
  table.dataTable tfoot th{
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 900 !important;
  }

  /* Inputs DataTables (search, etc.) */
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select{
    background: rgba(10,18,33,.55) !important;
    color: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    outline: none !important;
  }
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_info{
    color: rgba(255,255,255,.70) !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    color: rgba(255,255,255,.80) !important;
    border-radius: 10px !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background: rgba(59,130,246,.95) !important;
    border: 1px solid rgba(59,130,246,.65) !important;
    color: white !important;
  }

   .sq-prod-wrap { padding: 18px 14px 26px; }
  .sq-prod-title { font-weight: 900; color: rgba(255,255,255,.92); margin: 0; }
  .sq-subtle { color: rgba(255,255,255,.62); font-weight: 700; }

  .sq-card{
    background: rgba(15,26,46,.80);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    overflow: hidden;
  }
  .sq-card .card-header{
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.86);
    font-weight: 900;
  }

  .sq-imgbox{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    padding: 14px;
  }
  .sq-img{
    width: 100%;
    height: 340px;
    border-radius: 12px;
    background: rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .sq-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Placeholder cuando NO hay imagen */
  .sq-placeholder{
    height: 340px;
    border-radius: 12px;
    background:
      radial-gradient(1200px 500px at 20% 0%, rgba(59,130,246,.22), transparent 60%),
      radial-gradient(900px 500px at 90% 20%, rgba(34,197,94,.12), transparent 55%),
      rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 10px;
    text-align:center;
    padding: 18px;
  }
  .sq-ph-icon{
    width: 56px; height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,.85);
    font-weight: 900;
    font-size: 18px;
  }
  .sq-ph-title{
    color: rgba(255,255,255,.92);
    font-weight: 900;
    font-size: 16px;
  }
  .sq-ph-sub{
    color: rgba(255,255,255,.65);
    font-weight: 700;
    font-size: 13px;
    max-width: 440px;
  }

  .sq-drop{
    margin-top: 12px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.68);
    font-weight: 700;
    font-size: 12px;
  }

  .sq-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  @media (max-width: 992px){
    .sq-grid{ grid-template-columns: 1fr; }
  }
  .sq-field{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px;
  }
  .sq-field .k{
    color: rgba(255,255,255,.62);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
  }
  .sq-field .v{
    color: rgba(255,255,255,.92);
    font-weight: 900;
    margin-top: 6px;
  }

  .sq-divider{ border-color: rgba(255,255,255,.10); }

  .sq-btn{ border-radius: 12px; font-weight: 900; }
  .sq-btn-secondary{
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.90) !important;
  }

  /* Tablas internas oscuras */
  .sq-table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
  }
  .sq-table th{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 12px;
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .sq-table td{
    color: rgba(255,255,255,.85);
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .sq-table tr:hover td{ background: rgba(255,255,255,.04); }

/* ==== Modal styles (SIN <style> y SIN @push) ==== */
.sq-modal{
  background: rgba(12,18,33,.98);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow:hidden;
}
.sq-modal__head{
  display:flex;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sq-modal__title{ font-size:18px; font-weight:700; color:#fff; }
.sq-modal__subtitle{ font-size:12px; opacity:.7; }
.sq-modal__close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.sq-modal__body{ padding:16px; }
.sq-modal__foot{
  padding:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ===== Indicador IVA ===== */

.sq-iva{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);
  text-transform:uppercase;
}

/* 0% */
.sq-iva-0{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.35);
}

/* 1% y 2% */
.sq-iva-1,
.sq-iva-2{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.35);
}

/* 4% */
.sq-iva-4{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
}

/* 8% */
.sq-iva-8{
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.35);
}

/* 13% */
.sq-iva-13{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
}

/* ===== Tabs dark (VerProducto) ===== */
.sq-tabs{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  margin-bottom: 14px;
}

.sq-tabs .nav-link{
  border: 1px solid transparent !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  color: rgba(255,255,255,.70) !important;
  font-weight: 900;
  padding: 10px 14px;
  background: transparent !important;
}

.sq-tabs .nav-link:hover{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.04) !important;
}

.sq-tabs .nav-link.active{
  color: rgba(255,255,255,.95) !important;
  background: rgba(15,26,46,.85) !important;
  border-color: rgba(255,255,255,.10) !important;
  border-bottom-color: rgba(15,26,46,.85) !important; /* “fusiona” con contenido */
}

.sq-tabcontent{
  background: rgba(15,26,46,.60);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
}

/* ===== Sticky header (VerProducto) ===== */
.sq-stickybar{
  position: sticky;
  top: 86px; /* tu scroll-padding-top es 76px */
  z-index: 1035;
  background: rgba(15,26,46,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  padding: 12px 12px;
  backdrop-filter: blur(10px);
  display:flex;
  justify-content: space-between;
  gap: 12px;
}

.sq-stickybar__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.sq-stickybar__title{
  min-width: 0;
}

.sq-stickybar__title .t1{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

.sq-stickybar__title .t2{
  margin-top: 2px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}

.sq-stickybar__right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

:root{
  --sq-topbar-h: 76px; /* ajusta si tu nav mide diferente */
}

/* Empuja todo el contenido debajo del nav fijo */
.sq-app .main-content{
  padding-top: var(--sq-topbar-h) !important;
}

/* ===== Quick copy chips ===== */
.sq-quickcopy{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sq-chip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.sq-chip:hover{ background: rgba(255,255,255,.10); }
.sq-copied{
  margin-left: 6px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(34,197,94,.95);
}

/* ===== Inventarios alerts ===== */
.sq-badge-mini{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
}
.sq-badge-mini--zero{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
}
.sq-badge-mini--low{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
}
.sq-row-zero td{ opacity: .85; }
.sq-row-low td{ opacity: .92; }

/* ===== Historial delta colors ===== */
.sq-delta-up{ color: rgba(34,197,94,.95); font-weight:900; }
.sq-delta-down{ color: rgba(239,68,68,.95); font-weight:900; }
.sq-delta-flat{ color: rgba(255,255,255,.65); font-weight:900; }

/* ===== Checklist ===== */
.sq-checklist{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.sq-checklist__title{
  font-weight: 900;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}
.sq-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 0;
  font-weight: 900;
  color: rgba(255,255,255,.75);
}
.sq-check .dot{
  width:10px; height:10px; border-radius: 999px;
  background: rgba(255,255,255,.30);
}
.sq-check.ok{ color: rgba(255,255,255,.85); }
.sq-check.ok .dot{ background: rgba(34,197,94,.95); }
.sq-check.bad{ color: rgba(255,255,255,.75); }
.sq-check.bad .dot{ background: rgba(239,68,68,.95); }

/* ===== Variación con flecha al borde ===== */
.sq-var-wrap{
  display:flex;
  align-items:center;
  justify-content: space-between; /* ← clave */
  width:100%;
}

.sq-var-value{
  font-weight:900;
}

.sq-var-arrow{
  font-size:14px;
  font-weight:900;
  opacity:.85;
}

/* Colores heredados del delta */
.sq-delta-up .sq-var-arrow{
  color: rgba(34,197,94,.95);
}

.sq-delta-down .sq-var-arrow{
  color: rgba(239,68,68,.95);
}

.sq-delta-flat .sq-var-arrow{
  color: rgba(255,255,255,.55);
}

.sq-arkeotable td, .sq-arkeotable th{
  vertical-align: middle;
}

.sq-sema{
  display:inline-block;
  min-width: 64px;
  text-align:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
}

.sq-sema--red{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
}

.sq-sema--orange{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
}

.sq-sema--yellow{
  background: rgba(250,204,21,.16);
  border-color: rgba(250,204,21,.35);
}

.sq-sema--green{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.35);
}

/* ===== Radar Card Premium ===== */
.sq-radar-card{
  background: linear-gradient(180deg, rgba(15,25,45,0.85), rgba(8,16,32,0.95));
  border: 1px solid rgba(0,180,255,0.15);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  box-shadow:
      0 0 30px rgba(0,150,255,0.08),
      inset 0 0 40px rgba(0,120,255,0.05);
  padding: 18px;
  transition: 0.3s ease;
}

.sq-radar-card:hover{
  box-shadow:
      0 0 40px rgba(0,150,255,0.18),
      inset 0 0 50px rgba(0,120,255,0.08);
}

.sq-radar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.sq-radar-title{
  font-weight:700;
  font-size:14px;
  letter-spacing:.4px;
  color:#9ad7ff;
}

.sq-radar-sub{
  font-size:11px;
  opacity:.6;
}

.sq-radar-body{
  position:relative;
  height:300px;
  padding:10px;
}

.sq-radar-score{
  margin-top: 15px;
  text-align: center;
}

.sq-radar-score span{
  font-size: 11px;
  opacity: .6;
}

.sq-radar-score-value{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .5px;
  margin-top: 4px;
}

.producto-card {
    transition: all 0.25s ease;
    border-radius: 12px;
}

.producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.producto-card .badge {
    font-size: 11px;
    padding: 6px 10px;
}

.card {
    border-radius: 14px;
}

/* ========= Skeleton overlay ========= */
.sq-skeleton-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);
  z-index: 9999;
  display: flex;
  gap: 14px;
  padding: 18px;
  align-items: flex-start;
}
.sq-skeleton-card{
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.sq-skeleton-line{
  height: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size: 200% 100%;
  animation: sqShimmer 1.1s infinite;
  margin: 10px 0;
}
.sq-skeleton-line.w-50{width:50%}
.sq-skeleton-line.w-60{width:60%}
.sq-skeleton-line.w-65{width:65%}
.sq-skeleton-line.w-70{width:70%}
.sq-skeleton-line.w-75{width:75%}
.sq-skeleton-line.w-80{width:80%}
.sq-skeleton-line.w-85{width:85%}
.sq-skeleton-line.w-90{width:90%}
.sq-skeleton-line.w-95{width:95%}
@keyframes sqShimmer{
  0%{background-position: 200% 0}
  100%{background-position: -200% 0}
}

/* ========= Cards ========= */
.producto-card{
  transition: all .25s ease;
  border-radius: 14px;
}
.producto-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.sq-mini-chart-wrap{
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  padding: 10px;
}

/* ========= Dark mode corporativo SisQuetzal ========= */
.sq-dark body,
.sq-dark .main-content{
  background: #0f1720 !important;
}
.sq-dark .card{
  background: #121c27 !important;
  color: #e7eef7 !important;
}
.sq-dark .text-dark{ color:#e7eef7 !important; }
.sq-dark .text-muted{ color:rgba(231,238,247,.70) !important; }
.sq-dark .table{ color:#e7eef7 !important; }
.sq-dark .thead-light th{
  background:#0f1822 !important;
  color: rgba(231,238,247,.75) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.sq-dark .table td, .sq-dark .table th{
  border-color: rgba(255,255,255,.06) !important;
}
.sq-dark .form-control, .sq-dark .input-group-text{
  background:#0f1822 !important;
  border-color: rgba(255,255,255,.08) !important;
  color:#e7eef7 !important;
}
.sq-dark .btn-neutral{
  background:#0f1822 !important;
  border-color: rgba(255,255,255,.10) !important;
  color:#e7eef7 !important;
}

.sq-share-overlay{
    position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.55);
    display:none; align-items:center; justify-content:center;
    padding:18px;
  }
  .sq-share-modal{
    width:min(520px, 92vw);
    background:#0f172a;
    border:1px solid rgba(148,163,184,.22);
    border-radius:18px;
    padding:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
    transform: translateY(8px) scale(.98);
    opacity:0;
    transition: all .18s ease;
  }
  .sq-share-overlay.show { display:flex; }
  .sq-share-overlay.show .sq-share-modal{
    transform: translateY(0) scale(1);
    opacity:1;
  }
  .sq-share-head{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:6px 6px 10px;
  }
  .sq-share-title{ font-weight:900; color:#e5e7eb; }
  .sq-share-close{
    background:transparent; border:0; color:#94a3b8; font-weight:900;
    font-size:18px; cursor:pointer;
  }
  .sq-share-preview{
    background:#0b1220;
    border:1px solid rgba(148,163,184,.20);
    border-radius:14px;
    overflow:hidden;
    padding:10px;
  }
  .sq-share-preview canvas{
    width:100%;
    height:auto;
    border-radius:12px;
    display:block;
  }
  .sq-share-actions{
    display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
    padding:12px 6px 6px;
  }