/*==============================================================================
=            SOCIOS EN RED ERP - ESTILOS GENERALES                             =
==============================================================================*/

/*
|--------------------------------------------------------------------------
| Reinicio básico
|--------------------------------------------------------------------------
| Elimina márgenes y rellenos por defecto del navegador.
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/*
|--------------------------------------------------------------------------
| Configuración del BODY
|--------------------------------------------------------------------------
| Define la fuente principal y el color de fondo del sistema.
*/

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#edf2f7;

    color:#333;

}


/*
|--------------------------------------------------------------------------
| Contenedor Principal
|--------------------------------------------------------------------------
| Divide la pantalla en dos paneles:
| - Izquierdo: Login
| - Derecho : Empresas
*/

.contenedor{

    display:flex;

    min-height:100vh;

}


/*==============================================================================
=            PANEL LOGIN                                                       =
==============================================================================*/

.panel-login{

    width:340px;

    background:#0F172A;

    color:white;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


.panel-login h1{

    font-size:28px;

    margin-bottom:8px;

    line-height:1.2;

}


.panel-login p{

    margin-bottom:25px;

    color:#CBD5E1;

    font-size:15px;

}


/*
|--------------------------------------------------------------------------
| Formulario del Login
|--------------------------------------------------------------------------
| Hace que el formulario ocupe todo el ancho disponible.
*/

.panel-login form{

    width:100%;

}




.panel-login label{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

}


.panel-login input{

    width:100%;

    padding:12px;

    border:none;

    border-radius:8px;

    outline:none;

}


.panel-login button{

    width:100%;

    margin-top:30px;

    padding:14px;

    background:#2563EB;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}


.panel-login button:hover{

    background:#1D4ED8;

}


/*==============================================================================
=            PANEL EMPRESAS                                                    =
==============================================================================*/

.panel-empresas{

    flex:1;

    padding:40px;

}


.panel-empresas h2{

    margin-bottom:25px;

}


.panel-empresas input{

    width:100%;

    padding:14px;

    border-radius:8px;

    border:1px solid #DDD;

    margin-bottom:30px;

}


/*==============================================================================
=            GRID DE EMPRESAS                                                  =
==============================================================================*/

/*
|--------------------------------------------------------------------------
| Este GRID acomoda automáticamente las empresas según el ancho disponible.
| No definimos 1, 2, 3 o 4 columnas.
| CSS decide cuántas caben en cada pantalla.
|--------------------------------------------------------------------------
*/

.grid-empresas{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}


/*==============================================================================
=            TARJETA EMPRESA                                                   =
==============================================================================*/

.empresa{

    background:white;

    border-radius:15px;

    padding:25px;

    text-align:center;

    cursor:pointer;

    transition:.30s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


.empresa:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 35px rgba(0,0,0,.15);

}


.empresa h3{

    margin-top:15px;

    margin-bottom:12px;

}


.empresa p{

    color:#666;

    margin-top:5px;

}

/*==============================================================================
=              NUEVO DISEÑO LOGIN SUPER ADMIN                                  =
==============================================================================*/


/*==================================================
=               LOGO DEL ERP                        =
===================================================*/

.logo-erp{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:10px;

}


/*
|--------------------------------------------------------------------------
| El LOGO se adapta automáticamente al tamaño de la pantalla.
|--------------------------------------------------------------------------
|
| min-width : tamaño mínimo permitido.
| width     : tamaño adaptable.
| max-width : tamaño máximo permitido.
|
| De esta manera NO tendremos que volver a modificar
| el código cuando hagamos la versión para:
|
| - Celulares
| - Tablets
| - Laptop
| - Monitores grandes
|--------------------------------------------------------------------------
*/

.logo-erp img{

    width:100%;

    min-width:100px;

    max-width:220px;

    height:auto;

    object-fit:contain;

}





.login-card{

    width:100%;

    background:rgba(255,255,255,0.05);

    padding:25px;

    border-radius:15px;

}



.login-card h2{

    margin-bottom:25px;

    font-size:20px;

}



.login-card input{

    margin-bottom:10px;

}



.login-card button{

    margin-top:20px;

}


/*==================================================
= OPCIONES LOGIN
===================================================*/


.opciones-login{

    margin-top:20px;

    text-align:center;

}


.opciones-login a{

    color:#CBD5E1;

    text-decoration:none;

    font-size:14px;

}


.opciones-login a:hover{

    color:white;

    text-decoration:underline;

}



/*==================================================
= PIE LOGIN PRINCIPAL
===================================================*/


.login-footer{


    margin-top:25px;


    font-size:12px;


    color:#94A3B8;


    text-align:center;


}