/* ============================================================================
   GymCavier — Estilos propios (se cargan DESPUÉS de Metronic)
   Colores base:
       Principal   rgb(103, 224, 228)  →  #67E0E4
       Secundario  rgb(0, 0, 0)        →  #000000
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Variables de marca y re-tematización de Metronic / Bootstrap
   --------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    /* Identidad de marca */
    --gc-primario: #67E0E4;
    --gc-primario-rgb: 103, 224, 228;
    --gc-primario-600: #3FC7CC;
    --gc-primario-700: #23A9AE;
    --gc-primario-100: #D6F8F9;
    --gc-primario-texto: #0E7C82;   /* variante accesible para texto sobre fondo claro */
    --gc-secundario: #000000;
    --gc-secundario-rgb: 0, 0, 0;
    --gc-secundario-suave: #14171A;
    --gc-hueso: #F4F6F7;

    /* Re-tematización global de Bootstrap / Metronic */
    --bs-primary: #67E0E4;
    --bs-primary-rgb: 103, 224, 228;
    --bs-dark: #000000;
    --bs-dark-rgb: 0, 0, 0;
    --bs-link-color: #0E7C82;
    --bs-link-color-rgb: 14, 124, 130;
    --bs-link-hover-color: #0A5F64;
    --bs-link-hover-color-rgb: 10, 95, 100;
    --bs-focus-ring-color: rgba(103, 224, 228, .35);
}

[data-bs-theme="dark"] {
    --bs-primary: #67E0E4;
    --bs-primary-rgb: 103, 224, 228;
    --gc-primario-texto: #8FE9EC;
}

/* ---------------------------------------------------------------------------
   2. Ajustes generales
   --------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
}

.page-heading {
    color: var(--gc-secundario);
    letter-spacing: -.01em;
}

.fs-8 { font-size: .72rem !important; }

a.link-primary,
.link-primary {
    color: var(--gc-primario-texto);
}
a.link-primary:hover,
.link-primary:hover {
    color: var(--gc-primario-700);
}

.text-marca { color: var(--gc-primario-texto) !important; }
.text-marca-claro { color: var(--gc-primario) !important; }
.bg-marca { background-color: var(--gc-primario) !important; }
.bg-negro { background-color: var(--gc-secundario) !important; }
.border-marca { border-color: var(--gc-primario) !important; }

/* Títulos de sección */
.gc-seccion-titulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9AA2A8;
}

/* ---------------------------------------------------------------------------
   3. Botones
   --------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: #000000;
    --bs-btn-bg: var(--gc-primario);
    --bs-btn-border-color: var(--gc-primario);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #55D6DA;
    --bs-btn-hover-border-color: #48CDD1;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: var(--gc-primario-600);
    --bs-btn-active-border-color: var(--gc-primario-600);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: var(--gc-primario);
    --bs-btn-disabled-border-color: var(--gc-primario);
    --bs-btn-focus-shadow-rgb: 103, 224, 228;
    font-weight: 600;
}

.btn-dark {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--gc-secundario);
    --bs-btn-border-color: var(--gc-secundario);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--gc-primario);
    --bs-btn-hover-border-color: var(--gc-primario);
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: var(--gc-primario-600);
    --bs-btn-active-border-color: var(--gc-primario-600);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--gc-secundario);
    --bs-btn-disabled-border-color: var(--gc-secundario);
    font-weight: 600;
}

.btn-marca-suave {
    background-color: var(--gc-primario-100);
    border-color: transparent;
    color: var(--gc-primario-texto);
    font-weight: 600;
}
.btn-marca-suave:hover,
.btn-marca-suave:focus {
    background-color: var(--gc-primario);
    color: var(--gc-secundario);
}

.btn-outline-marca {
    border: 1px solid var(--gc-primario);
    color: var(--gc-primario-texto);
    font-weight: 600;
    background-color: transparent;
}
.btn-outline-marca:hover {
    background-color: var(--gc-primario);
    color: var(--gc-secundario);
}

/* ---------------------------------------------------------------------------
   4. Tarjetas, KPI y semáforos
   --------------------------------------------------------------------------- */
.card {
    border-radius: .85rem;
}

.gc-kpi {
    position: relative;
    overflow: hidden;
}
.gc-kpi::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(var(--gc-primario-rgb), .16);
}
.gc-kpi .gc-kpi-icono {
    width: 44px;
    height: 44px;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--gc-primario-rgb), .18);
    color: var(--gc-primario-texto);
}
.gc-kpi-negro .gc-kpi-icono {
    background: rgba(255, 255, 255, .12);
    color: var(--gc-primario);
}
.gc-kpi-negro {
    background: var(--gc-secundario);
    color: #ffffff;
}
.gc-kpi-negro .gc-kpi-valor,
.gc-kpi-negro .gc-kpi-etiqueta {
    color: #ffffff;
}
.gc-kpi-negro .gc-kpi-etiqueta {
    opacity: .65;
}

.gc-kpi-valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gc-secundario);
}
.gc-kpi-etiqueta {
    font-size: .8rem;
    font-weight: 600;
    color: #8A9199;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Semáforo de cumplimiento */
.gc-semaforo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
}
.gc-semaforo .gc-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}
.gc-semaforo-verde .gc-punto { background: #50CD89; box-shadow: 0 0 0 4px rgba(80, 205, 137, .18); }
.gc-semaforo-ambar .gc-punto { background: #FFC700; box-shadow: 0 0 0 4px rgba(255, 199, 0, .18); }
.gc-semaforo-rojo  .gc-punto { background: #F1416C; box-shadow: 0 0 0 4px rgba(241, 65, 108, .18); }
.gc-semaforo-verde { color: #16A36B; }
.gc-semaforo-ambar { color: #B58900; }
.gc-semaforo-rojo  { color: #D63963; }

/* Avatar con iniciales */
.gc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #062A2C;
    background: var(--gc-primario);
    letter-spacing: .02em;
    flex: 0 0 42px;
}
.gc-avatar-sm { width: 34px; height: 34px; flex-basis: 34px; font-size: .82rem; }
.gc-avatar-lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.3rem; }

/* Tablas */
.gc-tabla-alumnos tbody tr:hover {
    background-color: rgba(var(--gc-primario-rgb), .07);
}
.gc-tabla-alumnos td,
.gc-tabla-alumnos th {
    vertical-align: middle;
}

/* Barras de progreso de marca */
.progress-bar.bg-marca { background-color: var(--gc-primario) !important; }

/* Aviso de acceso restringido (login) */
.gc-auth-aviso {
    background: #F7F9FA;
    border: 1px solid #EDF0F2;
    border-radius: .75rem;
    padding: 1rem 1.15rem;
}
.gc-auth-aviso .gc-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--gc-primario-rgb), .18);
    color: var(--gc-primario-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
}

/* Aviso de entorno de desarrollo (barra superior) */
.gc-aviso-entorno {
    background: #FFF8E1;
    border-bottom: 1px solid #FFE69C;
    color: #8A6100;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    padding: .45rem 1rem;
}
.gc-aviso-entorno a { color: #8A6100; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   5. Sidebar (layout dark-sidebar → negro de marca)
   --------------------------------------------------------------------------- */
[data-kt-app-layout="dark-sidebar"] .app-sidebar,
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: var(--gc-secundario) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    min-height: 60px;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: rgba(var(--gc-primario-rgb), .14) !important;
    color: var(--gc-primario) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--gc-primario) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: var(--gc-primario) !important;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-icon i {
    color: #ffffff !important;
}
.gc-sidebar-credito {
    border-radius: .65rem;
    background: rgba(var(--gc-primario-rgb), .1);
    border: 1px solid rgba(var(--gc-primario-rgb), .28);
    color: #CFD4D7;
    padding: .85rem 1rem;
}
.gc-sidebar-credito strong { color: var(--gc-primario); }

/* Encabezado de la app */
.app-header {
    border-bottom: 1px solid #EFF1F3;
}
.gc-buscador-global .form-control {
    background-color: var(--gc-hueso);
    border-color: transparent;
}
.gc-buscador-global .form-control:focus {
    border-color: var(--gc-primario);
    box-shadow: 0 0 0 .2rem rgba(var(--gc-primario-rgb), .25);
}

/* ---------------------------------------------------------------------------
   6. Autenticación (login)
   --------------------------------------------------------------------------- */
.gc-auth {
    min-height: 100vh;
    display: flex;
    background: var(--gc-hueso);
}
.gc-auth-aside {
    position: relative;
    overflow: hidden;
    flex: 1 1 52%;
    color: #ffffff;
    /* El contenido se ancla abajo a la derecha: deja libre la parte alta e
       izquierda de la fotografía y mantiene el texto en la zona oscurecida. */
    padding: 3rem 3.5rem 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    background-color: var(--gc-secundario);
    /* Fotografía de marca cubriendo todo el ancho de la sección.
       El degradado radial oscurece la esquina inferior derecha (donde va el
       texto) y el lineal remata el borde inferior, integrándose con el negro
       de marca sin tapar la imagen. */
    background-image:
        radial-gradient(115% 95% at 100% 100%, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, 0) 78%),
        linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .55) 100%),
        url('../media/auth/panel-login.png');
    background-size: cover, cover, cover;
    background-position: center, center, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
.gc-auth-aside::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -220px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--gc-primario-rgb), .22), transparent 62%);
}
.gc-auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 25% 30%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 25% 30%, #000 10%, transparent 72%);
    pointer-events: none;
}
.gc-auth-aside > * { position: relative; z-index: 1; }
.gc-auth-titulo {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    /* Blanco explícito: Metronic/Bootstrap aplica su propio color a los h1,
       que gana sobre el color heredado del contenedor. */
    color: #ffffff;
}
.gc-auth-titulo span { color: var(--gc-primario); }
.gc-auth-sub { color: rgba(255, 255, 255, .68); font-size: 1.05rem; max-width: 34rem; }
.gc-auth-lista { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1rem; }
.gc-auth-lista li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .85rem;
    color: rgba(255, 255, 255, .86);
    font-weight: 500;
}
.gc-auth-lista .gc-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--gc-primario-rgb), .16);
    color: var(--gc-primario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    margin-top: 1px;
}
.gc-auth-pie { color: rgba(255, 255, 255, .45); font-size: .82rem; }

/* Bloque de presentación (logo, titular, características) anclado abajo a la derecha */
.gc-auth-bloque {
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
}
.gc-auth-bloque .gc-auth-sub { max-width: 100%; margin-left: auto; }
.gc-auth-bloque .gc-auth-lista { width: 100%; }

/* Logotipo sobre fondo oscuro dentro de la tarjeta clara del login en móvil */
.gc-logo-pastilla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gc-secundario);
    border-radius: .85rem;
    padding: .7rem 1.15rem;
}

.gc-auth-main {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--gc-hueso);
}
.gc-auth-card {
    width: 100%;
    max-width: 452px;
    background: #ffffff;
    border-radius: 1.1rem;
    padding: 2.75rem 2.5rem 2.25rem;
    box-shadow: 0 18px 60px rgba(16, 24, 32, .10);
    border: 1px solid #EDF0F2;
}
.gc-auth-card .form-control {
    background-color: #F7F9FA;
    border-color: #E7EBEE;
    padding: .9rem 1rem;
    height: auto;
}
.gc-auth-card .form-control:focus {
    background-color: #ffffff;
    border-color: var(--gc-primario);
    box-shadow: 0 0 0 .22rem rgba(var(--gc-primario-rgb), .3);
}
.gc-auth-card .input-group-text {
    background-color: #F7F9FA;
    border-color: #E7EBEE;
}
.gc-auth-logo-movil { display: none; }
.gc-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gc-primario-100);
    color: var(--gc-primario-texto);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.gc-ver-clave {
    cursor: pointer;
    border: 0;
    background: transparent;
    color: #98A1A8;
    padding: 0 .25rem;
}
.gc-ver-clave:hover { color: var(--gc-primario-texto); }

/* Tablet horizontal y portátiles pequeños: el panel de la foto se estrecha,
   así que se reduce el titular y los espaciados para que el bloque respire. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .gc-auth-aside { padding: 2.25rem 2.5rem 2.5rem; }
    .gc-auth-titulo { font-size: 2rem; }
    .gc-auth-sub { font-size: .95rem; }
    .gc-auth-lista { gap: .7rem; }
    .gc-auth-bloque { max-width: 32rem; }
}

@media (max-width: 991.98px) {
    .gc-auth-aside { display: none; }
    .gc-auth-logo-movil { display: block; }
    .gc-auth-main { background: #ffffff; }
    .gc-auth-card { box-shadow: none; border: 0; padding: 1.5rem .25rem; max-width: 420px; }
}

/* ---------------------------------------------------------------------------
   7. Detalles de paneles
   --------------------------------------------------------------------------- */
.gc-lista-comida {
    border-left: 3px solid var(--gc-primario);
    padding-left: 1rem;
}
.gc-ejercicio-fila {
    border-bottom: 1px dashed #E7EBEE;
}
.gc-ejercicio-fila:last-child { border-bottom: 0; }

.gc-raya {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--gc-primario-100);
    color: var(--gc-primario-texto);
}

.gc-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gc-primario);
    box-shadow: 0 0 0 4px rgba(var(--gc-primario-rgb), .22);
}

/* Gráficas: altura mínima para que ApexCharts no colapse */
.gc-grafica { min-height: 260px; }
.gc-grafica-sm { min-height: 200px; }

/* ---------------------------------------------------------------------------
   Agenda de citas (FullCalendar) — Fase 4
   Se ajustan los colores del calendario a la marca y se mejora la legibilidad
   de los eventos, que muestran hora, motivo y alumno.
   --------------------------------------------------------------------------- */
#gc_calendario {
    --fc-border-color: #EFF1F3;
    --fc-today-bg-color: rgba(var(--gc-primario-rgb), .12);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: #F8F9FA;
}

#gc_calendario .fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gc-secundario);
    text-transform: capitalize;
}

#gc_calendario .fc .fc-button {
    background-color: #F1F3F6;
    border: 1px solid #E4E6EF;
    color: #3F4254;
    font-size: .82rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    padding: .45rem .8rem;
}

#gc_calendario .fc .fc-button:hover {
    background-color: var(--gc-primario-100);
    border-color: var(--gc-primario);
    color: var(--gc-primario-texto);
}

#gc_calendario .fc .fc-button-primary:not(:disabled).fc-button-active,
#gc_calendario .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--gc-primario);
    border-color: var(--gc-primario);
    color: var(--gc-secundario);
}

#gc_calendario .fc .fc-col-header-cell-cushion,
#gc_calendario .fc .fc-daygrid-day-number,
#gc_calendario .fc .fc-timegrid-slot-label-cushion {
    color: #7E8299;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
}

#gc_calendario .fc .fc-day-today .fc-daygrid-day-number {
    background: var(--gc-primario);
    color: var(--gc-secundario);
    border-radius: 50%;
    min-width: 24px;
    text-align: center;
}

#gc_calendario .fc .fc-daygrid-event,
#gc_calendario .fc .fc-timegrid-event {
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

#gc_calendario .fc .fc-event-main {
    color: inherit;
}

#gc_calendario .fc .fc-timegrid-now-indicator-line {
    border-color: var(--gc-primario-700);
}

#gc_calendario .fc .fc-highlight {
    background: rgba(var(--gc-primario-rgb), .22);
}

.gc-evento {
    line-height: 1.15;
    overflow: hidden;
}

/* Impresión */
@media print {
    .app-header, .app-sidebar, .app-toolbar { display: none !important; }
}