/* ---- Estilos generales compartidos ---- estilos.css  ------ */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    /*
    font-family:system-ui;
    padding: 0;
    display:flex;

    */
    background-color: #f5f5f5;
    display: block;
}


header {
    background-color: #f8f9fa; /* #4da3ff; azul, #f8f9fa; fondo claro */
    padding: 10px 0;
    position: fixed;      /* 🔥 Pone el header siempre visible */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para la barra */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;        /* 🔥 Lo pone por encima del sidebar y el contenido */
}

#layout {
    display: flex;
    margin-top: 50px;   /* 🔥 Para que el contenido no quede debajo del header */
}


/* ---- Contenedor principal ---- */
.container {
    max-width: 1100px;
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#content { flex:1; padding:22px; }

.colorbasejgp{
  /*background: #f3f6fb;           mismo fondo claro que tabs */

  background-color: #007bff; /* Fondo azul */
  color: white; /* Texto blanco */
}


/* ======================================
   NAVBAR SUPERIOR PERSONALIZADA
====================================== */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 20px;
  /*height: 50px; 
  max-width: 1100px;*/
}


/* Contenedor interno del header */ /* ?¿¿¿¿ */
.nav-wrapper {
  max-width: 1100px;   /* mismo ancho que .container */
  margin: 0 auto;      /* centra */
  padding: 0 20px;     /* pequeño respiro lateral */
}


.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333333; /* Color oscuro para los elementos del menú */ /* white; */
}

.nav-center {
  /* font-weight: 700;
  font-size: 18px;
  */
  color: #333333; /* Color oscuro para los elementos del menú */ /* white; */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav-center > li > a {
    color: #333333; /* Color oscuro para los elementos del menú */ /* white; */
    text-decoration: none;
    font-weight: bold;
    padding: 0 15px; /* Espaciado entre elementos */
}

/* Necesario para posicionar el dropdown respecto al li */
.nav-dropdown {
  position: relative;
}

/* Flechita más fina */
.nav-dropdown > a span {
  margin-left: 4px;
  vertical-align: middle;
}

/* Hover también al li completo */
.nav-dropdown:hover > a {
  color: #007bff;
}

/* Activo del dropdown principal */
.nav-dropdown.uk-open > a {
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}


.nav-center > li > a:hover {
    /* color:   #e8f4ff; un tono blanco azulado opcional (similar al hover comentado del sidebar)   -- #f0a500; */  
    color: #007bff; /* Azul brillante al pasar el mouse */
    text-decoration: underline; /* Subrayado al pasar el mouse */
}



.jgnuevo-uk-logo{
  font-size: 20px;
  font-weight: 700;/*  */
  color: #1e2a39;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-img {
  height: 38px;
  width: 38px;
  margin-right: 8px;
  /* vertical-align: middle;*/
  border-radius: 50%;
}

/* Item activo con fondo azul y texto blanco */
.nav-center > li.uk-active > a,
.nav-right .uk-inline > a.uk-active
 {
    background-color: #007bff; /* Fondo azul */
    color: white; /* Texto blanco */
    font-weight: 600; /* Negrita para resaltar */
    border-radius: 4px; /* Bordes redondeados */
    padding: 10px 15px; /* Espaciado consistente */
}


/* Dropdown estilo coherente con tu UI */
.uk-dropdown-nav > li > a {
  border-left: 4px solid transparent;
  transition: all 0.15s ease;
}

/* Hover */
.uk-dropdown-nav > li > a:hover {
  background: #f3f6fb;
  border-left-color: #4da3ff;
}

/* Activo */
.uk-dropdown-nav > li.uk-active > a {
  background: #0b5fff;
  color: #fff;
  border-left-color: #003dff;
}

/* Dropdown coherente
.uk-dropdown {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
 */


/* Iconos del header */
.navbar-user{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 6px;
}

/* Hover en el icono de usuario */
.navbar-user:hover{
    /* color: #007bff; Azul brillante al pasar el mouse */
    /* text-decoration: underline; Subrayado al pasar el mouse */
}

/* Dropdown */
.uk-navbar-dropdown .uk-nav > li > a {
    color: #333333;
    padding: 10px 20px;
    font-size: 14px;
}

/* Hover en las opciones del dropdown */
.uk-navbar-dropdown .uk-nav > li > a:hover {
    color: #007bff;
    background-color: #f0f0f0; /* Fondo claro al pasar el mouse */
}


/* ============================= */
/* === bordes marcados === */
/* ============================= */

.jgp-border-bottom-azul{
  border-bottom: 3px solid #0b5fff;
}


/* ============================= */
/* === bloques codigo === */
/* ============================= */
.code-dark {
  background: #0d1117;
  color: #e6edf3;
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.code-dark code {
  color: inherit;
  background: none;
}


.code-config {
  background: #dff7f3;
  color: #0b2e2b;
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 14px;
  line-height: 1.55;
  border-left: 5px solid #2bbbad;
}

.code-config code {
  color: inherit;
  background: none;
}

/* ============================= */
/* === bloque media (suave) === */
/* ============================= */
.code-media {
  background: #e8f7fd; /* azul muy claro */
  color: #0c4a6e; /* azul oscuro suave */
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 14px;
  line-height: 1.55;
  border-left: 5px solid #38bdf8; /* azul medio */
}

.code-media code {
  color: inherit;
  background: none;
}

/* ============================= */
/* === bloque warning === */
/* ============================= */
.code-warning {
  background: #fff7ed; /* naranja muy suave */
  color: #7c2d12; /* marrón oscuro */
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 14px;
  line-height: 1.55;
  border-left: 5px solid #f97316; /* naranja fuerte */
  position: relative;
}

/* etiqueta */
.code-warning::before {
  content: "importante";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 11px;
  color: #9a3412;
  text-transform: uppercase;
  font-weight: 600;
}

/* coherencia */
.code-warning code {
  background: none;
  color: inherit;
}


/* ============================= */
/* === SUBMENUS SIDEBAR UIKIT === */
/* ============================= */

/* ---- Estilos sidebar ---- */


#sidebar {
    padding:18px;
    width:240px;
    height:100vh;
    /*background:#4da3ff;*/
    /*color:white;*/
    color: #333333;
    position:sticky;
    top:0;
    overflow:auto;
}

#sidebar .uk-nav-default > li > a {
    color: #333333 !important;
}


/* cada item del menú */
#sidebar .uk-nav > li {
  margin-bottom: 6px; /* separación entre items */
}

/* enlace principal */
#sidebar .uk-nav > li > a {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 6px;
}

/* Degradado + borde iluminado */
#sidebar .uk-nav-default > li > a:hover {
    color: #333333 !important;
    /*background: linear-gradient(90deg, #0073ff, #00b7ff) !important;
    border-left: 4px solid #ffffff;
    background: linear-gradient(90deg, #dbeafe, #eff6ff) !important;*/
    background: linear-gradient(90deg, #e8f2ff, #f8fbff) !important;
    border-left: 3px solid #4da3ff;
    padding-left: 14px;
    border-radius: 4px;
    transition: 0.2s;
}
#sidebar .uk-nav-default > li.uk-active > a {
    background: #1e90ff !important;
    color: #333333 !important;
    border-radius: 6px;
    font-weight: bold;
}

#sidebar .uk-parent > a {
    color: #333333 !important;
    font-weight: bold;
}

/* flecha blanca */
#sidebar .uk-parent > a::after {
    filter: brightness(0) invert(1);
}

/* sangría submenu */
#sidebar .uk-nav-sub {
    padding-left: 14px;
    margin-top: 6px;
}

/* links submenu */
#sidebar .uk-nav-sub li > a {
    color: #333333 !important;
    font-size: 14px;
    opacity: 0.9;

  background: #ffffff; /* #fafbfc; */ 
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 6px;
}

/* hover submenu */
#sidebar .uk-nav-sub li > a:hover {
    /*background: linear-gradient(90deg, #0073ff, #00b7ff) !important;
    border-left: 4px solid white;*/

    background: linear-gradient(90deg, #e8f2ff, #f8fbff) !important;
    border-left: 3px solid #4da3ff;
    padding-left: 14px;
    border-radius: 4px;
}

/* activo submenu */
#sidebar .uk-nav-sub li.uk-active > a {
    background: #1e90ff !important;
    font-weight: bold;
    border-radius: 6px;
}

/* grupo abierto */
#sidebar .uk-parent.uk-open > a {
    /*background: rgba(255,255,255,0.15);*/
    background: linear-gradient(90deg, #dbeafe, #eff6ff) !important;
    border-radius: 6px;
}

/* =========================================================
   traidos de plugin cursos.css
   ========================================================= */
.jg-courses-index-card, .jg-course-index-item{
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.10);
  box-sizing: border-box;
  padding: 20px;
}

.jg-course-sidebar-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5b6b86;
} 

.jg-courses-index-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jg-course-index-actions .jg-course-edit-btn {
  min-height: auto;
  line-height: 1;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
}

.jg-courses-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.jg-courses-index-title {
  margin: 0;
  color: #1b2a4e;
}

.jg-courses-grid.uk-grid {
  margin-left: -10px;
}

.jg-courses-grid.uk-grid > * {
  padding-left: 10px;
}

.jg-course-index-item {
  background: #fff;
  padding: 14px;
  min-height: 100%;
}

.jg-course-index-item-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: #1b2a4e;
}

.jg-course-index-item-meta {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 13px;
}

.jg-course-index-tags {
  margin-bottom: 12px;
}

.jg-course-index-tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eef4ff;
  color: #35507d;
  font-size: 12px;
  font-weight: 600;
}
.jg-edit-topbar {
  text-align: right;
  margin-bottom: 8px;
}

.jg-ed-btn {
  min-height: auto;
  line-height: 1;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 700;
}

.jg-course-breadcrumb {
  font-size: 13px;
  color: #64748b;
}

.jg-course-breadcrumb a {
  color: #0b5fff;
  text-decoration: none;
}

.jg-course-breadcrumb a:hover {
  text-decoration: underline;
}

.jg-course-breadcrumb-sep {
  display: inline-block;
  margin: 0 6px;
  color: #94a3b8;
}

/*  indice de video */
.jg-movie-index {
  list-style: disc;
  margin: 14px 0;
  padding-left: 18px;
}

.jg-movie-index-item {
  margin: 4px 0;
}

.jg-movie-index-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1b2a4e;
  text-decoration: none;
}

.jg-movie-index-link:hover,
.jg-movie-index-link:focus {
  color: #0b5fff;
  text-decoration: none;
}

.jg-movie-index-time {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #7adf3a;
  color: #123b00;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
}

.jg-movie-index-text {
  line-height: 1.3;
}



/* =========================================================
   Acordeón coherente con menú lateral y tabs
   ========================================================= */

.uk-accordion-default {
  margin-top: 24px;
}

/* Cada item separado como “píldora” */
.uk-accordion-default > li {
  margin-bottom: 12px;
}

/* TÍTULO del acordeón */
.uk-accordion-default .uk-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 6px;

  background: #f3f6fb;          /* mismo fondo claro que tabs */
  color: #1b2a4e;
  font-weight: 600;
  text-decoration: none;

  border-left: 5px solid transparent;
  transition: background .15s ease, color .15s ease;
}

/* Hover como el menú */
.uk-accordion-default .uk-accordion-title:hover {
  background: #e9effa;
  border-left-color: #4da3ff;   /* azul del sidebar */
}

/* Estado abierto (activo) */
.uk-accordion-default > li.uk-open > .uk-accordion-title {
  background: #0b5fff;          /* azul activo */
  color: #ffffff;
  border-left-color: #003dff;
}

/* Icono acordeón (blanco cuando está abierto) */
.uk-accordion-default > li.uk-open
.uk-accordion-title [uk-accordion-icon] svg {
  color: #ffffff;
}

/* CONTENIDO del acordeón */
.uk-accordion-default .uk-accordion-content {
  margin-top: 8px;
  padding: 12px 14px;

  background: #ffffff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Texto interior */
.uk-accordion-default .uk-accordion-content p {
  margin: 0;
  color: #334155;
}


/* =========================================================
   Tabs coherentes con menú y acordeón
   ========================================================= */

.custom-tabs {
  margin-bottom: 16px;
  border-bottom: 0; /* quitamos línea default UIkit */
}

/* Cada tab como “píldora” */
.custom-tabs > li > a {
  padding: 8px 14px;
  border-radius: 6px;
  background: #f3f6fb;
  color: #1b2a4e;
  font-weight: 600;
  text-decoration: none;

  margin-right: 8px;
  transition: background .15s ease, color .15s ease;
}

/* Hover */
.custom-tabs > li > a:hover {
  background: #e9effa;
}

/* Tab activa */
.custom-tabs > li.uk-active > a {
  background: #0b5fff;   /* mismo azul activo */
  color: #ffffff;
}

/* Quitar subrayados/bordes UIkit */
.custom-tabs > li > a::before {
  display: none;
}


/* =========================================================
   Botones coherentes con menú/tabs/acordeón
   ========================================================= */

/* Base común */
.uk-button.btn-primary,
.uk-button.btn-light,
.uk-button.btn-outline,
.uk-button.btn-danger {
  border-radius: 6px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 14px;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}

/* Primario (azul activo) */
.uk-button.btn-primary {
  background: #0b5fff;
  color: #fff;
  border: 1px solid #0b5fff;
}
.uk-button.btn-primary:hover,
.uk-button.btn-primary:focus {
  background: #084fd1;
  border-color: #084fd1;
  color: #fff;
}
.uk-button.btn-primary:active {
  transform: translateY(1px);
}

/* Secundario claro (tipo píldora) */
.uk-button.btn-light {
  background: #f3f6fb;
  color: #1b2a4e;
  border: 1px solid rgba(0,0,0,.08);
}
.uk-button.btn-light:hover,
.uk-button.btn-light:focus {
  background: #e9effa;
  color: #1b2a4e;
}

/* Outline (contorno azul) */
.uk-button.btn-outline {
  background: transparent;
  color: #0b5fff;
  border: 1px solid #0b5fff;
}
.uk-button.btn-outline:hover,
.uk-button.btn-outline:focus {
  background: #0b5fff;
  color: #fff;
}

/* Peligro */
.uk-button.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
}
.uk-button.btn-danger:hover,
.uk-button.btn-danger:focus {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Tamaños */
.uk-button.btn-small {
  padding: 6px 10px;
  font-size: 13px;
}
.uk-button.btn-wide {
  padding-left: 18px;
  padding-right: 18px;
}

/* Botón “tipo menú”: borde izquierdo azul al hover (coherente con sidebar) */
.uk-button.btn-menu {
  background: #f3f6fb;
  color: #1b2a4e;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 5px solid transparent;
}
.uk-button.btn-menu:hover {
  background: #e9effa;
  border-left-color: #4da3ff; /* azul sidebar */
}
.uk-button.btn-menu.is-active {
  background: #0b5fff;
  color: #fff;
  border-color: #0b5fff;
  border-left-color: #003dff;
}

/* =========================================================
   TABLAS
   ========================================================= */

.tabla-base {
    width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    overflow: hidden;
}

.tabla-base thead,
.tabla-base thead th {
    background: #0b5fff;
    color: #ffffff;
}

.tabla-base th {
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

.tabla-base th,
.tabla-base td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.tabla-base tbody tr:last-child td {
    border-bottom: 0;
}

.tabla-base tbody tr:hover {
    background: #f8faff;
}

.tabla-base .col-acciones {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}


/* =========================================================
   Modal coherente con menú / tabs / acordeón
   ========================================================= */

/* Fondo overlay más suave */
.uk-modal {
  background: rgba(15, 23, 42, 0.45);
}

/* Caja del modal */
.modal-coherent {
  border-radius: 8px;
  padding: 18px 20px;

  background: #ffffff;
  border-top: 4px solid #0b5fff; /* azul activo */
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

/* Título */
.modal-coherent .uk-modal-title {
  margin-top: 0;
  color: #1b2a4e;
  font-weight: 700;
}

/* Texto */
.modal-coherent p {
  color: #334155;
}

/* Ajuste de botones en modal */
.modal-coherent .uk-button {
  min-width: 110px;
}

/* =========================================================
   Auth (login/registro) coherente con tu UI
   ========================================================= */
.auth-layout #sidebar { display: none; }
.auth-layout #content { width: 100%; }

.auth-wrap {
  max-width: 520px;
  margin: 40px auto;
}

.auth-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 20px 20px;
}

.auth-title {
  margin: 0 0 6px 0;
  color: #1b2a4e;
  font-weight: 800;
}

.auth-subtitle {
  margin: 0 0 18px 0;
  color: #64748b;
}

/* Inputs */
.auth-card .uk-input,
.auth-card .uk-select,
.auth-card .uk-textarea {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
}

.auth-card .uk-input:focus,
.auth-card .uk-select:focus,
.auth-card .uk-textarea:focus {
  border-color: #0b5fff;
  box-shadow: 0 0 0 3px rgba(11,95,255,.12);
}

/* Help links */
.auth-link {
  color: #0b5fff;
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* Separador */
.auth-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 13px;
  margin: 16px 0;
}
.auth-sep::before,
.auth-sep::after {
  content: "";
  height: 1px;
  background: rgba(0,0,0,.08);
  flex: 1;
}

/* Mini aviso */
.auth-note {
  background: #f3f6fb;
  border-left: 5px solid #4da3ff;
  border-radius: 8px;
  padding: 10px 12px;
  color: #334155;
}

/* =========================================================
   Página de error coherente
   ========================================================= */

.error-wrap {
  max-width: 720px;
  margin: 60px auto;
}

.error-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 26px 24px;
}

.error-code {
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  color: #0b5fff; /* azul activo */
  margin: 0 0 8px 0;
}

.error-title {
  margin: 0 0 10px 0;
  color: #1b2a4e;
  font-weight: 800;
}

.error-text {
  margin: 0 0 18px 0;
  color: #334155;
}

.error-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.error-hint {
  margin-top: 16px;
  background: #f3f6fb;
  border-left: 5px solid #4da3ff;
  border-radius: 10px;
  padding: 10px 12px;
  color: #334155;
}

.error-hint code {
  background: transparent;
  padding: 0;
}