/* =====================================================
   TEMA GRUPO LAMOSA – CHAMILO
   Archivo: default.css
   ===================================================== */

/* -------- PALETA LAMOSA -------- */
:root {
  --lamosa-amarillo: #fde682;
  --lamosa-amarillo-oscuro: #f1a76b;
  --lamosa-naranja: #ce622f;
  --lamosa-naranja-claro: #da7c4c;
  --lamosa-vino: #7f3738;
  --lamosa-rojo: #b83a3f;
  --lamosa-gris: #567482;
  --lamosa-blanco: #ffffff;
  --lamosa-grisCorp:#2f2f2f;
}

/* -------- BASE -------- */
body {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  background-color: var(--lamosa-grisCorp);
  color: var(--lamosa-gris);
}

/* -------- TITULOS -------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--lamosa-vino);
  font-weight: 700;
}

/* -------- HEADER CHAMILO -------- */
#header,
.navbar,
.navbar-default {
  background: linear-gradient(
    90deg,
    var(--lamosa-vino),
    var(--lamosa-rojo)
  );
  border-bottom: 4px solid var(--lamosa-naranja);
}

#header a,
.navbar a {
  color: var(--lamosa-vino);
  font-weight: 600;
}

/* -------- BOTONES -------- */
.btn-primary {
  background-color: var(--lamosa-naranja) !important;
  border: none !important;
  border-radius: 10px;
  padding: 14px 28px;
  font-weight: 700;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--lamosa-naranja-claro) !important;
}

.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--lamosa-naranja) !important;
  color: var(--lamosa-naranja) !important;
  border-radius: 10px;
  padding: 12px 26px;
  font-weight: 700;
}

.btn-default:hover {
  background-color: var(--lamosa-naranja) !important;
  color: #ffffff !important;
}

/* -------- FORMULARIOS -------- */
input,
select,
textarea {
  border-radius: 10px;
  border: 2px solid var(--lamosa-vino);
  padding: 14px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--lamosa-amarillo-oscuro);
  box-shadow: 0 0 0 3px rgba(241,167,107,.4);
}

/* -------- ERRORES -------- */
.alert-danger,
.form-error,
.error {
  background-color: var(--lamosa-rojo);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
}

/* -------- TARJETAS / CURSOS -------- */
.card,
.panel,
.course-box {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* -------- LOGIN -------- */
.login-box,
.login-form {
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 32px;
}

/* -------- FOOTER -------- */
#footer,
footer {
  background-color: var(--lamosa-vino);
  color: #ffffff;
}
/* Inyecta el logo antes del menú */
.navbar .navbar-header::before {
  content: "";
  background-image: url('/web/assets/images/Lamosa.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;

  display: block;
  width: 240px;
  height: 60px;

  margin: 10px 20px 10px 10px;
  float: left;
}

/* Empuja el menú a la derecha */
.navbar-nav {
  margin-left: 260px !important;
}

/* Oculta cualquier texto interno */
.navbar-brand *,
#header-brand * {
  display: none !important;
}



/* =====================================
   ZONA SUPERIOR BLANCA (LOGO) – FIJA
   ===================================== */

/* Contenedor del header */
header,
#header {
  background-color: #2f2f2f !important;
}

/* Contenedor interno donde está el logo */
header .container,
#header .container,
.navbar > .container,
.navbar > .container-fluid {
  background-color: #2f2f2f !important;
}
/* =====================================
   BARRA DE MENÚ COMPLETAMENTE ROJA
   ===================================== */

/* Fondo del navbar */
.navbar,
.navbar-default {
  background-color: #b83a3f !important;
  background-image: none !important;
}

/* Contenedor interno (centro) */
.navbar > .container,
.navbar > .container-fluid {
  background-color: #b83a3f !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Evita bordes o sombras que cortan el color */
.navbar-default,
.navbar {
  border: none !important;
}
/* =====================================
   TEXTO DEL MENÚ SOBRE BARRA ROJA
   ===================================== */

/* Texto normal del menú */
.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;          /* Blanco */
  font-weight: 600;
}

/* Hover */
.navbar-default .navbar-nav > li > a:hover {
  color: #fde682 !important;          /* Amarillo Lamosa */
  background-color: transparent !important;
}

/* Opción activa (la página actual) */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #7f3738 !important; /* Vino Lamosa */
  color: #ffffff !important;
}
/* =====================================
   REDUCCIÓN FORZADA DE ALTURA – BARRA ROJA
   ===================================== */

/* Hacemos la barra un flex container */
.navbar,
.navbar-default {
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 0 !important;
}

/* El contenedor interno NO debe estirar la barra */
.navbar > .container,
.navbar > .container-fluid {
  display: flex !important;
  align-items: center !important;
  height: 58px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Menú */
.navbar-nav {
  display: flex !important;
  align-items: center !important;
  height: 58px !important;
}

/* Enlaces del menú */
.navbar-nav > li > a {
  padding: 0 14px !important;
  height: 58px !important;
  line-height: 58px !important;
  display: flex !important;
  align-items: center !important;
}
/* =====================================
   REDUCCIÓN REAL FRANJA NEGRA (LOGO)
   ===================================== */

/* Navbar general */
.navbar,
.navbar-default {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contenedor del logo */
.navbar-brand {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  height: auto !important;
  line-height: normal !important;
}

/* Imagen del logo */
.navbar-brand img {
  max-height: 38px !important;
  width: auto;
}

/* Contenedor del usuario (avatar derecha) */
.navbar .navbar-right,
.navbar .navbar-nav.navbar-right {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Icono de usuario */
.navbar .navbar-right img,
.navbar .navbar-right .avatar {
  height: 32px !important;
  width: 32px !important;
}
/* =====================================
   REDUCIR FRANJA NEGRA (CONTAINER SUPERIOR)
   ===================================== */

/* SOLO el container directo del header/navbar */
.navbar > .container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Logo dentro del header */
.navbar > .container .navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Imagen del logo */
.navbar > .container .navbar-brand img {
  max-height: 36px !important;
  width: auto;
}

/* Área del usuario (icono derecha) */
.navbar > .container .navbar-nav.navbar-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}/* =====================================
   REDUCIR FRANJA NEGRA DEL LOGO (REAL)
   ===================================== */

/* Quitar altura extra del row */
header .row,
.navbar .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Quitar padding vertical de las columnas */
header [class^="col-"],
.navbar [class^="col-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contenedor del logo */
header .logo,
.navbar .logo {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin: 0 !important;
}

/* Imagen del logo */
#header-logo {
  max-height: 48px !important;
  width: auto !important;
  margin: 0 !important;
}

/* Contenedor derecho (usuario / notificaciones) */
.header-ol,
.section-notifications {
  margin: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* =====================================
   CENTRADO REAL DEL TEXTO EN BARRA ROJA
   (BOOTSTRAP 3 – CORRECTO)
   ===================================== */

/* Altura visual de la barra roja */
.navbar {
  min-height: 54px; /* puedes ajustar luego */
}

/* Texto del menú: AQUÍ SE CORRIGE */
.navbar-nav > li > a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 54px;                /* MISMO valor que navbar */
  line-height: 54px;           /* ESTO es lo que centra */
}
/* =====================================
   CENTRAR TEXTO MENÚ CHAMILO (my-course)
   ===================================== */

/* Altura real de la barra roja */
.navbar {
  min-height: 54px;
}

/* CORRECCIÓN DIRECTA SOBRE my-course */
.navbar-nav > li.my-course > a {
  height: 54px !important;
  line-height: 54px !important;   /* ESTO es lo que lo baja */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block;
}

/* Asegura que TODOS los items se comporten igual */
.navbar-nav > li > a {
  height: 54px !important;
  line-height: 54px !important;
}
/* =====================================================
   BAJAR MENÚ DENTRO DE LA BARRA ROJA
   (SIN MOVER LA BARRA)
   ===================================================== */

/* Contenedor real del menú */
.navbar-nav {
  position: relative;
  top: 28px;   /* AJUSTA ESTE VALOR SI QUIERES MÁS ABAJO */
}

/* Ítems del menú de Chamilo */
.navbar-nav > li.my-course,
.navbar-nav > li {
  position: relative;
  top: 0;
}

/* Enlaces */
.navbar-nav > li > a {
  line-height: normal !important;
}
/* =====================================
   FONDO GENERAL – MÁS CLARO
   ===================================== */

body {
  background-color: #3a3a3a;
}
/* Contenido central */
#main,
.main-content,
#center-content {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 6px;
}
/* =====================================
   PANEL LATERAL IZQUIERDO
   ===================================== */

.panel,
.panel-default,
.block {
  background-color: #ffffff;
  border-left: 6px solid #ce622f;
  border-radius: 6px;
}

/* Títulos del panel */
.panel-heading,
.block-title {
  background-color: #fde682;
  color: #7f3738;
  font-weight: 700;
}
/* =====================================
   TITULOS
   ===================================== */

h1, h2, h3 {
  color: #7f3738;
}
/* Mensaje principal */
.alert-success,
.alert-info {
  background-color: #fde682;
  border-color: #ce622f;
  color: #7f3738;
}
/* Links internos */
.main-content a {
  color: #ce622f;
  font-weight: 600;
}

.main-content a:hover {
  color: #b83a3f;
}
/* =====================================
   ICONOS FONT AWESOME – GRUPO LAMOSA
   ===================================== */

.fa,
.fas,
.far,
.fab {
  color: #ce622f; /* Naranja Lamosa */
}

/* Hover */
a:hover .fa,
a:hover .fas,
a:hover .far {
  color: #b83a3f; /* Rojo Lamosa */
}
/* Iconos tipo imagen pequeños */
.main-content img,
.panel img,
.block img {
  filter: grayscale(20%);
  transition: all 0.2s ease;
}

/* Hover */
a:hover img {
  filter: none;
}
/* =====================================
   ICONOS DEL PANEL LATERAL
   ===================================== */

.panel ul li img,
.block ul li img {
  background-color: #fde682; /* Amarillo Lamosa */
  border-radius: 6px;
  padding: 4px;
}
/* Avatar usuario */
.navbar img,
.user-avatar,
img.avatar {
  border-radius: 50%;
  border: 2px solid #ce622f;
}
/* Iconos de notificación */
.section-notifications img,
#notifications img {
  background-color: #ce622f;
  padding: 3px;
  border-radius: 50%;
}
/* =====================================
   ENLACES PANEL LATERAL – BASE
   ===================================== */

.panel ul li a,
.block ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}
/* =====================================
   HOVER ENLACES PANEL – GRUPO LAMOSA
   ===================================== */

.panel ul li a:hover,
.block ul li a:hover {
  background-color: #fde682;      /* Amarillo Lamosa */
  color: #7f3738;                 /* Vino */
  border-left: 4px solid #ce622f; /* Naranja Lamosa */
  padding-left: 14px;             /* Compensa el borde */
  text-decoration: none;          /* Quita subrayado */
}
/* Icono dentro del enlace */
.panel ul li a:hover img,
.block ul li a:hover img {
  filter: none;
  transform: scale(1.05);
}
/* =====================================
   FUENTE CORPORATIVA – PANEL LATERAL
   ===================================== */

.panel ul li a,
.block ul li a {
  font-family: "Soleil", "Segoe UI", "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.panel ul li a img,
.block ul li a img {
  margin-right: 8px;
}
.panel ul li a:hover,
.block ul li a:hover {
  font-family: "Soleil", "Segoe UI", "Montserrat", Arial, sans-serif;
}
/* =====================================
   HOVER MENÚ SUPERIOR – GRUPO LAMOSA
   ===================================== */

/* Estilo base del enlace */
.navbar-nav > li > a {
  transition: background-color 0.25s ease, color 0.25s ease;
  text-decoration: none;
  font-family: "Soleil", "Segoe UI", "Montserrat", Arial, sans-serif;
  font-weight: 600;
}

/* Hover */
.navbar-nav > li > a:hover {
  background-color: #7f3738;   /* Vino Lamosa */
  color: #ffffff;
  text-decoration: none;
}
/* Opción activa */
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  background-color: #b83a3f;   /* Rojo Lamosa */
  color: #ffffff;
}
.navbar-nav > li > a {
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 4px;
}
/* =====================================
   HOVER AVANZADO MENÚ SUPERIOR – LAMOSA
   ===================================== */

/* Base del enlace */
.navbar-nav > li.my-course > a,
.navbar-nav > li > a {
  position: relative;
  transition: 
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
  border-radius: 6px;
}

/* Hover */
.navbar-nav > li.my-course > a:hover,
.navbar-nav > li > a:hover {
  background-color: #7f3738; /* Vino Lamosa */
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transform: translateY(2px); /* efecto botón */
  text-decoration: none;
}
/* Opción activa */
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  background-color: #b83a3f; /* Rojo Lamosa */
  color: #ffffff;
  box-shadow: inset 0 -3px 0 #fde682; /* línea amarilla corporativa */
}
/* Línea inferior animada */
.navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  background-color: #fde682;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.navbar-nav > li > a:hover::after {
  opacity: 1;
}
/* =====================================
   ICONOS PANEL LATERAL – ESTILO LAMOSA
   ===================================== */

.panel ul li a img,
.block ul li a img {
  background-color: #fde682;      /* Amarillo Lamosa */
  border-radius: 10px;
  padding: 6px;
  transition: all 0.2s ease;
}

/* Hover */
.panel ul li a:hover img,
.block ul li a:hover img {
  background-color: #ce622f;      /* Naranja Lamosa */
}
/* Ocultar Página principal en login */
body.section-login .navbar-nav > li.my-course {
  display: none !important;
}
/* Ocultar bloque Forum en login */
body.section-login .block a[href*="forum"] {
  display: none !important;
}

/* Si el título del bloque es "General" */
body.section-login .block-title:has(+ ul a[href*="forum"]) {
  display: none !important;
}

body.section-login .block-title:has(+ ul a[href*="forum"]) + ul {
  display: none !important;
}
/* Asegurar que el formulario de login siga visible */
body.section-login #login_box,
body.section-login .login-form {
  display: block !important;
}
/* =====================================================
   LOGIN: OCULTAR "PÁGINA PRINCIPAL" Y "FORUM" ÚNICAMENTE
   ===================================================== */

/* ---- Cuando existe el login_box estamos en login ---- */
body:has(#login_box) {

  /* Ocultar enlace "Página principal" del menú */
  .navbar-nav > li:has(> a[title*="Página principal"]),
  .navbar-nav > li:has(> a span:contains("Página principal")) {
    display: none !important;
  }

  /* Ocultar enlace Forum */
  a[href*="forum"],
  a[href*="forum.php"] {
    display: none !important;
  }

  /* Si el Forum está dentro de un bloque, ocultar solo ese bloque */
  .block:has(a[href*="forum"]),
  .block:has(a[href*="forum.php"]) {
    display: none !important;
  }
}
/* =====================================================
   CORRECCIÓN LOGIN – RESTAURAR FORMULARIO
   ===================================================== */

/* Asegurar que el formulario de login SI se vea */
.section-login #login_box,
.section-login .login-form,
.login #login_box,
.login .login-form {
  display: block !important;
}
/* =====================================================
   LOGIN LIMPIO – OCULTAR SOLO MENÚ Y LATERAL
   ===================================================== */

/* Ocultar menú superior */
.section-login .navbar-nav,
.section-login .navbar-right,
.login .navbar-nav,
.login .navbar-right {
  display: none !important;
}

/* Ocultar SOLO el panel izquierdo (forum, general) */
.section-login #left_column,
.login #left_column {
  display: none !important;
}
/* =====================================================
   CENTRAR LOGIN EN TODA LA PÁGINA
   ===================================================== */

/* Solo en la página de login */
body:has(#login_box) {

  /* Usamos flex para centrar */
  display: flex;
  flex-direction: column;
}

/* Contenedor principal del contenido */
body:has(#login_box) main,
body:has(#login_box) #page {
  display: flex;
  justify-content: center;   /* centro horizontal */
  align-items: center;       /* centro vertical */
  flex: 1;
}

/* Caja del login */
body:has(#login_box) #login_box {
  margin: 0 !important;
  max-width: 420px;          /* ancho elegante */
  width: 100%;
}

/* Opcional: efecto tarjeta */
body:has(#login_box) #login_box {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 20px;
}
/* =====================================================
   LOGIN CENTRADO DEFINITIVO (ROBUSTO)
   ===================================================== */

/* Centrar el login en pantalla */
#login_box {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  max-width: 360px;
  width: 90%;
  z-index: 1000;
}

/* Estilo tipo tarjeta (opcional pero recomendado) */
#login_box {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
/* =====================================================
   LOGIN CENTRADO REAL (NEUTRALIZA BOOTSTRAP)
   ===================================================== */

/* Solo cuando existe el login */
body:has(#login_box) .row {
  display: flex;
  justify-content: center;
}

/* Columna que contiene el login */
body:has(#login_box) .row > div {
  float: none !important;
}

/* Forzar tamaño y centrado del login */
body:has(#login_box) #login_box {
  max-width: 360px;
  width: 100%;
  margin: 40px auto;
}

/* Ocultar cualquier otra columna (Forum, etc.) */
body:has(#login_box) .row > div:not(:has(#login_box)) {
  display: none !important;
}
/* =====================================================
   LOGIN CENTRADO REAL (SEGÚN HTML REAL DE CHAMILO)
   ===================================================== */

/* Solo en login */
.section-login {

  /* Ocultar la columna grande vacía */
  .col-md-9.col-md-push-3 {
    display: none !important;
  }

  /* Columna del login: quitar grid Bootstrap */
  .col-md-3.col-md-pull-9 {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Sidebar del login */
  .sidebar {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Caja del login */
  #login-block {
    max-width: 360px;
    width: 100%;
    margin: 60px auto;
  }
}

/* Estilo tipo tarjeta (opcional pero recomendado) */
.section-login #login-block {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  padding: 24px;
}
/* =====================================================
   CENTRAR LOGIN SIN ROMPER EL GRID
   ===================================================== */

/* Solo en la página de login */

/* Darle aire vertical */
.section-login #login-block {
  margin-top: 60px;
}

/* Estilo tipo tarjeta (opcional) */
.section-login #login-block {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
/* =====================================================
   CENTRADO CORRECTO DEL LOGIN (SIN ROMPER BOOTSTRAP)
   ===================================================== */

/* El row del login será el referente */


/* Posicionar el login en el centro visual */
.section-login #login-block {
  
  top: 40px;                 /* ajusta si lo quieres más arriba/abajo */

  max-width: 360px;
  width: 100%;

  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  z-index: 10;
}
/* =====================================================
   CENTRADO CORRECTO DEL LOGIN (SIN CORTES)
   ===================================================== */

/* SOLO en la página de login */
.section-login {

  /* Neutralizar el empuje del grid */
  .col-md-pull-9,
  .col-md-push-3 {
    left: auto !important;
    right: auto !important;
  }

  /* Columna que contiene el login */
  .col-md-3.col-md-pull-9 {
    float: none !important;
    width: 100% !important;
    max-width: 420px;
    margin: 60px auto !important;
  }

  /* Asegurar que el login se vea completo */
  #login-block {
    width: 100%;
  }

  /* Centrar el contenedor */
  .sidebar {
    float: none !important;
  }
}

/* Estilo tarjeta (opcional, visual) */
.section-login #login-block {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}