/**
 * TulBrand CMS - Estilos base de Formularios
 * -----------------------------------------------
 * Este archivo SOLO contiene estilos estructurales
 * y de reset neutros. Todos los valores visuales
 * (colores, tipografía, bordes, padding) son
 * generados como CSS inline por render_form_block()
 * basándose en lo que el usuario configura en el
 * editor de bloques (Gutenberg).
 * -----------------------------------------------
 */

/* ── Reset de estilos de navegador en los inputs ── */
.tulbrand-form input[type="text"],
.tulbrand-form input[type="email"],
.tulbrand-form input[type="tel"],
.tulbrand-form input[type="url"],
.tulbrand-form input[type="number"],
.tulbrand-form input[type="date"],
.tulbrand-form textarea,
.tulbrand-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: 0;
    display: block;
}

.tulbrand-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* ── Estructura del contenedor del formulario ── */
.tulbrand-form-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

.tulbrand-form {
    width: 100%;
}

.tulbrand-form-fields {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.tulbrand-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tulbrand-form-field label {
    display: block;
}

.tulbrand-form-field .required {
    color: #dc3545;
    margin-left: 0.2rem;
}

/* ── Checkbox y Radio ── */
.tulbrand-checkbox-group,
.tulbrand-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tulbrand-checkbox-label,
.tulbrand-radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.tulbrand-checkbox-label input[type="checkbox"],
.tulbrand-radio-label input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* ── Botón de envío (solo estructura) ── */
.tulbrand-form-submit {
    margin-top: 1rem;
}

.tulbrand-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: 1.5;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.tulbrand-form-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.tulbrand-form-button:active {
    transform: translateY(0);
}

.tulbrand-form-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Mensajes de éxito / error ── */
.tulbrand-form-messages {
    margin: 0.75rem 0;
}

.tulbrand-form-success {
    padding: 0.9rem 1rem;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    background: #d4edda;
    color: #155724;
}

.tulbrand-form-error {
    padding: 0.9rem 1rem;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    background: #f8d7da;
    color: #721c24;
}

/* ── Validación HTML5 visual ── */
.tulbrand-form input:invalid:not(:placeholder-shown),
.tulbrand-form textarea:invalid:not(:placeholder-shown),
.tulbrand-form select:invalid:not(:placeholder-shown) {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}