/* Ser B10 — tarjetas del home del estudiante.
   Markup neutro: estructura y espaciado aquí; colores/tema los pone la página
   de Elementor vía variables (--sb10-*) o CSS propio sobre las clases sb10-*. */

.sb10-perfil,
.sb10-puntos,
.sb10-continuar,
.sb10-ruta {
    /* Tipografía del diseño oficial: Lato 400 (texto) / 700 (títulos, labels) / 900 (nombre y cifras) */
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}
.sb10-perfil,
.sb10-puntos,
.sb10-continuar {
    --sb10-acento: var(--e-global-color-accent, #4f7df3);
    --sb10-suave: rgba(127, 127, 127, .35);
    font-size: 16px;
    color: inherit;
}

/* Perfil */
.sb10-perfil {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sb10-perfil-info { flex: 1; min-width: 0; }
.sb10-perfil-hola {
    margin: 0;
    font-size: 2em;
    font-weight: 900; /* Lato Black, como "Hola, Camila" del diseño */
    line-height: 1.12;
    letter-spacing: -.01em;
}
.sb10-perfil-meta {
    margin: 5px 0 0;
    opacity: .72;
    font-size: .95em;
    font-weight: 400;
}
.sb10-perfil-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
}

/* Puntos Ser B10 (bloque superior derecho del diseño) */
.sb10-puntos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.sb10-puntos-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}
.sb10-puntos-label {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}
.sb10-puntos-num {
    font-size: 2em;
    font-weight: 900; /* Lato Black, como el "2.340" del diseño */
    color: var(--sb10-acento);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sb10-puntos-avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
}
.sb10-puntos-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
    .sb10-perfil { flex-wrap: wrap; }
    .sb10-perfil-info { flex-basis: 100%; }
}

/* Continuar: tarjeta con la imagen del curso arriba (diseño oficial) */
.sb10-continuar {
    --sb10-tarjeta: #ffffff;
    --sb10-barra-fondo: #1f2c48; /* riel oscuro del diseño */
    --sb10-boton: #3da5f5;       /* azul del botón del diseño */
    display: flex;
    flex-direction: column;
    background: var(--sb10-tarjeta);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(30, 50, 90, .09);
    overflow: hidden; /* la imagen sangra hasta los bordes redondeados */
}
.sb10-continuar-media {
    display: block;
    position: relative;
    width: 100%;
    /* Marco de proporción fija (~3:1 como el diseño). El padding-bottom actúa
       de respaldo y el img va en absoluto: así ninguna foto vertical ni un
       height:auto!important del tema pueden estirar la tarjeta. */
    aspect-ratio: 3 / 1;
    height: 0;
    padding-bottom: 33%;
    overflow: hidden;
    background: linear-gradient(135deg, #e8ecf2, #d6dde8); /* placeholder si el curso no tiene imagen */
}
@supports (aspect-ratio: 3 / 1) {
    .sb10-continuar-media { height: auto; padding-bottom: 0; }
}
.sb10-continuar-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.sb10-continuar-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 20px 18px;
}
.sb10-continuar-kicker {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}
.sb10-continuar-curso {
    margin: 0;
    font-size: 1.3em;
    font-weight: 900; /* Lato Black, como "Ser y convivir" del diseño */
    line-height: 1.15;
    letter-spacing: -.01em;
}
.sb10-continuar-paso {
    margin: 0;
    opacity: .78;
    font-size: .85em;
    font-weight: 400;
}
.sb10-continuar-paso strong { font-weight: 700; }
.sb10-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--sb10-suave);
    overflow: hidden;
    margin: 6px 0 10px;
}
.sb10-barra-relleno {
    height: 100%;
    border-radius: inherit;
    background: var(--sb10-acento);
    transition: width .4s ease;
}
.sb10-continuar-barra { background: var(--sb10-barra-fondo); height: 6px; margin: 5px 0 10px; }
.sb10-continuar-barra .sb10-barra-relleno { background: var(--sb10-boton); }
.sb10-continuar-btn {
    align-self: flex-start; /* pill al inicio, no de borde a borde */
    display: inline-block;
    background: var(--sb10-boton);
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 700;
    font-size: .78em;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: opacity .15s, transform .15s;
}
.sb10-continuar-btn:hover,
.sb10-continuar-btn:focus-visible { opacity: .9; transform: translateY(-1px); }
.sb10-continuar--completa .sb10-continuar-cuerpo { align-items: flex-start; }

/* ==================== Ruta: banda de hexágonos (diseño oficial) ==================== */
.sb10-hruta {
    --sb10-navy: #1f2c48;      /* pestaña "Mi ruta" y textos oscuros */
    --sb10-azul: #2f9bf0;      /* segmento recorrido */
    --sb10-azul-osc: #1266b0;  /* burbuja del curso actual */
    --sb10-verde: #7ac143;     /* burbuja de completado y avance parcial */
    --sb10-gris-seg: #c6ccd6;  /* segmento pendiente */
    --sb10-hzona: 118px;       /* alto de las zonas superior/inferior */
    --sb10-hhex: 112px;        /* alto normalizado del hexágono */
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    color: var(--sb10-navy);
}
.sb10-hruta-tab {
    display: inline-block;
    background: var(--sb10-navy);
    color: #fff;
    font-size: 1.15em;
    font-weight: 900;
    padding: 9px 26px;
    border-radius: 10px;
    margin: 0 0 4px;
}
.sb10-hruta-lista {
    list-style: none;
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}
.sb10-hcurso {
    position: relative;
    flex: 1;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Segmento que llega a cada hexágono desde el anterior */
.sb10-hseg {
    position: absolute;
    top: calc(var(--sb10-hzona) + (var(--sb10-hhex) / 2) - 6px);
    left: calc(-50% + 48px);
    right: calc(50% + 48px);
    height: 12px;
    border-radius: 8px;
    background: var(--sb10-gris-seg);
}
.sb10-hseg--llena { background: var(--sb10-azul); }
.sb10-hseg--parcial {
    background: linear-gradient(
        to right,
        var(--sb10-verde) var(--sb10-segpct, 0%),
        var(--sb10-gris-seg) var(--sb10-segpct, 0%)
    );
}

/* Zonas superior/inferior de alto fijo: mantienen los hexágonos alineados */
.sb10-hzona {
    height: var(--sb10-hzona);
    width: 100%;
    display: flex;
    justify-content: center;
}
.sb10-hzona--sup { align-items: flex-end; padding-bottom: 12px; }
.sb10-hzona--inf { align-items: flex-start; padding-top: 12px; }

/* Hexágono ilustrado */
.sb10-hhex {
    position: relative;
    z-index: 1;
    height: var(--sb10-hhex);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: transform .18s ease;
}
.sb10-hhex img { max-height: 100%; width: auto; display: block; }
a.sb10-hhex:hover,
a.sb10-hhex:focus-visible { transform: scale(1.06); }

/* Marcadores (check / pin / candado) */
.sb10-hmarcador { width: 44px; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
    .sb10-hcurso--actual .sb10-hmarcador { animation: sb10-flotar 2.8s ease-in-out infinite; }
}

/* Burbujas de título */
.sb10-hburbuja {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 235px;
    padding: 11px 18px 13px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
}
.sb10-hburbuja strong {
    font-size: .98em;
    font-weight: 900;
    line-height: 1.2;
}
.sb10-hburbuja small {
    font-size: .78em;
    font-weight: 400;
    line-height: 1.35;
    opacity: .95;
}
.sb10-hburbuja--verde { background: var(--sb10-verde); }
.sb10-hburbuja--azul  { background: var(--sb10-azul-osc); }
.sb10-hburbuja--navy  { background: var(--sb10-navy); }

/* Burbuja de los bloqueados: oculta hasta pasar el ratón por el curso
   (o enfocarlo con teclado). El alto fijo de las zonas evita saltos. */
.sb10-hburbuja--hover {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}
.sb10-hburbuja--arriba.sb10-hburbuja--hover { transform: translateY(-6px); }
.sb10-hcurso:hover .sb10-hburbuja--hover,
.sb10-hcurso:focus-within .sb10-hburbuja--hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .sb10-hburbuja--hover { transition: none; transform: none; }
}
/* Flecha hacia el hexágono */
.sb10-hburbuja::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
}
.sb10-hburbuja--abajo::after  { bottom: 100%; border-bottom-color: currentColor; }
.sb10-hburbuja--arriba::after { top: 100%; border-top-color: currentColor; }
.sb10-hburbuja--verde::after  { color: var(--sb10-verde); }
.sb10-hburbuja--azul::after   { color: var(--sb10-azul-osc); }
.sb10-hburbuja--navy::after   { color: var(--sb10-navy); }

/* Bloque compacto: oculto en desktop, visible en móvil */
.sb10-hinfo { display: none; }

/* Móvil: lista vertical hexágono + texto */
@media (max-width: 760px) {
    .sb10-hruta-lista { flex-direction: column; gap: 20px; }
    .sb10-hcurso { flex-direction: row; align-items: center; gap: 16px; }
    .sb10-hzona, .sb10-hseg { display: none; }
    .sb10-hhex { height: 86px; flex: none; }
    .sb10-hinfo {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .sb10-hinfo strong { font-size: 1em; font-weight: 900; }
    .sb10-hinfo small { font-size: .82em; opacity: .75; }
    .sb10-hcurso--completado .sb10-hinfo small { color: var(--sb10-verde); opacity: 1; font-weight: 700; }
    .sb10-hcurso--actual .sb10-hinfo small { color: var(--sb10-azul-osc); opacity: 1; font-weight: 700; }
    .sb10-hcurso--bloqueado { opacity: .6; }
}

/* Rankings solo-dato: heredan la tipografia del widget de Elementor que
   los contiene; la clase existe solo para poder apuntarles con CSS. */
.sb10-rankval { font-variant-numeric: tabular-nums; }

/* Insignias: grid de tarjetas blancas (diseño oficial) */
.sb10-insignias {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
}
.sb10-insignias-titulo {
    display: block;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3da5f5;
    margin-bottom: 12px;
}
.sb10-insignias-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--sb10-insignias-cols, 3), 1fr); /* 3 por fila, como el diseño */
    gap: 14px;
    margin: 0;
    padding: 0;
}
.sb10-insignia {
    margin: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(30, 50, 90, .08);
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sb10-insignia:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(30, 50, 90, .13);
}
.sb10-insignia img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.sb10-insignia--pendiente { background: #f3f5f8; }
.sb10-insignia-gris { filter: grayscale(1); opacity: .55; }
.sb10-insignia-nombre-fallback { font-size: .8em; font-weight: 700; text-align: center; opacity: .7; }

/* Tooltip de insignia: nombre + cómo se gana + estado. Aparece al pasar el
   ratón o al enfocar/tocar la tarjeta (tabindex). */
.sb10-insignia { position: relative; cursor: help; }
.sb10-insignia:focus-visible { outline: 2px solid #3da5f5; outline-offset: 2px; }
.sb10-insignia-tip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 20;
    width: max-content;
    max-width: 230px;
    background: #1f2c48;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 25, 50, .3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.sb10-insignia-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #1f2c48;
}
.sb10-insignia-tip strong { font-size: .9em; font-weight: 900; }
.sb10-insignia-tip small  { font-size: .78em; font-weight: 400; line-height: 1.35; opacity: .92; }
.sb10-insignia-tip em {
    font-style: normal;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
}
.sb10-insignia--ganada .sb10-insignia-tip em { color: #8fe0b0; opacity: 1; }
.sb10-insignia:hover .sb10-insignia-tip,
.sb10-insignia:focus .sb10-insignia-tip,
.sb10-insignia:focus-within .sb10-insignia-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .sb10-insignia-tip { transition: none; }
}

/* Bloque de sesión del header (botones o avatar con menú) */
.sb10-sesion {
    --sb10-boton: #3da5f5;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb10-sesion-btn {
    display: inline-block;
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 700;
    font-size: .88em;
    letter-spacing: .04em;
    text-decoration: none !important;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.sb10-sesion-btn:hover { opacity: .88; transform: translateY(-1px); }
.sb10-sesion-btn--login {
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .85);
    background: transparent;
}
.sb10-sesion-btn--registro {
    background: #fff;
    color: var(--sb10-boton) !important;
    border: 2px solid #fff;
}
.sb10-sesion-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: block;
    border: 2px solid rgba(255, 255, 255, .85);
    box-sizing: content-box;
}
.sb10-sesion-enlace { display: block; }

/* Desplegable del avatar (details/summary: funciona sin JS) */
.sb10-sesion-menu { position: relative; }
.sb10-sesion-menu summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.sb10-sesion-menu summary::-webkit-details-marker { display: none; }
.sb10-sesion-menu summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.sb10-sesion-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    min-width: 185px;
    background: #fff;
    color: #22303f;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 25, 50, .2);
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.sb10-sesion-panel::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}
.sb10-sesion-nombre {
    font-weight: 900;
    font-size: .92em;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #e7ebf1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb10-sesion-panel a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: #22303f !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: .9em;
}
.sb10-sesion-panel a:hover,
.sb10-sesion-panel a:focus-visible { background: #eef4fb; color: #1266b0 !important; }

/* Avisos compartidos (si la página no carga registro.css) */
.sb10-card { padding: 14px 18px; border: 1px solid var(--sb10-suave); border-radius: 10px; }
.sb10-card.sb10-mal { border-color: #c96b6b; }