/* === EMPATIC Academy - Estilos para Moodle (igual al landing page) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&display=swap');

:root {
  --empatic-dark-teal: #0d3b40;
  --empatic-dark-teal-2: #0f4e54;
  --empatic-teal: #02a1a1;
  --empatic-teal-deep: #068587;
  --empatic-yellow: #f0ad00;
  --empatic-ink: #10302e;
  --empatic-ink-soft: #4a615f;
  --empatic-line: #ddc9a1;
  --empatic-bg-tint: #e9d8b8;
  --empatic-surface: #f8f1e2;
  --empatic-white: #ffffff;
}

/* ===================== Tipografia ===================== */
body, .btn, input, textarea, select, .navbar, .card,
.form-control, .custom-select, table, th, td,
.dropdown-menu, .modal-content, .breadcrumb, .alert,
.pagination, .badge, .nav-tabs, .nav-link, .list-group-item {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
}

/* ===================== Fondo general ===================== */
body {
  background: var(--empatic-bg-tint) !important;
}

/* ===================== Barra superior ===================== */
.navbar, .fixed-top, .navbar-light {
  background: var(--empatic-dark-teal) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* #page-navbar es la ruta/breadcrumb, no la barra superior: fondo claro, texto legible */
#page-navbar {
  background: transparent !important;
}

#page-navbar, #page-navbar a, #page-navbar .breadcrumb-item {
  color: var(--empatic-ink-soft) !important;
}

#page-navbar a:hover {
  color: var(--empatic-teal-deep) !important;
}

.navbar-brand, .navbar-brand h1, .navbar-brand span,
.navbar-nav .nav-link, .navbar-nav .nav-item a,
.navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link {
  color: var(--empatic-white) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--empatic-yellow) !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
}

.userinitials {
  background: var(--empatic-teal) !important;
  color: var(--empatic-white) !important;
}

/* ===================== Menu lateral ===================== */
.drawer, #nav-drawer, .block_navigation,
.block_navigation .block_tree, .list-group,
#nav-drawer .list-group, .drawer .list-group {
  background: var(--empatic-dark-teal-2) !important;
  border-right: none !important;
}

.drawer .list-group-item, #nav-drawer .list-group-item {
  background: transparent !important;
  color: var(--empatic-surface) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  transform: none !important;
  animation: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.drawer .list-group-item:hover, .block_navigation .tree_item:hover,
.drawer a:hover, .block_navigation a:hover,
.list-group-item:hover, #nav-drawer .list-group-item:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--empatic-white) !important;
  transform: none !important;
  box-shadow: none !important;
}

.drawer .list-group-item.active, .block_navigation .tree_item.active,
#nav-drawer .list-group-item.active {
  background: var(--empatic-teal) !important;
  color: var(--empatic-white) !important;
  font-weight: 600 !important;
  animation: none !important;
}

/* ===================== Enlaces ===================== */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.courseindex-link):not(.drawer a) {
  color: var(--empatic-teal-deep) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.courseindex-link):not(.drawer a):hover {
  color: var(--empatic-teal) !important;
}

/* ===================== Botones ===================== */
.btn-primary, input[type="submit"]:not(.btn-secondary), button[type="submit"]:not(.btn-secondary) {
  background: var(--empatic-teal-deep) !important;
  border-color: var(--empatic-teal-deep) !important;
  color: var(--empatic-white) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-primary:hover, .btn-primary:focus,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--empatic-dark-teal) !important;
  border-color: var(--empatic-dark-teal) !important;
}

.btn-secondary, .btn-outline-secondary {
  background: var(--empatic-surface) !important;
  border-color: var(--empatic-line) !important;
  color: var(--empatic-ink) !important;
  border-radius: 10px !important;
}

.btn-outline-primary {
  color: var(--empatic-teal-deep) !important;
  border-color: var(--empatic-teal-deep) !important;
  border-radius: 10px !important;
}

.btn-outline-primary:hover {
  background: var(--empatic-teal-deep) !important;
  color: var(--empatic-white) !important;
}

.btn-link {
  color: var(--empatic-teal-deep) !important;
}

/* ===================== Formularios ===================== */
.form-control, .custom-select, select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], textarea {
  border-radius: 10px !important;
  border-color: var(--empatic-line) !important;
}

.form-control:focus, .custom-select:focus, select:focus,
input:focus, textarea:focus {
  border-color: var(--empatic-teal) !important;
  box-shadow: 0 0 0 3px rgba(2,161,161,0.15) !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--empatic-teal);
}

/* ===================== Menus desplegables ===================== */
.dropdown-menu {
  border-radius: 12px !important;
  border-color: var(--empatic-line) !important;
  box-shadow: 0 12px 28px rgba(16,48,46,0.15) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(2,161,161,0.08) !important;
  color: var(--empatic-ink) !important;
}

.dropdown-item.active, .dropdown-item:active {
  background: var(--empatic-teal) !important;
  color: var(--empatic-white) !important;
}

/* ===================== Modales ===================== */
.modal-content {
  border-radius: 16px !important;
}

.modal-header {
  border-bottom-color: var(--empatic-line) !important;
}

.modal-footer {
  border-top-color: var(--empatic-line) !important;
}

/* ===================== Tablas ===================== */
.table thead th {
  background: var(--empatic-bg-tint) !important;
  color: var(--empatic-ink) !important;
  border-color: var(--empatic-line) !important;
}

.table td, .table th {
  border-color: var(--empatic-line) !important;
}

/* ===================== Pestanas ===================== */
.nav-tabs {
  border-bottom-color: var(--empatic-line) !important;
}

.nav-tabs .nav-link {
  color: var(--empatic-ink-soft) !important;
}

.nav-tabs .nav-link.active {
  color: var(--empatic-teal-deep) !important;
  border-color: var(--empatic-line) var(--empatic-line) var(--empatic-surface) !important;
  border-bottom: 3px solid var(--empatic-teal) !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--empatic-teal) !important;
  border-color: transparent !important;
}

/* ===================== Paginacion ===================== */
.pagination .page-link {
  color: var(--empatic-teal-deep) !important;
  border-color: var(--empatic-line) !important;
  border-radius: 8px !important;
  margin: 0 2px;
}

.pagination .page-item.active .page-link {
  background: var(--empatic-teal) !important;
  border-color: var(--empatic-teal) !important;
  color: var(--empatic-white) !important;
}

/* ===================== Migas de pan ===================== */
.breadcrumb a {
  color: var(--empatic-teal-deep) !important;
}

/* ===================== Alertas y badges ===================== */
.alert {
  border-radius: 12px !important;
}

.badge {
  border-radius: 999px !important;
}

.progress-bar {
  background-color: var(--empatic-teal) !important;
}

/* ===================== Tarjetas y bloques ===================== */
.card {
  border-radius: 16px !important;
  border-color: var(--empatic-line) !important;
  background: var(--empatic-surface) !important;
}

/* ===================== Foco y seleccion ===================== */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--empatic-teal) !important;
}

::selection {
  background: var(--empatic-yellow);
  color: var(--empatic-ink);
}

/* ===================== Pie de pagina ===================== */
#page-footer, #page-footer.footer {
  background: var(--empatic-dark-teal) !important;
  color: rgba(255,255,255,0.75) !important;
}

#page-footer a {
  color: var(--empatic-yellow) !important;
}

/* ===================== Pagina de inicio de sesion ===================== */
body.pagelayout-login, body.path-login,
.pagelayout-login #page,
.pagelayout-login #region-main,
.path-login #page {
  background: var(--empatic-dark-teal) !important;
}

.pagelayout-login .card, .path-login .card {
  border-radius: 16px !important;
  box-shadow: 0 20px 44px rgba(3, 16, 17, 0.35) !important;
}

.pagelayout-login .btn-primary, .path-login .btn-primary {
  width: 100%;
}


/* ===================== Cajas blancas -> crema (login, avisos, modales) ===================== */
.login-container, .generalbox, .box.generalbox, .modal-content,
.path-login .card, .pagelayout-login .card {
  background: var(--empatic-surface) !important;
  border-radius: 16px !important;
}


/* ===================== Contenedor principal blanco -> crema ===================== */
.main-inner, #region-main, #region-main-box {
  background: var(--empatic-surface) !important;
}

/* ===================== Indice del curso (menu lateral dentro del curso) ===================== */
.courseindex-link {
  color: var(--empatic-surface) !important;
}

.courseindex-link:hover {
  color: var(--empatic-white) !important;
  background: rgba(255,255,255,0.1) !important;
}

.courseindex-section-title .courseindex-link {
  color: var(--empatic-surface) !important;
  font-weight: 600 !important;
}

.courseindex [data-for="sectionnode"].active > .courseindex-link,
.courseindex-item.active > .courseindex-link {
  background: var(--empatic-teal) !important;
  color: var(--empatic-white) !important;
  border-radius: 6px !important;
}

.courseindex-chevron svg, .courseindex-chevron {
  color: rgba(255,255,255,0.7) !important;
  fill: rgba(255,255,255,0.7) !important;
}


/* ===================== Logo de login mas pequeno ===================== */
.login-logo img, .login-logo .img-fluid {
  max-width: 110px !important;
  width: 110px !important;
  height: auto !important;
  margin: 0 auto 12px !important;
}


/* ===================== Logo del header mas pequeno ===================== */
.navbar-brand img.logo, .navbar-brand .logo {
  max-height: 34px !important;
  width: auto !important;
}


/* ===================== Iconos del drawer (cerrar / menu) en crema ===================== */
.drawer .btn-icon, .drawer .btn-icon svg, .drawer .btn-icon i,
#theme_boost-drawers-courseindex .btn-icon {
  color: var(--empatic-surface) !important;
  fill: var(--empatic-surface) !important;
}

/* ===================== Barra de pestanas secundaria (blanca) -> crema ===================== */
/* Ojo: .moremenu tambien lo usa la navegacion PRINCIPAL (Inicio/Tablero/...), por eso
   se debe restringir solo a la navegacion secundaria (pestanas de curso/actividad) */
.secondary-navigation .moremenu, .secondary-navigation .more-nav,
.secondary-navigation .nav-tabs, .secondary-navigation ul {
  background: var(--empatic-surface) !important;
}

.primary-navigation .moremenu, .primary-navigation .more-nav {
  background: transparent !important;
}

/* ===================== "Modo de edicion" legible en la barra oscura ===================== */
.navbar .form-check-label, .navbar label {
  color: var(--empatic-surface) !important;
}

/* ===================== Selector de idioma / toggles del navbar legibles ===================== */
.navbar .dropdown-toggle, .navbar .langmenu, .navbar #lang-menu-toggle {
  color: var(--empatic-surface) !important;
}


/* ===================== Elimina franjas crema en el login: los wrappers de Bootstrap
   (region-main-box, region-main, col-12) heredaban el fondo crema y se asomaban
   por el margen negativo de .row en los bordes ===================== */
.pagelayout-login #region-main-box,
.pagelayout-login #region-main,
.pagelayout-login .col-12,
.pagelayout-login .row,
.pagelayout-login .container-fluid,
.path-login #region-main-box,
.path-login #region-main {
  background: transparent !important;
}

.pagelayout-login .login-container, .path-login .login-container {
  background: var(--empatic-surface) !important;
}


/* ===================== Cajas grises de actividades (Marcar como hecho, etc) -> crema ===================== */
.activity-header, .activity-item, .automatic-completion-conditions,
.bg-light {
  background: var(--empatic-surface) !important;
}

/* ===================== Item activo del indice del curso: Moodle usa .pageitem con azul nativo ===================== */
.courseindex-item.pageitem, .courseindex-item.currentitem {
  background: var(--empatic-teal) !important;
  border-radius: 6px !important;
}

.courseindex-item.pageitem .courseindex-link,
.courseindex-item.currentitem .courseindex-link {
  color: var(--empatic-surface) !important;
}


/* ===================== Cobertura total de tipografia (igual al landing page: Inter en todo) ===================== */
p, span, div, a, li, label, blockquote, small, strong, em,
.card-body, .modal-body, .popover, .tooltip {
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
}


/* ===================== Login: etiqueta "Empatic Academy" sobre el logo ===================== */
.login-logo {
  position: relative;
}

.login-logo::before {
  content: "Empatic Academy";
  display: block;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--empatic-teal-deep);
  text-align: center;
  margin-bottom: 8px;
}

/* ===================== Login: caja de acceso mas compacta ===================== */
.pagelayout-login .login-container, .path-login .login-container {
  zoom: 0.8;
}


/* ===================== Login: logo en columna (corrige que "Empatic Academy" quedara al costado) ===================== */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===================== Tarjetas de curso: pie "X% completado" -> crema y esquinas redondeadas ===================== */
.course-card {
  overflow: hidden;
}

.course-card .card-footer.bg-white,
.card-footer.bg-white {
  background: var(--empatic-surface) !important;
  border-top-color: var(--empatic-line) !important;
}