* {
    box-sizing: border-box,
}

body {
    margin: 0,
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,
    background: #f4f6f8,
    color: #1f2937,
    display: flex,
    justify-content: center,
    padding: 24px 16px,
}

.contenedor {
    width: 100%,
    max-width: 480px,
    background: #ffffff,
    border-radius: 12px,
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
    padding: 32px 24px,
}

h1 {
    font-size: 1.4rem,
    margin: 0 0 8px,
    text-align: center,
}

.descripcion {
    margin: 0 0 24px,
    text-align: center,
    color: #4b5563,
    font-size: 0.95rem,
}

.formulario {
    display: flex,
    flex-direction: column,
    gap: 12px,
}

label {
    font-size: 0.9rem,
    font-weight: 600,
}

input[type="text"] {
    padding: 12px,
    border: 1px solid #d1d5db,
    border-radius: 8px,
    font-size: 1rem,
    width: 100%,
}

input[type="text"]:focus {
    outline: 2px solid #2563eb,
    border-color: #2563eb,
}

button {
    padding: 12px,
    border: none,
    border-radius: 8px,
    background: #2563eb,
    color: #fff,
    font-size: 1rem,
    font-weight: 600,
    cursor: pointer,
}

button:disabled {
    background: #93c5fd,
    cursor: not-allowed,
}

button:hover:not(:disabled) {
    background: #1d4ed8,
}

.resultado {
    margin-top: 20px,
    padding: 16px,
    border-radius: 8px,
    font-size: 0.95rem,
    line-height: 1.5,
}

.resultado p {
    margin: 4px 0,
}

.resultado--info {
    background: #eff6ff,
    color: #1e3a8a,
}

.resultado--exito {
    background: #ecfdf5,
    color: #065f46,
}

.resultado--vacio {
    background: #fffbeb,
    color: #92400e,
}

.resultado--error {
    background: #fef2f2,
    color: #991b1b,
}

@media (max-width: 400px) {
    .contenedor {
        padding: 24px 16px,
    }
}