/* =========================================
   WEBTIME STUDIO - DISEÑO LIMPIO FINAL
   ========================================= */

/* 1. DEFINICIÓN DE COLORES CORPORATIVOS */
:root {
    --webtime-blue-dark: #0a1931;  /* Azul Marino (Barra y textos) */
    --webtime-cyan: #00b4d8;       /* Cian (Detalles y botones) */
    --webtime-grey-bg: #f4f7f9;    /* Gris muy sutil para el fondo de pantalla */
    --webtime-white: #ffffff;      /* Blanco puro para el formulario */
}

/* 2. ESTILOS BASE DE LA PÁGINA */
body {
    /* Fondo general suave, sin amarillo */
    background-color: var(--webtime-grey-bg) !important; 
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    color: #333;
}

/* 3. BARRA DE NAVEGACIÓN AZUL MARINO */
.navbar-webtime {
    background-color: var(--webtime-blue-dark) !important;
    padding: 1rem 0 !important;
    width: 100%;
    /* Sombra sutil para separarla del fondo */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.navbar-webtime .navbar-brand {
    color: white !important;
    font-weight: bold;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. ELIMINACIÓN DEL BLOQUE DETRÁS DEL FORMULARIO */
.main-container {
    /* ESTO ES CLAVE: Fondo transparente para quitar el bloque amarillo/beige */
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 !important;
}

/* 5. LA TARJETA BLANCA DEL FORMULARIO */
.card-webtime {
    border: none !important;
    /* Bordes redondeados modernos */
    border-radius: 20px !important;
    /* Fondo blanco puro */
    background-color: var(--webtime-white) !important;
    /* Sombra suave y limpia para que "flote" sobre el fondo gris */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    overflow: hidden;
}

/* 6. BOTÓN CON GRADIENTE WEBTIME */
.btn-webtime {
    background: linear-gradient(45deg, var(--webtime-blue-dark), var(--webtime-cyan)) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Botón completamente redondo */
    padding: 14px 50px !important;
    font-weight: bold !important;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-webtime:hover {
    /* Efecto de elevación al pasar el mouse */
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 180, 216, 0.4);
}

/* Estilo para los títulos dentro del formulario */
h1, h2, h3, legend.h5 {
    color: var(--webtime-blue-dark) !important;
}