.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }


#main_submenu {
  display: none !important;
}

@media screen and (min-width: 1408px) {
  .navbar .container {
      max-width: 1540px;
      margin-left: 30px;
      max-width: 100%;
  }
}

#main-container {
  margin-left: 30px;
  margin-right: 30px;
}

@media screen and (max-width: 1408px) {
  #main-container {
      margin-left: 10px !important;
      margin-right: 10px !important;
  }
}

.navbar .container {
  max-width: 1540px !important;
  margin-left: 20px !important;
  max-width: 100% !important;
}

/* Sobrescribir las reglas de Bulma para container en pantallas grandes */
/* Cálculo: 100vw - sidebar(300px) - margin-left(30px) - margin-right(30px) - padding-right(30px) = 100vw - 390px */
@media screen and (min-width: 1216px) {
  .container {
    max-width: calc(100vw - 410px) !important;
  }
}

@media screen and (min-width: 1408px) {
  .container {
    max-width: calc(100vw - 410px) !important;
  }
}

/* Para pantallas más pequeñas, ajustar según el sidebar
/* Cálculo: 100vw - sidebar(300px) - margin-left(10px) - margin-right(10px) - padding-right(30px) = 100vw - 350px */
@media screen and (max-width: 1215px) and (min-width: 1024px) {
  .container {
    max-width: calc(100vw - 380px) !important;
  }
} 

/* Para móvil/tablet sin sidebar */
/* Cálculo: 100vw - margin-left(10px) - margin-right(10px) - padding mínimo(20px) = 100vw - 40px */
@media screen and (max-width: 1023px) {
  .container {
    max-width: calc(100vw - 60px) !important;
  }
}


/* Para móvil/tablet sin sidebar */
/* Cálculo: 100vw - margin-left(10px) - margin-right(10px) - padding mínimo(20px) = 100vw - 40px */
@media screen and (max-width: 768px) {
  .container {
    max-width: calc(100vw - 80px) !important;
  }
}

  /* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


.hero {
  background-image: url("../assets/logo_background.png");
  background-position: center center;
  background-repeat:no-repeat;
}


.nested.dropdown:hover > .dropdown-menu {
  display: block;
}
.nested.dropdown .dropdown-menu {
  top: -5px;
  margin-left: 100%;
}
.nested.dropdown .dropdown-trigger button::after {
  content: " ›";
}
.nested.dropdown .dropdown-trigger button {
  padding: 0px 0px;
  border: 0px;
  font-size: 14px;
  font-weight: 400;
  height: 2em;
}

.is-inactive-menu {
  color: #ccc;
}

/* used to align items always on top */
.is-top-items {
  align-items: start !important;
}


/* dropzone extension */
.dropzone {
  border: 2px dashed #ddd !important;
  margin: 0px !important;
  background: transparent !important;
  border: 2px dashed #ccc;
  border-radius: 10px !important;
  min-height: 200px !important;

}

.navbar.is-info {
  z-index: 31;
}

#main_submenu {
  z-index: 30;
}

navbar-link:not(.is-arrowless)::after {
  color: #ccc !important;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #ccc !important;
}


.breadcrumb {
  background-color: transparent;
  font-size: 14px !important;
  line-height: 1rem !important;
  padding: 0px;
  margin: 0px;
}

.breadcrumb li span {
  display: inline-block;
  margin: 5px;
  color: #bbb;
}

.breadcrumb li span.is-active {
  color: black;
}

.breadcrumb li:first-child {
  margin-left: -5px;
}


.image_meta_content {
  word-break: break-word;
}

.navbar {
    min-height: 1.25rem !important;
    font-size: 14px;
}

/* #user-nav {
  background-color: #3498db !important;
  position: relative;
}

#user-nav .navbar-dropdown.is-right {
  color: blue;
  position: absolute;
  z-index: 999 !important;
} */

/* Estilos personalizados para las pestañas */
.tabs.is-boxed li.is-active a {
  background-color: #ffffff !important; /* Gris claro */
  border-color: #dbdbdb !important;
  border-bottom-color: #f5f5f5 !important;
  color: #3273dc !important; /* Azul para el texto */
}

.tabs.is-boxed a {
  border-radius: 4px 4px 0 0;
  border: 1px solid transparent;
  padding: 0.5em 1em;
}

.tabs.is-boxed li.is-active {
  border-bottom-color: transparent !important;
}

/* Añadir un poco de espacio entre las pestañas y el contenido */
.tabs.is-boxed {
  /* margin-bottom: 1rem !important; */
}

/* Estilo personalizado para los formularios de configuración */
.config-form-box {
  /* width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem !important; */
}

/* Custom content type colors - Actualizados con paleta blinkbrain.es */
.has-text-article {
  background-color: #0693e3 !important; /* Azul claro */
  color: white !important;
}

.has-text-gallery {
  background-color: #0693e3 !important; /* Azul claro */
  color: white !important;
}

.has-text-video {
  background-color: #b86bff !important; /* Púrpura - mantener */
  color: white !important;
}

.has-text-audio {
  background-color: #ff3860 !important; /* Rojo - mantener */
  color: white !important;
}

/* Sobrescritura para reducir la sombra de los elementos .box */
.box {
  box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1) !important;
}

/* Compact tag styling for small badges (publish date, markets, etc.) */
.tag--compact,
.tag.tag--compact,
.tag.tag--compact.is-size-6 {
  padding: 0.25rem 0.5rem !important;   /* more padding to look like buttons */
  border: none !important; /* no border */
  border-radius: 12px !important; /* same border-radius as buttons */
  font-weight: 500 !important; /* slightly bolder text like buttons */
  font-size: 0.75rem !important; /* smaller text size */
}

/* === Base step: publication + languages (grey block) === */
#client-options-template {
  font-size: 14px; /* similar to check step */
}
#client-options-template .has-text-grey-light { /* inline labels */
  display: inline-flex;
  align-items: center;
}
#client-options-template select {
  height: 28px;
  padding: 2px 6px;            /* left/right base padding */
  padding-right: 2.5em;        /* extra room for dropdown icon */
  line-height: 24px;
}
#client-options-template #languagecontainer {
  display: inline-block;
}
#client-options-template #languagecontainer .lang-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  margin-top: 4px;
}
#client-options-template #languagecontainer .lang-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  accent-color: #0693e3; /* modern native checkbox color - azul claro blinkbrain.es */
}

/* Sobrescribir colores de Bulma con paleta blinkbrain.es */
/* Azul oscuro (#007cba) para reemplazar naranja/warning */
.button.is-warning,
.button.is-warning:hover,
.button.is-warning:focus,
.button.is-warning:active {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: white !important;
}

.button.is-warning.is-light {
  background-color: rgba(0, 124, 186, 0.1) !important;
  color: #007cba !important;
}

/* Azul claro (#0693e3) para reemplazar verde/success y azul/primary/info/link */
.button.is-success,
.button.is-success:hover,
.button.is-success:focus,
.button.is-success:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
}

.button.is-success.is-light {
  background-color: rgba(15, 129, 166, 0.1) !important;
  color: #0f81a6 !important;
}

.button.is-primary,
.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
}

.button.is-info,
.button.is-info:hover,
.button.is-info:focus,
.button.is-info:active {
  background-color: #72c2dc !important; /* Azul claro de blinkbrain.es */
  border-color: #72c2dc !important;
  color: white !important;
}

.button.is-info.is-light {
  background-color: rgba(114, 194, 220, 0.1) !important;
  color: #72c2dc !important;
}

.button.is-link,
.button.is-link:hover,
.button.is-link:focus,
.button.is-link:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
}

/* Actualizar tabs con azul claro */
.tabs.is-boxed li.is-active a {
  background-color: #ffffff !important;
  border-color: #dbdbdb !important;
  border-bottom-color: #f5f5f5 !important;
  color: #0693e3 !important; /* Azul claro para el texto */
}

/* Asegurar que todos los botones tengan la misma redondez, incluso is-rounded */
.button.is-rounded {
  border-radius: 12px !important;
}

/* Actualizar file-cta con azul claro (reemplaza verde) y misma redondez que botones */
.file-cta,
.file-cta.is-hovered,
.file-cta.is-hovered:hover,
.file-cta.is-hovered:focus,
.file-cta.is-hovered:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
  border-radius: 12px !important;
}

.file.is-primary .file-cta,
.file.is-primary .file-cta:hover,
.file.is-primary .file-cta:focus,
.file.is-primary .file-cta:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
  border-radius: 12px !important;
}

/* Actualizar tags con azul de is-link y más redondeados */
.tag {
  border-radius: 12px !important;
}

.tag.is-warning {
  background-color: #0f81a6 !important;
  color: white !important;
}

/* Tags with is-light modifier - styled like outlined buttons */
.tag.is-warning.is-light,
.tag.tag--compact.is-warning.is-light,
.tag.tag--compact.is-size-6.is-warning.is-light {
  background-color: rgba(15, 129, 166, 0.1) !important; /* very light background like button.is-light */
  color: #0f81a6 !important; /* text color */
  border: none !important; /* no border */
}

.tag.is-info {
  background-color: #0f81a6 !important;
  color: white !important;
}

.tag.is-success {
  background-color: #0f81a6 !important;
  color: white !important;
}

/* Actualizar botón outlined con azul de is-link */
.button.is-primary.is-outlined {
  background-color: transparent !important;
  border-color: #0f81a6 !important;
  color: #0f81a6 !important;
}

.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined:focus,
.button.is-primary.is-outlined:active {
  background-color: #0f81a6 !important;
  border-color: #0f81a6 !important;
  color: white !important;
}