/* 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(199, 159, 73, 0.25) !important;
    border-color: rgba(199, 159, 73, 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: #C79F49 !important;
    color: black !important;
}

.CalendarDay__selected_span {
    background-color: rgba(199, 159, 73, 0.3) !important;
    color: white !important;
}

.CalendarDay__hovered_span, 
.CalendarDay__hovered_span:hover {
    background-color: rgba(199, 159, 73, 0.2) !important;
    color: white !important;
}

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

.CalendarMonth_caption strong {
    color: #C79F49 !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: #C79F49 !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;
}

/* ========================================================
   SOBREESCRITURA GLOBAL: EFECTO ORO METÁLICO (LOGO)
   ======================================================== */
/* Fondos y Botones: Efecto Metálico 3D con Gradiente */
.btn-warning, .bg-warning, .badge.bg-warning {
    background: linear-gradient(135deg, #F6E5A0 0%, #C79F49 35%, #A67C2F 70%, #4A3515 100%) !important;
    border: 1px solid #EBD07D !important;
    color: #121212 !important;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* Efecto Hover: Inversión de luz y sombra dorada */
.btn-warning:hover {
    background: linear-gradient(135deg, #EBD07D 0%, #A67C2F 35%, #C79F49 70%, #281B09 100%) !important;
    border: 1px solid #C79F49 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(199, 159, 73, 0.4) !important;
}

/* Textos y Bordes Simples: Tono Medio Sólido */
.text-warning {
    color: #C79F49 !important;
}

.border-warning {
    border-color: #C79F49 !important;
}

.btn-outline-warning {
    color: #C79F49 !important;
    border-color: #C79F49 !important;
    background: transparent !important;
}

.btn-outline-warning:hover {
    background: linear-gradient(135deg, #F6E5A0 0%, #C79F49 35%, #A67C2F 70%, #4A3515 100%) !important;
    color: #121212 !important;
    border-color: #EBD07D !important;
}


/* ========================================================
   EFECTO LAMINADO 3D PARA PALETAS SECUNDARIAS (BOOTSTRAP)
   ======================================================== */

/* 1. VERDE (Success) - Laminado Esmeralda */
.btn-success, .bg-success, .badge.bg-success {
    background: linear-gradient(135deg, #81c784 0%, #28a745 35%, #1e7e34 70%, #0f401b 100%) !important;
    border: 1px solid #81c784 !important;
    color: #ffffff !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6) !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #a5d6a7 0%, #1e7e34 35%, #28a745 70%, #0a2912 100%) !important;
    border-color: #28a745 !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
}

/* 2. ROJO (Danger) - Laminado Rubí */
.btn-danger, .bg-danger, .badge.bg-danger {
    background: linear-gradient(135deg, #e57373 0%, #dc3545 35%, #bd2130 70%, #631119 100%) !important;
    border: 1px solid #e57373 !important;
    color: #ffffff !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6) !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #ef9a9a 0%, #bd2130 35%, #dc3545 70%, #410b10 100%) !important;
    border-color: #dc3545 !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

/* 3. AZUL CLARO (Info) - Laminado Zafiro */
.btn-info, .bg-info, .badge.bg-info {
    background: linear-gradient(135deg, #4dd0e1 0%, #17a2b8 35%, #117a8b 70%, #093d45 100%) !important;
    border: 1px solid #4dd0e1 !important;
    color: #ffffff !important; /* Forzar blanco para mejor contraste */
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6) !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, #80deea 0%, #117a8b 35%, #17a2b8 70%, #052226 100%) !important;
    border-color: #17a2b8 !important;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4) !important;
    color: #ffffff !important;
}

/* 4. GRIS (Secondary) - Laminado Acero */
.btn-secondary, .bg-secondary, .badge.bg-secondary {
    background: linear-gradient(135deg, #9e9e9e 0%, #6c757d 35%, #545b62 70%, #2b2f32 100%) !important;
    border: 1px solid #9e9e9e !important;
    color: #ffffff !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6) !important;
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #bdbdbd 0%, #545b62 35%, #6c757d 70%, #1a1c1e 100%) !important;
    border-color: #6c757d !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4) !important;
}

/* 5. AZUL OSCURO (Primary) - Laminado Cobalto */
.btn-primary, .bg-primary, .badge.bg-primary {
    background: linear-gradient(135deg, #64b5f6 0%, #007bff 35%, #0062cc 70%, #003366 100%) !important;
    border: 1px solid #64b5f6 !important;
    color: #ffffff !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.6) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #90caf9 0%, #0062cc 35%, #007bff 70%, #001a33 100%) !important;
    border-color: #007bff !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
}