programacion-web/css/ejerciciocss9.css

validacion-formularios

:root {
    --color-primario:#ff9a9e;
    --color-secundario: #f0a14c;
    --color-fondo: linear-gradient(to right, #ff9a9e, #fad0c4, #fbc2eb);
    --color-texto: #2B2D42;
    --color-borde: #E9ECEF;
}

/* 2. RESET BASICO */
/* Proposito: Eliminar márgenes y paddings predeterminados del navegador. */
/* Ventaja: Evita inconsistencias entre navegadores. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Incluye padding y border en el ancho/alto */
}

/* 3. ESTILOS GENERALES */
/* Tipografia: "Inter" es un
a fuente moderna y legible. */
/* Fondo: Color claro para contraste con el formulario. */
body {
    font-family: 'Inter', sans-serif;
  background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6; /* Mejora legibilidad en textos largos */
    padding: 40px 20px; /* Espaciado externo */
}

/* 4. CONTENEDOR PRINCIPAL */
/* max-width: limita el ancho en pantallas grandes. */
/* margin: 0 auto: centra el contenedor horizontalmente. */
/* box-shadow: Efecto de elevación sutil. */
.contenedor-formulario {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 12px;/* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);/* Sombra exterior */
}

/* 5. ESTILOS DE TIPOGRAFÍA */
/* Jerarquía visual: h1 > subtitlo > labels > inputs. */
/* font-weight: negritas para títulos y labels. */
h1 {
    font-size: 28px;
    color: var(--color-primario);
    margin-bottom: 8px;
}

.subtitulo {
    color: #6C757D;/* Gris para texto secundario */
    margin-bottom: 30px;
}

/* 6. GRUPOS DE FORMULARIO */
/* margin-bottom: espaciado vertical entre grupos. */
/* label: block en labels para ocupar toda la línea. */
.grupo-formulario {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    /* Semi-negrita */
    font-size: 14px;
}

/* 7. INPUTS Y TEXTAREA */
/* transition: Efecto suave al hacer focus. */
/* :focus-state: Feedback visual al interactuar. */
input,textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    transition: all 0.3s; /* Animación suave */
}

input:focus,
textarea:focus {
    border-color: var(--color-secundario);
    outline: none; /* Elimina el outline predeterminado */
    box-shadow: 0 0 5px rgba(76, 201, 240, 0.2);
    /* Sombra interior (efecto glow) */
}

/* 8. DISPOSICIÓN EN COLUMNAS (GRUPO DOBLE) */
/* grid-template-columns: divide en 2 columnas iguales. */
/* gap: Espacio entre columnas. */
.grupo-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 9. ESTILO DE ENVÍO */
/* cursor: pointer: Cambia el cursor al pasar sobre el botón. */
/* :flexbox: Centra texto + ícono. */
/* :hover-state: Efecto al interactuar. */
.boton-enviar {
    background-color: var(--color-primario);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boton-enviar:hover {
    background-color: #654579;
    /* Color oscuro al pasar el mouse */
}