/* ==========================================================================
   Gimnasio Mental — estilos propios.
   Se apoyan en el paquete gráfico (Bootstrap 5 + CORK) y solo añaden lo que
   la plataforma necesita: cabecera de pestañas, feed, classroom, reproductor,
   niveles y gráfica de contribución. Compatible con el modo oscuro (.dark).
   ========================================================================== */

:root {
    --gm-primary: #4285f4;
    --gm-primary-oscuro: #2f6fdb;
    --gm-primary-soft: #e8f0fe;
    --gm-success: #00ab55;
    --gm-warning: #e2a03f;
    --gm-danger: #e7515a;
    --gm-info: #2196f3;
    --gm-texto: #3b3f5c;
    --gm-texto-suave: #888ea8;
    --gm-borde: #e0e6ed;
    --gm-fondo: #fafafa;
    --gm-superficie: #fff;
    --gm-radio: 8px;
    --gm-sombra: 0 6px 18px rgba(31, 45, 61, .07);
    --gm-ancho: 1180px;
}

body.dark {
    --gm-primary-soft: #1e3255;
    --gm-texto: #e0e6ed;
    --gm-texto-suave: #888ea8;
    --gm-borde: #1b2e4b;
    --gm-fondo: #060818;
    --gm-superficie: #0e1726;
    --gm-sombra: 0 6px 18px rgba(0, 0, 0, .25);
}

body.gm-body {
    background: var(--gm-fondo);
    color: var(--gm-texto);
}

.gm-contenedor {
    max-width: var(--gm-ancho);
    margin: 0 auto;
    padding: 0 16px;
}

.gm-contenedor-angosto { max-width: 860px; }

/* ==========================================================================
   1. Cabecera de la aplicación (estilo pestañas)
   ========================================================================== */

.gm-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--gm-superficie);
    border-bottom: 1px solid var(--gm-borde);
}

.gm-header__fila {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 70px;
}

/* El logotipo horizontal ya incluye el nombre: no lleva texto al lado. */
.gm-marca {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.gm-marca img { display: block; max-width: 100%; }

@media (max-width: 575px) {
    .gm-marca img { height: 36px !important; }
}

.gm-header__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.gm-icono-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--gm-texto-suave);
    background: transparent;
    border: 0;
    transition: .2s;
}
.gm-icono-btn:hover { background: var(--gm-primary-soft); color: var(--gm-primary); }
.gm-icono-btn svg { width: 20px; height: 20px; }
.gm-icono-btn .gm-punto {
    position: absolute;
    top: 6px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--gm-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Pestañas tipo Skool */
.gm-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--gm-borde);
}
.gm-tabs::-webkit-scrollbar { display: none; }
.gm-tabs a {
    position: relative;
    padding: 13px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-texto-suave);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: .15s;
}
.gm-tabs a:hover { color: var(--gm-texto); }
.gm-tabs a.active {
    color: var(--gm-primary);
    border-bottom-color: var(--gm-primary);
}

/* Barra inferior en móvil */
.gm-tabbar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1040;
    background: var(--gm-superficie);
    border-top: 1px solid var(--gm-borde);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.gm-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gm-texto-suave);
    text-decoration: none;
}
.gm-tabbar a svg { width: 20px; height: 20px; }
.gm-tabbar a.active { color: var(--gm-primary); }

@media (max-width: 767px) {
    .gm-tabs { display: none; }
    .gm-tabbar { display: flex; }
    body.gm-body { padding-bottom: 64px; }
}

/* ==========================================================================
   2. Estructura de dos columnas (feed, classroom)
   ========================================================================== */

.gm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    padding: 22px 0 40px;
}
.gm-layout--solo { grid-template-columns: minmax(0, 1fr); }

/* En pantallas angostas el contenido principal va primero y el lateral debajo. */
@media (max-width: 991px) {
    .gm-layout { grid-template-columns: minmax(0, 1fr); }
}

.gm-tarjeta {
    background: var(--gm-superficie);
    border: 1px solid var(--gm-borde);
    border-radius: var(--gm-radio);
    box-shadow: var(--gm-sombra);
}
.gm-tarjeta + .gm-tarjeta { margin-top: 16px; }
.gm-tarjeta__cuerpo { padding: 18px; }
.gm-tarjeta__titulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--gm-texto-suave);
    padding: 14px 18px;
    border-bottom: 1px solid var(--gm-borde);
    margin: 0;
}

/* ==========================================================================
   3. Avatares con insignia de nivel
   ========================================================================== */

.gm-avatar {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.gm-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.gm-avatar--xs { width: 28px; height: 28px; }
.gm-avatar--sm { width: 38px; height: 38px; }
.gm-avatar--md { width: 46px; height: 46px; }
.gm-avatar--lg { width: 72px; height: 72px; }
.gm-avatar--xl { width: 116px; height: 116px; }

.gm-avatar__nivel {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--gm-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--gm-superficie);
}
.gm-avatar--lg .gm-avatar__nivel,
.gm-avatar--xl .gm-avatar__nivel {
    min-width: 26px; height: 26px; line-height: 26px; font-size: 12px; border-radius: 13px;
}
/* Anillo de nivel del perfil */
.gm-avatar--anillo > img { border: 3px solid var(--gm-primary); }

/* ==========================================================================
   4. Feed de la comunidad
   ========================================================================== */

.gm-compositor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.gm-compositor input {
    flex: 1;
    border: 1px solid var(--gm-borde);
    background: var(--gm-fondo);
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--gm-texto);
}
.gm-compositor input:focus { outline: none; border-color: var(--gm-primary); }

.gm-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
}
.gm-chips::-webkit-scrollbar { display: none; }
.gm-chip {
    padding: 6px 14px;
    border-radius: 18px;
    border: 1px solid var(--gm-borde);
    background: var(--gm-superficie);
    color: var(--gm-texto-suave);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: .15s;
}
.gm-chip:hover { border-color: var(--gm-primary); color: var(--gm-primary); }
.gm-chip.active { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; }

.gm-post { display: block; }
.gm-post__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 0;
}
.gm-post__meta { min-width: 0; flex: 1; }
.gm-post__autor {
    font-size: 14px;
    font-weight: 700;
    color: var(--gm-texto);
    text-decoration: none;
}
.gm-post__autor:hover { color: var(--gm-primary); }
.gm-post__sub {
    font-size: 12px;
    color: var(--gm-texto-suave);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.gm-post__sub .gm-sep { opacity: .5; }
.gm-post__cuerpo { padding: 10px 18px 0; }
.gm-post__titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--gm-texto);
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    line-height: 1.35;
}
.gm-post__titulo:hover { color: var(--gm-primary); }
.gm-post__extracto {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gm-texto-suave);
    margin: 0;
}
.gm-post__imagen {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    margin-top: 14px;
    border-radius: 6px;
}
.gm-post__pie {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    margin-top: 10px;
    border-top: 1px solid var(--gm-borde);
}
.gm-accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-texto-suave);
    text-decoration: none;
    transition: .15s;
}
.gm-accion svg { width: 17px; height: 17px; }
.gm-accion:hover { color: var(--gm-primary); }
.gm-accion.is-activa { color: var(--gm-danger); }
.gm-accion.is-activa svg { fill: var(--gm-danger); }

.gm-contenido-rico { font-size: 15px; line-height: 1.75; color: var(--gm-texto); }
.gm-contenido-rico h5 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; }
.gm-contenido-rico p { margin-bottom: 14px; }
.gm-contenido-rico ul, .gm-contenido-rico ol { margin: 0 0 14px; padding-left: 22px; }
.gm-contenido-rico li { margin-bottom: 6px; }
.gm-contenido-rico blockquote {
    border-left: 3px solid var(--gm-primary);
    padding: 4px 0 4px 16px;
    margin: 18px 0;
    color: var(--gm-texto-suave);
    font-style: italic;
}
.gm-contenido-rico code {
    background: var(--gm-primary-soft);
    color: var(--gm-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* Comentarios */
.gm-comentario { display: flex; gap: 12px; padding: 14px 0; }
.gm-comentario + .gm-comentario { border-top: 1px solid var(--gm-borde); }
.gm-comentario__burbuja {
    background: var(--gm-fondo);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
}
.gm-respuestas {
    margin-left: 46px;
    padding-left: 14px;
    border-left: 2px solid var(--gm-borde);
}
.gm-respuestas .gm-comentario { border-top: 0; padding: 10px 0; }

/* ==========================================================================
   5. Classroom
   ========================================================================== */

.gm-grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gm-curso {
    display: flex;
    flex-direction: column;
    background: var(--gm-superficie);
    border: 1px solid var(--gm-borde);
    border-radius: var(--gm-radio);
    box-shadow: var(--gm-sombra);
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}
.gm-curso:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31, 45, 61, .12); }
.gm-curso__portada {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gm-primary-soft);
    overflow: hidden;
}
.gm-curso__portada img { width: 100%; height: 100%; object-fit: cover; }
.gm-curso__candado {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    color: #fff;
}
.gm-curso__candado svg { width: 34px; height: 34px; }
.gm-curso__etiqueta { position: absolute; top: 10px; left: 10px; }
.gm-curso__cuerpo { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.gm-curso__titulo { font-size: 16px; font-weight: 700; color: var(--gm-texto); margin: 0 0 6px; }
.gm-curso__desc { font-size: 13px; line-height: 1.6; color: var(--gm-texto-suave); margin: 0 0 14px; flex: 1; }
.gm-curso__pie { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--gm-texto-suave); }

.gm-progreso { height: 6px; border-radius: 3px; background: var(--gm-borde); overflow: hidden; }
.gm-progreso__barra { height: 100%; border-radius: 3px; background: var(--gm-primary); }
.gm-progreso--fino { height: 4px; }

/* Barra de progreso dentro de una celda de tabla: la celda se ajusta al
   contenido, así que hay que darle un ancho mínimo para que la barra se vea. */
.gm-progreso-celda {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 165px;
}
.gm-progreso-celda .gm-progreso { flex: 1 1 auto; }

/* Vista de lección: índice + centro */
.gm-leccion-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 0 40px;
    align-items: start;
}
@media (max-width: 991px) {
    .gm-leccion-layout { grid-template-columns: minmax(0, 1fr); }
}

.gm-indice { position: sticky; top: 122px; max-height: calc(100vh - 150px); overflow-y: auto; }
@media (max-width: 991px) { .gm-indice { position: static; max-height: none; } }

.gm-indice__modulo > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gm-texto);
    cursor: pointer;
    list-style: none;
    border-top: 1px solid var(--gm-borde);
}
.gm-indice__modulo > summary::-webkit-details-marker { display: none; }
.gm-indice__modulo > summary .gm-flecha { transition: transform .2s; margin-left: auto; }
.gm-indice__modulo[open] > summary .gm-flecha { transform: rotate(90deg); }

.gm-indice__leccion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--gm-texto-suave);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.gm-indice__leccion:hover { background: var(--gm-fondo); color: var(--gm-texto); }
.gm-indice__leccion.is-activa {
    background: var(--gm-primary-soft);
    border-left-color: var(--gm-primary);
    color: var(--gm-primary);
    font-weight: 600;
}
.gm-indice__leccion.is-bloqueada { opacity: .6; cursor: not-allowed; }
.gm-indice__estado { flex-shrink: 0; margin-top: 1px; }
.gm-indice__estado svg { width: 16px; height: 16px; }
.gm-indice__estado--ok { color: var(--gm-success); }
.gm-indice__dur { margin-left: auto; font-size: 11px; opacity: .8; padding-left: 8px; }

/* Reproductor */
.gm-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b1020;
    border-radius: var(--gm-radio) var(--gm-radio) 0 0;
    overflow: hidden;
}
.gm-video iframe, .gm-video video { width: 100%; height: 100%; border: 0; display: block; }
.gm-video__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8792ab;
    gap: 10px;
    text-align: center;
    padding: 20px;
}

.gm-recurso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gm-borde);
    border-radius: 6px;
    text-decoration: none;
    color: var(--gm-texto);
    transition: .15s;
}
.gm-recurso:hover { border-color: var(--gm-primary); background: var(--gm-primary-soft); }
.gm-recurso + .gm-recurso { margin-top: 8px; }

/* ==========================================================================
   6. Leaderboard y niveles
   ========================================================================== */

.gm-lb-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: var(--gm-texto);
}
.gm-lb-fila + .gm-lb-fila { border-top: 1px solid var(--gm-borde); }
.gm-lb-fila:hover { background: var(--gm-fondo); }
.gm-lb-fila.is-tu { background: var(--gm-primary-soft); }
.gm-lb-pos {
    width: 26px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gm-texto-suave);
    text-align: center;
    flex-shrink: 0;
}
.gm-lb-pos--1 { color: #d4a017; }
.gm-lb-pos--2 { color: #9aa5b1; }
.gm-lb-pos--3 { color: #b06a34; }

.gm-nivel-fila {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
}
.gm-nivel-fila + .gm-nivel-fila { border-top: 1px solid var(--gm-borde); }
.gm-nivel-insignia {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--gm-borde);
    color: var(--gm-texto-suave);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gm-nivel-fila.is-alcanzado .gm-nivel-insignia { background: var(--gm-primary); color: #fff; }
.gm-nivel-fila.is-actual { background: var(--gm-primary-soft); }

/* ==========================================================================
   7. Gráfica de contribución (estilo GitHub)
   ========================================================================== */

.gm-contribuciones { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.gm-contrib-semana { display: flex; flex-direction: column; gap: 3px; }
.gm-contrib-dia {
    width: 11px; height: 11px;
    border-radius: 2px;
    background: var(--gm-borde);
}
.gm-contrib-dia[data-n="0"] { background: var(--gm-borde); }
.gm-contrib-dia[data-n="1"] { background: #c3dafd; }
.gm-contrib-dia[data-n="2"] { background: #93bbf9; }
.gm-contrib-dia[data-n="3"] { background: #659df6; }
.gm-contrib-dia[data-n="4"] { background: #4285f4; }
.gm-contrib-dia[data-n="-1"] { background: transparent; }

/* ==========================================================================
   8. Calendario
   ========================================================================== */

.gm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid var(--gm-borde);
    border-top: 1px solid var(--gm-borde);
}
.gm-cal-encabezado {
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--gm-texto-suave);
    border-right: 1px solid var(--gm-borde);
    border-bottom: 1px solid var(--gm-borde);
    background: var(--gm-fondo);
}
.gm-cal-dia {
    min-height: 104px;
    padding: 6px;
    border-right: 1px solid var(--gm-borde);
    border-bottom: 1px solid var(--gm-borde);
    font-size: 12px;
}
.gm-cal-dia.is-otro-mes { background: var(--gm-fondo); opacity: .55; }
.gm-cal-dia.is-hoy .gm-cal-num {
    background: var(--gm-primary);
    color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.gm-cal-num { font-weight: 700; color: var(--gm-texto-suave); }
.gm-cal-evento {
    display: block;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--gm-primary-soft);
    color: var(--gm-primary);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-cal-evento.is-cancelado { text-decoration: line-through; opacity: .6; }

@media (max-width: 767px) {
    .gm-cal-dia { min-height: 68px; font-size: 11px; }
    .gm-cal-evento { font-size: 0; padding: 3px; height: 8px; }
}

/* ==========================================================================
   9. Página pública
   ========================================================================== */

.gm-hero {
    padding: 56px 0 44px;
    background: linear-gradient(135deg, #4361ee 0%, #7048e8 100%);
    color: #fff;
}
.gm-hero h1,
.gm-hero p,
.gm-hero span,
.gm-hero a.btn-outline-light { color: #fff; }
.gm-hero h1 { font-size: 40px; font-weight: 700; line-height: 1.15; margin-bottom: 14px; }
.gm-hero p.gm-lema { font-size: 18px; opacity: .92; margin-bottom: 26px; }
.gm-hero .badge { color: #fff; }
@media (max-width: 767px) { .gm-hero h1 { font-size: 29px; } }

.gm-hero__media {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    display: flex; align-items: center; justify-content: center;
}
.gm-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.gm-precio-card { text-align: center; padding: 28px; }
.gm-precio { font-size: 44px; font-weight: 700; color: var(--gm-texto); line-height: 1; }
.gm-precio small { font-size: 15px; font-weight: 600; color: var(--gm-texto-suave); }

.gm-lista-check { list-style: none; padding: 0; margin: 0; text-align: left; }
.gm-lista-check li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gm-texto);
}
.gm-lista-check svg {
    position: absolute;
    left: 0; top: 10px;
    width: 18px; height: 18px;
    color: var(--gm-success);
}

/* ==========================================================================
   10. Utilidades
   ========================================================================== */

.gm-vacio { text-align: center; padding: 48px 20px; }
.gm-vacio svg { width: 46px; height: 46px; color: var(--gm-texto-suave); opacity: .5; margin-bottom: 14px; }
.gm-vacio h5 { font-size: 16px; font-weight: 700; color: var(--gm-texto); margin-bottom: 6px; }
.gm-vacio p { font-size: 14px; color: var(--gm-texto-suave); margin-bottom: 18px; }

.gm-skeleton {
    background: linear-gradient(90deg, var(--gm-borde) 25%, var(--gm-fondo) 37%, var(--gm-borde) 63%);
    background-size: 400% 100%;
    animation: gm-brillo 1.4s ease infinite;
    border-radius: 4px;
}
@keyframes gm-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.gm-kpi { padding: 18px 20px; }
.gm-kpi__etiqueta {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--gm-texto-suave); margin-bottom: 8px;
}
.gm-kpi__valor { font-size: 26px; font-weight: 700; color: var(--gm-texto); line-height: 1.1; }
.gm-kpi__sub { font-size: 12px; color: var(--gm-texto-suave); margin-top: 6px; }
.gm-delta { font-size: 12px; font-weight: 700; }
.gm-delta--sube { color: var(--gm-success); }
.gm-delta--baja { color: var(--gm-danger); }

.gm-tabla-mini td, .gm-tabla-mini th { padding: 8px 6px; font-size: 13px; }

.gm-etiqueta-suave {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: var(--gm-primary-soft);
    color: var(--gm-primary);
}

.gm-texto-suave { color: var(--gm-texto-suave) !important; }
.gm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ==========================================================================
   11. Ajustes al paquete gráfico dentro del panel administrativo
   ========================================================================== */

/* El título de la barra de migas viene casi transparente en la plantilla */
.breadcrumbs-container .page-title h3 {
    color: var(--gm-texto);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 2px;
}

/* Las tarjetas propias dentro del panel no necesitan margen extra */
.main-content .gm-tarjeta { margin-bottom: 0; }
.main-content .gm-tarjeta + .gm-tarjeta { margin-top: 16px; }

/* Pestañas legibles en ambos temas */
.nav-tabs { border-bottom: 1px solid var(--gm-borde); }
.nav-tabs .nav-link {
    color: var(--gm-texto-suave);
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
}
.nav-tabs .nav-link:hover { color: var(--gm-texto); border-bottom-color: var(--gm-borde); }
.nav-tabs .nav-link.active {
    color: var(--gm-primary);
    background: transparent;
    border-bottom-color: var(--gm-primary);
}

/* Tablas: cabecera consistente con las tarjetas propias */
.gm-tarjeta .table > :not(caption) > * > * { padding: 11px 14px; }
.gm-tarjeta .table thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--gm-texto-suave);
    background: var(--gm-fondo);
    border-bottom: 1px solid var(--gm-borde);
    white-space: nowrap;
}
.gm-tarjeta .table tbody td { border-bottom: 1px solid var(--gm-borde); vertical-align: middle; }
.gm-tarjeta .table tbody tr:last-child td { border-bottom: 0; }

/* Los botones de acción dentro de un dropdown-item ocupan toda la fila */
.dropdown-menu form { display: block; }
.dropdown-menu form .dropdown-item { width: 100%; text-align: left; border: 0; background: none; }

/* ==========================================================================
   12. Modales
   La plantilla traía en su hoja CLARA los valores del tema oscuro, así que
   los modales salían negros con el texto invisible. Aquí se fija la
   superficie y el contraste del texto en los dos temas.
   ========================================================================== */

.modal-content {
    background: var(--gm-superficie) !important;
    color: var(--gm-texto);
    border: 1px solid var(--gm-borde);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(31, 45, 61, .18);
}

.modal-header,
.modal-footer {
    background: transparent;
    border-color: var(--gm-borde);
    padding: 16px 20px;
}
.modal-body { padding: 20px; color: var(--gm-texto); }

.modal-title { color: var(--gm-texto); font-size: 17px; font-weight: 700; }

/* Texto suelto, etiquetas y listas dentro del modal */
.modal-body p,
.modal-body li,
.modal-body label,
.modal-body span:not(.badge):not(.input-group-text),
.modal-body strong { color: var(--gm-texto); }
.modal-body .gm-texto-suave,
.modal-body small { color: var(--gm-texto-suave) !important; }

/* Campos de formulario dentro del modal */
.modal-content .form-control,
.modal-content .form-select {
    background-color: var(--gm-superficie);
    color: var(--gm-texto);
    border-color: var(--gm-borde);
}
.modal-content .form-control::placeholder { color: var(--gm-texto-suave); opacity: .8; }
.modal-content .form-control:focus,
.modal-content .form-select:focus {
    border-color: var(--gm-primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, .15);
}
.modal-content .input-group-text {
    background: var(--gm-fondo);
    color: var(--gm-texto-suave);
    border-color: var(--gm-borde);
}

/* Bloques de código (payload de webhook) */
.modal-content pre { color: var(--gm-texto); }

/* Botón de cierre visible en modo oscuro */
body.dark .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Fondo del velo */
.modal-backdrop.show { opacity: .55; }

/* Validación de formularios: mensaje visible junto al campo que falta */
.gm-error-campo {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gm-danger);
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--gm-danger) !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(231, 81, 90, .15) !important;
}
/* Botón deshabilitado: que se note que está bloqueado a propósito */
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

/* Mismo tratamiento para los popovers y tooltips del panel */
.popover { background: var(--gm-superficie); border-color: var(--gm-borde); }
.popover-body { color: var(--gm-texto); }

/* Barra de demostración */
.gm-demo-bar {
    background: #1b2e4b;
    color: #d3d3d3;
    font-size: 12px;
    padding: 7px 0;
}
.gm-demo-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.gm-demo-bar .gm-demo-chip {
    display: inline-block;
    padding: 2px 9px;
    margin-left: 6px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
}
.gm-demo-bar .gm-demo-chip.active { background: var(--gm-primary); }
@media (max-width: 767px) {
    .gm-demo-bar > .gm-contenedor {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .gm-demo-bar > .gm-contenedor::-webkit-scrollbar { display: none; }
    .gm-demo-bar > .gm-contenedor > span { flex-wrap: nowrap !important; }
    .gm-demo-bar .gm-demo-chip { white-space: nowrap; }
}

/* Modo oscuro: superficies del paquete gráfico */
body.dark .gm-tarjeta,
body.dark .gm-curso,
body.dark .gm-header { background: var(--gm-superficie); }
body.dark .gm-compositor input { background: #1b2e4b; border-color: #1b2e4b; }
body.dark .gm-comentario__burbuja { background: #1b2e4b; }
body.dark .gm-contrib-dia[data-n="1"] { background: #1e3255; }
body.dark .gm-contrib-dia[data-n="2"] { background: #2a5290; }
body.dark .gm-contrib-dia[data-n="3"] { background: #3672cc; }