/* =============================================================================
   STYLES.CSS — grabaciones-poli-b2c
   Politécnico Grancolombiano · Soluciones Kiosnkof S.A.S.
   =============================================================================
   Convención de prefijo: pgrab- para todas las clases propias.
   Complementa Bootstrap 5.3.8 sin sobreescribir su core.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. CUSTOM PROPERTIES (Design Tokens)
   --------------------------------------------------------------------------- */
:root {
    --pgrab-primary:       #0F385A;   /* Azul institucional Politécnico */
    --pgrab-secondary:     #E0006E;   /* Magenta corporativa */
    --pgrab-accent:        #F0F8FF;   /* AliceBlue – fondos de card */
    --pgrab-expired:       #6c757d;   /* Gris para acceso expirado */
    --pgrab-warning-badge: #fd7e14;   /* Naranja para <3 días restantes */

    --pgrab-body-bg-from:  rgba(15, 56, 90, 0.92);
    --pgrab-body-bg-to:    rgba(8, 30, 50, 0.96);

    --pgrab-shadow-card:   0 8px 30px rgba(0, 0, 0, 0.18);
    --pgrab-radius-card:   1rem;
    --pgrab-transition:    0.2s ease-in-out;
}

/* ---------------------------------------------------------------------------
   1. BODY Y FONDO
   --------------------------------------------------------------------------- */
.pgrab-body {
    background-image:
        linear-gradient(
            var(--pgrab-body-bg-from),
            var(--pgrab-body-bg-to)
        ),
        url('https://enext-analytics.s3.amazonaws.com/usercontent/yQxo8JnFE_edit.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   2. LOGOS
   --------------------------------------------------------------------------- */
.pgrab-logo {
    max-height: 70px;
    width: auto;
    /* Filtro CSS para hacer el logo blanco sobre fondo oscuro */
    filter: brightness(0) invert(1);
    drop-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.pgrab-logo-sm {
    max-height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
   3. TARJETA PRINCIPAL (formulario e index)
   --------------------------------------------------------------------------- */
.pgrab-card {
    background-color: var(--pgrab-accent);
    border-radius: var(--pgrab-radius-card) !important;
    box-shadow: var(--pgrab-shadow-card);
    overflow: hidden;
}

.pgrab-card-title {
    color: var(--pgrab-primary);
}

/* Ícono de cámara en el formulario de inicio */
.pgrab-icon-wrapper {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--pgrab-primary), #1a5276);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 4px 12px rgba(15, 56, 90, 0.35);
}

/* ---------------------------------------------------------------------------
   4. CABECERA DE CARD DE RESULTADOS
   --------------------------------------------------------------------------- */
.pgrab-card-header {
    background-color: #fff;
    border-bottom: 2px solid rgba(15, 56, 90, 0.1);
    padding: 1.25rem 1.5rem;
}

/* ---------------------------------------------------------------------------
   5. BOTONES
   --------------------------------------------------------------------------- */
/* Botón primario del formulario */
.pgrab-btn-primary {
    background-color: var(--pgrab-secondary);
    border-color: var(--pgrab-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition:
        background-color var(--pgrab-transition),
        border-color var(--pgrab-transition),
        transform var(--pgrab-transition),
        box-shadow var(--pgrab-transition);
}

.pgrab-btn-primary:hover,
.pgrab-btn-primary:focus-visible {
    background-color: #bf005c;
    border-color: #aa0052;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(224, 0, 110, 0.35);
}

.pgrab-btn-primary:active {
    transform: translateY(0);
}

/* Botón de ver grabación */
.pgrab-btn-video {
    background-color: var(--pgrab-primary);
    border-color: var(--pgrab-primary);
    color: #fff;
    font-weight: 500;
    transition:
        background-color var(--pgrab-transition),
        transform var(--pgrab-transition);
}

.pgrab-btn-video:hover,
.pgrab-btn-video:focus-visible {
    background-color: #1a5276;
    border-color: #1a5276;
    color: #fff;
    transform: translateY(-1px);
}

/* Focus visible para accesibilidad */
.pgrab-btn-primary:focus-visible,
.pgrab-btn-video:focus-visible {
    outline: 3px solid rgba(224, 0, 110, 0.5);
    outline-offset: 2px;
}

/* Input focus - color secundario */
.form-control:focus {
    border-color: var(--pgrab-secondary);
    box-shadow: 0 0 0 0.25rem rgba(224, 0, 110, 0.2);
}

/* ---------------------------------------------------------------------------
   6. BADGES DE ESTADO DE ACCESO
   --------------------------------------------------------------------------- */
.pgrab-badge-active {
    background-color: #198754 !important; /* Bootstrap success */
    color: #fff;
}

.pgrab-badge-warning {
    background-color: var(--pgrab-warning-badge) !important;
    color: #fff;
}

.pgrab-badge-expired {
    background-color: var(--pgrab-expired) !important;
    color: #fff;
}

.pgrab-badge-sesion {
    background-color: var(--pgrab-primary);
    color: #fff;
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------
   7. TABLA DE SESIONES (Desktop)
   --------------------------------------------------------------------------- */
.pgrab-table {
    font-size: 0.9375rem;
}

.pgrab-table thead th {
    background-color: rgba(15, 56, 90, 0.06);
    color: var(--pgrab-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(15, 56, 90, 0.15);
    padding: 0.875rem 1.25rem;
}

.pgrab-table tbody tr {
    transition: background-color var(--pgrab-transition);
}

.pgrab-table tbody tr:hover {
    background-color: rgba(15, 56, 90, 0.04);
}

.pgrab-table td {
    padding: 0.875rem 1.25rem;
    vertical-align: middle;
    border-color: rgba(15, 56, 90, 0.08);
}

/* ---------------------------------------------------------------------------
   8. CARDS DE SESIÓN (Mobile)
   --------------------------------------------------------------------------- */
.pgrab-card-sesion {
    background-color: rgba(15, 56, 90, 0.05);
    border: 1px solid rgba(15, 56, 90, 0.12);
    transition: box-shadow var(--pgrab-transition);
}

.pgrab-card-sesion:hover {
    box-shadow: 0 4px 12px rgba(15, 56, 90, 0.15);
}

/* ---------------------------------------------------------------------------
   9. ACCESO DENEGADO
   --------------------------------------------------------------------------- */
.pgrab-access-denied {
    background-color: #f8f9fa;
    color: var(--pgrab-expired);
    padding: 3rem 1.5rem;
}

/* ---------------------------------------------------------------------------
   10. MODAL DE VIDEO
   --------------------------------------------------------------------------- */
.pgrab-modal-header {
    background-color: var(--pgrab-primary);
    color: #fff;
    border-bottom: none;
}

.pgrab-modal-header .modal-title {
    color: #fff;
}

.pgrab-modal-header .bi {
    color: var(--pgrab-secondary);
    font-size: 1.125rem;
}

.pgrab-modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(15, 56, 90, 0.1);
}

/* El iframe ocupa todo el contenedor ratio 16:9 */
#videoFrame {
    border: none;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
   11. TRANSICIONES Y ACCESIBILIDAD
   --------------------------------------------------------------------------- */

/* Reduce motion para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE TWEAKS
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .pgrab-card .card-body {
        padding: 1.5rem !important;
    }
    .pgrab-logo {
        max-height: 55px;
    }
}