/* =============================================
   ESTILOS GLOBALES - PROYECTO BNC EMPRESAS
   ============================================= */

/* --- Variables de marca BNC --- */
:root {
    --color-primario: #FDDA24;
    --color-primario-oscuro: #e6c400;
    --color-secundario: #1a1a1a;
    --color-fondo-claro: #f5f5f5;
    --color-texto: #333333;
    --color-texto-claro: #666666;
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-borde: #dddddd;
    --color-exito: #28a745;
    --color-error: #dc3545;
    --color-alerta: #ffc107;
    --color-info: #17a2b8;
    --color-verde: #00873d;
    --color-verde-claro: #e8f5ed;
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.15);
    --sombra-fuerte: 0 8px 32px rgba(0, 0, 0, 0.2);
    --radio-borde: 8px;
    --radio-borde-grande: 16px;
    --transicion: all 0.3s ease;
    --fuente-principal: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* --- Reset y base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    background-color: var(--color-blanco);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicion);
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: var(--fuente-principal);
}

input,
select,
textarea {
    font-family: var(--fuente-principal);
    outline: none;
}

/* --- Utilidades --- */
.contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fila {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.texto-centrado {
    text-align: center;
}

.oculto {
    display: none !important;
}

.visible {
    display: block !important;
}

/* --- Botones --- */
.boton-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background-color: var(--color-primario);
    color: var(--color-negro);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: var(--transicion);
    border: 2px solid transparent;
}

.boton-primario:hover {
    background-color: var(--color-primario-oscuro);
    transform: translateY(-1px);
    box-shadow: var(--sombra-media);
}

.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background-color: var(--color-negro);
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: var(--transicion);
}

.boton-secundario:hover {
    background-color: #333;
    transform: translateY(-1px);
    box-shadow: var(--sombra-media);
}

.boton-contorno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 26px;
    background-color: transparent;
    color: var(--color-negro);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    border: 2px solid var(--color-negro);
    transition: var(--transicion);
}

.boton-contorno:hover {
    background-color: var(--color-negro);
    color: var(--color-blanco);
}

/* --- Encabezado (Header) --- */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-blanco);
    box-shadow: var(--sombra-suave);
}

.encabezado__barra-superior {
    background-color: #2C2A29;
}

.encabezado__barra-superior .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.encabezado__segmentos-izq,
.encabezado__segmentos-der {
    display: flex;
    align-items: center;
}

.encabezado__segmentos-izq {
    gap: 0;
    /* Tabs control their own padding */
}

.encabezado__segmentos-der {
    gap: 24px;
}

.encabezado__enlace-superior {
    color: var(--color-blanco);
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
    transition: var(--transicion);
    padding: 10px 16px;
    text-decoration: none;
}

.encabezado__enlace-superior:hover {
    opacity: 1;
}

.encabezado__enlace-superior.activo {
    opacity: 1;
    color: var(--color-negro);
    background-color: var(--color-blanco);
    font-weight: 500;
}

.encabezado__nav-principal {
    padding: 14px 0;
}

.encabezado__nav-principal .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.encabezado__logo {
    height: 40px;
    width: auto;
}

.encabezado__menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.encabezado__enlace-menu {
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4a4a4a;
    border-radius: 6px;
    transition: var(--transicion);
    text-decoration: none;
}

.encabezado__enlace-menu:hover {
    background-color: var(--color-fondo-claro);
}

.encabezado__acciones {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Custom dark button for Trámites Digitales */
.boton-tramites-dark {
    background-color: #2C2A29;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.boton-tramites-dark:hover {
    background-color: #1a1a1a;
}

/* Integrated Login Group */
.grupo-login-header {
    display: flex;
    align-items: stretch;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: var(--color-blanco);
    height: 38px;
}

.menu-desplegable--adjunto {
    flex: 1;
}

.menu-desplegable__boton--adjunto {
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-right: 1px solid transparent;
    /* Separator if needed */
}

.menu-desplegable__boton--adjunto:hover {
    background-color: var(--color-fondo-claro);
}

.boton-entrar-adjunto {
    background-color: var(--color-primario);
    color: var(--color-negro);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    transition: background-color 0.2s;
}

.boton-entrar-adjunto:hover {
    background-color: var(--color-primario-oscuro);
}

/* Dropdown del portal */
.menu-desplegable {
    position: relative;
}

.menu-desplegable__boton {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-texto);
    border-radius: 6px;
    transition: var(--transicion);
}

.menu-desplegable__boton--blanco {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
}

.menu-desplegable__boton:hover {
    background-color: var(--color-fondo-claro);
}

.menu-desplegable__icono {
    transition: transform 0.3s ease;
    font-size: 0.65rem;
    color: #666;
}

.menu-desplegable.abierto .menu-desplegable__icono {
    transform: rotate(180deg);
}

.menu-desplegable__contenido {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-fuerte);
    min-width: 260px;
    /* Increased from 220px */
    z-index: 999;
    overflow: hidden;
    animation: aparecer 0.2s ease;
}

.menu-desplegable.abierto .menu-desplegable__contenido {
    display: block;
}

.menu-desplegable__opcion {
    display: block;
    padding: 12px 20px;
    font-size: 0.9rem;
    color: var(--color-texto);
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid var(--color-fondo-claro);
    white-space: nowrap;
    /* Prevent wrap on bold */
}

.menu-desplegable__opcion:last-child {
    border-bottom: none;
}

.menu-desplegable__opcion:hover {
    background-color: var(--color-fondo-claro);
    color: var(--color-negro);
    -webkit-text-stroke: 0.5px currentColor;
}

/* Menú hamburguesa móvil */
.boton-hamburguesa {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.boton-hamburguesa__linea {
    width: 24px;
    height: 2px;
    background-color: var(--color-negro);
    border-radius: 2px;
    transition: var(--transicion);
}

/* Menú móvil */
.menu-movil {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-blanco);
    z-index: 2000;
    overflow-y: auto;
    padding: 20px;
    animation: deslizarDesdeArriba 0.3s ease;
}

.menu-movil.abierto {
    display: block;
}

.menu-movil__encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-borde);
}

.menu-movil__logo {
    height: 36px;
}

.boton-cerrar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-texto);
}

.menu-movil__portal {
    margin-bottom: 20px;
}

.menu-movil__selector-portal {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 0.95rem;
    color: var(--color-texto);
    background-color: var(--color-blanco);
    margin-bottom: 12px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.menu-movil__boton-ingresar {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--color-primario);
    color: var(--color-negro);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 12px;
}

.menu-movil__boton-tramites {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--color-negro);
    color: var(--color-blanco);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 24px;
}

.menu-movil__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-borde);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

/* --- Pie de página (Footer) --- */
.pie-pagina {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    padding: 48px 0 24px;
}

.pie-pagina__contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.pie-pagina__titulo-seccion {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primario);
    margin-bottom: 16px;
}

.pie-pagina__enlace {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    transition: var(--transicion);
}

.pie-pagina__enlace:hover {
    color: var(--color-blanco);
    padding-left: 4px;
}

.pie-pagina__divisor {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 0 24px;
}

.pie-pagina__inferior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pie-pagina__copyright {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.pie-pagina__redes {
    display: flex;
    gap: 16px;
}

.pie-pagina__red-social {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: var(--transicion);
}

.pie-pagina__red-social:hover {
    background-color: var(--color-primario);
    color: var(--color-negro);
}

/* --- Animaciones --- */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes deslizarDesdeArriba {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulso {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* --- Responsive --- */
@media (max-width: 768px) {

    /* Ocultar barra superior de segmentos en móvil */
    .encabezado__barra-superior {
        display: none;
    }

    .encabezado__menu,
    .encabezado__acciones {
        display: none;
    }

    .boton-hamburguesa {
        display: flex;
    }

    .pie-pagina__contenido {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .pie-pagina__inferior {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .pie-pagina__contenido {
        grid-template-columns: 1fr;
    }
}