/* ==========================================================================
   TEMA WEBER (AdminLTE / shinyDashboard)
   Ordenado y sin duplicados
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tipografías
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   2) Variables de diseño (tokens)
   - Aquí definimos colores, medidas y sombras reutilizables
   -------------------------------------------------------------------------- */
:root{
  /* Paleta */
  --weber-teal:       #50B0AC;
  --weber-teal-soft:  #3FA6A2;
  --weber-teal-700:   #177E79;
  --weber-teal-800:   #0F6F6B;

  --weber-dark:       #2f567d;
  --bg-app:           #f6f8fb;
  --card:             #ffffff;
  --border:           #dde6ef;
  --weber-boxes:      #babfc7;

  /* Layout */
  --header-height:    44px;

  /* Anchos del área de título (equivalen a titleWidth en dashboardHeader) */
  --title-width:      320px;
  --title-mini-width: 50px;

  /* Bordes y sombras */
  --radius:           14px;
  --shadow-brand:     0 10px 20px rgba(0,0,0,0.10);
  --shadow-card:      0 10px 24px rgba(17,24,39,0.08);
}

/* --------------------------------------------------------------------------
   3) Base / tipografía general
   -------------------------------------------------------------------------- */
html, body{
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: var(--weber-dark);
}

html, h1{
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: var(--weber-dark) !important;
}

body{
  background-color: var(--bg-app) !important;
}

/* --------------------------------------------------------------------------
   4) Header superior (top bar)
   - Control de altura
   - Área de título con logo
   - Alineación del navbar con el titleWidth
   -------------------------------------------------------------------------- */

/* Asegura altura consistente en todo el header */
.main-header,
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo{
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  max-height: var(--header-height) !important;
  box-sizing: border-box !important;

  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

/* El navbar de AdminLTE a veces añade márgenes/padding */
.skin-blue .main-header .navbar{
  margin: 0 !important;
  padding: 0 !important;
  height: var(--header-height) !important;
}

/* Área del “título” (a.logo) donde se pinta logo-mini y logo-lg */
.skin-blue .main-header .logo{
  width: var(--title-width) !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* Evita que AdminLTE oculte contenido (text-indent / overflow) */
  text-indent: 0 !important;
  overflow: hidden !important;
  line-height: normal !important;
}

/* Alinea el contenido del navbar con el ancho del título */
.skin-blue .main-header .navbar{
  margin-left: var(--title-width) !important;
}

/* En escritorio mostramos SOLO logo-lg */
@media (min-width: 768px){
  .skin-blue .main-header .logo .logo-mini{ display: none !important; }
  .skin-blue .main-header .logo .logo-lg{
    display: flex !important;
    align-items: center !important;
    height: var(--header-height) !important;
    padding: 0 12px !important;
  }
}

/* Cuando el sidebar está colapsado, mostramos SOLO logo-mini */
.sidebar-mini.sidebar-collapse .main-header .logo{
  width: var(--title-mini-width) !important;
  justify-content: center !important;
}

.sidebar-mini.sidebar-collapse .main-header .navbar{
  margin-left: var(--title-mini-width) !important;
}

.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg{ display: none !important; }
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--header-height) !important;
}

/* Contenedor de marca dentro de logo-lg */
.weber-header-brand{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 100%;
}

/* Logo grande (logo-lg) */
.weber-header-logo{
  height: 48px !important;  /* recomendado para header de 44px */
  width: auto !important;
  display: block !important;
  object-fit: contain;
}

/* Logo mini (logo-mini) */
.weber-header-logo-mini{
  height: 30px !important;  /* un poco más grande en modo colapsado */
  width: auto !important;
  display: block !important;
  object-fit: contain;
}

/* Texto “Markov” junto al logo */
.weber-header-title{
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--weber-dark) !important;
  white-space: nowrap !important;
}

/* Botón hamburguesa y links del navbar derecho */
.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .nav > li > a{
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  color: var(--weber-dark) !important;
  font-weight: 600;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background: rgba(183, 225, 224, 0.10) !important;
}

/* --------------------------------------------------------------------------
   5) Sidebar (contenedor + fondo)
   -------------------------------------------------------------------------- */
.skin-blue .main-sidebar,
.skin-blue .left-side{
  background-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6) Sidebar - bloque de marca (logo superior)
   -------------------------------------------------------------------------- */
.weber-sidebar-brand{
  padding: 18px 14px 14px 14px;
  margin: 10px 12px 14px 12px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);

  display: flex;
  justify-content: center;
  align-items: center;
}

.weber-brand-logo{
  max-width: 100%;
  height: auto;
  max-height: 90px;
  padding: 6px 0;
}

/* --------------------------------------------------------------------------
   7) Sidebar - menú
   -------------------------------------------------------------------------- */
.skin-blue .sidebar-menu > li > a{
  padding: 14px 16px !important;
  font-size: 16px !important;
  letter-spacing: 0.1px;

  font-family: "Nunito", sans-serif !important;
  font-weight: 600 !important;

  border-left: 4px solid transparent;
}

/* Estados de enlaces */
.skin-blue .sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a:link,
.skin-blue .sidebar-menu > li > a:visited,
.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li > a:focus,
.skin-blue .sidebar-menu > li.active > a{
  color: #2c3e50 !important;
  font-weight: 600 !important;
}

/* Iconos (mismo color en todos los estados) */
.skin-blue .sidebar-menu > li > a .fa,
.skin-blue .sidebar-menu > li > a .fas,
.skin-blue .sidebar-menu > li > a .far,
.skin-blue .sidebar-menu > li.active > a .fa,
.skin-blue .sidebar-menu > li.active > a .fas,
.skin-blue .sidebar-menu > li.active > a .far{
  color: var(--weber-dark) !important;
  opacity: 0.95;
}

/* Hover / activo (solo fondo y borde) */
.skin-blue .sidebar-menu > li > a:hover{
  background: rgba(0,0,0,0.05) !important;
  border-left-color: var(--weber-teal) !important;
}

.skin-blue .sidebar-menu > li.active > a{
  background: rgba(0,0,0,0.08) !important;
  border-left-color: var(--weber-teal) !important;
}

/* Separadores del sidebar */
.skin-blue .sidebar hr{
  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

/* --------------------------------------------------------------------------
   8) Contenido principal
   -------------------------------------------------------------------------- */
.skin-blue .content-wrapper{
  background: var(--bg-app) !important;
}

/* --------------------------------------------------------------------------
   9) Cajas (boxes) / tarjetas
   -------------------------------------------------------------------------- */
.box{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;

  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Mantiene Manrope dentro del contenido de la caja */
.box-body,
.box-body *{
  font-family: inherit !important;
}

/* Cabecera de caja */
.box-header{
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f7 !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
}

/* Título de caja */
.box-header .box-title{
  font-weight: 600 !important;
  color: var(--weber-dark) !important;
  letter-spacing: 0.2px;
}

/* Cajas “primary” */
.box.box-solid.box-primary > .box-header,
.box.box-primary > .box-header{
  background-color: var(--weber-boxes) !important;
  border-bottom: 0 !important;
  color: #ffffff !important;
}

/* Texto e iconos dentro de cabecera “primary” */
.box.box-solid.box-primary > .box-header .box-title,
.box.box-solid.box-primary > .box-header .box-title,
.box.box-primary > .box-header .box-title,
.box.box-solid.box-primary > .box-header .fa,
.box.box-primary > .box-header .fa,
.box.box-solid.box-primary > .box-header .fas,
.box.box-primary > .box-header .fas,
.box.box-solid.box-primary > .box-header .far,
.box.box-primary > .box-header .far,
.box.box-solid.box-primary > .box-header .fab,
.box.box-primary > .box-header .fab{
  color: #ffffff !important;
}



.nodes-info-link, 
.nodes-info-link:hover,
.nodes-info-link:focus {
  color: var(--weber-teal-soft) !important;
  font-weight: 500;
  text-decoration: none;
}

.nodes-info-link i,
.nodes-info-link .fa,
.nodes-info-link .fas,
.nodes-info-link .far,
.nodes-info-link .fab,
.nodes-info-link svg {
  color: var(--weber-teal) !important;  /* icono */
  opacity: 0.95;
}

/* ===========================
   FIX Font Awesome 6
   Evita que Montserrat/Manrope
   sobrescriban la fuente de los iconos
   =========================== */

.fa-solid,
.fa-regular,
.fa-brands {
  font-family: "Font Awesome 6 Free" !important;
}

.fa-solid::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-regular::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}

.fa-brands::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}


.weber-callout{
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 5px solid #f59e0b;
  box-shadow: 0 6px 16px rgba(17,24,39,0.06);
  color: #6b4e00;
}

.weber-callout-warning{
  color: #6b4e00;
}

.weber-callout-close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  opacity: .55;
}

.weber-callout-close:hover{
  opacity: .85;
}