/* =========================================================
   Ordenox Theme — visual-only overrides (aditivo, no destructivo)
   Carga posterior a bootstrap + AdminLTE + skins + gen-style.
   Solo retoca presentación: radios, sombras, colores, focus,
   tipografía. No altera estructura, JS, names ni IDs.
   ========================================================= */

:root{
  --ox-brand-green:#7fd4b8;
  --ox-brand-cyan:#4db8c9;
  --ox-brand-blue:#2a79c4;
  --ox-brand-blue-dark:#1f5c96;
  --ox-text-dark:#2c3e50;
  --ox-text-muted:#6b7a8a;
  --ox-surface:#ffffff;
  --ox-bg:#f4f6fa;
  --ox-border:#e3e8ef;
  --ox-border-strong:#d5dde6;
  --ox-gradient:linear-gradient(135deg,#2a79c4 0%,#4db8c9 55%,#7fd4b8 100%);
  --ox-gradient-soft:linear-gradient(135deg,rgba(42,121,196,.10) 0%,rgba(77,184,201,.10) 55%,rgba(127,212,184,.10) 100%);
  --ox-shadow-xs:0 1px 2px rgba(17,24,39,.05);
  --ox-shadow-sm:0 2px 6px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --ox-shadow-md:0 6px 18px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.04);
  --ox-shadow-lg:0 18px 42px rgba(17,24,39,.12), 0 6px 12px rgba(17,24,39,.06);
  --ox-radius-sm:6px;
  --ox-radius:10px;
  --ox-radius-lg:14px;
}

/* ---------- Base / tipografía ---------- */
body,
body.skin-purple{
  background:var(--ox-bg);
  color:var(--ox-text-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.1px;
}
h1,h2,h3,h4,h5,h6,
.content-header>h1,
.box-title{
  color:var(--ox-text-dark);
  letter-spacing:-.1px;
}
.content-header>h1{font-weight:600;}
.content-header>h1>small{color:var(--ox-text-muted);font-weight:400;}
a{transition:color .15s ease;}

/* ---------- Header / Logo (AdminLTE skin-purple) ---------- */
.skin-purple .main-header .logo,
.skin-purple .main-header .logo:hover{
  background:var(--ox-gradient);
  color:#fff;
  border-bottom:0;
  font-weight:700;
  letter-spacing:.3px;
}
.skin-purple .main-header .navbar{
  background:#fff;
  border-bottom:1px solid var(--ox-border);
  box-shadow:var(--ox-shadow-xs);
}
.skin-purple .main-header .navbar .nav>li>a{
  color:var(--ox-text-dark);
}
.skin-purple .main-header .navbar .nav>li>a:hover,
.skin-purple .main-header .navbar .nav>li>a:focus,
.skin-purple .main-header .navbar .nav .open>a,
.skin-purple .main-header .navbar .nav .open>a:hover,
.skin-purple .main-header .navbar .nav .open>a:focus{
  background:rgba(42,121,196,.08);
  color:var(--ox-brand-blue);
}
.skin-purple .main-header .sidebar-toggle{color:var(--ox-text-dark);}
.skin-purple .main-header .sidebar-toggle:hover{
  background:rgba(42,121,196,.08);
  color:var(--ox-brand-blue);
}
.main-header .logo .logo-lg b{font-weight:700;}

/* Badge de notificaciones en header */
.skin-purple .main-header .navbar .nav>li>a>.label{
  border-radius:999px;
  font-weight:600;
  padding:3px 7px;
  box-shadow:var(--ox-shadow-xs);
}

/* ---------- Sidebar (skin-purple) ---------- */
.skin-purple .main-sidebar,
.skin-purple .left-side{
  background:#1f2a3a;
}
.skin-purple .sidebar a{color:#cfd8e3;}
.skin-purple .sidebar-menu>li.header{
  background:#17212f;
  color:#8594a8;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:11px;
}
.skin-purple .sidebar-menu>li>a{
  border-left:3px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.skin-purple .sidebar-menu>li.active>a,
.skin-purple .sidebar-menu>li:hover>a,
.skin-purple .sidebar-menu>li>a:hover{
  background:rgba(77,184,201,.10);
  border-left-color:var(--ox-brand-cyan);
  color:#fff;
}
.skin-purple .sidebar-menu>li.active>a{
  background:linear-gradient(90deg,rgba(42,121,196,.25),rgba(77,184,201,.08) 60%,transparent);
  border-left-color:var(--ox-brand-green);
}
.skin-purple .sidebar-menu .treeview-menu>li>a{color:#aab5c4;}
.skin-purple .sidebar-menu .treeview-menu>li.active>a,
.skin-purple .sidebar-menu .treeview-menu>li>a:hover{color:#fff;}

.skin-purple .user-panel>.info,
.skin-purple .user-panel>.info>a{color:#eef2f7;}
.user-panel>.image>img{border:2px solid rgba(255,255,255,.15);}

/* ---------- Content wrapper ---------- */
.content-wrapper{background:var(--ox-bg);}
.content{padding:18px 18px 24px;}

/* ---------- Botones ---------- */
.btn{
  border-radius:var(--ox-radius);
  font-weight:500;
  letter-spacing:.1px;
  padding:7px 16px;
  border:1px solid transparent;
  box-shadow:var(--ox-shadow-xs);
  transition:transform .12s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{box-shadow:var(--ox-shadow-sm);transform:translateY(-1px);}
.btn:active{transform:translateY(0);box-shadow:var(--ox-shadow-xs);}
.btn:focus,.btn.focus,.btn:active:focus{
  outline:0;
  box-shadow:0 0 0 3px rgba(77,184,201,.28), var(--ox-shadow-xs);
}
.btn-sm,.btn-xs{border-radius:8px;}
.btn-lg{border-radius:12px;padding:10px 20px;}

/* Primary / semantic refinements — conservan semántica funcional */
.btn-primary{
  background:var(--ox-brand-blue);
  border-color:var(--ox-brand-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary{
  background:var(--ox-brand-blue-dark);
  border-color:var(--ox-brand-blue-dark);
}

.btn-success{background:#2fb37d;border-color:#2fb37d;}
.btn-success:hover,.btn-success:focus,.btn-success:active{background:#26935f;border-color:#26935f;}
.btn-info{background:var(--ox-brand-cyan);border-color:var(--ox-brand-cyan);}
.btn-info:hover,.btn-info:focus,.btn-info:active{background:#369aab;border-color:#369aab;}
.btn-warning{background:#f0a92c;border-color:#f0a92c;color:#fff;}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{background:#d68f12;border-color:#d68f12;color:#fff;}
.btn-danger{background:#e0524a;border-color:#e0524a;}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active{background:#c63d36;border-color:#c63d36;}
.btn-default{
  background:#fff;color:var(--ox-text-dark);
  border-color:var(--ox-border-strong);
}
.btn-default:hover,.btn-default:focus{
  background:#f7f9fc;border-color:#bac4d0;color:var(--ox-text-dark);
}

/* Utilidades bg-* usadas como botones en el dashboard */
.btn.bg-red{background:#e0524a !important;color:#fff;}
.btn.bg-aqua{background:var(--ox-brand-cyan) !important;color:#fff;}
.btn.bg-green{background:#2fb37d !important;color:#fff;}
.btn.bg-yellow{background:#f0a92c !important;color:#fff;}
.btn.bg-purple{background:#7b61ff !important;color:#fff;}
.btn.bg-navy{background:#1f5c96 !important;color:#fff;}
.btn.bg-red:hover,.btn.bg-aqua:hover,.btn.bg-green:hover,
.btn.bg-yellow:hover,.btn.bg-purple:hover,.btn.bg-navy:hover{
  filter:brightness(.94);
  color:#fff;
}

/* Botón con gradiente Ordenox (clase utilitaria opcional) */
.btn-ox,
.btn.btn-ox{
  background:var(--ox-gradient);
  color:#fff;
  border:0;
}
.btn-ox:hover,.btn.btn-ox:hover{filter:brightness(1.05);color:#fff;}

/* ---------- Forms ---------- */
.form-control,
.input-sm,
.input-lg,
select.form-control,
textarea.form-control{
  border-radius:var(--ox-radius-sm);
  border:1px solid var(--ox-border-strong);
  box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease;
  color:var(--ox-text-dark);
}
.form-control:focus{
  border-color:var(--ox-brand-cyan);
  box-shadow:0 0 0 3px rgba(77,184,201,.18);
  outline:0;
}
.input-group .form-control{border-radius:var(--ox-radius-sm);}
.input-group-addon{
  background:#f4f6fa;
  border:1px solid var(--ox-border-strong);
  border-radius:var(--ox-radius-sm);
  color:var(--ox-text-muted);
}
.input-group .input-group-btn:first-child>.btn,
.input-group .input-group-btn:first-child>.btn-group>.btn{border-top-right-radius:0;border-bottom-right-radius:0;}
.input-group .input-group-btn:last-child>.btn,
.input-group .input-group-btn:last-child>.btn-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0;}

label,.control-label{color:var(--ox-text-dark);font-weight:500;}
.help-block{color:var(--ox-text-muted);}

/* Select2 (si existe) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border-radius:var(--ox-radius-sm);
  border-color:var(--ox-border-strong);
  min-height:34px;
}
.select2-container--default.select2-container--focus .select2-selection{
  border-color:var(--ox-brand-cyan);
  box-shadow:0 0 0 3px rgba(77,184,201,.18);
}

/* ---------- Boxes / Cards / Widgets (AdminLTE) ---------- */
.box{
  border:1px solid var(--ox-border);
  border-radius:var(--ox-radius-lg);
  box-shadow:var(--ox-shadow-sm);
  background:var(--ox-surface);
  border-top:1px solid var(--ox-border);
}
.box.box-solid{border-radius:var(--ox-radius-lg);}
.box-header{
  padding:14px 18px;
  border-bottom:1px solid var(--ox-border);
}
.box-header.with-border{border-bottom:1px solid var(--ox-border);}
.box-header .box-title{font-size:15px;font-weight:600;}
.box-header>.box-tools{top:10px;right:10px;}
.box-body{padding:16px 18px;}
.box-footer{
  border-top:1px solid var(--ox-border);
  border-radius:0 0 var(--ox-radius-lg) var(--ox-radius-lg);
  background:#fafbfd;
}

/* Acento superior por color de box — reemplaza la barra maciza de AdminLTE
   por un borde superior fino en el color semántico del box. */
.box.box-primary{border-top:3px solid var(--ox-brand-blue);}
.box.box-info{border-top:3px solid var(--ox-brand-cyan);}
.box.box-success{border-top:3px solid #2fb37d;}
.box.box-warning{border-top:3px solid #f0a92c;}
.box.box-danger{border-top:3px solid #e0524a;}
.box.box-default{border-top:3px solid var(--ox-border-strong);}

/* box-solid (header coloreado) — refina tipografía/padding sin romper color */
.box.box-solid>.box-header{
  border-radius:var(--ox-radius-lg) var(--ox-radius-lg) 0 0;
}

/* small-box del dashboard */
.small-box{
  border-radius:var(--ox-radius-lg);
  box-shadow:var(--ox-shadow-sm);
  overflow:hidden;
}
.small-box>.inner{padding:18px;}
.small-box h3{font-weight:700;letter-spacing:-.5px;}
.small-box .icon{top:10px;font-size:70px;opacity:.25;}
.small-box:hover{transform:translateY(-2px);box-shadow:var(--ox-shadow-md);}
.small-box>a.small-box-footer,
.small-box>.small-box-footer{
  background:rgba(0,0,0,.12);
  font-weight:500;
  letter-spacing:.2px;
}

/* info-box */
.info-box{
  border-radius:var(--ox-radius-lg);
  box-shadow:var(--ox-shadow-sm);
}
.info-box-icon{border-radius:var(--ox-radius-lg) 0 0 var(--ox-radius-lg);}

/* ---------- Tables ---------- */
.table{background:transparent;}
.table>thead>tr>th{
  background:#f7f9fc;
  color:var(--ox-text-muted);
  font-weight:600;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  border-bottom:1px solid var(--ox-border) !important;
  border-top:0;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th{
  border-top:1px solid var(--ox-border);
  vertical-align:middle;
}
.table-hover>tbody>tr:hover{background:rgba(77,184,201,.06);}
.table-bordered{border:1px solid var(--ox-border);border-radius:var(--ox-radius);}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th{border-color:var(--ox-border);}

/* DataTables wrapper */
.dataTables_wrapper{padding-top:4px;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius:var(--ox-radius-sm);
  border:1px solid var(--ox-border-strong);
  padding:4px 10px;
  height:32px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color:var(--ox-brand-cyan);
  box-shadow:0 0 0 3px rgba(77,184,201,.18);
  outline:0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:8px !important;
  margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--ox-gradient) !important;
  border:1px solid transparent !important;
  color:#fff !important;
}

/* bootstrap-table toolbar */
.fixed-table-toolbar .columns .btn,
.fixed-table-toolbar .btn{border-radius:var(--ox-radius-sm);}
.fixed-table-container{border-radius:var(--ox-radius);}

/* ---------- Modales ---------- */
.modal-content{
  border:0;
  border-radius:var(--ox-radius-lg);
  box-shadow:var(--ox-shadow-lg);
  overflow:hidden;
}
.modal-header{
  border-bottom:1px solid var(--ox-border);
  padding:16px 20px;
}
.modal-header .modal-title{font-weight:600;color:var(--ox-text-dark);}
.modal-body{padding:18px 20px;}
.modal-footer{
  border-top:1px solid var(--ox-border);
  padding:14px 20px;
  background:#fafbfd;
}
.modal-backdrop.in{opacity:.45;}

/* ---------- Alerts / badges / labels ---------- */
.alert{border-radius:var(--ox-radius);border:1px solid transparent;}
.alert-info{background:rgba(77,184,201,.10);border-color:rgba(77,184,201,.25);color:#1f5c96;}
.alert-success{background:rgba(47,179,125,.10);border-color:rgba(47,179,125,.25);color:#18734d;}
.alert-warning{background:rgba(240,169,44,.10);border-color:rgba(240,169,44,.28);color:#8a5b0a;}
.alert-danger{background:rgba(224,82,74,.10);border-color:rgba(224,82,74,.28);color:#9a1e17;}

.label,.badge{border-radius:999px;font-weight:600;letter-spacing:.2px;padding:3px 9px;}
.label-default{background:#e3e8ef;color:var(--ox-text-dark);}
.label-primary{background:var(--ox-brand-blue);}
.label-info{background:var(--ox-brand-cyan);}
.label-success{background:#2fb37d;}
.label-warning{background:#f0a92c;color:#fff;}
.label-danger{background:#e0524a;}

/* ---------- Pagination ---------- */
.pagination>li>a,.pagination>li>span{
  border-radius:8px !important;
  margin:0 2px;
  border:1px solid var(--ox-border-strong);
  color:var(--ox-text-dark);
}
.pagination>.active>a,.pagination>.active>span,
.pagination>.active>a:hover,.pagination>.active>span:hover{
  background:var(--ox-gradient);
  border-color:transparent;
  color:#fff;
}

/* ---------- Tabs ---------- */
.nav-tabs{border-bottom:1px solid var(--ox-border);}
.nav-tabs>li>a{
  border-radius:var(--ox-radius-sm) var(--ox-radius-sm) 0 0;
  color:var(--ox-text-muted);
  border:1px solid transparent;
}
.nav-tabs>li>a:hover{background:#f4f6fa;border-color:transparent;color:var(--ox-text-dark);}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus{
  color:var(--ox-text-dark);
  border:1px solid var(--ox-border);
  border-bottom-color:transparent;
  background:#fff;
  font-weight:600;
}
.nav-tabs-custom{
  border-radius:var(--ox-radius-lg);
  box-shadow:var(--ox-shadow-sm);
  border:1px solid var(--ox-border);
}
.nav-tabs-custom>.nav-tabs>li.active{border-top-color:var(--ox-brand-cyan);}

/* ---------- Dropdown menus ---------- */
.dropdown-menu{
  border:1px solid var(--ox-border);
  border-radius:var(--ox-radius);
  box-shadow:var(--ox-shadow-md);
  padding:6px;
}
.dropdown-menu>li>a{
  border-radius:6px;
  padding:7px 12px;
  color:var(--ox-text-dark);
}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{
  background:rgba(42,121,196,.08);
  color:var(--ox-brand-blue);
}

/* Menú de notificaciones del header (AdminLTE) */
.skin-purple .main-header .navbar .dropdown-menu{padding:0;}
.skin-purple .main-header .navbar .dropdown-menu>li.header{
  background:var(--ox-gradient);
  color:#fff;
  border-radius:var(--ox-radius) var(--ox-radius) 0 0;
  border-bottom:0;
  padding:12px 14px;
}
.skin-purple .main-header .navbar .dropdown-menu>li.header strong,
.skin-purple .main-header .navbar .dropdown-menu>li.header strong.text-red,
.skin-purple .main-header .navbar .dropdown-menu>li.header strong.text-green,
.skin-purple .main-header .navbar .dropdown-menu>li.header strong.text-black{color:#fff !important;}

/* ---------- Direct chat / misc AdminLTE bits ---------- */
.direct-chat-msg .direct-chat-text{border-radius:var(--ox-radius);}

/* ---------- Utilidades gradiente Ordenox ---------- */
.ox-gradient-bg{background:var(--ox-gradient) !important;color:#fff;}
.ox-gradient-text{
  background:var(--ox-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ox-accent-bar{
  height:4px;
  border-radius:999px;
  background:var(--ox-gradient);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:#c7d0dc;
  border-radius:999px;
  border:2px solid var(--ox-bg);
}
::-webkit-scrollbar-thumb:hover{background:#a9b4c3;}

/* ---------- Impresión: no tocar layout de impresos ---------- */
@media print{
  .box,.small-box,.modal-content,.nav-tabs-custom{
    box-shadow:none !important;
    border-radius:0 !important;
  }
}

/* ---------- Accesibilidad de focus por teclado ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--ox-brand-cyan);
  outline-offset:2px;
}

/* =========================================================
   SKIN ORDENOX — institucional, gradient azul/cyan/verde
   Activo al seleccionar "Ordenox" en el control-sidebar.
   No altera otras skins (blue, black, purple, etc.).
   ========================================================= */
.skin-ordenox .main-header .logo,
.skin-ordenox .main-header .logo:hover{
  background:var(--ox-gradient);
  color:#fff;
  border-bottom:0;
  font-weight:700;
}
.skin-ordenox .main-header .navbar{
  background:var(--ox-gradient);
  border-bottom:0;
  box-shadow:0 2px 10px rgba(31,92,150,.18);
}
.skin-ordenox .main-header .navbar .nav>li>a{color:rgba(255,255,255,.92);}
.skin-ordenox .main-header .navbar .nav>li>a:hover,
.skin-ordenox .main-header .navbar .nav>li>a:focus,
.skin-ordenox .main-header .navbar .nav .open>a,
.skin-ordenox .main-header .navbar .nav .open>a:hover,
.skin-ordenox .main-header .navbar .nav .open>a:focus{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.skin-ordenox .main-header .sidebar-toggle{color:#fff;}
.skin-ordenox .main-header .sidebar-toggle:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.skin-ordenox .main-header .navbar .dropdown-menu>li.header{
  background:#1f5c96;
  color:#fff;
  border-bottom:0;
}

/* Sidebar Ordenox (dark slate + acento gradient en item activo) */
.skin-ordenox .main-sidebar,
.skin-ordenox .left-side{background:#1f2a3a;}
.skin-ordenox .sidebar a{color:#cfd8e3;}
.skin-ordenox .sidebar-menu>li.header{
  background:#17212f;
  color:#8594a8;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:11px;
}
.skin-ordenox .sidebar-menu>li>a{
  border-left:3px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.skin-ordenox .sidebar-menu>li:hover>a,
.skin-ordenox .sidebar-menu>li>a:hover{
  background:rgba(77,184,201,.12);
  border-left-color:var(--ox-brand-cyan);
  color:#fff;
}
.skin-ordenox .sidebar-menu>li.active>a{
  background:linear-gradient(90deg,rgba(42,121,196,.30),rgba(77,184,201,.10) 60%,transparent);
  border-left-color:var(--ox-brand-green);
  color:#fff;
}
.skin-ordenox .sidebar-menu .treeview-menu>li>a{color:#aab5c4;}
.skin-ordenox .sidebar-menu .treeview-menu>li.active>a,
.skin-ordenox .sidebar-menu .treeview-menu>li>a:hover{color:#fff;}
.skin-ordenox .user-panel>.info,
.skin-ordenox .user-panel>.info>a{color:#eef2f7;}

/* =========================================================
   DataTables Buttons (Columnas, Copy, Print, Excel, PDF)
   Moderniza la barra de toolbar sin tocar JS ni textos.
   ========================================================= */
div.dt-buttons{
  display:inline-flex;
  flex-wrap:wrap;
  gap:8px;
  padding:6px 0 10px;
  margin-right:10px;
  float:none;
}
.dt-buttons .dt-button,
.dt-buttons button.dt-button,
.dt-buttons a.dt-button,
.dt-buttons div.dt-button{
  background:#fff !important;
  color:var(--ox-text-dark) !important;
  border:1px solid var(--ox-border-strong) !important;
  border-radius:10px !important;
  padding:7px 14px !important;
  font-weight:500 !important;
  font-size:13px !important;
  letter-spacing:.1px;
  box-shadow:var(--ox-shadow-xs) !important;
  text-shadow:none !important;
  background-image:none !important;
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease,background-color .15s ease !important;
  margin:0 !important;
  line-height:1.4 !important;
}
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:hover:not(.disabled),
.dt-buttons button.dt-button:hover{
  background:#f7f9fc !important;
  border-color:var(--ox-brand-cyan) !important;
  color:var(--ox-brand-blue-dark) !important;
  box-shadow:var(--ox-shadow-sm) !important;
  transform:translateY(-1px);
}
.dt-buttons .dt-button:active,
.dt-buttons .dt-button.active:not(.disabled),
.dt-buttons .dt-button:active:not(.disabled):hover:not(.disabled){
  background:linear-gradient(180deg,#f1f5fb,#eaf0f8) !important;
  border-color:var(--ox-brand-cyan) !important;
  box-shadow:var(--ox-shadow-xs) !important;
  transform:translateY(0);
}
.dt-buttons .dt-button:focus,
.dt-buttons .dt-button.focus{
  outline:0 !important;
  border-color:var(--ox-brand-cyan) !important;
  box-shadow:0 0 0 3px rgba(77,184,201,.22), var(--ox-shadow-xs) !important;
}
.dt-buttons .dt-button i.fa{margin-right:6px;opacity:.85;}
/* Los textos internos del proyecto usan <span style='color:...'> para acentuar
   cada botón; los respetamos, pero igualamos tipografía/alineación. */
.dt-buttons .dt-button > span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.dt-buttons .dt-button .fa-columns,
.dt-buttons .dt-button .fa-print,
.dt-buttons .dt-button .fa-copy,
.dt-buttons .dt-button .fa-file-excel-o,
.dt-buttons .dt-button .fa-file-pdf-o{margin-left:4px;}

/* Menú flotante del colvis */
div.dt-button-collection{
  border-radius:var(--ox-radius) !important;
  box-shadow:var(--ox-shadow-md) !important;
  border:1px solid var(--ox-border) !important;
  padding:6px !important;
  background:#fff !important;
}
div.dt-button-collection .dt-button{
  border-radius:6px !important;
  margin:2px 0 !important;
  display:block !important;
  text-align:left !important;
  border-color:transparent !important;
}
div.dt-button-collection .dt-button.active{
  background:rgba(77,184,201,.12) !important;
  border-color:rgba(77,184,201,.25) !important;
  color:var(--ox-brand-blue-dark) !important;
}

/* =========================================================
   Acciones por fila en tabla de O.S. (#ostable)
   Solo CSS: no toca hrefs, onclicks, data-toggle, ids ni JS.
   Convierte los <a class="btn..."> en botones cuadrados
   uniformes con respiro consistente entre ellos.
   ========================================================= */
#ostable tbody td > a.btn,
#ostable tbody td > a[class*="btn-"]{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0 !important;
  margin:2px 3px 2px 0 !important; /* override inline margin-right:1% */
  border-radius:9px !important;
  vertical-align:middle;
  box-shadow:var(--ox-shadow-xs);
  transition:transform .12s ease,box-shadow .15s ease,filter .15s ease;
}
#ostable tbody td > a.btn:hover,
#ostable tbody td > a[class*="btn-"]:hover{
  transform:translateY(-1px);
  box-shadow:var(--ox-shadow-sm);
  filter:brightness(1.03);
}
#ostable tbody td > a.btn > i,
#ostable tbody td > a[class*="btn-"] > i{
  margin:0;
  font-size:14px;
  line-height:1;
}
/* La celda de acciones queda con flex wrap suave: más aire horizontal */
#ostable tbody td:last-child,
#ostable tbody td.actions{
  white-space:nowrap;
  min-width:0;
}
/* Responsive: en pantallas chicas, deja que envuelvan sin romper alineación */
@media (max-width:767px){
  #ostable tbody td > a.btn,
  #ostable tbody td > a[class*="btn-"]{
    width:32px;
    height:32px;
  }
}