/* =========================================
   CONTACTO.CSS // CENTRO DE COMANDO B2B
   ========================================= */
.seccion-comunicaciones {
    padding: 120px 5% 80px 5%;
    min-height: 100vh;
    background-color: #020b14;
    position: relative;
    z-index: 10;
}

.comunicaciones-header { text-align: center; margin-bottom: 50px; }

/* LA GRILLA MAESTRA (2 Columnas) */
.comunicaciones-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    max-width: 1500px; /* Aumentamos a 1500px para que respiren ambos paneles */
    margin: 0 auto;
    align-items: stretch;
}

/* =========================================
   PANEL IZQUIERDO (DIRECTORIO)
   ========================================= */
.panel-directorio {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nodo-contacto {
    background: rgba(5,5,5,0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid var(--tech-gray);
    padding: 25px;
    transition: 0.3s ease;
    backdrop-filter: blur(5px);
}
.nodo-contacto:hover { border-left-color: var(--neon-yellow); background: rgba(20,20,5,0.8); }

.nodo-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.icon-neon { color: var(--neon-yellow); font-size: 18px; text-shadow: 0 0 10px rgba(255,234,0,0.5); }
.nodo-header h4 { font-family: var(--font-display); font-size: 13px; color: white; letter-spacing: 2px; margin: 0; }

.nodo-cuerpo p { margin: 0 0 10px 0; }
.dato-principal { font-family: var(--font-display); font-size: 20px; color: white; letter-spacing: 2px; }
.dato-secundario { font-family: var(--font-text); font-size: 13px; color: #aaa; line-height: 1.5; }

.lista-comunicaciones { list-style: none; padding: 0; margin: 15px 0 0 0; }
.lista-comunicaciones li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.badge-linea { background: rgba(255,255,255,0.1); padding: 3px 8px; font-family: var(--font-display); font-size: 9px; color: var(--tech-gray); letter-spacing: 1px; border-radius: 2px; }
.enlace-telefono, .enlace-correo { font-family: var(--font-display); font-size: 14px; color: var(--neon-yellow); text-decoration: none; transition: 0.3s; letter-spacing: 1px; }
.enlace-telefono:hover, .enlace-correo:hover { color: white; text-shadow: 0 0 10px rgba(255,255,255,0.5); }

/* MATRIZ DE REDES SOCIALES */
.nodo-redes { border-left-color: var(--neon-yellow); }
.redes-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.red-box {
    display: flex; justify-content: center; align-items: center;
    height: 50px; background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1); color: #888;
    font-size: 20px; text-decoration: none; transition: all 0.3s;
}
.red-box:hover { background: var(--neon-yellow); color: black; border-color: var(--neon-yellow); transform: scale(1.05); box-shadow: 0 0 15px rgba(255,234,0,0.3); }

/* =========================================
   PANEL DERECHO (TERMINAL IA)
   ========================================= */
.panel-ia-terminal { height: 100%; min-height: 600px; }
.terminal-chasis {
    background: #05080c; border: 1px solid var(--tech-gray);
    border-radius: 4px; display: flex; flex-direction: column;
    height: 100%; box-shadow: inset 0 0 50px rgba(0,0,0,0.9), 0 20px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* TOPBAR */
.terminal-topbar { display: flex; justify-content: space-between; padding: 10px 20px; background: #0a1118; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-display); font-size: 10px; color: var(--tech-gray); letter-spacing: 2px; }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.luz-status { width: 8px; height: 8px; background: #0f0; border-radius: 50%; box-shadow: 0 0 10px #0f0; }
.parpadeo-lento { animation: latido-terminal 2s infinite; }

/* PANTALLA DE CHAT */
.pantalla-chat {
    flex-grow: 1; padding: 30px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 20px;
    background-image: linear-gradient(rgba(255,234,0,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,234,0,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}
/* Scrollbar personalizado para el chat */
.pantalla-chat::-webkit-scrollbar { width: 8px; }
.pantalla-chat::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.pantalla-chat::-webkit-scrollbar-thumb { background: var(--tech-gray); border-radius: 4px; }
.pantalla-chat::-webkit-scrollbar-thumb:hover { background: var(--neon-yellow); }

/* MENSAJES */
.mensaje { display: flex; gap: 15px; max-width: 85%; }
.mensaje-avatar { font-family: var(--font-display); font-size: 10px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; font-weight: bold; letter-spacing: 1px;}
.mensaje-texto { padding: 15px; border-radius: 2px; font-family: var(--font-text); font-size: 14px; line-height: 1.5; }
.mensaje-texto p { margin: 0 0 8px 0; }
.mensaje-texto p:last-child { margin: 0; }

/* Bot (IA) */
.bot-mensaje { align-self: flex-start; }
.bot-mensaje .mensaje-avatar { background: rgba(255,234,0,0.1); border: 1px solid var(--neon-yellow); color: var(--neon-yellow); box-shadow: 0 0 10px rgba(255,234,0,0.2); }
.bot-mensaje .mensaje-texto { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.1); color: #ccc; border-left: 3px solid var(--neon-yellow); }

/* Usuario (Ingeniero) */
.user-mensaje { align-self: flex-end; flex-direction: row-reverse; }
.user-mensaje .mensaje-avatar { background: rgba(255,255,255,0.1); border: 1px solid var(--tech-gray); color: white; }
.user-mensaje .mensaje-texto { background: rgba(255,234,0,0.05); border: 1px solid rgba(255,234,0,0.2); color: white; border-right: 3px solid var(--tech-gray); }

/* ÁREA DE INPUT */
.consola-input-area { display: flex; background: #000; border-top: 2px solid var(--tech-gray); padding: 15px; gap: 15px; align-items: flex-end; }
.input-wrapper { flex-grow: 1; display: flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 10px 15px; border-radius: 2px; transition: 0.3s; }
.input-wrapper:focus-within { border-color: var(--neon-yellow); box-shadow: inset 0 0 10px rgba(255,234,0,0.1); }
.prompt-symbol { font-family: var(--font-display); font-size: 12px; color: #0f0; margin-right: 15px; }

#chat-input { width: 100%; background: transparent; border: none; color: white; font-family: var(--font-text); font-size: 15px; outline: none; resize: none; overflow-y: hidden; min-height: 24px; max-height: 150px; padding: 0; }
#chat-input::placeholder { color: #555; }

.btn-ejecutar { background: transparent; border: 1px solid var(--neon-yellow); color: var(--neon-yellow); font-family: var(--font-display); font-size: 12px; padding: 0 25px; height: 46px; cursor: pointer; transition: 0.3s; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.btn-ejecutar:hover { background: var(--neon-yellow); color: black; box-shadow: 0 0 15px var(--neon-yellow-glow); }

/* Animación de entrada de mensaje */
.animar-entrada { animation: slideIn 0.3s ease forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Indicador de "Escribiendo..." */
.escribiendo-dots { display: inline-block; font-family: var(--font-display); font-size: 16px; color: var(--neon-yellow); letter-spacing: 2px; animation: blink-dots 1.5s infinite; }
@keyframes blink-dots { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* RESPONSIVE */
@media (max-width: 1000px) {
    .comunicaciones-grid { grid-template-columns: 1fr; }
    .panel-ia-terminal { min-height: 500px; margin-top: 40px; }
}

/* =========================================
   TERMINAL DE ENLACE B2B (BLOQUE 6 - ENCUADRE 100VH)
   ========================================= */
.seccion-terminal {
    height: 100vh; /* Encuadre estricto de una pantalla */
    padding: 70px 5% 15px 5%; /* Colchón superior e inferior optimizado */
    box-sizing: border-box;
    display: flex;
    align-items: center; 
    justify-content: center;
    position: relative;
    z-index: 20;
    background-color: #020b14; /* Estética original: Azulado oscuro industrial */
}

.terminal-container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    max-height: 85vh; /* Límite de seguridad para no romper la pantalla */
    display: flex;
    flex-direction: column;
}

.terminal-header { text-align: center; margin-bottom: 10px; }

.consola-contacto {
    display: flex; gap: 20px;
    background: rgba(5,5,5,0.85); 
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px; 
    padding: 20px 25px; /* Padding interno reducido para ganar espacio */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    border-top: 3px solid var(--neon-yellow);
    flex-grow: 1; 
}

/* --- PANEL IZQUIERDO (Info Técnica) --- */
.info-operativa { flex: 1; border-right: 1px dashed var(--tech-gray); padding-right: 30px; }
.info-operativa h3 { font-family: var(--font-display); font-size: 16px; color: white; letter-spacing: 2px; margin-bottom: 20px; border-bottom: 2px solid var(--neon-yellow); padding-bottom: 8px; display: inline-block; }
.datos-lista { list-style: none; padding: 0; margin: 0; }
.datos-lista li { font-family: var(--font-text); font-size: 12px; color: #ccc; margin-bottom: 12px; letter-spacing: 1px; }
.decoracion-tech { margin-top: 20px; height: 4px; background: rgba(255,255,255,0.1); width: 100%; position: relative; overflow: hidden; }
.barra-progreso-falsa { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--neon-yellow); animation: escaneo-datos 3s infinite linear; }
@keyframes escaneo-datos { 0% { left: -30%; } 100% { left: 100%; } }

/* --- PANEL DERECHO (Formulario Cibernético) --- */
.cyber-form { flex: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 5px;}

/* Títulos de las secciones ultracompactos */
.form-seccion-titulo { 
    font-family: var(--font-display); font-size: 11px; color: var(--neon-yellow); 
    margin: 8px 0 4px 0; border-bottom: 1px dashed rgba(255,234,0,0.3); 
    padding-bottom: 2px; letter-spacing: 2px; 
}
.form-seccion-titulo:first-of-type { margin-top: 0; }

.input-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.input-fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.input-fila-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.input-fila-75-25 { display: grid; grid-template-columns: 3fr 1fr; gap: 15px; }

/* ELIMINADOS LOS MÁRGENES EXTERNOS EN CONFLICTO */
.input-grupo { position: relative; width: 100%; }

/* EL ESPACIO EXACTO PARA QUE LA LETRA FLOTE POR ENCIMA */
.input-grupo { position: relative; width: 100%; margin-top: 15px; }

/* ESTILOS DE LOS CAMPOS (Letra de digitación más grande) */
.input-grupo input, .cyber-form select {
    width: 100%; 
    height: 38px; 
    padding: 10px; /* Padding normalizado */
    background: rgba(0,0,0,0.6); 
    border: 1px solid var(--tech-gray); 
    color: white; 
    font-family: var(--font-display); 
    font-size: 13px; /* MAGIA: El texto que el cliente escribe ahora es grande y legible */
    outline: none; 
    transition: 0.3s ease; 
    box-sizing: border-box;
}

/* Ajuste específico para selects (tamaño de letra controlado para que quepan los nombres largos) */
.cyber-form select { padding: 8px 10px; cursor: pointer; font-size: 10px; }
.cyber-form select:focus, .input-grupo input:focus { border-color: var(--neon-yellow); box-shadow: 0 0 10px rgba(255,234,0,0.2); }
.cyber-form select:disabled { opacity: 0.3; cursor: not-allowed; border-color: rgba(255,255,255,0.1); background: rgba(0,0,0,0.8); }

/* LABEL FLOTANTE EXTERNO */
.input-grupo label {
    position: absolute; 
    top: 12px; /* Posición inicial centrada en la caja */
    left: 10px; 
    font-family: var(--font-display); 
    font-size: 11px;
    color: var(--tech-gray); 
    pointer-events: none; 
    transition: 0.3s ease; 
    letter-spacing: 1px;
}

/* La letra sube HACIA AFUERA de la caja y se pone amarilla */
.input-grupo input:focus ~ label, .input-grupo input:not(:placeholder-shown) ~ label {
    top: -16px; /* Sube por encima de la línea superior */
    left: 0;
    font-size: 10px; /* Tamaño perfecto y legible */
    color: var(--neon-yellow); 
}

/* Efecto Escáner */
.linea-escaner {
    position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: var(--neon-yellow); transition: 0.4s ease; transform: translateX(-50%);
}
.input-grupo input:focus ~ .linea-escaner { width: 100%; box-shadow: 0 0 10px var(--neon-yellow); }

/* --- BOTÓN DE TRANSMISIÓN --- */
.btn-transmitir {
    background: transparent; border: 1px solid var(--neon-yellow); color: var(--neon-yellow);
    padding: 10px 25px; font-family: var(--font-display); font-size: 12px; letter-spacing: 2px;
    cursor: pointer; position: relative; overflow: hidden; display: inline-block;
    align-self: flex-end; transition: 0.3s;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    margin-top: 10px !important;
}
.btn-transmitir::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: var(--neon-yellow); transition: 0.4s ease; z-index: -1;
}
.btn-transmitir:hover { color: black; font-weight: bold; }
.btn-transmitir:hover::before { left: 0; }