/* Reserva siempre el espacio del scrollbar para evitar el "salto" del
   viewport cuando se navega entre una página sin scroll (home) y otra
   con scroll. scrollbar-gutter es soportado en Chrome 94+/Firefox 97+
   /Safari 16+. Sin esto, el background fixed se re-renderiza al cambiar
   el ancho del viewport. */
html {
    scrollbar-gutter: stable;
}

.role {
    margin-top:-20px;
}

.avatar {
    border-radius:50%;float:left;margin-right:15px;
}


.title-detail-cursos {
    border-top: 3px solid #fbaf42;
}

.btn-medium-register {
    background: #000 none repeat scroll 0 0;
    border: 2px solid #707070;
    border-radius: 10px;
    transition: all 0.2s ease 0s;
    width: 150px;
    z-index: 3000;
    cursor: pointer;
}
.btn-medium-register, .btn-medium-register:hover {
    color: #dcdcdc;
    display: inline-block;
    font-family: AldoPC;
    font-size: 1em;
    height: 50px;
    line-height: 50px;
    margin-top: 3px;
    padding-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-medium-register:hover {
    background: #242424 none repeat scroll 0 0;
    border: 2px solid #fbaf42;
    border-radius: 10px;
    transition: all 0.2s ease 0s;
    width: 150px;
    cursor: pointer;
}

/* Diplomado */

.header-hero-course {
  width: 980px; 
  margin: 0 auto;
  background: #000;
  
}

.header-hero-course-img {
    margin:0;
}

.header-course-title {
  background:#1A1A1A;
  width:100%;
  overflow:auto;
  border-bottom: 2px solid #B4CD7A;
}

.header-hero-course-title {
    overflow:auto;
    float:left;
    width:67%;
    padding: 1em 2em;
}

.header-hero-course-title h2 {
  color:#fff;     
  margin: 0;
  text-transform: Uppercase;
}

.btn-course-register {
  float:right; 
  width:33%;
  background:#1A1A1A;
  padding: 0.48em 0.5em;
    
}

@media (max-width: 768px) {
    .header-hero-course {
      width: 100%; 
      background:#000;
      
    }
    
    .header-hero-course-title {
       width:100%;
    }    
    
    .header-hero-course-title h2 {
      font-size: 1em;
    }
    
    .btn-course-register {
      width:100%;
    }
}

.diplomado-side {
    background: #000;
    
}

/* Button generic */


.button {
  vertical-align: middle;
  -webkit-transition: .2s;
  transition: .2s;
  display: inline-block;
  padding: 0.6em 1em;
  color: #000;
  border: #B4CD7A solid 2px;
  background: #B4CD7A;
  font-family: Oswald,sans-serif;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.button:hover {
  vertical-align: middle;
  -webkit-transition: .2s;
  transition: .2s;
  color: #fff;
  border: #B4CD7A solid 2px;
  background: #6A8234;
  cursor: pointer;
}

.button a:visited {
  color: #e6e6e6;
}

.button a {
  color: #e6e6e6;
}

/* TABLE COURSE */

.course-table {
	border:1px solid #000;
	border-collapse:collapse;
	padding:5px;
	color: #B3B3B3;
	font-size: 0.85em;
	font-family: Oswald,sans-serif;
}
.course-table th {
	border-bottom:1px solid #333333;
	padding:5px;
	background:#F0F0F0;
}
.course-table td {
	border-bottom:1px solid #1A1A1A;
	padding:5px;
	background:#2B2A2A;
	padding: 0.7em 1.2em;
}

table.course-table  {
    margin: 0 !important;
}


.course-table .left-info {
    background: #1A1A1A;
    text-align:right;
    color: #F2F2F2;
	border-bottom:1px solid #333333;
    
}

.content-body a {
    color:#4E850E !important;
}

.form-popup {
    
}

.form-mobile {
    display: none;
}

@media (max-width: 868px) {
    .form-mobile {
        display: block;
    }
    
    .form-popup {
       display: none; 
    }
}

.profiles {
    
}

.profile {
    width:31%;
    display: inline-block;
    text-align:center;
    margin-bottom: 2em;
}

.profile img {
    border: 2px solid #B3B3B3;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

a.profile {
    overflow: auto;
}

.profile h3 {
    font-size:1em;
    margin-bottom:0;
}

.profile p {
    margin-top:0;
}

.profile-detail {
    margin-bottom: 2em;
    margin-top:2em;
}

.profile-detail img {
    display: incline-block;
    margin-right:2em;
    border: 2px solid #B3B3B3;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.profile-detail h1, .profile-detail h3 {
    margin:0;
}

.profile-detail p {
    margin:0;
}

.profile-detail-title {
    display: inline-block;
}

@media (max-width: 768px) {
    .profile {
        width:100%;
        display: inline-block;
        text-align:center;
        margin-bottom: 2em;
    }  
    
     .profile h3 {
        font-size:1.5em;
    }     
    
    .profile img {
        width:200px;
    } 
    
    .profile-detail {
        text-align:center;
    }  
    .profile-detail img {
        margin-right:0;
        margin-bottom:1em;
    }
    .profile-detail h1 {
        font-size:1.5em;
    }
}

/* Submenu tabs  */

.section-options {
    overflow: auto;
    position: absolute;
    top: 244px;
    width: 655px;
}

.active-tab a {
    color: #fff !important;
}

/* Subtabs */

.tabs {
    background: #383838 none repeat scroll 0 0;
    font-weight: 300;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.sub-navigation {
    background: #131313 none repeat scroll 0 0;
    color: #b2b2b2;
    font-size: 0.65em;
    height: auto;
    z-index: 2;
}

.tabs nav ul, .tabs nav ul li a {
    padding: 0;
    width: 100%;
}

.tabs nav  {
    border-bottom: 1px solid #4D4D4D;
}


.tabs nav ul {
    display: inline-block;
    list-style: outside none none;
    margin: 0;
    padding:13px 7px 8px 7px;
}

.tabs nav ul li {
    margin: 0 0 0 -1px;
    width: calc(25% + 1px);
}
.tabs nav ul li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color none;
    border-image: none;
    border-style: none ;
    border-width: medium 1px;
    display: block;
    float: left;
    position: relative;
}

.tabs nav a {
    color: #b2b2b2;
    display: block;
    font-size: 1.45em;
    line-height: 2.2;
    padding: 0 1.25em;
    white-space: nowrap;
}
.nav a, nav li a {
    font-family: Oswald,sans-serif;
}

.active {
    background: #383838 none repeat scroll 0 0;
    color: #fff !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}

.active a {
    background: #383838 none repeat scroll 0 0;
    color: #fff !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}

.content-body {
    padding-bottom:3em;
}

#labguion-content img {
    border: 2px solid #B3B3B3 !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;    
}

/* Button volver */

.btn-back {
    background: #000 none repeat scroll 0 0;
    border: 2px solid #999999;
    border-radius: 10px;
    transition: all 0.2s ease 0s;
    width: 100%;
    z-index: 3000;
}
.btn-back, .btn-backr:hover {
    color: #dcdcdc;
    display: inline-block;
    font-family: Oswald,sans-serif;
    font-size: 0.8em;
    height: 50px;
    line-height: 40px;
    margin-top: 3px;
    padding-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-back:hover {
    background: #242424 none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 10px;
    transition: all 0.2s ease 0s;
    width: 100%;
}

.content-body a {
  color: #000 !important;
  background: #fff;
}


.content-body a:hover {
  color: #333333 !important;
  background: #fff;
}


/* Cursos */

.title-detail-cursos {
    position: relative;
}

.title-detail-cursos .btn-registro-detail {
    position: absolute;
    right: 0;
    top: 10px;
}

.title-detail-cursos h2 {
    font-size: 18px;
    margin-top: 15px;
}

/* ============================================================
   Sponsors del sidebar de /formacion
   Cada sección (Organiza / Aliados) es un flexbox:
   label vertical a la izquierda + grilla 2 columnas de logos.
   Se usa un fondo más oscuro que el resto del sidebar para
   destacar visualmente el bloque.
   ============================================================ */

/* Frame externo: alto fijo + overflow hidden. Reserva el espacio en el
   HTML/CSS desde el primer paint. Cálculo para 8 logos (2 organiza + 6
   aliados a 60px por fila): 48 padding + 60 + 20 margin + 212 ≈ 340px.
   Si cambia el número de sponsors, ajustar aquí. */
.sponsors-frame {
    height: 360px;
    background: #0d0d0d;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

.sidebar-sponsors {
    padding: 20px 12px 28px;
    height: 100%;
    box-sizing: border-box;
}

.sidebar-sponsors__section {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
}

.sidebar-sponsors__section:last-child {
    margin-bottom: 0;
}

.sidebar-sponsors__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #555;
    font-family: 'Oswald', sans-serif;
    font-size: 0.65em;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    padding: 0 6px 0 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsors-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-auto-rows fija el alto de cada fila del grid (incluso si las imgs
       aún no han cargado o son SVG sin dimensiones explícitas). Sin esto, las
       filas colapsan en 0px hasta que los logos cargan y expanden el bloque
       desplazando "Artículos relacionados" hacia abajo. */
    grid-auto-rows: 60px;
    gap: 16px 12px;
    align-items: center;
    justify-items: center;
}

.sponsors-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sponsors-list img,
.sponsors-list svg {
    /* !important para sobrescribir width/height inline que pueda traer el SVG. */
    height: 60px !important;
    width: auto !important;
    max-width: 100%;
    display: block;
}

.sponsors-list a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Social bar: centra el icono SVG dentro del círculo. El .circle base trae
   display:inline-block + padding-top:.2em, que empuja el contenido hacia
   abajo. Override a inline-flex con centrado en ambos ejes. */
.social-bar .btn-dark.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ============================================================
   Listado de Actualidad (/actualidad)
   Override del estilo base de .card (background:#000 + border:1px
   solid #383838) que se ve fuera de lugar sobre fondo claro.
   Thumbnails con aspect-ratio uniforme: hay que forzar display:block
   en .card-image porque el base es display:table-cell y aspect-ratio
   no se aplica en table-cell. !important sobre la img es para vencer
   las reglas .card-image img{width:100%;margin:0} del minified.
   ============================================================ */
.cards-actualidad .card {
    background: transparent;
    border: 0;
    display: block;
    margin: 0;
    padding: 1.25rem 0 0.5rem 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}

.cards-actualidad .card:last-of-type {
    border-bottom: 0;
}

.cards-actualidad .card a {
    color: inherit;
    display: block;
    overflow: hidden;
}

.cards-actualidad .card a:hover {
    background: transparent;
}

.cards-actualidad .card-image {
    display: block;
    float: left;
    width: 40%;
    aspect-ratio: 300 / 128;
    overflow: hidden;
    margin-right: 1rem;
    border-radius: 6px;
}

.cards-actualidad .card-image img.media-object {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border-radius: 6px !important;
}

.cards-actualidad .card-summary {
    display: block;
    overflow: hidden;
    padding: 0;
}

.cards-actualidad .card-summary h3 {
    color: #000;
    text-shadow: none;
    margin-top: 0;
}

.cards-actualidad .card-summary p {
    color: #777;
}

.cards-actualidad .card-footer {
    display: none;
}

/* Paginación del listado. Laravel paginator emite <ul class="pagination">
   con <li class="active"> en la página actual; el .active global del tema
   (background:#383838; border-radius:20px !important) hace que el item
   activo se vea como una barra ancha. Hay que resetear el ul (sin bullets,
   inline), darle padding a los items y vencer el border-radius con
   !important para que quede pequeño y cuadrado. */
.cards-actualidad .pagination {
    list-style: none;
    padding: 1.5rem 0 0 0;
    margin: 1.5rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    clear: both;
}

.cards-actualidad .pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.cards-actualidad .pagination li {
    list-style: none;
    margin: 0;
    background: transparent;
    border-radius: 4px !important;
}

.cards-actualidad .pagination li a,
.cards-actualidad .pagination li span {
    display: inline-block;
    padding: 6px 12px;
    color: #333 !important;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 4px !important;
    text-decoration: none;
    min-width: 36px;
    text-align: center;
    line-height: 1.4;
}

.cards-actualidad .pagination li a:hover {
    background: #f5f5f5;
}

.cards-actualidad .pagination li.active,
.cards-actualidad .pagination li.active a,
.cards-actualidad .pagination li.active span {
    background: #383838 !important;
    color: #fff !important;
    border-color: #383838 !important;
    border-radius: 4px !important;
}

.cards-actualidad .pagination li.disabled a,
.cards-actualidad .pagination li.disabled span {
    color: #ccc !important;
    cursor: default;
}

/* Responsive del listado de actualidad: en móvil la imagen va arriba
   ocupando el ancho completo (no a la izquierda al 40%) y el texto debajo.
   Pagination más compacta para que entre en una sola fila aún con
   onEachSide(1) + flechas + primera/última. */
@media (max-width: 768px) {
    .cards-actualidad .card-image {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.75rem;
    }

    .cards-actualidad .card-summary {
        overflow: visible;
    }

    .cards-actualidad .pagination li a,
    .cards-actualidad .pagination li span {
        min-width: 28px;
        padding: 4px 8px;
        font-size: 0.85em;
    }

    .cards-actualidad .pagination {
        gap: 2px;
    }

    .cards-actualidad .pagination ul {
        gap: 2px;
    }
}

/* ============================================================
   Home (/) — fix de imágenes recortadas
   El home usa .cards-other con la misma estructura (.card +
   .card-image > img) pero conserva el estilo dark del tema.
   Aquí solo uniformamos el tamaño visual de la imagen sin tocar
   el resto. aspect-ratio 300/128 coincide con el thumb() y
   object-fit:contain garantiza que la imagen completa quepa,
   centrada horizontalmente (sin crop). !important para vencer
   las reglas .card-image img{width:100%;margin:0} del minified.
   ============================================================ */
.cards-home .card {
    border: 1px solid #1a1a1a !important;
    box-sizing: border-box;
    position: relative;
}

.cards-home .card + .card {
    margin-left: -1px;
}

.cards-home .card:first-child {
    border-bottom-left-radius: 1em;
}

.cards-home .card:last-child {
    border-bottom-right-radius: 1em;
}

.cards-home .card a {
    padding: 1rem 1rem 0.5rem 1rem !important;
    box-sizing: border-box;
    height: 340px !important;
}

.cards-home .card-summary p {
    margin-bottom: 0.5em;
}

.cards-home .card-footer {
    display: none;
}

.cards-home .card {
    margin-bottom: 0;
}

/* Sticky footer scopeado al home. Sin esto, cuando el contenido del home
   es corto (3 cards), el footer queda flotando en el medio de la página
   con el fondo purple visible debajo. :has(#cards-home) limita el efecto
   solo al layout-home — otros layouts conservan su comportamiento de
   floats y no se ven afectados. */
body:has(#cards-home) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(#cards-home) #app.layout_main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body:has(#cards-home) #contentarea {
    flex: 1 0 auto;
}

body:has(#cards-home) #footer {
    margin-top: 0 !important;
    flex-shrink: 0;
}

.cards-home .card a:hover {
    background: #0d0d0d;
}

.cards-home .card-image {
    aspect-ratio: 300 / 128;
    overflow: hidden;
    text-align: center;
    background: #000;
    border-radius: 6px;
}

.cards-home .card-image img.media-object {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    margin: 0 auto !important;
    border-radius: 6px !important;
}