/* Animación 3D para tarjetas de cursos */
.tarjeta-curso-estudiante {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.tarjeta-curso-estudiante:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 15px 25px rgba(212, 175, 55, 0.25) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    z-index: 10;
}

/* ==============================================================================
   SEGURIDAD DE VIDEO Y REPRODUCTOR
   ============================================================================== */

/* Ocultar el botón nativo de descarga en navegadores basados en WebKit */
video::-internal-media-controls-download-button {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px) !important; /* Desplaza el botón de descarga fuera del área visible */
}

/* Evitar llamadas y selecciones táctiles en el video */
video {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Sobreescribir el cursor de Plotly a pointer/mano en áreas interactivas */
.js-plotly-plot .plotly .draglayer,
.js-plotly-plot .plotly .nsewdrag,
.js-plotly-plot .plotly .cursor-crosshair,
.js-plotly-plot .plotly .hoverlayer {
    cursor: pointer !important;
}

/* ==============================================================================
   DATEPICKERRANGE LIGHT STYLE TO MATCH DROPDOWNS (White background & Black text)
   ============================================================================== */
.DateRangePickerInput, 
.DateRangePickerInput__with-border {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: none !important; /* Let the wrapper div handle the border */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
}

.DateInput {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    width: 45% !important;
}

.DateInput_input {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 14px !important;
    border: none !important;
    border-bottom: none !important;
    padding: 4px !important;
    text-align: center !important;
    font-weight: 500 !important;
}

.DateInput_input__focused {
    border-bottom: none !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

.DateInput_placeholder {
    color: #888888 !important;
}

.DateRangePickerInput_arrow {
    color: #6C757D !important;
}

/* ==============================================================================
   CALENDAR POPUP DARK STYLING (For high visibility in dark theme context)
   ============================================================================== */
.CalendarMonth, 
.CalendarMonthGrid, 
.CalendarMonth_caption, 
.DayPickerNavigation_button, 
.DayPicker_transitionContainer {
    background-color: #2A2A2A !important;
    color: white !important;
}

.CalendarDay__default {
    background-color: #1A1A1A !important;
    color: white !important;
    border: 1px solid #333333 !important;
}

.CalendarDay__selected, 
.CalendarDay__selected:hover {
    background-color: #D4AF37 !important;
    color: black !important;
}

.CalendarDay__selected_span {
    background-color: rgba(212, 175, 55, 0.3) !important;
    color: white !important;
}

.CalendarDay__hovered_span, 
.CalendarDay__hovered_span:hover {
    background-color: rgba(212, 175, 55, 0.2) !important;
    color: white !important;
}

.DayPickerNavigation_button__default {
    border: 1px solid #555555 !important;
    background-color: #2A2A2A !important;
}

.CalendarMonth_caption strong {
    color: #D4AF37 !important;
}

/* ==============================================================================
   PLOTLY MODEBAR DARK MODE & DOWNLOAD BUTTONS
   ============================================================================== */
.js-plotly-plot .plotly .modebar-group {
    background-color: rgba(42, 42, 42, 0.9) !important;
    border-radius: 4px !important;
    border: 1px solid #555555 !important;
}
.js-plotly-plot .plotly .modebar-btn path {
    fill: #D4AF37 !important;
}
.js-plotly-plot .plotly .modebar-btn.active path,
.js-plotly-plot .plotly .modebar-btn:hover path {
    fill: #FFFFFF !important;
}

/* ==============================================================================
   TARGETED STYLING FOR TELEMETRIA SELECTS (Avoids global overrides)
   ============================================================================== */
.telemetria-select {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #CCCCCC !important;
}

.telemetria-select:disabled {
    background-color: #E9ECEF !important; /* Blocked gray background */
    color: #6C757D !important; /* Gray muted text */
    opacity: 0.85 !important;
    cursor: not-allowed !important;
}

/* ========================================================
   CORRECCIÓN DATEPICKER DASH (Rango de Fechas)
   ======================================================== */

/* Forzar visibilidad absoluta del texto en las fechas de Dash */
.DateInput_input, 
.DateInput_display_text, 
.DateInput_display_text--hasInput,
.DateInput_input_1 {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}

#contenedor-datepicker-padre input[type="text"],
#contenedor-datepicker-padre-seguridad input[type="text"],
#contenedor-datepicker-padre-hls input[type="text"] {
    color: #000000 !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Quitar el fondo blanco del contenedor principal del DatePicker */
.DateRangePickerInput, .DateRangePickerInput_1 {
    background-color: transparent !important;
    border: none !important;
}

/* Asegurar que los días seleccionados en el calendario se vean bien */
.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
    background-color: #2563eb !important;
    border: 1px double #1d4ed8 !important;
    color: #ffffff !important;
}

/* Forzar visibilidad y contraste en el encabezado del DatePicker (Mes/Año selectores rápidos) */
[class*="DatePicker"] select,
[class*="DatePicker"] select *,
[class*="DatePicker"] option,
[class*="DatePicker"] input,
[class*="DayPicker"] select,
[class*="DayPicker"] select *,
[class*="DayPicker"] option,
[class*="DayPicker"] input,
[class*="Calendar"] select,
[class*="Calendar"] select *,
[class*="Calendar"] option,
[class*="Calendar"] input,
#contenedor-datepicker-padre select,
#contenedor-datepicker-padre select *,
#contenedor-datepicker-padre input,
#contenedor-datepicker-padre-seguridad select,
#contenedor-datepicker-padre-seguridad select *,
#contenedor-datepicker-padre-seguridad input,
#contenedor-datepicker-padre-hls select,
#contenedor-datepicker-padre-hls select *,
#contenedor-datepicker-padre-hls input {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #ccc !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 14px !important;
    line-height: normal !important;
    text-indent: 0 !important;
}

/* Transformar a MAYÚSCULAS todas las letras de los meses en el calendario y sus selectores */
[class*="CalendarMonth__caption"],
[class*="CalendarMonth__caption"] strong,
[class*="CalendarMonth__caption"] span,
[class*="CalendarMonth"] strong,
[class*="CalendarMonth"] span,
[class*="CalendarMonth__caption"] select,
[class*="CalendarMonth__caption"] select option,
[class*="DayPicker"] select,
[class*="DayPicker"] select option,
[class*="DatePicker"] select,
[class*="DatePicker"] select option,
.CalendarMonth__caption,
.CalendarMonth__caption strong,
.CalendarMonth__caption select,
.CalendarMonth__caption select option,
.CalendarMonth_caption,
.CalendarMonth_caption strong {
    text-transform: uppercase !important;
}

/* Botón Restablecer Filtros (Ajuste Premium de Contraste en Tema Oscuro) */
#btn-reset-telemetria {
    color: #ff4d4d !important;
    border-color: #ff4d4d !important;
    background-color: transparent !important;
    font-weight: bold !important;
    transition: all 0.2s ease-in-out !important;
}

#btn-reset-telemetria:hover {
    color: #ffffff !important;
    background-color: #ff4d4d !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.4) !important;
}

/* Forzar visualización de pestañas del certificado una al lado de la otra (Horizontal) */
#cert-tabs-config {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    border-bottom: 1px solid #333333 !important;
}

#cert-tabs-config .nav-item {
    flex: 1 1 auto !important;
    text-align: center !important;
}

#cert-tabs-config .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
}

/* ========================================================
   SLIDERS STYLING (LIMPIEZA DE SELECTORES)
   ======================================================== */

.rc-slider-mark-text, .dash-slider-mark-text, div[class*="slider-mark-text"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0px 1px 3px rgba(0,0,0,1) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

.rc-slider-tooltip-inner, .rc-tooltip-inner, .dash-tooltip-inner {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Outer tooltip wrapper must be transparent so it doesn't draw a second box */
.rc-slider-tooltip, .rc-tooltip, .dash-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@keyframes flash {
  0% { background-color: rgba(255, 193, 7, 0.5); }
  100% { background-color: transparent; }
}

.flash-highlight {
  animation: flash 3s ease-out;
}