/* Tema corporativo "Corporativo Azul" – Chamilo 1.11.x – marca blanca
   PERSONALIZAR LA EMPRESA: cambie SOLO las variables de este bloque. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap');
:root{
  --marca:#0b5cff;          /* color principal de la empresa */
  --marca-oscuro:#0742b8;     /* variante oscura (hover) */
  --acento:#00a3a3;        /* color secundario / insignias */
  --cabecera:#ffffff;         /* fondo de la cabecera */
  --cabecera-texto:#374151;  /* texto del menú */
  --fondo:#f5f7fb;
  --texto:#1f2937;--gris:#6b7280;--borde:#e5e7eb;
  --radio:10px;
  --logo-alto:52px;           /* tamaño del logo */
  --logo-margen:8px 0;
}
body{background:var(--fondo);color:var(--texto);font-family:'Inter',Arial,sans-serif;font-size:15px}
h1,h2,h3,h4,.page-header h2,.panel-title{font-family:'Montserrat','Inter',sans-serif;font-weight:700;color:#111827;letter-spacing:-.2px}
a{color:var(--marca)}a:hover,a:focus{color:var(--marca-oscuro);text-decoration:none}
/* Cabecera y logo */
#header,.header{background:var(--cabecera);box-shadow:0 1px 0 var(--borde)}
#header .logo,#logo,.navbar-brand{padding:var(--logo-margen)}
#header .logo img,#logo img,.navbar-brand img{height:var(--logo-alto);width:auto;max-height:none}
.navbar-default{background:var(--cabecera);border:0;border-radius:0;border-bottom:1px solid var(--borde);margin-bottom:0;box-shadow:0 2px 8px rgba(17,24,39,.04)}
.navbar-default .navbar-nav>li>a{color:var(--cabecera-texto);font-weight:500;font-size:14px}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.open>a{background:transparent;color:var(--marca);box-shadow:inset 0 -3px 0 var(--marca)}
.dropdown-menu{border:1px solid var(--borde);border-radius:var(--radio);box-shadow:0 12px 30px rgba(17,24,39,.12);padding:6px}
.dropdown-menu>li>a{border-radius:6px}.dropdown-menu>li>a:hover{background:var(--fondo);color:var(--marca)}
/* Portada y catálogo de cursos */
.jumbotron,.announcements{background:linear-gradient(120deg,var(--marca),var(--marca-oscuro));color:#fff;border-radius:var(--radio)}
.jumbotron h1,.jumbotron h2{color:#fff}
.page-header{border-bottom:1px solid var(--borde)}
.breadcrumb{background:transparent;padding:10px 0;font-size:13px}.breadcrumb>.active{color:var(--marca)}
.panel,.panel-default,.well{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:0 1px 3px rgba(17,24,39,.06)}
.panel-default>.panel-heading{background:#fff;border-bottom:1px solid var(--borde);border-radius:var(--radio) var(--radio) 0 0;font-weight:600}
.items-course,.course-item,.thumbnail,.grid-courses .items{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;transition:transform .2s,box-shadow .2s}
.items-course:hover,.course-item:hover,.thumbnail:hover,.grid-courses .items:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(17,24,39,.12);border-color:transparent}
.items-course .image img,.thumbnail img{width:100%;object-fit:cover}
.items-course .category,.course-category{background:var(--acento);color:#fff;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:600}
.progress{border-radius:999px;background:#eef0f3;height:8px}.progress-bar{background:var(--marca)}
/* Botones */
.btn{border-radius:8px;font-weight:600;padding:8px 16px}
.btn-primary,.btn-success{background:var(--marca);border-color:var(--marca);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-success:hover{background:var(--marca-oscuro);border-color:var(--marca-oscuro)}
.btn-default{background:#fff;border-color:var(--borde);color:var(--texto)}.btn-default:hover{border-color:var(--marca);color:var(--marca)}
.label-primary,.badge{background:var(--acento)}
/* Formularios y tablas */
.form-control{border-radius:8px;border-color:var(--borde)}
.form-control:focus{border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 20%,transparent)}
.table>thead>tr>th,.data_table th{background:#f9fafb;color:var(--gris);font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--borde)}
.nav-tabs>li.active>a{border-top:3px solid var(--marca);color:var(--marca)}
.pagination>.active>a{background:var(--marca);border-color:var(--marca)}
/* Pie */
footer,#footer,.footer{background:#111827;color:#9ca3af;padding:28px 0;margin-top:40px;border-top:4px solid var(--marca)}
footer a,#footer a{color:#fff}
@media(max-width:768px){:root{--logo-alto:40px}}

/* Ocultar el aviso publicitario de chamilo.org en Administración */
#chamilo-news{display:none !important}

/* ===== BLOQUES LATERALES (Perfil, Cursos, Competencias) – tarjetas redondeadas y opciones como botones con ícono =====
   Estructura real de Chamilo 1.11: .sidebar .panel > .panel-body > ul.list-group > li.list-group-item > span.item-icon + a */
.sidebar .panel-group{margin-bottom:18px}
.sidebar .panel{border:1px solid var(--borde);border-radius:18px !important;overflow:hidden;box-shadow:0 4px 14px rgba(17,24,39,.06)}
.sidebar .panel-heading{background:linear-gradient(120deg,var(--marca),var(--marca-oscuro)) !important;border:0 !important;border-radius:0 !important;padding:14px 18px}
.sidebar .panel-heading,.sidebar .panel-heading a,.sidebar .panel-title,.sidebar .panel-title a{color:#fff !important;font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:15px;text-decoration:none}
.sidebar .panel-body{padding:14px}
.sidebar .list-group{margin:0;padding:0}
.sidebar .list-group-item{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--borde) !important;border-radius:12px !important;margin:0 0 8px;padding:9px 14px;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;cursor:pointer}
.sidebar .list-group-item:last-child{margin-bottom:0}
.sidebar .list-group-item .item-icon{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--marca) 10%,#fff);border-radius:9px;transition:background .2s}
.sidebar .list-group-item .item-icon img{width:22px;height:22px;margin:0}
.sidebar .list-group-item>a{color:var(--texto);font-weight:500;font-size:14px;line-height:1.3;text-decoration:none}
.sidebar .list-group-item>a::after{content:"";position:absolute;inset:0;border-radius:12px} /* toda la tarjeta es clicable */
.sidebar .list-group-item:hover,.sidebar .list-group-item:focus-within,.sidebar .list-group-item.active{background:var(--marca);border-color:var(--marca) !important;transform:translateX(3px);box-shadow:0 6px 14px color-mix(in srgb,var(--marca) 30%,transparent)}
.sidebar .list-group-item:hover>a,.sidebar .list-group-item:focus-within>a,.sidebar .list-group-item.active>a{color:#fff}
.sidebar .list-group-item:hover .item-icon,.sidebar .list-group-item.active .item-icon{background:#fff}
/* Por si algún bloque usa el menú alternativo */
.sidebar .nav-pills.nav-stacked>li{margin:0 0 8px}
.sidebar .nav-pills.nav-stacked>li>a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:9px 14px;color:var(--texto);font-weight:500}
.sidebar .nav-pills.nav-stacked>li>a:hover{background:var(--marca);border-color:var(--marca);color:#fff}
.sidebar #login-block .btn,.sidebar .btn{border-radius:12px}

/* ===== BORDE DORADO de los bloques laterales – cambie el color o el grosor aquí ===== */
:root{--dorado:#c9a227;--dorado-grosor:2px}
.sidebar .panel{border:var(--dorado-grosor) solid var(--dorado) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--dorado) 12%,transparent),0 6px 18px rgba(17,24,39,.08) !important}
.sidebar .panel-heading{border-bottom:var(--dorado-grosor) solid var(--dorado) !important}

/* ===== CORRECCION ICONOS: Chamilo (base.css) coloca .item-icon en posición absoluta fuera del botón; se integra dentro ===== */
.sidebar .list-group-item{margin-left:0 !important;padding:9px 12px !important}
.sidebar .list-group-item .item-icon{position:static !important;left:auto !important;margin:0 !important;text-align:center}

/* ===== CAJA DEL CONTENIDO PRINCIPAL de la portada (texto de la derecha) ===== */
#home-include,#home-welcome{background:#fff;border:var(--dorado-grosor) solid var(--dorado);border-radius:20px;padding:32px 36px;margin-bottom:24px;box-shadow:0 0 0 4px color-mix(in srgb,var(--dorado) 12%,transparent),0 8px 24px rgba(17,24,39,.07)}
#home-include h1,#home-include h2,#home-welcome h1,#home-welcome h2{margin-top:0}
#home-include ol,#home-include ul{padding-left:22px}
#home-include li{margin-bottom:8px;line-height:1.55}
#home-include p{line-height:1.6}
@media(max-width:768px){#home-include,#home-welcome{padding:20px}}

/* ===== BORDE GRIS DE LOS BOTONES laterales – más marcado (ajuste tono y grosor aquí) ===== */
:root{--boton-borde:#9ca3af;--boton-borde-grosor:1.5px}
.sidebar .list-group-item{border:var(--boton-borde-grosor) solid var(--boton-borde) !important}
.sidebar .list-group-item:hover,.sidebar .list-group-item:focus-within,.sidebar .list-group-item.active{border-color:var(--marca) !important}

/* ===== LINEAS DORADAS DEL MENU: arriba (debajo del logo) y abajo de las opciones ===== */
.navbar-default{border-top:var(--dorado-grosor) solid var(--dorado) !important;border-bottom:var(--dorado-grosor) solid var(--dorado) !important;box-shadow:0 2px 10px color-mix(in srgb,var(--dorado) 18%,transparent) !important}

/* ===== CAJA DE BIENVENIDA (Mis cursos) con borde dorado ===== */
#homepage-course{border:var(--dorado-grosor) solid var(--dorado);border-radius:18px !important;padding:24px 28px;margin-bottom:24px;line-height:1.65;font-size:15px;box-shadow:0 0 0 4px color-mix(in srgb,var(--dorado) 12%,transparent),0 8px 24px rgba(17,24,39,.10)}
#homepage-course a{color:#fff;text-decoration:underline}


/* ===== FOTO DEL MENU SUPERIOR DERECHO: círculo con borde dorado ===== */
.navbar .avatar-user>a>img.img-circle{border:2px solid var(--dorado) !important;padding:2px;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--dorado) 20%,transparent);transition:box-shadow .2s}
.navbar .avatar-user>a:hover>img.img-circle,.navbar .avatar-user.open>a>img.img-circle{box-shadow:0 0 0 4px color-mix(in srgb,var(--dorado) 35%,transparent)}
.navbar .avatar-user .user-header img.img-circle{border:3px solid var(--dorado) !important;padding:3px;background:#fff}

/* ===== CAJA DE BIENVENIDA – PROPUESTA A: tarjeta blanca, ícono con aro dorado y línea dorada vertical ===== */
#homepage-course{position:relative;background:#fff !important;color:var(--texto) !important;border:var(--dorado-grosor) solid var(--dorado) !important;border-radius:18px !important;padding:24px 28px 24px 104px !important;line-height:1.7;font-size:15px;min-height:110px;box-shadow:0 0 0 4px color-mix(in srgb,var(--dorado) 12%,transparent),0 8px 24px rgba(17,24,39,.08) !important}
#homepage-course::before{content:"\f19d";font-family:FontAwesome;position:absolute;left:28px;top:24px;width:52px;height:52px;box-sizing:border-box;border-radius:50%;background:color-mix(in srgb,var(--marca) 10%,#fff);color:var(--marca);font-size:24px;display:flex;align-items:center;justify-content:center;border:2px solid var(--dorado)}
#homepage-course::after{content:"";position:absolute;left:53px;top:84px;bottom:28px;width:2px;border-radius:2px;background:linear-gradient(var(--dorado),color-mix(in srgb,var(--dorado) 35%,transparent))}
#homepage-course .normal-message::first-line{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:19px;color:var(--marca)}
#homepage-course a{color:var(--marca);text-decoration:underline}
#homepage-course .btn-primary{color:#fff;text-decoration:none;margin-top:12px}
@media(max-width:600px){#homepage-course{padding:84px 20px 20px !important}#homepage-course::after{display:none}}