/* ============================================================
   Sistema COL - Claude On Line
   css/estilos.css
   Estilos globales + media queries celular / amplio
   Version 1.0 | 9 de abril de 2026

   VARIABLES DE COLOR:
   Todos los colores estan definidos en :root.
   Para ajustar la estetica del sistema modificar
   unicamente esa seccion, sin tocar el resto del archivo.
   ============================================================ */


/* ── Variables globales ──────────────────────────────────────────────────────*/

:root {

    /* Colores principales — pendiente de definicion por Gerencia */
    --color-fondo-pagina:       #ffffff;
    --color-fondo-contenedor:   #ffffff;
    --color-fondo-input:        #ffffff;
    --color-fondo-btn-primario: #333333;
    --color-fondo-error:        #ffffff;

    --color-texto-principal:    #222222;
    --color-texto-label:        #444444;
    --color-texto-btn-primario: #ffffff;
    --color-texto-error:        #cc0000;

    --color-borde-input:        #aaaaaa;
    --color-borde-input-foco:   #333333;
    --color-borde-error:        #cc0000;

    /* Tipografia */
    --fuente-principal: Arial, Helvetica, sans-serif;
    --tamanio-base:     16px;

    /* Espaciado */
    --espaciado-base:   1rem;
    --radio-borde:      4px;

    /* Logo: ancho maximo en cada modo */
    --logo-ancho-celular: 180px;
    --logo-ancho-amplio:  240px;
}


/* ── Reset basico ────────────────────────────────────────────────────────────*/

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

html {
    font-size:   var(--tamanio-base);
    font-family: var(--fuente-principal);
    color:       var(--color-texto-principal);
}

body {
    background-color: var(--color-fondo-pagina);
    min-height:       100vh;
}


/* ============================================================
   PANTALLA DE LOGIN
   ============================================================ */

.pagina-login {
    display:         flex;
    justify-content: center;
    align-items:     center;
    min-height:      100vh;
    padding:         var(--espaciado-base);
}

.contenedor-login {
    background-color: var(--color-fondo-contenedor);
    width:            100%;
    max-width:        360px;
    padding:          2rem var(--espaciado-base);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              1.5rem;
}

/* Logo */
.logo-login {
    width:      100%;
    text-align: center;
}

.logo-login img {
    width:     var(--logo-ancho-celular);
    max-width: 100%;
    height:    auto;
    display:   block;
    margin:    0 auto;
}

/* Formulario */
.form-login {
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.campo {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}

.campo label {
    font-size:   0.875rem;
    font-weight: bold;
    color:       var(--color-texto-label);
}

.campo input {
    width:            100%;
    padding:          0.6rem 0.75rem;
    font-size:        1rem;
    font-family:      var(--fuente-principal);
    color:            var(--color-texto-principal);
    background-color: var(--color-fondo-input);
    border:           1px solid var(--color-borde-input);
    border-radius:    var(--radio-borde);
    outline:          none;
    transition:       border-color 0.15s;
}

.campo input:focus {
    border-color: var(--color-borde-input-foco);
}

/* Mensaje de error */
.mensaje-error {
    font-size:    0.875rem;
    color:        var(--color-texto-error);
    border:       1px solid var(--color-borde-error);
    border-radius: var(--radio-borde);
    padding:      0.5rem 0.75rem;
    background-color: var(--color-fondo-error);
}

/* Boton principal */
.btn-primario {
    width:            100%;
    padding:          0.7rem;
    font-size:        1rem;
    font-family:      var(--fuente-principal);
    font-weight:      bold;
    color:            var(--color-texto-btn-primario);
    background-color: var(--color-fondo-btn-primario);
    border:           none;
    border-radius:    var(--radio-borde);
    cursor:           pointer;
    transition:       opacity 0.15s;
}

.btn-primario:hover {
    opacity: 0.85;
}

.btn-primario:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* Version */
.version-app {
    font-size: 0.75rem;
    color:     #aaaaaa;
}


/* ============================================================
   MODO AMPLIO (pantallas >= 768px: Windows / macOS / Linux)
   ============================================================ */

@media (min-width: 768px) {

    .contenedor-login {
        max-width: 400px;
        padding:   2.5rem 2rem;
    }

    .logo-login img {
        width: var(--logo-ancho-amplio);
    }
}


/* ============================================================
   PANTALLA PRINCIPAL
   (estilos a completar en la Etapa 4)
   ============================================================ */