/* ========================================
   📋 SISTEMA DE FORMULARIOS UNIFICADO GLOBAL
   ========================================
   
   ÚNICO punto de definición para TODOS los formularios.
   Cualquier cambio aquí se refleja en toda la aplicación.
*/

/* === CONTENEDOR BASE UNIVERSAL === */
.form-container,
.form-minimal,
.cta-form-new,
.auth-modal-content form,
.domain-search-form,
.domain-search-card,  /* AGREGADO para consistencia */
.profile-form {
    max-width: 400px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--SPACING_MD);                   /* CÓMODO - 12px entre campos */
    background: var(--COLOR_FORM_BACKGROUND);
    padding: var(--SPACING_LG);               /* CÓMODO - 16px interno */
    border-radius: var(--BORDER_RADIUS_XS);   /* UNIFICADO - 2px */
    border: 1px solid var(--COLOR_FORM_INPUT_BORDER);
    box-shadow: 0 2px 8px var(--COLOR_SHADOW_LIGHT);  /* SOMBRA UNIFICADA */
    box-sizing: border-box;
}

/* === GRUPOS DE CAMPOS UNIVERSAL === */
.form-group,
.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--SPACING_XS);                   /* CÓMODO - 4px entre label e input */
    margin: 0;
}

/* === ETIQUETAS UNIVERSAL === */
.form-label,
.profile-label {
    font-size: var(--FONT_SIZE_SM);
    font-weight: var(--FONT_WEIGHT_MEDIUM);
    color: var(--COLOR_FORM_LABEL);
    margin: 0;
    text-align: left;
    padding-bottom: var(--SPACING_XXS);
}

/* === CAMPOS DE ENTRADA UNIVERSAL === */
.form-input,
.form-textarea,
.form-select,
.profile-input,
.domain-input {
    width: 100%;
    padding: 8px 10px;
    font-size: var(--FONT_SIZE_SM);
    font-family: var(--FONT_FAMILY_PRIMARY);
    color: var(--COLOR_FORM_INPUT_TEXT);
    background-color: var(--COLOR_FORM_INPUT_BG);
    border: 1px solid var(--COLOR_FORM_INPUT_BORDER);
    border-radius: var(--BORDER_RADIUS_XS);
    transition: var(--TRANSITION_FAST);
    outline: none;
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.profile-input:focus,
.domain-input:focus {
    border-color: var(--COLOR_FORM_INPUT_FOCUS);
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder,
.profile-input::placeholder,
.domain-input::placeholder {
    color: var(--COLOR_FORM_PLACEHOLDER);
    font-size: var(--FONT_SIZE_XS);
}

/* === TEXTAREA ESPECÍFICO === */
.form-textarea {
    min-height: 80px;                           /* REDUCIDO: de 60px a 80px - altura más compacta */
    max-height: 100px;                          /* AGREGADO: altura máxima */
    resize: vertical;
    margin-bottom: var(--SPACING_XS);           /* AGREGADO: Espacio extra después del textarea */
}

/* === BOTONES UNIVERSAL DINÁMICOS === */
.form-button,
.submit-btn,
.btn,
.domain-search-btn,
.auth-button,
.cta-button,
button[type="submit"],
input[type="submit"],
.btn-primary {
    /* ANCHO DINÁMICO - se ajusta al contenido */
    width: auto !important;
    min-width: fit-content !important;
    padding: 10px 16px !important;              /* UNIFICADO: padding exacto para todos */
    font-size: var(--FONT_SIZE_SM) !important;
    font-weight: var(--FONT_WEIGHT_MEDIUM) !important;
    
    /* Colores unificados */
    background-color: var(--COLOR_BUTTON_PRIMARY_BG) !important;
    color: var(--COLOR_BUTTON_PRIMARY_TEXT) !important;
    border: 1px solid var(--COLOR_BUTTON_PRIMARY_BG) !important;
    
    /* Estilo minimalista */
    border-radius: var(--BORDER_RADIUS_XS) !important;
    cursor: pointer !important;
    transition: all var(--TRANSITION_FAST) !important;
    
    /* Texto en una sola línea */
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    text-decoration: none !important;
    
    /* Layout flexible */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    margin: var(--SPACING_MD) 0 0 0 !important;      /* CÓMODO - 12px superior */
    
    /* Reset de estilos conflictivos */
    text-transform: none !important;
    letter-spacing: normal !important;
    box-sizing: border-box !important;
    outline: none !important;
    gap: var(--SPACING_XXS) !important;  /* Espacio entre icono y texto */
}

.form-button:hover,
.submit-btn:hover,
.btn:hover,
.domain-search-btn:hover,
.auth-button:hover,
.cta-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover {
    background-color: var(--COLOR_HIGHLIGHT) !important;  /* Azul hover */
    border-color: var(--COLOR_HIGHLIGHT) !important;
    color: var(--COLOR_BUTTON_PRIMARY_TEXT) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}

.form-button:active,
.submit-btn:active,
.btn:active,
.domain-search-btn:active,
.auth-button:active,
.cta-button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.btn-primary:active {
    transform: translateY(0) !important;
}

/* Iconos en botones */
.form-button i,
.submit-btn i,
.btn i,
.domain-search-btn i,
.auth-button i,
.cta-button i {
    margin-right: var(--SPACING_XXS) !important;  /* 2px entre icono y texto */
    font-size: inherit !important;
}

/* === BOTONES SECUNDARIOS === */
.form-button-secondary,
.btn-secondary {
    background-color: var(--COLOR_BUTTON_SECONDARY_BG);
    color: var(--COLOR_BUTTON_SECONDARY_TEXT);
    border: 1px solid var(--COLOR_BUTTON_SECONDARY_BORDER);
}

.form-button-secondary:hover,
.btn-secondary:hover {
    background-color: var(--COLOR_BUTTON_SECONDARY_TEXT);
    color: var(--COLOR_BUTTON_SECONDARY_BG);
}

/* === MENSAJES UNIVERSAL === */
.form-message,
.alert,
.alert-success,
.alert-danger,
.alert-warning {
    padding: 6px 10px;
    border-radius: var(--BORDER_RADIUS_XS);
    font-size: var(--FONT_SIZE_XS);
    margin: 0 0 var(--SPACING_SM) 0;
    text-align: left;
}

.form-message.success,
.alert-success {
    background-color: rgba(56, 161, 105, 0.08);
    color: var(--COLOR_FORM_SUCCESS);
    border: 1px solid var(--COLOR_FORM_SUCCESS);
}

.form-message.error,
.alert-danger {
    background-color: rgba(229, 62, 62, 0.08);
    color: var(--COLOR_FORM_ERROR);
    border: 1px solid var(--COLOR_FORM_ERROR);
}

.form-message.warning,
.alert-warning {
    background-color: rgba(255, 152, 0, 0.08);
    color: var(--COLOR_WARNING);
    border: 1px solid var(--COLOR_WARNING);
}

/* === CAMPOS INLINE === */
.form-row {
    display: flex;
    gap: var(--SPACING_SM);
}

.form-row .form-group {
    flex: 1;
}

/* === CHECKBOXES Y RADIOS === */
.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: var(--SPACING_SM);
    margin: 0;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.form-checkbox label,
.form-radio label {
    font-size: var(--FONT_SIZE_SM);
    color: var(--COLOR_FORM_LABEL);
    margin: 0;
    cursor: pointer;
}

/* === ESTADOS DE VALIDACIÓN === */
.form-input.invalid,
.form-textarea.invalid,
.form-select.invalid {
    border-color: var(--COLOR_FORM_ERROR);
}

.form-input.valid,
.form-textarea.valid,
.form-select.valid {
    border-color: var(--COLOR_FORM_SUCCESS);
}

/* === FORMULARIO DE DOMINIO ESPECÍFICO === */
.domain-search-form {
    max-width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

.domain-input-group {
    display: flex;
    background: var(--COLOR_FORM_INPUT_BG);
    border: 1px solid var(--COLOR_FORM_INPUT_BORDER);
    border-radius: var(--BORDER_RADIUS_XS);
    overflow: hidden;                           /* CAMBIADO: volver a hidden para integración total */
    transition: var(--TRANSITION_FAST);
    gap: 0;                                     /* SIN GAP */
    align-items: stretch;                       /* CAMBIADO: stretch para altura igual */
    padding: 0;                                 /* CAMBIADO: sin padding interno */
}

/* ALTERNATIVA: Domain input con botón en línea separada */
.domain-input-group.separated {
    flex-direction: column;
    gap: var(--SPACING_SM);
    background: transparent;
    border: none;
    overflow: visible;
    padding: 0;
}

.domain-input-group.separated .domain-input {
    border: 1px solid var(--COLOR_FORM_INPUT_BORDER);
    background: var(--COLOR_FORM_INPUT_BG);
    padding: 10px 12px;
    border-radius: var(--BORDER_RADIUS_XS);
    width: 100%;
}

.domain-input-group.separated .domain-search-btn {
    border-radius: var(--BORDER_RADIUS_XS) !important;
    margin: 0;
    padding: 10px 16px;
    width: auto;
    align-self: center;
    border-left: none;
}

.domain-input-group:focus-within {
    border-color: var(--COLOR_FORM_INPUT_FOCUS);
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.1);
}

.domain-input-group .domain-input {
    border: none;
    background: transparent;
    padding: 10px 12px;                         /* RESTAURADO: padding original */
    margin: 0;
    flex: 1;
    min-width: 0;
    border-radius: 0;                           /* CAMBIADO: sin border-radius para integración */
}

.domain-input-group .domain-search-btn {
    border-radius: 0 var(--BORDER_RADIUS_XS) var(--BORDER_RADIUS_XS) 0 !important;  /* SOLO bordes derechos redondeados */
    margin: 0;
    padding: 10px 16px;                         /* RESTAURADO: padding igual al input */
    width: auto;
    align-self: stretch;                        /* RESTAURADO: toma toda la altura */
    margin-left: 0;                             /* REMOVIDO: sin separación - totalmente pegado */
    min-height: auto;
    height: auto;
    flex-shrink: 0;
    border-left: 1px solid var(--COLOR_FORM_INPUT_BORDER); /* AGREGADO: línea separadora sutil */
}

/* === RESPONSIVE UNIVERSAL === */
@media (max-width: 768px) {
    .form-minimal,
    .form-container,
    .cta-form-new,
    .auth-modal-content form {
        padding: var(--SPACING_SM);
        max-width: 100%;
    }
    
    .form-row {
        flex-direction: column;
        gap: var(--SPACING_XS);
    }
    
    .form-button,
    .submit-btn,
    .btn,
    .domain-search-btn {
        width: 100px;
        padding: 7px 14px;
        font-size: var(--FONT_SIZE_XS);
    }
    
    .domain-input-group .domain-search-btn {
        padding: 10px 14px;                     /* CONSISTENTE: mismo padding base */
        border-radius: 0 var(--BORDER_RADIUS_XS) var(--BORDER_RADIUS_XS) 0 !important;  /* MANTENER: bordes específicos */
    }
        width: auto;
    }
}

/* === RESET DE ESTILOS CONFLICTIVOS === */
.form-input,
.form-button,
.submit-btn,
.btn {
    /* Eliminar !important y estilos conflictivos */
    background-image: none;
    text-transform: none;
    letter-spacing: normal;
    justify-content: flex-start;
    display: inline-block;
}

/* Eliminar sombras excesivas */
.form-input:focus,
.form-button:hover {
    box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.1);
    transform: translateY(-1px);
}

.form-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ========================================
   🔧 REGLAS UNIVERSALES DE CONSISTENCIA
   ======================================== */

/* FORZAR border-radius consistente en TODOS los elementos de formulario */
.form-minimal,
.form-minimal *,
.cta-form-new,
.cta-form-new *,
.auth-modal-content,
.auth-modal-content *,
.domain-search-card,
.domain-search-card *,
.domain-search-form,
.domain-search-form *,
.profile-form,
.profile-form *,
.form-container,
.form-container * {
    border-radius: var(--BORDER_RADIUS_XS) !important;  /* 2px UNIVERSAL */
}

/* CRÍTICO: Altura consistente para TODOS los inputs */
.form-control,
.form-input,
.domain-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
.auth-modal input,
.cta-form-new input,
.domain-search-form input {
    height: 44px !important;           /* Altura estándar UNIVERSAL */
    line-height: 1.4 !important;       /* Line-height consistente */
    padding: 10px 16px !important;     /* Padding estándar */
    font-size: var(--FONT_SIZE_SM) !important;  /* Tamaño de texto consistente */
}

/* TEXTAREA: Altura mínima más proporcionada */
textarea.form-control,
textarea.form-input,
.auth-modal textarea,
.cta-form-new textarea {
    min-height: 88px !important;       /* Exactamente 2x la altura de input */
    height: auto !important;
    resize: vertical !important;
}

/* Excepción para elementos circulares */
.user-avatar,
.avatar,
.profile-image,
.rounded-full,
[class*="circle"] {
    border-radius: 50% !important;  /* Mantener elementos circulares */
}

/* CRÍTICO: Espaciado consistente entre labels e inputs */
.form-group label,
.form-label,
.auth-modal label,
.cta-form-new label {
    margin-bottom: 8px !important;     /* INCREMENTADO: Más espacio label→input */
    font-size: var(--FONT_SIZE_SM) !important;
    font-weight: var(--FONT_WEIGHT_MEDIUM) !important;
    color: var(--COLOR_FORM_LABEL) !important;
}

.form-group,
.auth-modal .form-group,
.cta-form-new .form-group {
    margin-bottom: var(--SPACING_XL) !important;  /* INCREMENTADO: 20px entre grupos */
}

/* ESPECIAL: Modal necesita más respiración que formularios inline */
.auth-modal .form-group {
    margin-bottom: var(--SPACING_XL) !important;  /* INCREMENTADO: 20px para modal móvil */
}

/* MEJORAR: Espaciado interno consistente en todos los contenedores */
.auth-modal-content {
    padding: var(--SPACING_XL) !important;  /* EQUILIBRIO: 20px para modales */
}

.cta-form-new,
.domain-search-card {
    padding: var(--SPACING_LG) !important;  /* 16px para formularios inline */
}

/* CRÍTICO: Botón CTA debe tener el mismo alto que el input */
.cta-form-new .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0 !important; /* Reset margin for flex layout */
}

.cta-form-new .form-input {
    height: 44px;
    padding: 10px 16px;
    flex-grow: 1; /* Input takes available space */
    min-width: 0; /* Allow input to shrink */
}

.cta-form-new .form-button {
    height: 44px;
    padding: 10px 16px;
    width: 100%;
    margin-top: 8px;
    flex-shrink: 0; /* Button does not shrink */
}

/* Responsive layout for CTA form on larger screens */
@media (min-width: 768px) {
    .cta-form-new .form-group {
        flex-direction: row;
        align-items: center; /* Vertically align items */
        gap: 0; /* Remove gap for seamless look */
    }
    .cta-form-new .form-input {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: none !important; /* Remove border between input and button */
    }
    .cta-form-new .form-button {
        width: auto;
        margin-top: 0;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}