/* ==========================================================
   FGE — Overrides de apariencia (AdminLTE v2, skin black)
   Objetivo: eliminar franja/marco negro y pulir UI
   ========================================================== */

/* Paleta y tokens */
:root{
  --bg:#f7f9fc;
  --box-bg:#ffffff;
  --primary:#2563eb;
  --primary-700:#1d4ed8;
  --sidebar-bg:#ffffff;
  --sidebar-txt:#334155;
  --sidebar-sub:#64748b;
  --accent:#ff9f2a;
  --muted:#94a3b8;
  --shadow:0 8px 20px rgba(28,39,60,.06);
  --radius:14px;
}

/* ===== Fondo general (quita “marco” visual) ===== */
.wrapper,
.content-wrapper{
  background: var(--bg) !important;
  border-top: 0 !important;
}

/* ===== Header / Navbar ===== */
/* NOTA: Los estilos del header ahora están SOLO en fge.cabezote.css */
/* Se comentaron estos para evitar conflictos:

.skin-black .main-header,
.skin-black .main-header .navbar,
.skin-black .main-header .logo{
  background:#fff !important;  <-- CONFLICTO con fge.cabezote.css
}

*/

/* ===== Sidebar ===== */
.main-sidebar{
  background:var(--sidebar-bg) !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.04) inset;
  border-top:0 !important; /* evita línea oscura arriba */
}
.sidebar-menu>li.header{
  color:var(--accent); font-weight:700; font-size:12px;
  letter-spacing:.4px; text-transform:none;
  padding-top:14px; padding-bottom:6px;
}
.sidebar-menu>li>a{
  color:var(--sidebar-txt);
  border-radius:10px; margin:2px 8px;
}
.sidebar-menu>li.active>a,
.sidebar-menu>li>a:hover{
  background:rgba(37,99,235,.08); color:#1e293b;
}
.sidebar-menu .treeview-menu>li>a{ color:var(--sidebar-sub); }

/* ===== Boxes / tarjetas ===== */
.box{
  border:0 !important;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--box-bg);
}
.box .box-header{ border-bottom:0 !important; }

/* ===== Small-box ===== */
.small-box{ border-radius:18px; box-shadow:var(--shadow); }
.small-box .icon{ top:8px; right:10px; color:rgba(0,0,0,.12); }
.small-box .inner h3{ font-weight:700; }

/* ===== Botones ===== */
.btn{ border-radius:8px; }
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); }
.btn-success i{ margin-right:6px; }

#btnExportRecetas{
  border-radius:10px;
  box-shadow:0 6px 18px rgba(16,185,129,.25);
  font-weight:600;
}
#btnExportRecetas:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(16,185,129,.35);
}

/* ===== DataTables ===== */
.dataTables_wrapper .dataTables_filter input{
  border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; outline:none;
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid #e5e7eb; border-radius:10px; padding:4px 8px;
}
table.table>thead>tr>th{
  border-bottom:0 !important; color:#475569; font-weight:600;
}
table.table{ background:#fff; }
.table{ width:100% !important; }
.dataTables_wrapper .row{ margin-left:0; margin-right:0; }

/* ===== Select2 ===== */
.select2-container--default .select2-selection--single{
  height:34px; border-radius:10px; border:1px solid #e5e7eb;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:32px; padding-left:10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:34px; }

/* ===== Encabezados / breadcrumb ===== */
.content-header{ margin:15px 0 10px; }
.content-header>h1{ font-weight:700; color:#111827; }
.breadcrumb{ background:transparent; margin-bottom:10px; }

/* ===== Layout top-nav (por si lo usas) ===== */
.layout-top-nav .content-wrapper{ margin-left:0; border-top:0; }
.layout-top-nav .content-wrapper .container{ width:100% !important; max-width:100% !important; }
.layout-top-nav .content-wrapper .container-fluid{ padding-left:15px; padding-right:15px; }

/* ===== Parches extra por si algún skin insiste con bordes ===== */
.skin-black .main-header .navbar,
.skin-black .main-header .navbar > .nav > li > a,
.skin-black .main-header .navbar .navbar-custom-menu > .nav > li > a{
  border:0 !important;
}

/* ================================
   FGE — Sidebar limpio y consistente
   ================================ */
:root{
  --sb-bg:#0f172a;        /* fondo del sidebar (slate-900) */
  --sb-bg-2:#111827;      /* fondo submenú */
  --sb-txt:#e5e7eb;       /* texto normal */
  --sb-sub:#cbd5e1;       /* texto secundario */
  --sb-hover:rgba(255,255,255,.06); /* fondo en hover */
  --sb-shadow:0 6px 16px rgba(0,0,0,.25);
  --sb-active:#3b82f6;    /* acento activo (azul) */
  --sb-accent:#ffa500;    /* headers naranja SOCTI */
}

/* Fondo y tipografías del sidebar */
.main-sidebar{ background:var(--sb-bg) !important; color:var(--sb-txt); }
.main-sidebar .sidebar a{ color:var(--sb-txt); }

/* Encabezados (naranja con buen contraste) */
.sidebar-menu>li.header{
  color:#fff !important;
  background:linear-gradient(180deg, #1f2937 0, #0f172a 100%);
  border-left:4px solid var(--sb-accent);
  padding:10px 12px 8px;
  margin:8px 8px 6px;
  border-radius:10px;
  font-weight:800;
  letter-spacing:.2px;
}

/* Items nivel 1 */
.sidebar-menu>li>a{
  border-radius:10px;
  margin:2px 8px;
  padding:10px 12px;
  color:var(--sb-txt) !important;
  transition:all .15s ease;
  position:relative;
}
.sidebar-menu>li>a>.fa{ width:18px; text-align:center; margin-right:8px; }

/* Hover con “sombreado agradable” */
.sidebar-menu>li>a:hover{
  background:var(--sb-hover);
  box-shadow:var(--sb-shadow);
  transform:translateY(-1px);
}

/* Activo claro y con acento en el borde izquierdo */
.sidebar-menu>li.active>a,
.sidebar-menu>li.menu-open>a{
  background:rgba(59,130,246,.18) !important; /* azul suave */
  color:#fff !important;
  box-shadow:var(--sb-shadow);
}
.sidebar-menu>li.active>a::before,
.sidebar-menu>li.menu-open>a::before{
  content:""; position:absolute; left:-2px; top:8px; bottom:8px;
  width:4px; border-radius:4px; background:var(--sb-active);
}

/* Treeview (submenús) */
.sidebar-menu .treeview-menu{
  background:var(--sb-bg-2);
  border-radius:10px;
  margin:4px 8px 10px 8px;
  padding:6px 6px 8px;
  overflow:hidden;
}
.sidebar-menu .treeview-menu>li>a{
  color:var(--sb-sub) !important;
  padding:9px 14px 9px 28px;
  border-radius:8px;
  margin:2px 0;
  transition:all .15s ease;
}
.sidebar-menu .treeview-menu>li>a:hover{
  background:rgba(255,255,255,.06);
  color:#fff !important;
}
.sidebar-menu .treeview-menu>li.active>a{
  background:rgba(59,130,246,.22) !important;
  color:#fff !important;
}

/* Flecha del treeview más visible */
.sidebar-menu>li>a .pull-right-container .fa{
  color:#9aa4b2;
}
.sidebar-menu>li.menu-open>a .pull-right-container .fa{
  color:#cbd5e1;
}

/* Separadores (si los hubiera) */
.sidebar .divider{
  height:1px; background:rgba(255,255,255,.06); margin:10px 12px;
}

/* Estado colapsado: conserva hover “flyout” bonito (usa tus parches JS) */
.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu>li>a{
  margin:6px 6px; border-radius:10px; padding:10px 10px;
}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a span{ display:none; }
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a:hover{
  background:var(--sb-hover);
  box-shadow:var(--sb-shadow);
}

/* Badges/labels dentro del sidebar (opcional) */
.sidebar .label,
.sidebar .badge{
  background:#374151; color:#e5e7eb; border-radius:8px; padding:2px 6px;
}

/* Asegura contraste de los iconos de las secciones naranja */
.sidebar-menu>li.header i{ color:var(--sb-accent) !important; }

/* Ajuste del scrollbar (opcional) */
.main-sidebar .sidebar::-webkit-scrollbar{ width:8px; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15); border-radius:8px;
}

/* (Opcional) Spinner de ruta
#routeSpinner{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.15); z-index:50000; pointer-events:none; }
#routeSpinner img{ width:56px; height:56px; animation:spin .9s linear infinite; border-radius:50%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@keyframes spin{ to { transform:rotate(360deg); } }
*/


  /* 1) Ocultar por completo el bloque de logo izquierdo del header */
  .main-header .logo{ display:none !important; }

  /* 2) Cuando AdminLTE oculta el logo, por defecto deja margen en la navbar.
        Lo anulamos para que la barra ocupe TODO el ancho. */
  .main-header .navbar{ margin-left:0 !important; }

  /* 3) En layout fixed, mantenemos el padding-top correcto del contenido */
  body.fixed .content-wrapper{ padding-top:50px; }
  @media (max-width:480px){
    body.fixed .content-wrapper{ padding-top:44px; }
  }
  /* Nunca mostrar el logo izquierdo de AdminLTE */
.main-header .logo,
.main-header .logo .logo-mini,
.main-header .logo .logo-lg { display:none !important; }

/* Al ocultarlo, la navbar debe ocupar todo el ancho */
.main-header .navbar { margin-left: 0 !important; }