/* Estilos para el Campo RAL Personalizado */
.ral-field-container {
    margin-top: 20px; /* Espacio superior para separarlo de elementos anteriores */
    margin-bottom: 20px; /* Espacio inferior para separarlo del botón */
    padding: 15px; /* Relleno interno */
    border: 1px solid #e0e0e0; /* Borde suave */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Fondo ligeramente gris */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
}

.ral-field-container label {
    display: block; /* La etiqueta ocupa toda la línea */
    margin-bottom: 8px; /* Espacio entre la etiqueta y el input */
    font-weight: 600; /* Texto de la etiqueta más negrita */
    color: #333; /* Color de texto oscuro */
    font-size: 1.05em; /* Un poco más grande que el texto normal */
}

.ral-field-container input[type="text"] {
    width: 100%; /* El input ocupa todo el ancho del contenedor */
    padding: 10px 12px; /* Relleno interno del input */
    border: 1px solid #d0d0d0; /* Borde del input */
    border-radius: 4px; /* Bordes redondeados del input */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    font-size: 1em; /* Tamaño de fuente normal */
    line-height: 1.5;
    color: #555;
    background-color: #fff; /* Fondo blanco para el input */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para focus */
}

.ral-field-container input[type="text"]:focus {
    border-color: #0073aa; /* Borde azul al enfocar (color de acento de WP) */
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2); /* Sombra al enfocar */
    outline: none; /* Quitar el contorno por defecto del navegador */
}