/* =================================================================
   Archivo de correcciones visuales para ObraTudela.com
   ================================================================= */

/*
 * OCULTAR SUBMENÚ REDUNDANTE BAJO LA NAVEGACIÓN PRINCIPAL
 * Problema: Se muestra un menú de texto (tipo miga de pan) duplicado.
 * Solución: Ocultar el contenedor de este submenú.
 */
.sub-menu {
    display: none !important;
}

/*
 * BOTÓN "VOLVER ARRIBA"
 * Problema: Navegación difícil en páginas largas.
 * Solución: Añadir un botón fijo que aparece al hacer scroll.
 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--orange);
    color: #000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
    transform: translateY(20px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--orange2);
    transform: scale(1.05);
}

/*
 * ESTILOS PARA MENÚ DESPLEGABLE UNIFICADO
 * Problema: El submenú es visible por defecto o no se comporta como un desplegable.
 * Solución: Ocultarlo y mostrarlo solo al pasar el cursor o al hacer clic.
 */
.nav-dropdown {
    position: relative;
    /* Contexto para el menú absoluto */
}

.nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    /* Justo debajo del enlace 'Servicios' */
    left: 0;
    background-color: var(--surface, #fff);
    /* Usa variable global con fallback */
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 4px;
    padding: 8px;
    min-width: 180px;
    z-index: 1001;
    opacity: 0;
    /* Oculto por defecto */
    visibility: hidden;
    /* Oculto y no interactuable */
    transform: translateY(10px);
    /* Efecto de aparición */
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* Mostrar el desplegable al pasar el cursor sobre el contenedor o cuando tiene la clase 'open' */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =================================================================
   ESTILOS PARA LA INTERFAZ DE CHAT (Presupuesto con IA)
   ================================================================= */

/* Ajuste de la zona de entrada para que suba en pantallas pequeñas */
.chat-input-area {
    padding: 12px 20px;
    /* Añade espacio extra abajo respetando la barra del sistema del móvil */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* Reglas específicas para pantallas de teléfono (móviles) */
@media (max-width: 600px) {

    /* 
     * Alternativa de layout para el chat en móvil.
     * En lugar de reducir la altura del contenedor, lo hacemos ocupar
     * toda la pantalla y hacemos que la caja de entrada sea "pegajosa"
     * en la parte inferior. Esto es más robusto si el alto de la cabecera cambia.
    */
    .chat-container {
        /* Ocupa toda la altura disponible en el viewport dinámico */
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .chat-messages {
        flex-grow: 1;
        /* Ocupa todo el espacio sobrante */
        overflow-y: auto;
        /* Permite scroll si los mensajes exceden el alto */
        padding: 12px 16px;
        /* Espacio para que el último mensaje no quede tapado por la caja de entrada flotante */
        padding-bottom: 100px;
        /* Un valor generoso para asegurar visibilidad */
    }

    .chat-input-area {
        /* Hacemos la caja de entrada "pegajosa" en la parte inferior del contenedor */
        position: sticky;
        bottom: 10px;

        /* Estilos para que parezca una "píldora" flotante */
        width: calc(100% - 24px);
        /* Ancho menos los márgenes laterales */
        margin: 0 auto;
        /* Centrado horizontal */
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        /* Respetar safe area */
        border-radius: 12px;
        border: 1px solid var(--border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        /* Sombra para dar efecto flotante */
        box-sizing: border-box;

        /* Aseguramos que no se encoja y mantenga su posición */
        flex-shrink: 0;
    }
}

/*
 * OCULTAR FLECHAS EN INPUTS DE TIPO NÚMERO
 * Problema: Los navegadores muestran flechas de incremento/decremento que son inconsistentes.
 * Solución: Ocultarlas para un diseño más limpio.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* =================================================================
   MENÚ DESPLEGABLE PRESUPUESTOS (compartido entre todas las páginas)
   ================================================================= */
.presupuestos-dropdown {
    position: fixed;
    top: 64px;
    right: 40px;
    background: white;
    border: 2px solid var(--orange);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 999;
    display: none;
    min-width: 280px;
}

.presupuestos-dropdown.active {
    display: block;
    animation: presupDropFadeIn 0.2s ease;
}

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

.presupuestos-dropdown a {
    display: block;
    padding: 12px 16px;
    color: var(--text);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.presupuestos-dropdown a:hover {
    background: var(--orange);
    color: white;
}

.presupuestos-dropdown a small {
    display: block;
    font-size: 0.75em;
    opacity: 0.7;
    font-weight: 400;
    margin-top: 2px;
}

.presupuestos-dropdown .dropdown-title {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px 4px;
    font-weight: 600;
}