/* ===== ESTILOS PRINCIPALES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@font-face {
    font-family: 'Sundry';
    src: url('sundry/SundryNarrow-Heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
body {
    font-family: 'Sundry', sans-serif;
    background: linear-gradient(135deg, #010E40 0%, #2C57FE 50%, #010E40 100%);
    color: #2C57FE;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Optimizaciones para dispositivos móviles */
.mobile-device body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

.container {
    max-width:60000px;
    margin: 0 auto;
    padding: 150px;
    transition: padding 0.3s ease;
}

/* Optimizaciones específicas para móviles */
.mobile-device .container {
    padding: 20px 15px;
    max-width: 100%;
}

.tablet-device .container {
    padding: 30px 25px;
}

/* Optimizaciones para orientación */
.portrait .container {
    padding: 20px 15px;
}

.landscape .container {
    padding: 15px 25px;
}

/* ===== HEADER ===== */
.header {
    text-align: center;
    margin-bottom: 30px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.logo {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 10px 20px rgba(241, 255, 115, 0.3));
    border-radius: 15px;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.header h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    color: #F1FF73;
    text-shadow: 0 0 30px rgba(241, 255, 115, 0.4);
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.header p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #DBE9E5;
    opacity: 0.9;
    font-weight: 300;
}

/* ===== CONTENIDO PRINCIPAL ===== */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.panel {
    background: rgba(44, 87, 254, 0.08);
    border-radius: 30px;
    padding: 50px;
    border: 1px solid rgba(241, 255, 115, 0.2);
    box-shadow: 0 20px 40px rgba(1, 14, 64, 0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 700px;
}

.panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(1, 14, 64, 0.3);
    border-color: rgba(241, 255, 115, 0.4);
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F1FF73, #2C57FE, #F1FF73);
    opacity: 0.8;
}

.panel h2 {
    color: #F1FF73;
    margin-bottom: 40px;
    font-size: clamp(2rem, 4vw, 2.5rem);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(1, 14, 64, 0.5);
    letter-spacing: -0.5px;
}
.panel2 {
    background: rgba(44, 87, 254, 0.08);
    border-radius: 30px;
    padding: 50px;
    border: 1px solid rgba(241, 255, 115, 0.2);
    box-shadow: 0 20px 40px rgba(1, 14, 64, 0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 700px;
}

.panel2:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(1, 14, 64, 0.3);
    border-color: rgba(241, 255, 115, 0.4);
}

.panel2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F1FF73, #2C57FE, #F1FF73);
    opacity: 0.8;
}

.panel2 h2 {
    color: #F1FF73;
    margin-bottom: 40px;
    font-size: clamp(2rem, 4vw, 2.5rem);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(1, 14, 64, 0.5);
    letter-spacing: -0.5px;
}

/* ===== ICONOS DE BOTONES ===== */
.btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    filter: none; /* Sin filtro para mantener el color original amarillo */
    border: none !important; /* Eliminar bordes */
    outline: none !important; /* Eliminar outline */
    box-shadow: none !important; /* Eliminar sombras */
    background: transparent !important; /* Fondo transparente */
}

.btn-icon:only-child {
    margin-right: 0; /* Sin margen si es el único elemento */
}

/* Ajustes específicos para botones de video call */
.video-call-controls .btn-icon {
    width: 24px;
    height: 24px;
    margin-right: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Estilos adicionales para eliminar bordes de imágenes SVG */
img.btn-icon {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: inline-block;
    vertical-align: middle;
}

/* Estilos para elementos SVG dentro de botones */
.btn svg,
.btn object {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ===== ESTILOS GLOBALES DE BOTONES CON FONDO AZUL PROFUNDO ===== */
.btn {
    background: #010E40 !important; /* Azul Profundo */
    color: #F1FF73 !important; /* Amarillo Optimismo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
}

.btn:hover {
    background: #2C57FE !important; /* Azul Acción al hover */
    color: #F1FF73 !important;
    border-color: rgba(241, 255, 115, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(44, 87, 254, 0.4) !important;
}

/* ===== BOTONES ===== */
.btn {
    padding: clamp(20px, 4vw, 30px) clamp(35px, 5vw, 50px);
    border: none;
    border-radius: 50px; /* Forma de píldora más pronunciada */
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-family: 'Sundry Heavy', sans-serif;
    min-width: clamp(180px, 25vw, 250px);
    margin: 12px;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* Optimizaciones para dispositivos táctiles */
.touch-device .btn {
    min-height: 44px; /* Tamaño mínimo recomendado para touch */
    padding: 16px 24px;
    font-size: 16px; /* Evita zoom en iOS */
    border-radius: 50px; /* Forma de píldora uniforme */
}

.mobile-device .btn {
    min-height: 48px;
    padding: 18px 28px;
    font-size: 16px;
    border-radius: 50px; /* Forma de píldora uniforme */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: clamp(160px, 80vw, 280px);
}

/* Efectos táctiles mejorados */
.touch-device .btn {
    /* Asegurar que los botones sean lo suficientemente grandes para touch */
    min-height: 48px;
    min-width: 120px;
    /* Mejorar la respuesta táctil */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    touch-action: manipulation;
    /* Prevenir zoom en iOS al tocar */
    font-size: 16px;
}

.touch-device .btn:active,
.touch-device .btn:focus {
    transform: scale(0.95);
    transition: transform 0.1s ease;
    outline: none;
    /* Mejor feedback visual */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-device .btn {
    min-height: 52px;
    min-width: 140px;
    /* Optimización específica para móviles */
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 50px; /* Forma de píldora uniforme */
    /* Mejor contraste y visibilidad */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    /* Asegurar que el texto no se seleccione accidentalmente */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Mejorar la respuesta táctil */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
}

.mobile-device .btn:active,
.mobile-device .btn:focus {
    transform: scale(0.92);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.1s ease;
    outline: none;
}

/* Estados hover para dispositivos con mouse */
@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    }
    
    .btn:hover::before {
        opacity: 1;
    }
}

/* Estados específicos para dispositivos táctiles */
.touch-optimized {
    /* Asegurar que los botones táctiles tengan el tamaño correcto */
    min-height: 48px !important;
    min-width: 48px !important;
    touch-action: manipulation;
}

.touch-active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.touch-success {
    transform: scale(1.02) !important;
    background-color: rgba(76, 175, 80, 0.2) !important;
    transition: all 0.15s ease !important;
}

.button-clicked {
    animation: buttonClickPulse 0.2s ease !important;
}

@keyframes buttonClickPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Optimizaciones adicionales para dispositivos táctiles */
.touch-device-detected .btn {
    /* Mejorar la visibilidad de los botones */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.touch-device-detected .btn:focus {
    outline: 3px solid rgba(241, 255, 115, 0.5) !important;
    outline-offset: 2px;
}

/* Mejorar la accesibilidad en móviles */
@media (max-width: 768px) {
    .btn {
        /* Asegurar que los botones sean fácilmente tocables */
        min-height: 52px !important;
        min-width: 140px !important;
        margin: 8px 4px;
        /* Mejorar el contraste */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Botones en controles de entrevista */
    .interview-controls .btn {
        min-width: 160px !important;
        margin: 10px 6px;
    }
    
    /* Botones en controles de cámara */
    .camera-controls .btn,
    .microphone-controls .btn {
        min-width: 140px !important;
        margin: 8px 4px;
    }
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.btn-primary {
    background: #010E40 !important; /* Azul Profundo */
    color: #F1FF73 !important; /* Amarillo Optimismo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
}

.btn-primary:hover {
    background: #2C57FE !important; /* Azul Acción */
    color: #F1FF73 !important;
    border-color: rgba(241, 255, 115, 0.6) !important;
    box-shadow: 0 15px 35px rgba(44, 87, 254, 0.4) !important;
}

.btn-success {
    background: #010E40 !important; /* Azul Profundo */
    color: #F1FF73 !important; /* Amarillo Optimismo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
}

.btn-success:hover {
    background: #2C57FE !important; /* Azul Acción */
    color: #F1FF73 !important;
    border-color: rgba(241, 255, 115, 0.6) !important;
    box-shadow: 0 15px 35px rgba(44, 87, 254, 0.4) !important;
}

.btn-danger {
    background: #010E40 !important; /* Azul Profundo */
    color: #F1FF73 !important; /* Amarillo Optimismo */
    border: 2px solid rgba(241, 255, 115, 0.5) !important;
}

.btn-danger:hover {
    background: #2C57FE !important; /* Azul Acción */
    color: #F1FF73 !important;
    border-color: rgba(241, 255, 115, 0.7) !important;
    box-shadow: 0 15px 35px rgba(44, 87, 254, 0.4) !important;
}

.btn-warning {
    background: #010E40 !important; /* Azul Profundo */
    color: #F1FF73 !important; /* Amarillo Optimismo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
}

.btn-warning:hover {
    background: #2C57FE !important; /* Azul Acción */
    color: #F1FF73 !important;
    border-color: rgba(241, 255, 115, 0.6) !important;
    box-shadow: 0 15px 35px rgba(44, 87, 254, 0.4) !important;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ===== CÁMARA ===== */
.camera-container {
    text-align: center;
}

#cameraVideo {
    width: 100%;
    max-width: 600px;
    height: clamp(350px, 50vh, 547px);
    background: #010E40;
    border-radius: 25px;
    border: 4px solid rgba(241, 255, 115, 0.4);
    margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(1, 14, 64, 0.3);
    transition: all 0.3s ease;
}

#cameraVideo:hover {
    border-color: rgba(241, 255, 115, 0.6);
    box-shadow: 0 20px 40px rgba(1, 14, 64, 0.4);
}

.camera-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.camera-status {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #F1FF73;
    padding: 12px;
    background: rgba(1, 14, 64, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(44, 87, 254, 0.3);
    font-weight: 500;
}

.camera-status.active {
    color: #F1FF73;
    border-color: rgba(241, 255, 115, 0.4);
    background: rgba(241, 255, 115, 0.1);
}

.camera-status.error {
    color: #F1FF73;
    border-color: rgba(241, 255, 115, 0.4);
    background: rgba(1, 14, 64, 0.3);
}

/* ===== AVATAR ===== */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 35px 0;
    padding: 35px;
    border-radius: 15px;
    background: rgba(1, 14, 64, 0.1);
    border: 1px solid rgba(44, 87, 254, 0.2);
    backdrop-filter: blur(10px);
}

.avatar-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(250px, 35vw, 320px);
    height: clamp(250px, 35vw, 320px);
    padding: 15px;
    border-radius: 25px;
    background: rgba(44, 87, 254, 0.1);
    border: 3px solid rgba(44, 87, 254, 0.3);
    box-shadow: 0 8px 32px rgba(44, 87, 254, 0.2);
    margin-bottom: 25px;
}

.avatar-2d, .avatar-2d-fallback {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    border: 4px solid rgba(241, 255, 115, 0.3);
    transition: all 0.3s ease;
    object-fit: contain;
    /* Asegurar que el SVG se ajuste correctamente */
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.avatar-2d.avatar-speaking, .avatar-2d-fallback.avatar-speaking {
    border-color: rgba(241, 255, 115, 0.8);
    box-shadow: 0 0 30px rgba(241, 255, 115, 0.4);
    animation: avatarSpeak 0.8s ease-in-out infinite;
    transform: scale(1.05);
}

@keyframes avatarSpeak {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
}

.avatar-info h3 {
    color: #F1FF73;
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(1, 14, 64, 0.3);
}

.avatar-info p {
    color: #2C57FE;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
}

/* ===== MICRÓFONO ===== */
.microphone-controls {
    text-align: center;
    margin-bottom: 20px;
}

.mic-status {
    margin-top: 15px;
    padding: 12px;
    background: rgba(1, 14, 64, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(44, 87, 254, 0.3);
    color: #F1FF73;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: 500;
}

.mic-status.active {
    color: #F1FF73;
    border-color: rgba(241, 255, 115, 0.4);
    background: rgba(241, 255, 115, 0.1);
}

.mic-status.recording {
    color: #F1FF73;
    border-color: rgba(241, 255, 115, 0.4);
    animation: pulse 1s infinite;
    background: rgba(1, 14, 64, 0.3);
}

.mic-status.error {
    color: #F1FF73;
    border-color: rgba(241, 255, 115, 0.4);
    background: rgba(1, 14, 64, 0.3);
}

/* ===== INDICADOR DE AUDIO ===== */
/* .audio-indicator {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background: rgba(1, 14, 64, 0.2);
    border-radius: 15px;
    border: 1px solid rgba(44, 87, 254, 0.3);
    text-align: center;
} */

.audio-visualizer {
    display: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    margin-bottom: 10px;
}

.audio-bar {
    display: none;
    width: 6px;
    background: #F1FF73;
    border-radius: 3px;
    transition: height 0.1s ease;
    min-height: 4px;
}

.audio-bar.active {
    display: none;
    background: #F1FF73;
    animation: audioPulse 0.5s ease-in-out infinite;
}

@keyframes audioPulse {
    0%, 100% { height: 4px; }
    50% { height: 40px; }
}

.audio-text {
    display: none;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: #F1FF73;
    font-weight: 500;
    min-height: 20px;
}

/* ===== CONTROLES DE ENTREVISTA ===== */
.interview-controls {
    text-align: center;
    margin: 20px 0;
}

.control-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ===== ESTADO DE ENTREVISTA ===== */
.interview-status-area {
    background: rgba(1, 14, 64, 0.2);
    border-radius: 25px;
    padding: 35px;
    margin-bottom: 30px;
    border: 1px solid rgba(44, 87, 254, 0.2);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
}

.status-message {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #2C57FE;
    text-align: center;
    line-height: 1.7;
    font-weight: 400;
}

/* ===== LOADING ===== */
.loading {
    display: none;
    text-align: center;
    padding: 30px;
}

.spinner {
    border: 4px solid rgba(241, 255, 115, 0.2);
    border-top: 4px solid #F1FF73;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* ===== INDICADOR DE PROGRESO ===== */
.progress-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #F1FF73;
}

.progress-bar {
    width: 200px;
    height: 8px;
    background: rgba(1, 14, 64, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F1FF73, #2C57FE);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ===== CUADRO DE INFORMACIÓN DE PROCESAMIENTO ===== */
.processing-info-box {
    background: rgba(1, 14, 64, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid rgba(44, 87, 254, 0.4);
    backdrop-filter: blur(10px);
    display: none;
}

.processing-info-box.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.processing-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #F1FF73;
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

.processing-status {
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.processing-status.listening {
    background: rgba(1, 14, 64, 0.3);
    color: #F1FF73;
    border: 1px solid rgba(241, 255, 115, 0.4);
}

.processing-status.processing {
    background: rgba(241, 255, 115, 0.2);
    color: #F1FF73;
    border: 1px solid rgba(241, 255, 115, 0.4);
    animation: pulse 1s infinite;
}

.processing-status.error {
    background: rgba(1, 14, 64, 0.3);
    color: #F1FF73;
    border: 1px solid rgba(241, 255, 115, 0.4);
}

.processing-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.processing-item {
    background: rgba(1, 14, 64, 0.2);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(44, 87, 254, 0.2);
}

.processing-item h4 {
    color: #F1FF73;
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.processing-item p {
    color: #2C57FE;
    font-size: 0.85rem;
    margin: 0;
    word-break: break-word;
}

.processing-timeline {
    background: rgba(1, 14, 64, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(44, 87, 254, 0.2);
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.timeline-icon.pending {
    background: rgba(255, 255, 255, 0.2);
    color: #2C57FE;
}

.timeline-icon.active {
    background: rgba(241, 255, 115, 0.3);
    color: #F1FF73;
}

.timeline-icon.completed {
    background: rgba(241, 255, 115, 0.3);
    color: #F1FF73;
}

.timeline-icon.error {
    background: rgba(1, 14, 64, 0.5);
    color: #F1FF73;
}

.timeline-text {
    color: #2C57FE;
    flex: 1;
}

.timeline-time {
    color: #F1FF73;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ===== MODO DESARROLLADOR ===== */
.developer-mode-container {
    position: fixed;
    top: 2px;
    right: 2px;
    z-index: 1000;
}

/* Estilos específicos para el botón de modo desarrollador */
.developer-btn-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.developer-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Icono del botón desarrollador */
.developer-btn-icon .btn-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    filter: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.developer-btn-icon:active {
    transform: scale(0.95) !important;
}

/* En dispositivos móviles, hacer el botón un poco más grande para touch */
@media (max-width: 768px) {
    .developer-btn-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
    }
}

/* ===== ESTILOS ESPECÍFICOS PARA MÓVILES ===== */
.mobile-device-specific .btn {
    /* Optimizaciones específicas para móviles (no tablets) */
    min-height: 1px !important;
    min-width: 11px !important;
    padding: 10px 40px !important;
    font-size: 16px !important;
    border-radius: 50px !important; /* Forma de píldora uniforme */
    /* Mejorar la respuesta táctil en móviles */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4) !important;
    touch-action: manipulation !important;
    /* Asegurar que los botones sean muy visibles en móviles */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    /* Prevenir selección de texto accidental */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.mobile-device-specific .mobile-specific-button {
    /* Estilos adicionales para botones específicos de móvil */
    position: relative !important;
    overflow: hidden !important;
}

.mobile-device-specific .mobile-specific-button:active {
    transform: scale(0.9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.1s ease !important;
}

.mobile-device-specific .mobile-specific-button.touch-active {
    transform: scale(0.95) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.1s ease !important;
}

.mobile-device-specific .mobile-specific-button.touch-success {
    transform: scale(1.05) !important;
    background-color: rgba(76, 175, 80, 0.3) !important;
    transition: all 0.15s ease !important;
}

.mobile-device-specific .mobile-specific-button.button-clicked {
    animation: mobileButtonPulse 0.3s ease !important;
}

@keyframes mobileButtonPulse {
    0% { transform: scale(1); }
    25% { transform: scale(0.95); }
    50% { transform: scale(1.02); }
    75% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* ===== ESTILOS ESPECÍFICOS PARA TABLETS ===== */
.tablet-device-specific .btn {
    /* Optimizaciones para tablets */
    min-height: 50px !important;
    min-width: 110px !important;
    padding: 16px 22px !important;
    font-size: 16px !important;
    border-radius: 50px !important; /* Forma de píldora uniforme */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.tablet-device-specific .tablet-specific-button {
    /* Estilos adicionales para botones específicos de tablet */
    transition: all 0.2s ease !important;
}

.tablet-device-specific .tablet-specific-button:active {
    transform: scale(0.93) !important;
    transition: all 0.1s ease !important;
}

/* ===== LAYOUT GLOBAL DE VIDELLAMADA PARA TODOS LOS DISPOSITIVOS ===== */

/* Layout principal estilo videollamada */
.video-call-layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #010E40 0%, #2C57FE 50%, #010E40 100%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* Header con título y subtítulo */
.video-call-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    padding: 0px 20px;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.video-call-header h1 {
    color: white;
    font-size: 1.8rem;
    margin: 0 0 5px 0;
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.video-call-header .logo-in-title {
    width: 140px;
    height: 80px;
    /* Mantener colores originales del logo */
}

/* Colores para todos los dispositivos */
.video-call-header h1 {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.video-call-header .subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
    text-align: center;
    font-weight: 300;
}

/* Área principal del entrevistador */
.video-call-main-area {
    position: absolute;
    top: 80px; /* Espacio para el header */
    left: 0;
    right: 0;
    bottom: 120px; /* Espacio para los botones */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    min-height: calc(100vh - 200px);
}

.video-call-avatar-container {
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.video-call-avatar-frame {
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
}

.video-call-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

/* Cámara del usuario en esquina */
.video-call-user-camera {
    position: fixed;
    top: 90px;
    right: 20px;
    width: 180px;
    height: 240px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 101;
    overflow: hidden;
}

/* Cámara más pequeña para móviles */
@media (max-width: 768px) {
    .video-call-user-camera {
        width: 100px !important;
        height: 130px !important;
        top: 90px !important;
        right: 10px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
}

/* Cámara más grande para desktop */
@media (min-width: 1200px) {
    .video-call-user-camera {
        width: 220px !important;
        height: 300px !important;
        top: 100px !important;
        right: 30px !important;
        border-radius: 20px !important;
        border: 3px solid rgba(255, 255, 255, 0.4) !important;
    }
}

.video-call-user-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

.video-call-user-camera .camera-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
}

/* Ajustar tamaño del icono de placeholder según el dispositivo */
@media (max-width: 768px) {
    .video-call-user-camera .camera-placeholder {
        font-size: 16px !important;
    }
}

@media (min-width: 1200px) {
    .video-call-user-camera .camera-placeholder {
        font-size: 32px !important;
    }
    
    /* Avatar más grande para escritorio */
    .video-call-avatar-container {
        max-width: 900px !important;
        max-height: 900px !important;
    }
}

@media (min-width: 1400px) {
    /* Avatar extra grande para pantallas grandes */
    .video-call-avatar-container {
        max-width: 1000px !important;
        max-height: 1000px !important;
    }
}

/* Botones de acción en la parte inferior */
.video-call-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
    padding: 20px;
    z-index: 102;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.video-call-controls .btn {
    min-width: 60px;
    min-height: 60px;
    border-radius: 50px; /* Forma de píldora uniforme */
    font-size: 18px;
    background: #010E40 !important; /* Azul Profundo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
    backdrop-filter: blur(10px);
    color: #F1FF73 !important; /* Amarillo Optimismo */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Botones mucho más pequeños para móviles */
@media (max-width: 768px) {
    .video-call-controls .btn {
        min-width: 25px !important;
        min-height: 25px !important;
        font-size: 10px !important;
        border: 1px solid rgba(241, 255, 115, 0.3) !important;
        padding: 3px !important;
        background: #010E40 !important; /* Azul Profundo */
        color: #F1FF73 !important; /* Amarillo Optimismo */
    }
    
    .video-call-controls {
        padding: 8px !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 45px !important;
        overflow-x: auto !important;
    }
}

.video-call-controls .btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.video-call-controls .btn:active {
    transform: scale(0.95);
}

.video-call-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ocultar elementos originales cuando se usa el layout de videollamada, excepto los datos del usuario */
.video-call-layout .panel:not(#userDataPanel),
.video-call-layout .header {
    display: none !important;
}

/* Mostrar el botón de modo desarrollador original durante la entrevista */
.video-call-layout .developer-mode-container {
    display: block !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1001 !important;
}

/* Asegurar que el botón original sea visible y funcional */
.video-call-layout .developer-btn-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Panel de datos del usuario como pantalla inicial */
#userDataPanel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 90vw !important;
    height: auto !important;
    background: linear-gradient(135deg, #010E40 0%, #2C57FE 50%, #010E40 100%) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#userDataPanel .user-data-form {
    background: rgba(19, 57, 207, 0.05) !important;
    border-radius: 20px !important;
    padding: 4px !important;
    border: 2px solid rgba(44, 87, 254, 0.2) !important;
    backdrop-filter: blur(15px) !important;
    max-width: 450px !important;
    width: 95% !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

/* Asegurar que el panel se oculte completamente cuando no debe mostrarse */
#userDataPanel[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mantener visible el panel de datos del usuario cuando está en layout de videollamada */
.video-call-layout #userDataPanel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000 !important;
    background: linear-gradient(135deg, #010E40 0%, #2C57FE 50%, #010E40 100%) !important;
    border-radius: 15px !important;
    padding: 18px !important;
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    max-width: 420px !important;
    max-height: 700px !important;
    width: 90vw !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap:8px !important;
}
@media (max-width: 768px) {
    .video-call-layout #userDataPanel {
        max-height: 600px !important; /* sube desde 520 */
        padding: 6px !important;     /* un poco más de aire */
    }

    .video-call-layout #userDataPanel .user-data-form {
        gap: 10px !important;

    }

    .video-call-layout #userDataPanel .form-group {
        margin-bottom: 8px !important;
    }

    .video-call-layout #userDataPanel .btn {
        margin-top: 8px !important;
    }
}


.video-call-layout #userDataPanel h2 {
    color: white !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

.video-call-layout #userDataPanel .form-group label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.video-call-layout #userDataPanel input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(241, 255, 115, 0.3) !important;
    color: white !important;
}

.video-call-layout #userDataPanel input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.video-call-layout #userDataPanel .btn {
    background: rgba(241, 255, 115, 0.2) !important;
    border: 2px solid rgba(241, 255, 115, 0.5) !important;
    color: #F1FF73 !important;
}

.video-call-layout #userDataPanel .btn:hover {
    background: rgba(241, 255, 115, 0.3) !important;
    border-color: rgba(241, 255, 115, 0.7) !important;
}

/* Estilos para el panel de datos como pantalla inicial */
#userDataPanel h2 {
    color: #F1FF73 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
}

#userDataPanel .panel-subtitle {
    color: #F1FF73 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

#userDataPanel .form-group label {
    color: #F1FF73 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

#userDataPanel input {
    background: rgba(241, 255, 115, 0.1) !important;
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
    color: #F1FF73 !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
}

#userDataPanel input:focus {
    border-color: #F1FF73 !important;
    background: rgba(241, 255, 115, 0.2) !important;
    box-shadow: 0 0 15px rgba(241, 255, 115, 0.4) !important;
}

#userDataPanel input::placeholder {
    color: rgba(241, 255, 115, 0.7) !important;
}

#userDataPanel .btn {
    background: #010E40 !important; /* Azul Profundo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
    color: #F1FF73 !important; /* Amarillo Optimismo */
    padding: 12px 30px !important;
    border-radius: 50px !important; /* Forma de píldora uniforme */
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#userDataPanel .btn:hover {
    background: #2C57FE !important; /* Azul Acción */
    border-color: rgba(241, 255, 115, 0.5) !important;
    color: #F1FF73 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(44, 87, 254, 0.4) !important;
}

/* Estilos para errores de validación */
.validation-error {
    background: linear-gradient(135deg, #010E40 0%, #2C57FE 100%) !important;
    color: white !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    margin: 15px 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    animation: slideInError 0.3s ease-out !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
}

.validation-error .error-icon {
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
}

.validation-error .error-message {
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== LAYOUT ESTILO VIDELLAMADA PARA MÓVILES Y TABLETS ===== */

/* Layout estilo FaceTime/Google Meet para móviles */
.mobile-device-specific .interview-panel-video-layout {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(135deg, #F1FF73 0%, #E8F55F 50%, #DDF44A 100%) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Entrevistador en pantalla completa */
.mobile-device-specific .avatar-container-fullscreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.mobile-device-specific .avatar-frame-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.mobile-device-specific .avatar-2d-fullscreen,
.mobile-device-specific .avatar-2d-fallback-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    object-fit: cover !important;
}

/* Cámara del usuario en esquina */
.mobile-device-specific .user-camera-corner {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 120px !important;
    height: 160px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    z-index: 1001 !important;
    overflow: hidden !important;
}

.mobile-device-specific .user-camera-corner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

/* Botones en zona inferior */
.mobile-device-specific .video-controls-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
    padding: 20px !important;
    z-index: 1002 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.mobile-device-specific .video-controls-bottom .btn {
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50px !important; /* Forma de píldora uniforme */
    font-size: 18px !important;
    background: #010E40 !important; /* Azul Profundo */
    border: 2px solid rgba(241, 255, 115, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    color: #F1FF73 !important; /* Amarillo Optimismo */
    transition: all 0.3s ease !important;
}

.mobile-device-specific .video-controls-bottom .btn:hover {
    background: #2C57FE !important; /* Azul Acción */
    border-color: rgba(241, 255, 115, 0.5) !important;
    transform: scale(1.1) !important;
}

.mobile-device-specific .video-controls-bottom .btn:active {
    transform: scale(0.95) !important;
}

/* Ocultar elementos no necesarios en layout de video */
.mobile-device-specific .interview-panel-video-layout .panel h2,
.mobile-device-specific .interview-panel-video-layout .avatar-info,
.mobile-device-specific .interview-panel-video-layout .progress-indicator {
    display: none !important;
}

/* Layout estilo FaceTime/Google Meet para tablets */
.tablet-device-specific .interview-panel-video-layout {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(135deg, #F1FF73 0%, #E8F55F 50%, #DDF44A 100%) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.tablet-device-specific .avatar-container-fullscreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.tablet-device-specific .avatar-frame-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tablet-device-specific .avatar-2d-fullscreen,
.tablet-device-specific .avatar-2d-fallback-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    object-fit: cover !important;
}

.tablet-device-specific .user-camera-corner {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    width: 150px !important;
    height: 200px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 15px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    z-index: 1001 !important;
    overflow: hidden !important;
}

.tablet-device-specific .user-camera-corner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

.tablet-device-specific .video-controls-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
    padding: 30px !important;
    z-index: 1002 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.tablet-device-specific .video-controls-bottom .btn {
    min-width: 70px !important;
    min-height: 70px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    background: #010E40 !important; /* Azul Profundo */
    border: 3px solid rgba(241, 255, 115, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    color: #F1FF73 !important; /* Amarillo Optimismo */
    transition: all 0.3s ease !important;
}

.tablet-device-specific .video-controls-bottom .btn:hover {
    background: #2C57FE !important; /* Azul Acción */
    border-color: rgba(241, 255, 115, 0.5) !important;
    transform: scale(1.1) !important;
}

.tablet-device-specific .video-controls-bottom .btn:active {
    transform: scale(0.95) !important;
}

/* Ocultar elementos no necesarios en layout de video para tablets */
.tablet-device-specific .interview-panel-video-layout .panel h2,
.tablet-device-specific .interview-panel-video-layout .avatar-info,
.tablet-device-specific .interview-panel-video-layout .progress-indicator {
    display: none !important;
}

/* Avatar para TABLETS (tamaño medio) */
.tablet-device-specific .avatar-container {
    margin: 20px 0 !important;
    padding: 20px !important;
}

.tablet-device-specific .avatar-frame {
    width: 150px !important;
    height: 150px !important;
    padding: 10px !important;
    border-radius: 18px !important;
}

.tablet-device-specific .avatar-2d,
.tablet-device-specific .avatar-2d-fallback {
    border-radius: 12px !important;
    border: 3px solid rgba(241, 255, 115, 0.3) !important;
    /* Forzar que el SVG se ajuste al contenedor */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.tablet-device-specific .avatar-info h3 {
    font-size: 1.2rem !important;
    margin-bottom: 6px !important;
}

.tablet-device-specific .avatar-info p {
    font-size: 0.9rem !important;
}

/* Avatar para DESKTOP (tamaño original - sin cambios) */
/* Los estilos originales se mantienen para desktop */

/* ===== ANIMACIONES RESPONSIVE DEL AVATAR ===== */

/* Animaciones para MÓVILES (más sutiles) */
.mobile-device-specific .avatar-2d.avatar-speaking,
.mobile-device-specific .avatar-2d-fallback.avatar-speaking {
    animation: avatarSpeakMobile 0.6s ease-in-out infinite !important;
    transform: scale(1.03) !important;
}

@keyframes avatarSpeakMobile {
    0%, 100% { transform: scale(1.03); }
    50% { transform: scale(1.06); }
}

/* Animaciones para TABLETS (tamaño medio) */
.tablet-device-specific .avatar-2d.avatar-speaking,
.tablet-device-specific .avatar-2d-fallback.avatar-speaking {
    animation: avatarSpeakTablet 0.7s ease-in-out infinite !important;
    transform: scale(1.04) !important;
}

@keyframes avatarSpeakTablet {
    0%, 100% { transform: scale(1.04); }
    50% { transform: scale(1.08); }
}

/* Animaciones para DESKTOP (originales) */
.avatar-2d.avatar-speaking, .avatar-2d-fallback.avatar-speaking {
    border-color: rgba(241, 255, 115, 0.8);
    box-shadow: 0 0 30px rgba(241, 255, 115, 0.4);
    animation: avatarSpeak 0.8s ease-in-out infinite;
    transform: scale(1.05);
}

/* ===== OPTIMIZACIONES ADICIONALES PARA MÓVILES ===== */
.mobile-device-specific .avatar-container {
    /* Reducir espacio en móviles para dar más espacio al contenido */
    background: rgba(1, 14, 64, 0.05) !important;
    border: 1px solid rgba(44, 87, 254, 0.15) !important;
}

.mobile-device-specific .avatar-frame {
    /* Mejorar visibilidad en pantallas pequeñas */
    background: rgba(44, 87, 254, 0.08) !important;
    border: 2px solid rgba(44, 87, 254, 0.25) !important;
    box-shadow: 0 4px 16px rgba(44, 87, 254, 0.15) !important;
}

/* ===== OPTIMIZACIONES ADICIONALES PARA TABLETS ===== */
.tablet-device-specific .avatar-container {
    /* Balance entre móvil y desktop */
    background: rgba(1, 14, 64, 0.08) !important;
    border: 1px solid rgba(44, 87, 254, 0.18) !important;
}

.tablet-device-specific .avatar-frame {
    /* Tamaño medio con buena visibilidad */
    background: rgba(44, 87, 254, 0.09) !important;
    border: 3px solid rgba(44, 87, 254, 0.28) !important;
    box-shadow: 0 6px 24px rgba(44, 87, 254, 0.18) !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #2C57FE;
    margin: 5% auto;
    padding: 0;
    border: 1px solid #2C57FE;
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
}

.modal-header {
    background-color: #010E40;
    color: white;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close {
    color: #2C57FE;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: white;
}

.modal-body {
    padding: 20px;
}

.developer-section {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid rgba(44, 87, 254, 0.3);
    border-radius: 5px;
    background-color: rgba(44, 87, 254, 0.1);
}

.developer-section h4 {
    margin-top: 0;
    color: #010E40;
    border-bottom: 2px solid #2C57FE;
    padding-bottom: 5px;
}

.status-display {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.status-success {
    background-color: rgba(241, 255, 115, 0.2);
    border: 1px solid rgba(241, 255, 115, 0.4);
    color: #F1FF73;
}

.status-error {
    background-color: rgba(1, 14, 64, 0.3);
    border: 1px solid rgba(241, 255, 115, 0.4);
    color: #F1FF73;
}

.status-warning {
    background-color: rgba(44, 87, 254, 0.3);
    border: 1px solid rgba(44, 87, 254, 0.4);
    color: #2C57FE;
}

.logs-container {
    background-color: #010E40;
    color: #2C57FE;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 11px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.config-item {
    margin-bottom: 10px;
}

.config-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.config-item input {
    width: 100%;
    padding: 5px;
    border: 1px solid rgba(44, 87, 254, 0.3);
    border-radius: 3px;
}

.performance-metrics {
    background-color: rgba(44, 87, 254, 0.1);
    padding: 10px;
    border-radius: 5px;
}

.performance-metrics p {
    margin: 5px 0;
}

/* ===== MEDIA QUERIES ===== */
@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .container {
        padding: 15px;
    }
    
    .panel {
        padding: 30px;
        min-height: 600px;
    }
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .container {
        padding: 10px;
    }
    
    .panel {
        padding: 20px;
        min-height: 500px;
    }

    .camera-controls {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .control-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .btn {
        width: 100%;
        max-width: 300px;
        margin: 6px 0;
    }

    .progress-bar {
        width: 150px;
    }
    
    /* Optimizaciones para cámara en móviles */
    #cameraVideo {
        width: 100%;
        max-width: 350px;
        height: 250px;
    }
    
    /* Optimizaciones para avatar en móviles */
    .avatar-frame {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 480px) {
    .header-top {
        flex-direction: column;
        gap: 15px;
    }

    .logo {
        width: 50px;
        height: 50px;
    }

    .panel {
        padding: 15px;
        min-height: 450px;
    }

    .avatar-frame {
        width: 160px;
        height: 160px;
    }

    .progress-bar {
        width: 120px;
    }
    
    /* Optimizaciones específicas para móviles pequeños */
    .header h1 {
        font-size: 1.6rem;
    }
    
    .header p {
        font-size: 0.9rem;
    }
    
    .panel h2 {
        font-size: 1.3rem;
    }
    
    /* Botones más grandes para touch */
    .btn {
        min-height: 52px;
        font-size: 16px;
        padding: 16px 20px;
    }
}

/* ===== ORIENTACIÓN LANDSCAPE EN MÓVILES ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .container {
        padding: 10px 20px;
    }
    
    .main-content {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .panel {
        padding: 15px;
        min-height: 400px;
    }
    
    .avatar-frame {
        width: 120px;
        height: 120px;
    }
    
    #cameraVideo {
        height: 180px;
    }
    
    .header {
        margin-bottom: 15px;
    }
    
    .header h1 {
        font-size: 1.4rem;
    }
}

/* ===== DISPOSITIVOS DE ALTA DENSIDAD ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== PREFERENCIAS DE REDUCCIÓN DE MOVIMIENTO ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .btn:hover {
        transform: none;
    }
}

/* ===== MODO OSCURO DEL SISTEMA ===== */
@media (prefers-color-scheme: dark) {
    /* Mantener el tema oscuro personalizado */
}

/* ===== PANTALLAS MUY GRANDES ===== */
@media (min-width: 14000px) {
    .container {
        max-width: 1400px;
        padding: 60px;
    }
    
    .panel {
        padding: 60px;
        min-height: 800px;
    }
    
    .btn {
        padding: 25px 40px;
        font-size: 1.2rem;
    }
}

/* ===== ESTILOS PARA FORMULARIO DE DATOS DEL USUARIO ===== */
/* Panel de datos del usuario centrado */
#userDataPanel {
    position: fixed !important;
    top: 20vh !important;
    left: 40vw !important;
    width: 60vw !important;
    height: 70vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.user-data-form {
    gap: 10px;
    padding: 8px;
    margin-bottom: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-weight: 500;
    color: #2C57FE;
    font-size: 1rem;
}

.form-group input {
    padding: 10px 16px;
    border: 2px solid rgba(44, 87, 254, 0.3);
    border-radius: 10px;
    background: rgba(44, 87, 254, 0.1);
    color: #2C57FE;
    font-size: 1rem;
    font-family: 'Sundry', sans-serif;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input:focus {
    outline: none;
    border-color: #2C57FE;
    background: rgba(44, 87, 254, 0.15);
    box-shadow: 0 0 20px rgba(44, 87, 254, 0.3);
}

.form-group input::placeholder {
    color: rgba(44, 87, 254, 0.6);
}

.user-data-status {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(44, 87, 254, 0.1);
    border: 1px solid rgba(44, 87, 254, 0.2);
    text-align: center;
    font-weight: 500;
    transition: all 0.3s ease;
    color: #2C57FE;
}

.user-data-status.success {
    background: rgba(241, 255, 115, 0.2);
    border-color: rgba(241, 255, 115, 0.5);
    color: #F1FF73;
}

.user-data-status.error {
    background: rgba(1, 14, 64, 0.3);
    border-color: rgba(241, 255, 115, 0.5);
    color: #F1FF73;
}

.user-data-status.info {
    background: rgba(44, 87, 254, 0.2);
    border-color: rgba(44, 87, 254, 0.5);
    color: #2C57FE;
}

/* Responsive para formulario */
/* Estilos para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    #userDataPanel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 60vw !important;
        height: 60vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1000 !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    .user-data-form {
        width: 100% !important;
        max-width: 550px !important;
    }
}

@media (max-width: 768px) {
    #userDataPanel {
        position: relative !important;
        top: 0vh !important;
        left: 0vw !important;
        width: 90vw !important;
        height: 110vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1000 !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    
    .user-data-form {
        max-width: 90% !important;
        margin: 10px 14px !important;
        padding: 30px 20px !important;
    }
    
    .user-data-form {
        gap: 10px;
    }
    
    .form-group input {
        padding: 14px 16px;
        font-size: 16px; /* Evitar zoom en iOS */
    }
    
    .user-data-status {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/* Estilos para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    #userDataPanel {
        max-width: 500px;
        padding: 40px 30px;
    }
}

/* Estilos para pantallas grandes */
@media (min-width: 1025px) {
    #userDataPanel {
        max-width: 600px;
        padding: 50px 40px;
    }
}

/* ===== FORMA DE PÍLDORA UNIFORME PARA TODOS LOS BOTONES ===== */

/* Asegurar que todos los botones tengan forma de píldora */
.btn, 
.btn-primary, 
.btn-success, 
.btn-danger, 
.btn-warning, 
.btn-secondary,
.video-call-controls .btn,
#userDataPanel .btn,
.interview-controls .btn,
.camera-controls .btn,
.microphone-controls .btn {
    border-radius: 50px !important; /* Forma de píldora uniforme */
}

/* ===== ESTILOS RESPONSIVOS PARA EL AVATAR ===== */

/* Estilos para el wrapper del avatar SVG */
#avatar2d-svg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

/* Tamaños específicos para móviles */
.mobile-device #avatar2d-svg-wrapper {
    width: 300px !important;
    height: 400px !important;
    max-width: 90vw;
    max-height: 50vh;
}

/* Tamaños específicos para tablets */
.tablet-device #avatar2d-svg-wrapper {
    width: 450px !important;
    height: 600px !important;
    max-width: 80vw;
    max-height: 60vh;
}

/* Tamaños específicos para desktop */
.desktop-device #avatar2d-svg-wrapper {
    width: 600px !important;
    height: 800px !important;
    max-width: 70vw;
    max-height: 70vh;
}

/* Media queries adicionales para mayor control */
@media (max-width: 768px) {
    #avatar2d-svg-wrapper {
        width: 300px !important;
        height: 400px !important;
        max-width: 90vw;
        max-height: 50vh;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #avatar2d-svg-wrapper {
        width: 450px !important;
        height: 600px !important;
        max-width: 80vw;
        max-height: 60vh;
    }
}

@media (min-width: 1025px) {
    #avatar2d-svg-wrapper {
        width: 600px !important;
        height: 800px !important;
        max-width: 70vw;
        max-height: 70vh;
    }
}

/* ===== ESTILOS PARA BOTÓN CON BORDE ROJO ===== */
/* Estilo para indicar que el botón debe ser presionado */
.btn-highlight-red {
    border: 3px solid #ff4444 !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
    animation: pulse-red 2s infinite !important;
}

/* Animación de pulso para el borde rojo */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 68, 68, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
    }
}

/* Asegurar que el estilo se aplique correctamente en todos los layouts */
.video-call-controls .btn-highlight-red,
.interview-controls .btn-highlight-red {
    border: 3px solid #ff4444 !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
    animation: pulse-red 2s infinite !important;
}

/* ===== ESTILOS PARA BOTÓN CON BORDE AMARILLO ===== */
/* Estilo para indicar que el botón está activo */
.btn-highlight-yellow {
    border: 3px solid #F1FF73 !important;
    box-shadow: 0 0 15px rgba(241, 255, 115, 0.6) !important;
    animation: pulse-yellow 2s infinite !important;
}

/* Animación de pulso para el borde amarillo */
@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 15px rgba(241, 255, 115, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(241, 255, 115, 0.8);
    }
    100% {
        box-shadow: 0 0 15px rgba(241, 255, 115, 0.6);
    }
}

/* Asegurar que el estilo amarillo se aplique correctamente en todos los layouts */
.video-call-controls .btn-highlight-yellow,
.interview-controls .btn-highlight-yellow,
.camera-controls .btn-highlight-yellow,
.microphone-controls .btn-highlight-yellow {
    border: 3px solid #F1FF73 !important;
    box-shadow: 0 0 15px rgba(241, 255, 115, 0.6) !important;
    animation: pulse-yellow 2s infinite !important;
}