/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa cabecera .CSS ----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* TITULO 1 LOGO_NAVEGACION */

    /* Contenedor principal de la cabecera */
    .contenedor_header {
        background-color: #f8f9fa; /* Color de fondo suave */
        padding: 10px 20px; /* Espaciado interno */
        width: 96%; /* Ocupa todo el ancho de la pantalla */
        height: 16vh; /* Altura fija */
        display: flex; /* Activa la disposición flexible */
        align-items: center; /* Centra verticalmente el contenido */
        border-bottom: 1px solid #ddd; /* Línea inferior */
        border: 4px solid  #D55F99; /* color del borde */
        border-radius: 8px; /* redondeo */
    }

    /* titulo */
    .titulo_cabecera {
        margin: 0; /* espacio que tiene fuera*/
        width: 30%; /* ancho que va a ocupar*/
    }

    /* Contenedor de las secciones */
    .contenedor_secciones{
        display: flex; /* Activa la disposición flexible */
        align-items: center; /* Centra verticalmente el contenido */
        width: 55%; /* Ocupa todo el ancho disponible */
        height: 40%; /* Ocupa toda la altura del contenedor */
        gap: 15px; /* Espacio entre el título y la caja derecha */
    }

    /* Botón de Importar */
    .boton_importar{
        background: linear-gradient(135deg, #A63F83 0%, #CE5A96 50%, #E46D9C 100%); /* degradado */
        color: white; /* Color de texto blanco */
        padding: 8px 18px; /* Espaciado interno - un poco más ancho para icono */
        text-decoration: none; /* Sin subrayado */
        border-radius: 50px; /* Bordes redondeados - forma píldora moderna */
        font-size: 14px; /* Tamaño de la letra */
        font-weight: bold; /* Negrita */
        text-align: center; /* Centrado del texto */
        display: inline-flex; /* alinea icono y texto en línea */
        align-items: center; /* centra vertical */
        border: none; /* quita borde */
        cursor: pointer; /* manita */
    }

    /* Efecto al pasar el mouse sobre el botón de importar - SIMPLE */
    .boton_importar:hover {
        transform: translateY(-2px); /* se levanta */
        background: #93377E; /* Morado más oscuro al pasar el mouse */
        color: white; /* mantiene color */
        box-shadow: 0 8px 25px #000000; /* sombra más grande */
    }
    
    /* Botón de Tabla */
    .boton_tabla{
        background: linear-gradient(135deg, #A63F83 0%, #CE5A96 50%, #E46D9C 100%); /* degradado */
        color: white; /* Color de texto blanco */
        padding: 8px 18px; /* Espaciado interno - un poco más ancho para icono */
        text-decoration: none; /* Sin subrayado */
        border-radius: 50px; /* Bordes redondeados - forma píldora moderna */
        font-size: 14px; /* Tamaño de la letra */
        font-weight: bold; /* Negrita */
        text-align: center; /* Centrado del texto */
        display: inline-flex; /* alinea icono y texto en línea */
        align-items: center; /* centra vertical */
        border: none; /* quita borde */
        cursor: pointer; /* manita */
    }

    /* Efecto al pasar el mouse sobre el botón de tabla - MEJORADO */
    .boton_tabla:hover {
        transform: translateY(-2px); /* se levanta */
        background: #F772A6; /* Morado más oscuro al pasar el mouse */
        color: white; /* mantiene color */
        box-shadow: 0 8px 25px #000000; /* sombra más grande */
    }
    
    /* Esta caja agrupa el Logo y el Botón */
    .caja_derecha {
        display: flex;          /*activa la disponiblidad flexible*/
        flex-direction: column; /* pone uno debajo del otro */
        align-items: center;    /* centra el botón respecto al ancho del logo */
        gap: 5px;               /* espacio entre el logo y el botón */
    }

    /* estilo logo */
    .mi_logo {
        max-height: 60px; /* Tamaño controlado para que no sea gigante */
        width: 50%;    /*ancho que va a pcupar */
        display: block; /*usa la disponibilidad de bloque */
    }

    /* estilo boton1 */
    .boton_logout {
        background: linear-gradient(135deg, #9B1C1C 0%, #DC2626 60%, #FF4444 100%); /* degradado rojo premium de la opción 1 */
        color: white;   /* color de la letra*/
        padding: 8px 18px;  /* espacio que tiene dentro de su contenedor - un poco más grande para que respire */
        text-decoration: none; /*es la decoracion del texto*/
        border-radius: 50px; /*redondea el borde - forma píldora moderna */
        font-size: 11px;    /*tamaño de la letra - mantengo tu tamaño */
        font-weight: bold;  /*es el ancho de la letra*/
        text-align: center; /*alinea el texto de forma central*/
        transition: all 0.3s ease;    /*coloca una animacion para que el cambio no sea brusco - ahora con todo */
        display: inline-flex;  /* alinea las secciones de forma lineal - ahora flex para icono */
        align-items: center; /* centra icono y texto verticalmente */
        gap: 8px; /* separación entre icono y texto */
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); /* sombra suave roja */
        border: none; /* quita borde feo */
        letter-spacing: 0.5px; /* espacio entre letras más elegante */
        cursor: pointer; /* manita */
    }

    /* estilo hover */
    .boton_logout:hover {
        background: linear-gradient(135deg, #7A1616 0%, #B91C1C 100%); /* Rojo oscuro degradado */
        transform: translateY(-2px); /* se levanta un poco */
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45); /* sombra más grande */
        color: white; /* mantiene color de letra */
    }

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa cabecera .CSS ------------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/