/*
============================================================
BEROVA DIGITAL
PROYECTO: BEROVA VIGILANCIA REMOTA V1
ARCHIVO: estilos.css
VERSION: 1.0
FECHA: 30/10/2026 — GMT-3

FUNCION:
Identidad visual corporativa para la interfaz web
de BEROVA Vigilancia Remota.

DEPENDENCIAS:
Ninguna.

============================================================
*/

:root {
    --berova-azul: #071b55;
    --berova-azul-medio: #123b85;
    --berova-azul-claro: #2474c7;

    --berova-fondo: #eef3f9;
    --berova-blanco: #ffffff;

    --berova-texto: #18283f;
    --berova-gris: #64748b;

    --berova-borde: #d8e2ef;

    --berova-exito: #16834a;
    --berova-error: #b42318;

    --berova-radio: 12px;
}

/* ========================================================
   CONFIGURACION GENERAL
======================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;

    color: var(--berova-texto);

    background:
        linear-gradient(
            145deg,
            #e7eef8,
            #f7f9fc
        );

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

/* ========================================================
   PANEL PRINCIPAL
======================================================== */

.card {
    width: 100%;
    max-width: 480px;

    background: var(--berova-blanco);

    padding: 36px;

    border-radius: var(--berova-radio);

    border: 1px solid var(--berova-borde);

    box-shadow:
        0 14px 45px rgba(7, 27, 85, 0.12);
}

/* ========================================================
   TITULOS
======================================================== */

h1 {
    margin: 0 0 12px;

    color: var(--berova-azul);

    font-size: 28px;
    font-weight: 700;

    letter-spacing: 0.4px;
}

h2 {
    color: var(--berova-azul);

    font-size: 22px;
}

p {
    margin: 0 0 20px;
}

/* ========================================================
   FORMULARIOS
======================================================== */

form {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

label {
    font-size: 14px;
    font-weight: 600;

    color: var(--berova-azul);
}

input {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--berova-borde);
    border-radius: 8px;

    font-family: inherit;
    font-size: 16px;

    background: #ffffff;

    color: var(--berova-texto);
}

input:focus {
    outline: none;

    border-color: var(--berova-azul-claro);

    box-shadow:
        0 0 0 3px rgba(36, 116, 199, 0.15);
}

/* ========================================================
   BOTONES
======================================================== */

button {
    width: 100%;

    padding: 13px 18px;

    border: none;
    border-radius: 8px;

    background: var(--berova-azul-medio);

    color: #ffffff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

button:hover {
    background: var(--berova-azul-claro);
}

button:active {
    transform: scale(0.99);
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--berova-azul-claro);
    outline-offset: 3px;
}

/* ========================================================
   ENLACES
======================================================== */

a {
    color: var(--berova-azul-medio);

    font-weight: 600;

    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ========================================================
   MENSAJES
======================================================== */

.notice {
    padding: 14px 16px;

    margin-bottom: 20px;

    background: #eaf2ff;

    color: var(--berova-azul);

    border-left: 4px solid var(--berova-azul-claro);

    border-radius: 6px;

    font-size: 14px;
}

.error {
    padding: 14px 16px;

    margin-bottom: 20px;

    background: #fff0ef;

    color: var(--berova-error);

    border-left: 4px solid var(--berova-error);

    border-radius: 6px;

    font-size: 14px;
}

/* ========================================================
   PIE DE PANEL
======================================================== */

small {
    display: block;

    margin-top: 22px;

    color: var(--berova-gris);

    font-size: 12px;

    text-align: center;
}

/* ========================================================
   ADAPTACION MOVIL
======================================================== */

@media (max-width: 600px) {

    body {
        padding: 14px;
    }

    .card {
        padding: 24px 20px;

        border-radius: 10px;
    }

    h1 {
        font-size: 24px;
    }

    input {
        font-size: 16px;
    }

}

/* ========================================================
   ACCESIBILIDAD
======================================================== */

@media (prefers-reduced-motion: reduce) {

    button {
        transition: none;
    }

}