/* =========================================================
   BLAG SKIN - DARK ONLY (el dark bueno)
   - Tokens oro + estados (verde/rojo/azul)
   - Side menu dark fix (icon pseudo)
   - DataTables dark + processing overlay fix
   - Pills + pagination dark
   ========================================================= */

/* RESET neutro (no rompe light) */
body.blag-skin,
body.blag-skin *,
body.blag-skin *::before,
body.blag-skin *::after { box-sizing: border-box; }

/* =======================
   DARK TOKENS (ONLY)
   ======================= */
html.dark body.blag-skin{
  --rLg: 26px;
  --rMd: 20px;
  --rSm: 14px;

  --bg0: #07090b;
  --bg1: #0c0f13;
  --bg2: #0a0d10;

  --card: rgba(12,15,19,.86);
  --card2: rgba(10,13,16,.88);

  --border: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.06);

  --text: rgba(237,242,250,.94);
  --muted: rgba(168,179,198,.78);

  /* gold */
  --accent: #f5b301;
  --accent2: #ffd55a;
  --accent3: #ffe08a;

  --accentSoft: rgba(245,179,1,.14);
  --accentSoft2: rgba(245,179,1,.22);
  --accentGlow: rgba(245,179,1,.24);

  /* status colors */
  --ok: #48d38a;
  --okSoft: rgba(72,211,138,.16);
  --okBorder: rgba(72,211,138,.26);

  --danger: #ef4444;
  --dangerSoft: rgba(239,68,68,.14);
  --dangerBorder: rgba(239,68,68,.26);

  --pending: #3b82f6;
  --pendingSoft: rgba(59,130,246,.14);
  --pendingBorder: rgba(59,130,246,.26);

  --shadow: 0 16px 48px rgba(0,0,0,.55);
  --shadow2: 0 8px 24px rgba(0,0,0,.35);

  background: var(--bg0);
  color: var(--text);
}

/* Background app (DARK ONLY) */
html.dark body.blag-skin.app{
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(245,179,1,.10), transparent 62%),
    radial-gradient(900px 600px at 85% 10%, rgba(72,211,138,.07), transparent 62%),
    linear-gradient(180deg, #050607 0%, #07090b 70%, #050607 100%) !important;
  background-attachment: fixed !important;
  background-color: var(--bg0) !important;
}

/* Common (solo safe) */
html.dark body.blag-skin a { color: inherit; text-decoration: none; }
html.dark body.blag-skin img,
html.dark body.blag-skin svg,
html.dark body.blag-skin video{ display:block; max-width:100%; }
html.dark body.blag-skin button,
html.dark body.blag-skin input,
html.dark body.blag-skin select,
html.dark body.blag-skin textarea{ font: inherit; color: inherit; }
html.dark body.blag-skin :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* CONTENT / BOX (DARK) */
html.dark body.blag-skin .content{
  background: var(--card) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.62) !important;
  border-radius: 30px !important;
  padding: 28px !important;
  backdrop-filter: blur(20px);
}
html.dark body.blag-skin .box,
html.dark body.blag-skin .intro-y.box{
  background: var(--card2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.46) !important;
  border-radius: var(--rMd) !important;
  backdrop-filter: blur(14px);
}

/* Titles */
html.dark body.blag-skin h1,
html.dark body.blag-skin h2,
html.dark body.blag-skin h3,
html.dark body.blag-skin .text-lg,
html.dark body.blag-skin .text-xl{
  color: rgba(237,242,250,.94) !important;
  font-weight: 900;
}

/* =======================
   SIDE MENU (DARK)
   ======================= */
html.dark body.app.blag-skin nav.side-nav{
  background: rgba(9,11,13,.86) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 18px 0 70px rgba(0,0,0,.60) !important;
  backdrop-filter: blur(18px);
  border-radius: 0 !important;
  overflow: hidden !important;
}
html.dark body.app.blag-skin nav.side-nav::before,
html.dark body.app.blag-skin nav.side-nav::after,
html.dark body.app.blag-skin nav.side-nav ul::before,
html.dark body.app.blag-skin nav.side-nav ul::after,
html.dark body.app.blag-skin nav.side-nav li::before,
html.dark body.app.blag-skin nav.side-nav li::after,
html.dark body.app.blag-skin nav.side-nav a::before,
html.dark body.app.blag-skin nav.side-nav a::after,
html.dark body.app.blag-skin nav.side-nav .side-menu::before,
html.dark body.app.blag-skin nav.side-nav .side-menu::after{
  content: none !important;
  display: none !important;
}

html.dark body.app.blag-skin nav.side-nav a.side-menu,
html.dark body.app.blag-skin nav.side-nav li > a{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--muted) !important;
  transition: all .18s ease !important;
}
html.dark body.app.blag-skin nav.side-nav .side-menu__icon i,
html.dark body.app.blag-skin nav.side-nav .side-menu__icon svg,
html.dark body.app.blag-skin nav.side-nav .side-menu__title,
html.dark body.app.blag-skin nav.side-nav .side-menu__sub-icon{
  color: var(--muted) !important;
}
html.dark body.app.blag-skin nav.side-nav svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}
html.dark body.app.blag-skin nav.side-nav a.side-menu:hover,
html.dark body.app.blag-skin nav.side-nav li:hover > a{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.07) !important;
  color: rgba(237,242,250,.94) !important;
}
html.dark body.app.blag-skin nav.side-nav a.side-menu:hover .side-menu__title,
html.dark body.app.blag-skin nav.side-nav li:hover > a .side-menu__title{
  color: var(--accent) !important;
}
html.dark body.app.blag-skin nav.side-nav a.side-menu.side-menu--active,
html.dark body.app.blag-skin nav.side-nav a.side-menu.active,
html.dark body.app.blag-skin nav.side-nav a.active,
html.dark body.app.blag-skin nav.side-nav a[aria-current="page"],
html.dark body.app.blag-skin nav.side-nav li.active > a,
html.dark body.app.blag-skin nav.side-nav li.menu--active > a,
html.dark body.app.blag-skin nav.side-nav li.side-menu--active > a{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border-color: rgba(245,179,1,.16) !important;
  color: rgba(237,242,250,.94) !important;
  box-shadow: inset 3px 0 0 rgba(245,179,1,.95), 0 12px 30px rgba(0,0,0,.48) !important;
}
html.dark body.app.blag-skin nav.side-nav a.side-menu.side-menu--active .side-menu__title,
html.dark body.app.blag-skin nav.side-nav a.side-menu.active .side-menu__title,
html.dark body.app.blag-skin nav.side-nav li.active > a .side-menu__title,
html.dark body.app.blag-skin nav.side-nav a[aria-current="page"] .side-menu__title{
  color: var(--accent2) !important;
  font-weight: 900 !important;
}
html.dark body.app.blag-skin nav.side-nav ul ul{
  background: rgba(255,255,255,.02) !important;
  border-left: 2px solid rgba(245,179,1,.18) !important;
  border-radius: 14px !important;
}

/* FIX DARK SIDE MENU icon plate */
html.dark body.app.blag-skin nav.side-nav a.side-menu{
  position: relative;
  z-index: 0;
}
html.dark body.app.blag-skin nav.side-nav .side-menu__icon{
  position: relative;
  z-index: 2;
  background: transparent !important;
}
html.dark body.app.blag-skin nav.side-nav .side-menu__icon::before,
html.dark body.app.blag-skin nav.side-nav .side-menu__icon::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.dark body.app.blag-skin nav.side-nav .side-menu__icon i::before,
html.dark body.app.blag-skin nav.side-nav .side-menu__icon i::after,
html.dark body.app.blag-skin nav.side-nav .side-menu__icon svg::before,
html.dark body.app.blag-skin nav.side-nav .side-menu__icon svg::after{
  content: none !important;
  display: none !important;
}
html.dark body.app.blag-skin nav.side-nav a.side-menu.side-menu--active,
html.dark body.app.blag-skin nav.side-nav a.side-menu.active,
html.dark body.app.blag-skin nav.side-nav li.active > a,
html.dark body.app.blag-skin nav.side-nav li.menu--active > a{
  background-clip: padding-box !important;
}

/* =======================
   INPUTS (DARK)
   ======================= */
html.dark body.blag-skin input,
html.dark body.blag-skin select,
html.dark body.blag-skin textarea{
  background: rgba(10,13,16,.85) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(237,242,250,.92) !important;
}
html.dark body.blag-skin input:focus,
html.dark body.blag-skin select:focus,
html.dark body.blag-skin textarea:focus{
  border-color: rgba(245,179,1,.22) !important;
  box-shadow: 0 0 0 4px var(--accentSoft) !important;
}

/* =======================
   DATATABLES (DARK) + PROCESSING FIX
   ======================= */
html.dark body.blag-skin .dataTables_wrapper{
  background: rgba(12,15,19,.80) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--rLg) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.62) !important;
}
html.dark body.blag-skin .dataTables_scrollHead,
html.dark body.blag-skin .dataTables_scrollHeadInner,
html.dark body.blag-skin .fixedHeader-floating,
html.dark body.blag-skin .fixedHeader-locked{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dark body.blag-skin table.dataTable,
html.dark body.blag-skin table.table,
html.dark body.blag-skin .custom-datatable{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html.dark body.blag-skin table.dataTable thead th,
html.dark body.blag-skin table.table thead th,
html.dark body.blag-skin table.custom-datatable thead th{
  background: rgba(255,255,255,.03) !important;
  color: rgba(220,228,240,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  letter-spacing: .08em !important;
  font-size: .74rem !important;
  text-transform: uppercase !important;
}
html.dark body.blag-skin table.dataTable thead th::before,
html.dark body.blag-skin table.dataTable thead th::after,
html.dark body.blag-skin table.table thead th::before,
html.dark body.blag-skin table.table thead th::after{
  content: none !important;
  display: none !important;
}
html.dark body.blag-skin table.dataTable tbody td,
html.dark body.blag-skin table.table tbody td,
html.dark body.blag-skin table.custom-datatable tbody td{
  color: rgba(220,228,240,.86) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  border: 0 !important;
}
html.dark body.blag-skin table.dataTable tbody tr,
html.dark body.blag-skin table.table tbody tr,
html.dark body.blag-skin table.custom-datatable tbody tr{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
html.dark body.blag-skin table.dataTable tbody tr:nth-child(odd),
html.dark body.blag-skin table.table tbody tr:nth-child(odd),
html.dark body.blag-skin table.custom-datatable tbody tr:nth-child(odd){
  background: rgba(255,255,255,.015) !important;
}
html.dark body.blag-skin table.dataTable tbody tr:hover,
html.dark body.blag-skin table.table tbody tr:hover,
html.dark body.blag-skin table.custom-datatable tbody tr:hover{
  background: rgba(245,179,1,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(245,179,1,.10) !important;
}

/* Processing overlay fix */
html.dark body.blag-skin div.dataTables_processing{
  background: rgba(8,10,12,.88) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(237,242,250,.92) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.60) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  backdrop-filter: blur(10px);
}
html.dark body.blag-skin div.dataTables_processing::before{
  content: "" !important;
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark body.blag-skin .dataTables_wrapper .dataTables_processing{
  z-index: 50 !important;
}

/* =======================
   STATUS CARDS (DARK)
   ======================= */
html.dark body.blag-skin .border-theme-9{ border-color: var(--okBorder) !important; }
html.dark body.blag-skin .box.border-theme-9{
  background: linear-gradient(180deg, rgba(72,211,138,.06), rgba(0,0,0,0)) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.50) !important;
}
html.dark body.blag-skin .box.border-theme-9 h2.text-lg.font-medium.truncate{
  color: var(--ok) !important;
  font-weight: 900 !important;
}

html.dark body.blag-skin .border-theme-6{ border-color: var(--dangerBorder) !important; }
html.dark body.blag-skin .box.border-theme-6{
  background: linear-gradient(180deg, rgba(239,68,68,.07), rgba(0,0,0,0)) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.50) !important;
}
html.dark body.blag-skin .box.border-theme-6 h2.text-lg.font-medium.truncate{
  color: var(--danger) !important;
  font-weight: 900 !important;
}

html.dark body.blag-skin .border-theme-12{ border-color: var(--pendingBorder) !important; }
html.dark body.blag-skin .box.border-theme-12{
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(0,0,0,0)) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.50) !important;
}
html.dark body.blag-skin .box.border-theme-12 h2.text-lg.font-medium.truncate{
  color: rgba(147,197,253,.98) !important;
  font-weight: 900 !important;
}

/* Utilidades */
html.dark body.blag-skin .text-success,
html.dark body.blag-skin .text-green-400,
html.dark body.blag-skin .text-green-500,
html.dark body.blag-skin .text-green-600,
html.dark body.blag-skin .text-emerald-400,
html.dark body.blag-skin .text-emerald-500,
html.dark body.blag-skin .text-emerald-600{ color: var(--ok) !important; }

html.dark body.blag-skin .text-danger,
html.dark body.blag-skin .text-red-400,
html.dark body.blag-skin .text-red-500,
html.dark body.blag-skin .text-red-600{ color: var(--danger) !important; }

html.dark body.blag-skin .text-info,
html.dark body.blag-skin .text-blue-400,
html.dark body.blag-skin .text-blue-500,
html.dark body.blag-skin .text-blue-600{ color: var(--pending) !important; }

/* =======================
   DATATABLES PILLS + PAGINATION (DARK)
   ======================= */
html.dark body.blag-skin table.dataTable span.text-xs,
html.dark body.blag-skin table.dataTable div.text-xs,
html.dark body.blag-skin table.table span.text-xs,
html.dark body.blag-skin table.table div.text-xs{
  color: rgba(237,242,250,.92) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* pagination */
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate{ padding-top: 10px; }
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate ul.pagination{ gap: 6px; }

html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate .paginate_button a{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(237,242,250,.84) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate .paginate_button a:hover{
  background: rgba(245,179,1,.08) !important;
  border-color: rgba(245,179,1,.22) !important;
  color: rgba(255,255,255,.92) !important;
}
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate .paginate_button.active a{
  background: rgba(245,179,1,.14) !important;
  border-color: rgba(245,179,1,.30) !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
html.dark body.blag-skin .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a:hover{
  opacity: .45;
  cursor: not-allowed !important;
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* PILLS (colores fuertes) */
html.dark body.blag-skin table.dataTable .bg-theme-9,
html.dark body.blag-skin table.dataTable .bg-theme-6,
html.dark body.blag-skin table.dataTable .bg-theme-12,
html.dark body.blag-skin table.dataTable .bg-yellow-500,
html.dark body.blag-skin table.table .bg-theme-9,
html.dark body.blag-skin table.table .bg-theme-6,
html.dark body.blag-skin table.table .bg-theme-12,
html.dark body.blag-skin table.table .bg-yellow-500{
  color: rgba(255,255,255,.95) !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  padding-top: 2px;
  padding-bottom: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html.dark body.blag-skin table.dataTable .bg-theme-9,
html.dark body.blag-skin table.table .bg-theme-9{
  background: linear-gradient(180deg, rgba(72,211,138,.34), rgba(72,211,138,.18)) !important;
  border: 1px solid rgba(72,211,138,.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(72,211,138,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html.dark body.blag-skin table.dataTable .bg-theme-6,
html.dark body.blag-skin table.table .bg-theme-6{
  background: linear-gradient(180deg, rgba(239,68,68,.34), rgba(239,68,68,.18)) !important;
  border: 1px solid rgba(239,68,68,.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html.dark body.blag-skin table.dataTable .bg-theme-12,
html.dark body.blag-skin table.table .bg-theme-12{
  background: linear-gradient(180deg, rgba(59,130,246,.34), rgba(59,130,246,.18)) !important;
  border: 1px solid rgba(59,130,246,.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html.dark body.blag-skin table.dataTable .bg-yellow-500,
html.dark body.blag-skin table.table .bg-yellow-500{
  background: linear-gradient(180deg, rgba(245,179,1,.36), rgba(245,179,1,.18)) !important;
  border: 1px solid rgba(245,179,1,.60) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(245,179,1,.12), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html.dark body.blag-skin table.dataTable .bg-theme-9 *,
html.dark body.blag-skin table.dataTable .bg-theme-6 *,
html.dark body.blag-skin table.dataTable .bg-theme-12 *,
html.dark body.blag-skin table.dataTable .bg-yellow-500 *,
html.dark body.blag-skin table.table .bg-theme-9 *,
html.dark body.blag-skin table.table .bg-theme-6 *,
html.dark body.blag-skin table.table .bg-theme-12 *,
html.dark body.blag-skin table.table .bg-yellow-500 *{
  color: rgba(255,255,255,.95) !important;
}
/* =========================================================
   DARK: BOTONES DORADOS (PRIMARY / SUBMIT)
   ========================================================= */
html.dark body.blag-skin .button,
html.dark body.blag-skin a.button,
html.dark body.blag-skin button.button,
html.dark body.blag-skin .btn{
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

/* SUBMIT / PRIMARY (tu Submit grande y submits en general) */
html.dark body.blag-skin button[type="submit"],
html.dark body.blag-skin input[type="submit"],
html.dark body.blag-skin .button.w-full.w-a.shadow-md,
html.dark body.blag-skin #submit_file_btn.button,
html.dark body.blag-skin form button[type="submit"].button{
  background: linear-gradient(135deg, rgba(245,179,1,.98), rgba(255,213,90,.92)) !important;
  border: 1px solid rgba(245,179,1,.40) !important;
  color: rgba(10,13,16,.96) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(245,179,1,.12) !important;
}

html.dark body.blag-skin button[type="submit"]:hover,
html.dark body.blag-skin input[type="submit"]:hover,
html.dark body.blag-skin form button[type="submit"].button:hover{
  filter: brightness(1.03) contrast(1.02) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 66px rgba(0,0,0,.55), 0 0 0 1px rgba(245,179,1,.18) !important;
}

/* DataTables export buttons (si quieres que también vayan en oro en dark) */
html.dark body.blag-skin .dt-buttons .dt-button{
  background: linear-gradient(135deg, rgba(245,179,1,.98), rgba(255,213,90,.92)) !important;
  border: 1px solid rgba(245,179,1,.38) !important;
  color: rgba(10,13,16,.96) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.40) !important;
}
html.dark body.blag-skin .dt-buttons .dt-button:hover{
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
}

/* Si el template usa .btn-success / .btn-primary en dark, lo llevamos a oro */
html.dark body.blag-skin .btn-success,
html.dark body.blag-skin .btn-primary{
  background: linear-gradient(135deg, rgba(245,179,1,.98), rgba(255,213,90,.92)) !important;
  border: 1px solid rgba(245,179,1,.38) !important;
  color: rgba(10,13,16,.96) !important;
}