/*
 * Skins estilo AdminLTE 4 (adaptados a la estructura AdminLTE 2.x usada por Widu)
 * -------------------------------------------------------------------------------
 * 3 skins nuevos, look moderno/plano inspirado en AdminLTE 4:
 *   1) skin-lte4-orange     -> Fondo claro, texto oscuro, naranja vivo de acento
 *   2) skin-lte4-turquoise  -> Futurista, turquesas y compatibles
 *   3) skin-lte4-wood       -> Clásico, colores madera
 */


/* =========================================================
   1) NARANJA VIVO - Fondo claro, texto oscuro, naranja de acento
   Criterio (invertido a propósito): NUNCA fondo negro/oscuro en
   áreas que puedan recibir contenido de cualquier vista (box-header,
   tablas, etc.) -> ahí es donde el texto sin color propio (labels,
   títulos sueltos, ej. bancos/list.php) se perdía. Fondos siempre
   blancos o con un tinte naranja muy claro; el texto por defecto es
   oscuro (#1a1a1a), y el naranja vivo (#ff6600) queda reservado para
   bordes, botones (con texto oscuro encima) e íconos.
   ========================================================= */
.skin-lte4-orange .main-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.skin-lte4-orange .main-header .navbar-toggle {
  color: #1a1a1a;
}
.skin-lte4-orange .main-header .navbar-brand {
  color: #1a1a1a;
  border-right: 1px solid #ffcc99;
}
.skin-lte4-orange .main-header > .navbar,
.skin-lte4-orange .main-header .navbar {
  background-color: #ffffff;
  border-bottom: 4px solid #ff6600;
}
.skin-lte4-orange .main-header .navbar .nav > li > a {
  color: #1a1a1a;
}
.skin-lte4-orange .main-header .navbar .nav > li > a:hover,
.skin-lte4-orange .main-header .navbar .nav > li > a:active,
.skin-lte4-orange .main-header .navbar .nav > li > a:focus,
.skin-lte4-orange .main-header .navbar .nav .open > a,
.skin-lte4-orange .main-header .navbar .nav .open > a:hover,
.skin-lte4-orange .main-header .navbar .nav .open > a:focus {
  background: #ff6600;
  color: #1a1a1a;
}
.skin-lte4-orange .main-header .navbar .sidebar-toggle {
  color: #1a1a1a;
}
.skin-lte4-orange .main-header .navbar .sidebar-toggle:hover {
  color: #1a1a1a;
  background-color: #ffdcb3;
}
.skin-lte4-orange .main-header .logo {
  background-color: #ffffff;
  color: #ff6600;
  border-bottom: 4px solid #ff6600;
  font-weight: 700;
}
.skin-lte4-orange .main-header .logo:hover {
  background-color: #fff3e8;
}
.skin-lte4-orange .main-header li.user-header {
  background-color: #ffffff;
}
.skin-lte4-orange .main-header li.user-header p,
.skin-lte4-orange .main-header li.user-header p small {
  color: #1a1a1a;
}
.skin-lte4-orange .content-header {
  background: transparent;
}
.skin-lte4-orange .wrapper,
.skin-lte4-orange .main-sidebar,
.skin-lte4-orange .left-side {
  background-color: #ffffff;
}
.skin-lte4-orange .content-wrapper,
.skin-lte4-orange .main-footer {
  border-left: 1px solid #ffe0bf;
}
.skin-lte4-orange .user-panel > .info,
.skin-lte4-orange .user-panel > .info > a {
  color: #1a1a1a;
}
.skin-lte4-orange .sidebar-menu > li {
  transition: border-left-color 0.25s ease, background-color 0.25s ease;
}
.skin-lte4-orange .sidebar-menu > li.header {
  color: #cc5200;
  background: #ffffff;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.skin-lte4-orange .sidebar-menu > li > a {
  border-left: 4px solid transparent;
  font-weight: 700;
}
.skin-lte4-orange .sidebar-menu > li:hover > a,
.skin-lte4-orange .sidebar-menu > li.active > a {
  color: #1a1a1a;
  background: #ffe0bf;
  border-left-color: #ff6600;
}
.skin-lte4-orange .sidebar-menu > li.active {
  border-left-color: #ff6600;
}
.skin-lte4-orange .sidebar-menu > li > .treeview-menu {
  background: #fff8f2;
}
.skin-lte4-orange .sidebar a {
  color: #1a1a1a;
}
.skin-lte4-orange .sidebar a:hover {
  text-decoration: none;
}
.skin-lte4-orange .treeview-menu > li > a {
  color: #333333;
}
.skin-lte4-orange .treeview-menu > li.active > a,
.skin-lte4-orange .treeview-menu > li > a:hover {
  color: #cc5200;
  font-weight: 700;
}
.skin-lte4-orange .sidebar-form {
  border-radius: 20px;
  border: 2px solid #ff6600;
  margin: 10px 10px;
}
.skin-lte4-orange .sidebar-form input[type="text"],
.skin-lte4-orange .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}
.skin-lte4-orange .main-footer {
  border-top-color: #ffe0bf;
}
.skin-lte4-orange .btn-primary {
  background-color: #ff6600;
  border-color: #cc5200;
  color: #1a1a1a;
  font-weight: 700;
}
.skin-lte4-orange .btn-primary:hover,
.skin-lte4-orange .btn-primary:focus {
  background-color: #cc5200;
  border-color: #993d00;
  color: #ffffff;
}
.skin-lte4-orange .box {
  border-radius: 6px;
  border-top: 4px solid #ff6600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* --- Refuerzo de contraste del sidebar --- */
.skin-lte4-orange .sidebar-menu > li > a,
.skin-lte4-orange .sidebar-menu > li > a > span {
  color: #1a1a1a;
}
.skin-lte4-orange .sidebar-menu > li:hover > a > span,
.skin-lte4-orange .sidebar-menu > li.active > a > span {
  color: #1a1a1a;
  background-color: transparent;
}
.skin-lte4-orange .sidebar-menu > li > a > .fa,
.skin-lte4-orange .sidebar-menu > li > a > .glyphicon,
.skin-lte4-orange .sidebar-menu > li > a > .ion {
  color: #ff6600;
}
.skin-lte4-orange .sidebar-menu > li:hover > a > .fa,
.skin-lte4-orange .sidebar-menu > li.active > a > .fa {
  color: #cc5200;
}
.skin-lte4-orange .sidebar-menu > li .label,
.skin-lte4-orange .sidebar-menu > li .badge {
  background-color: #ff6600;
  color: #1a1a1a;
  font-weight: 700;
}
.skin-lte4-orange .treeview-menu > li > a > i {
  color: #ff6600;
}

/* --- Botones armonizados con la paleta ---
   btn-success y btn-default son las clases mas usadas en toda la app
   (579 y 761 usos respectivamente), mas que btn-primary. Por eso llevan
   el naranja como color principal: si no, el skin "no se ve naranja"
   en la mayoria de las pantallas. btn-danger se mantiene en rojo por
   convencion universal (acciones de eliminar/alerta). Siempre texto
   oscuro sobre relleno naranja/amarillo (nunca naranja sobre blanco
   ni blanco sobre naranja como texto principal). */
.skin-lte4-orange .btn-success {
  background-color: #ff6600;
  border-color: #cc5200;
  color: #1a1a1a;
  font-weight: 700;
}
.skin-lte4-orange .btn-success:hover,
.skin-lte4-orange .btn-success:focus {
  background-color: #cc5200;
  border-color: #993d00;
  color: #ffffff;
}
.skin-lte4-orange .btn-info {
  background-color: #ffffff;
  border-color: #ff6600;
  color: #1a1a1a;
}
.skin-lte4-orange .btn-info:hover,
.skin-lte4-orange .btn-info:focus {
  background-color: #ff6600;
  border-color: #cc5200;
  color: #1a1a1a;
}
.skin-lte4-orange .btn-warning {
  background-color: #ffb300;
  border-color: #cc8f00;
  color: #1a1a1a;
}
.skin-lte4-orange .btn-warning:hover,
.skin-lte4-orange .btn-warning:focus {
  background-color: #cc8f00;
  border-color: #a37200;
  color: #ffffff;
}
.skin-lte4-orange .btn-danger {
  background-color: #d32f2f;
  border-color: #9a0007;
  color: #ffffff;
}
.skin-lte4-orange .btn-danger:hover,
.skin-lte4-orange .btn-danger:focus {
  background-color: #9a0007;
  border-color: #ff6600;
  color: #ffffff;
}
.skin-lte4-orange .btn-default {
  background-color: #ffffff;
  border: 2px solid #ff6600;
  color: #1a1a1a;
}
.skin-lte4-orange .btn-default:hover,
.skin-lte4-orange .btn-default:focus {
  background-color: #ff6600;
  border-color: #cc5200;
  color: #1a1a1a;
}

/* --- Encabezados de tablas / DataTables / boxes ---
   El box-header de muchas vistas trae más contenido que solo el
   box-title (labels, selects, textos sueltos sin color propio, ej.
   bancos/list.php). Por eso el fondo es siempre claro (tinte naranja
   muy suave) con texto oscuro por defecto: cualquier texto sin color
   propio queda legible sin importar qué vista lo agregue. */
.skin-lte4-orange .box-header {
  border-bottom: 3px solid #ff6600;
  background: #fff3e8;
  color: #1a1a1a;
}
.skin-lte4-orange .box-header .box-title {
  color: #cc5200;
  font-weight: 700;
}
.skin-lte4-orange table.dataTable thead th,
.skin-lte4-orange table.dataTable thead td,
.skin-lte4-orange .table > thead > tr > th {
  background-color: #fff3e8;
  color: #1a1a1a;
  border-bottom: 3px solid #ff6600;
}
.skin-lte4-orange .dt-paging-button.current,
.skin-lte4-orange .dt-paging-button.current:hover {
  background: #ff6600 !important;
  border-color: #cc5200 !important;
  color: #1a1a1a !important;
  font-weight: 700;
}
.skin-lte4-orange .dt-paging-button:hover {
  background: #ffe0bf !important;
  border-color: #ff6600 !important;
  color: #1a1a1a !important;
}
.skin-lte4-orange .dt-search input,
.skin-lte4-orange .dt-length select {
  border: 2px solid #ff6600;
}


/* =========================================================
   2) FUTURISTA - Turquesas y compatibles
   ========================================================= */
.skin-lte4-turquoise .main-header {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.skin-lte4-turquoise .main-header .navbar-toggle {
  color: #d7fffa;
}
.skin-lte4-turquoise .main-header .navbar-brand {
  color: #d7fffa;
  border-right: 1px solid #113b3b;
}
.skin-lte4-turquoise .main-header > .navbar,
.skin-lte4-turquoise .main-header .navbar {
  background-color: #08201f;
  border-bottom: 2px solid #21e3c8;
}
.skin-lte4-turquoise .main-header .navbar .nav > li > a {
  color: #9df3e6;
}
.skin-lte4-turquoise .main-header .navbar .nav > li > a:hover,
.skin-lte4-turquoise .main-header .navbar .nav > li > a:active,
.skin-lte4-turquoise .main-header .navbar .nav > li > a:focus,
.skin-lte4-turquoise .main-header .navbar .nav .open > a,
.skin-lte4-turquoise .main-header .navbar .nav .open > a:hover,
.skin-lte4-turquoise .main-header .navbar .nav .open > a:focus {
  background: rgba(33, 227, 200, 0.15);
  color: #21e3c8;
  text-shadow: 0 0 6px rgba(33, 227, 200, 0.6);
}
.skin-lte4-turquoise .main-header .navbar .sidebar-toggle {
  color: #9df3e6;
}
.skin-lte4-turquoise .main-header .navbar .sidebar-toggle:hover {
  color: #08201f;
  background-color: #21e3c8;
}
.skin-lte4-turquoise .main-header .logo {
  background-color: #08201f;
  color: #21e3c8;
  border-bottom: 2px solid #21e3c8;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(33, 227, 200, 0.5);
}
.skin-lte4-turquoise .main-header .logo:hover {
  background-color: #0b2b2a;
}
.skin-lte4-turquoise .main-header li.user-header {
  background-color: #08201f;
}
.skin-lte4-turquoise .content-header {
  background: transparent;
}
.skin-lte4-turquoise .wrapper,
.skin-lte4-turquoise .main-sidebar,
.skin-lte4-turquoise .left-side {
  background-color: #0a1f1f;
}
.skin-lte4-turquoise .content-wrapper,
.skin-lte4-turquoise .main-footer {
  border-left: 1px solid #113b3b;
}
.skin-lte4-turquoise .user-panel > .info,
.skin-lte4-turquoise .user-panel > .info > a {
  color: #d7fffa;
}
.skin-lte4-turquoise .sidebar-menu > li {
  transition: border-left-color 0.25s ease, background-color 0.25s ease;
}
.skin-lte4-turquoise .sidebar-menu > li.header {
  color: #4fb8a8;
  background: #071616;
  letter-spacing: 0.5px;
}
.skin-lte4-turquoise .sidebar-menu > li > a {
  border-left: 3px solid transparent;
  color: #9df3e6;
}
.skin-lte4-turquoise .sidebar-menu > li:hover > a,
.skin-lte4-turquoise .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #113b3b;
  border-left-color: #21e3c8;
  box-shadow: inset 0 0 12px rgba(33, 227, 200, 0.25);
}
.skin-lte4-turquoise .sidebar-menu > li > .treeview-menu {
  background: #0d2b2a;
}
.skin-lte4-turquoise .sidebar a {
  color: #9df3e6;
}
.skin-lte4-turquoise .sidebar a:hover {
  text-decoration: none;
}
.skin-lte4-turquoise .treeview-menu > li > a {
  color: #6fc9bb;
}
.skin-lte4-turquoise .treeview-menu > li.active > a,
.skin-lte4-turquoise .treeview-menu > li > a:hover {
  color: #21e3c8;
}
.skin-lte4-turquoise .sidebar-form {
  border-radius: 4px;
  border: 1px solid #113b3b;
  margin: 10px 10px;
}
.skin-lte4-turquoise .sidebar-form input[type="text"],
.skin-lte4-turquoise .sidebar-form .btn {
  box-shadow: none;
  background-color: #0d2b2a;
  border: 1px solid #113b3b;
  color: #d7fffa;
  height: 35px;
}
.skin-lte4-turquoise .main-footer {
  border-top-color: #113b3b;
  background-color: #0a1f1f;
  color: #9df3e6;
}
.skin-lte4-turquoise .btn-primary {
  background-color: #21e3c8;
  border-color: #17bfa8;
  color: #08201f;
}
.skin-lte4-turquoise .btn-primary:hover,
.skin-lte4-turquoise .btn-primary:focus {
  background-color: #17bfa8;
  border-color: #129485;
  color: #08201f;
}
.skin-lte4-turquoise .box {
  border-radius: 6px;
  border-top: 3px solid #21e3c8;
  box-shadow: 0 0 10px rgba(33, 227, 200, 0.08);
}

/* --- Refuerzo de contraste del sidebar --- */
.skin-lte4-turquoise .sidebar-menu > li > a,
.skin-lte4-turquoise .sidebar-menu > li > a > span {
  color: #113b3b;
}
.skin-lte4-turquoise .sidebar-menu > li:hover > a > span,
.skin-lte4-turquoise .sidebar-menu > li.active > a > span {
  color: #ffffff;
  background-color: #113b3b;
}
.skin-lte4-turquoise .sidebar-menu > li > a > .fa,
.skin-lte4-turquoise .sidebar-menu > li > a > .glyphicon,
.skin-lte4-turquoise .sidebar-menu > li > a > .ion {
  color: #4fb8a8;
}
.skin-lte4-turquoise .sidebar-menu > li:hover > a > .fa,
.skin-lte4-turquoise .sidebar-menu > li.active > a > .fa {
  color: #21e3c8;
  text-shadow: 0 0 6px rgba(33, 227, 200, 0.6);
}
.skin-lte4-turquoise .sidebar-menu > li .label,
.skin-lte4-turquoise .sidebar-menu > li .badge {
  background-color: #21e3c8;
  color: #08201f;
}
.skin-lte4-turquoise .treeview-menu > li > a > i {
  color: #4fb8a8;
}

/* --- Botones armonizados con la paleta --- */
.skin-lte4-turquoise .btn-success {
  background-color: #1fbf8f;
  border-color: #189d75;
  color: #08201f;
}
.skin-lte4-turquoise .btn-success:hover,
.skin-lte4-turquoise .btn-success:focus {
  background-color: #189d75;
  border-color: #12805f;
  color: #ffffff;
}
.skin-lte4-turquoise .btn-info {
  background-color: #2e9ee0;
  border-color: #2585c0;
  color: #ffffff;
}
.skin-lte4-turquoise .btn-info:hover,
.skin-lte4-turquoise .btn-info:focus {
  background-color: #2585c0;
  border-color: #1c6a9c;
  color: #ffffff;
}
.skin-lte4-turquoise .btn-warning {
  background-color: #e0b13a;
  border-color: #c4972a;
  color: #08201f;
}
.skin-lte4-turquoise .btn-warning:hover,
.skin-lte4-turquoise .btn-warning:focus {
  background-color: #c4972a;
  border-color: #a67e20;
  color: #08201f;
}
.skin-lte4-turquoise .btn-danger {
  background-color: #e2604a;
  border-color: #c94c38;
  color: #ffffff;
}
.skin-lte4-turquoise .btn-danger:hover,
.skin-lte4-turquoise .btn-danger:focus {
  background-color: #c94c38;
  border-color: #a83c2b;
  color: #ffffff;
}
.skin-lte4-turquoise .btn-default {
  background-color: #0d2b2a;
  border-color: #113b3b;
  color: #9df3e6;
}
.skin-lte4-turquoise .btn-default:hover,
.skin-lte4-turquoise .btn-default:focus {
  background-color: #113b3b;
  border-color: #21e3c8;
  color: #ffffff;
}

/* --- Encabezados de tablas / DataTables / boxes --- */
.skin-lte4-turquoise .box-header {
  border-bottom: 2px solid #21e3c8;
  background: #f4fffd;
}
.skin-lte4-turquoise .box-header .box-title {
  color: #08201f;
  font-weight: 700;
}
.skin-lte4-turquoise table.dataTable thead th,
.skin-lte4-turquoise table.dataTable thead td,
.skin-lte4-turquoise .table > thead > tr > th {
  background-color: #08201f;
  color: #21e3c8;
  border-bottom: 2px solid #21e3c8;
}
.skin-lte4-turquoise .dt-paging-button.current,
.skin-lte4-turquoise .dt-paging-button.current:hover {
  background: #21e3c8 !important;
  border-color: #17bfa8 !important;
  color: #08201f !important;
}
.skin-lte4-turquoise .dt-paging-button:hover {
  background: #113b3b !important;
  border-color: #21e3c8 !important;
  color: #ffffff !important;
}
.skin-lte4-turquoise .dt-search input,
.skin-lte4-turquoise .dt-length select {
  background-color: #0d2b2a;
  border: 1px solid #113b3b;
  color: #d7fffa;
}


/* =========================================================
   3) CLÁSICO - Colores madera
   ========================================================= */
.skin-lte4-wood .main-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.skin-lte4-wood .main-header .navbar-toggle {
  color: #f5ead9;
}
.skin-lte4-wood .main-header .navbar-brand {
  color: #f5ead9;
  border-right: 1px solid #5c3a22;
}
.skin-lte4-wood .main-header > .navbar,
.skin-lte4-wood .main-header .navbar {
  background-color: #5c3a22;
  border-bottom: 3px solid #a9764a;
}
.skin-lte4-wood .main-header .navbar .nav > li > a {
  color: #f0dcc3;
}
.skin-lte4-wood .main-header .navbar .nav > li > a:hover,
.skin-lte4-wood .main-header .navbar .nav > li > a:active,
.skin-lte4-wood .main-header .navbar .nav > li > a:focus,
.skin-lte4-wood .main-header .navbar .nav .open > a,
.skin-lte4-wood .main-header .navbar .nav .open > a:hover,
.skin-lte4-wood .main-header .navbar .nav .open > a:focus {
  background: rgba(169, 118, 74, 0.25);
  color: #f5ead9;
}
.skin-lte4-wood .main-header .navbar .sidebar-toggle {
  color: #f0dcc3;
}
.skin-lte4-wood .main-header .navbar .sidebar-toggle:hover {
  color: #ffffff;
  background-color: #a9764a;
}
.skin-lte4-wood .main-header .logo {
  background-color: #4a2f1c;
  color: #f5ead9;
  border-bottom: 3px solid #a9764a;
  font-family: Georgia, 'Times New Roman', serif;
}
.skin-lte4-wood .main-header .logo:hover {
  background-color: #55361f;
}
.skin-lte4-wood .main-header li.user-header {
  background-color: #4a2f1c;
}
.skin-lte4-wood .content-header {
  background: transparent;
}
.skin-lte4-wood .wrapper,
.skin-lte4-wood .main-sidebar,
.skin-lte4-wood .left-side {
  background-color: #f5ead9;
}
.skin-lte4-wood .content-wrapper,
.skin-lte4-wood .main-footer {
  border-left: 1px solid #d8bd98;
}
.skin-lte4-wood .user-panel > .info,
.skin-lte4-wood .user-panel > .info > a {
  color: #3b2412;
}
.skin-lte4-wood .sidebar-menu > li {
  transition: border-left-color 0.25s ease, background-color 0.25s ease;
}
.skin-lte4-wood .sidebar-menu > li.header {
  color: #8a5a34;
  background: #f5ead9;
}
.skin-lte4-wood .sidebar-menu > li > a {
  border-left: 3px solid transparent;
  font-weight: 500;
  color: #3b2412;
}
.skin-lte4-wood .sidebar-menu > li:hover > a,
.skin-lte4-wood .sidebar-menu > li.active > a {
  color: #3b2412;
  background: #e6cda4;
  border-left-color: #a9764a;
}
.skin-lte4-wood .sidebar-menu > li > .treeview-menu {
  background: #ecd9b8;
}
.skin-lte4-wood .sidebar a {
  color: #3b2412;
}
.skin-lte4-wood .sidebar a:hover {
  text-decoration: none;
}
.skin-lte4-wood .treeview-menu > li > a {
  color: #6b4423;
}
.skin-lte4-wood .treeview-menu > li.active > a,
.skin-lte4-wood .treeview-menu > li > a:hover {
  color: #3b2412;
  font-weight: 600;
}
.skin-lte4-wood .sidebar-form {
  border-radius: 3px;
  border: 1px solid #d8bd98;
  margin: 10px 10px;
}
.skin-lte4-wood .sidebar-form input[type="text"],
.skin-lte4-wood .sidebar-form .btn {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid transparent;
  height: 35px;
}
.skin-lte4-wood .main-footer {
  border-top-color: #d8bd98;
}
.skin-lte4-wood .btn-primary {
  background-color: #a9764a;
  border-color: #8f5f38;
  color: #f5ead9;
}
.skin-lte4-wood .btn-primary:hover,
.skin-lte4-wood .btn-primary:focus {
  background-color: #8f5f38;
  border-color: #6b4423;
  color: #f5ead9;
}
.skin-lte4-wood .box {
  border-radius: 4px;
  border-top: 3px solid #a9764a;
  box-shadow: 0 1px 4px rgba(74, 47, 28, 0.12);
}

/* --- Refuerzo de contraste del sidebar --- */
.skin-lte4-wood .sidebar-menu > li > a,
.skin-lte4-wood .sidebar-menu > li > a > span {
  color: #3b2412;
}
.skin-lte4-wood .sidebar-menu > li:hover > a > span,
.skin-lte4-wood .sidebar-menu > li.active > a > span {
  color: #3b2412;
  background-color: #e6cda4;
}
.skin-lte4-wood .sidebar-menu > li > a > .fa,
.skin-lte4-wood .sidebar-menu > li > a > .glyphicon,
.skin-lte4-wood .sidebar-menu > li > a > .ion {
  color: #8a5a34;
}
.skin-lte4-wood .sidebar-menu > li:hover > a > .fa,
.skin-lte4-wood .sidebar-menu > li.active > a > .fa {
  color: #6b4423;
}
.skin-lte4-wood .sidebar-menu > li .label,
.skin-lte4-wood .sidebar-menu > li .badge {
  background-color: #a9764a;
  color: #f5ead9;
}
.skin-lte4-wood .treeview-menu > li > a > i {
  color: #8a5a34;
}

/* --- Botones armonizados con la paleta --- */
.skin-lte4-wood .btn-success {
  background-color: #7c8f4e;
  border-color: #66753e;
  color: #ffffff;
}
.skin-lte4-wood .btn-success:hover,
.skin-lte4-wood .btn-success:focus {
  background-color: #66753e;
  border-color: #525d31;
  color: #ffffff;
}
.skin-lte4-wood .btn-info {
  background-color: #5b7a8c;
  border-color: #486473;
  color: #ffffff;
}
.skin-lte4-wood .btn-info:hover,
.skin-lte4-wood .btn-info:focus {
  background-color: #486473;
  border-color: #37505c;
  color: #ffffff;
}
.skin-lte4-wood .btn-warning {
  background-color: #c8955b;
  border-color: #b17e46;
  color: #3b2412;
}
.skin-lte4-wood .btn-warning:hover,
.skin-lte4-wood .btn-warning:focus {
  background-color: #b17e46;
  border-color: #96683a;
  color: #ffffff;
}
.skin-lte4-wood .btn-danger {
  background-color: #a1462e;
  border-color: #8a3a25;
  color: #ffffff;
}
.skin-lte4-wood .btn-danger:hover,
.skin-lte4-wood .btn-danger:focus {
  background-color: #8a3a25;
  border-color: #722f1e;
  color: #ffffff;
}
.skin-lte4-wood .btn-default {
  background-color: #ffffff;
  border-color: #d8bd98;
  color: #3b2412;
}
.skin-lte4-wood .btn-default:hover,
.skin-lte4-wood .btn-default:focus {
  background-color: #e6cda4;
  border-color: #a9764a;
  color: #3b2412;
}

/* --- Encabezados de tablas / DataTables / boxes --- */
.skin-lte4-wood .box-header {
  border-bottom: 2px solid #a9764a;
  background: #f8f0e4;
}
.skin-lte4-wood .box-header .box-title {
  color: #3b2412;
  font-weight: 600;
  font-family: Georgia, 'Times New Roman', serif;
}
.skin-lte4-wood table.dataTable thead th,
.skin-lte4-wood table.dataTable thead td,
.skin-lte4-wood .table > thead > tr > th {
  background-color: #5c3a22;
  color: #f5ead9;
  border-bottom: 2px solid #a9764a;
}
.skin-lte4-wood .dt-paging-button.current,
.skin-lte4-wood .dt-paging-button.current:hover {
  background: #a9764a !important;
  border-color: #8f5f38 !important;
  color: #ffffff !important;
}
.skin-lte4-wood .dt-paging-button:hover {
  background: #e6cda4 !important;
  border-color: #a9764a !important;
  color: #3b2412 !important;
}
.skin-lte4-wood .dt-search input,
.skin-lte4-wood .dt-length select {
  border: 1px solid #d8bd98;
}


/* =========================================================
   4) ESCRITORIO (application/views/escritorio/list.php)
   Mosaicos ".item"/".itemMax", ".inicialmenu", ".detalleMenu"
   y tablas genéricas (thead/tbody) heredan la paleta de cada skin,
   siguiendo el mismo patrón que ya usan skin-blue-light/skin-black/skin-green.
   ========================================================= */

/* --- Naranja (fondo claro, texto oscuro) --- */
.skin-lte4-orange .item,
.skin-lte4-orange .itemMax {
  background: #ffffff;
  border-top: 4px solid #ff6600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.skin-lte4-orange .item:hover,
.skin-lte4-orange .itemMax:hover {
  background: #fff8f2;
  box-shadow: 0 0 0 2px #ff6600;
  border: 0 dotted transparent;
  cursor: pointer;
}
.skin-lte4-orange .inicialmenu {
  background-color: #ffffff;
  color: #ff6600;
}
.skin-lte4-orange .inicialmenu:hover {
  color: #cc5200;
  background-color: #fff3e8;
}
.skin-lte4-orange .detalleMenu {
  background: #fff3e8;
  color: #1a1a1a;
  font-weight: 700;
}
.skin-lte4-orange .detalleMenu:hover {
  background: #ff6600;
  color: #1a1a1a;
}
.skin-lte4-orange thead {
  background: #fff3e8;
  color: #1a1a1a;
}
.skin-lte4-orange tbody {
  color: #1a1a1a;
}

/* --- Turquesa ---
   Ojo con el contraste: sobre fondos claros (tiles, filas de tabla) se usa
   un teal oscuro (#0b5c53 / #123b38) en vez del turquesa claro que solo
   se reserva para fondos oscuros (navbar, sidebar, franja inferior). */
.skin-lte4-turquoise .item,
.skin-lte4-turquoise .itemMax {
  background: #ffffff;
  border-top: 3px solid #21e3c8;
  box-shadow: 0 0 12px rgba(33, 227, 200, 0.25);
}
.skin-lte4-turquoise .item:hover,
.skin-lte4-turquoise .itemMax:hover {
  background: #f4fffd;
  box-shadow: 0 0 16px rgba(33, 227, 200, 0.45);
  border: 0 dotted transparent;
  cursor: pointer;
}
.skin-lte4-turquoise .inicialmenu {
  background-color: #eafffb;
  color: #0b5c53;
}
.skin-lte4-turquoise .inicialmenu:hover {
  color: #08201f;
  background-color: #d5fbf3;
}
.skin-lte4-turquoise .detalleMenu {
  background: #08201f;
  color: #9df3e6;
}
.skin-lte4-turquoise .detalleMenu:hover {
  background: #21e3c8;
  color: #08201f;
}
.skin-lte4-turquoise thead {
  background: #08201f;
  color: #9df3e6;
}
.skin-lte4-turquoise tbody {
  color: #123b38;
}

/* --- Madera --- */
.skin-lte4-wood .item,
.skin-lte4-wood .itemMax {
  background: #ffffff;
  border-top: 3px solid #a9764a;
  box-shadow: 0 0 12px rgba(169, 118, 74, 0.3);
}
.skin-lte4-wood .item:hover,
.skin-lte4-wood .itemMax:hover {
  background: #fbf4ea;
  box-shadow: 0 0 15px rgba(74, 47, 28, 0.3);
  border: 0 dotted transparent;
  cursor: pointer;
}
.skin-lte4-wood .inicialmenu {
  background-color: #f5ead9;
  color: #8a5a34;
}
.skin-lte4-wood .inicialmenu:hover {
  color: #4a2f1c;
}
.skin-lte4-wood .detalleMenu {
  background: #5c3a22;
  color: #f5ead9;
}
.skin-lte4-wood .detalleMenu:hover {
  background: #a9764a;
  color: #ffffff;
}
.skin-lte4-wood thead {
  background: #5c3a22;
  color: #f5ead9;
}
.skin-lte4-wood tbody {
  color: #3b2412;
}


/* =========================================================
   5) RESPONSIVE - Los mosaicos del escritorio se adaptan a
   cualquier resolución (el ancho mínimo fijo de 124/324px de
   ".item"/".itemMax" desbordaba en pantallas chicas). Reglas
   genéricas: benefician a los 3 skins nuevos y también a los
   3 clásicos, sin tocar colores.
   ========================================================= */
@media (max-width: 992px) {
  .item,
  .itemMax {
    min-width: 116px;
  }
}
@media (max-width: 600px) {
  .item,
  .itemMax {
    min-width: 42vw;
    max-width: 46vw;
    margin: 6px auto;
  }
  .inicialmenu {
    height: 70px;
    font-size: 36px;
  }
  .detalleMenu {
    font-size: 11px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media (max-width: 380px) {
  .item,
  .itemMax {
    min-width: 90vw;
    max-width: 92vw;
  }
}