/**
 * Archivo: assets/css/shared/forms.css
 * Sistema: Allage - Estilos de Formularios Globales
 * Versión: 1.2.0
 * Fecha: 2 Julio 2026
 *
 * DESCRIPCIÓN:
 * Estilos de formularios compartidos entre admin y frontend.
 *
 * CLASES DISPONIBLES:
 * - .ltn-form-field    : Contenedor de campo
 * - .ltn-form-label    : Etiqueta
 * - .ltn-form-input    : Input de texto
 * - .ltn-form-select   : Select
 * - .ltn-form-textarea : Textarea
 * - .ltn-form-checkbox : Checkbox
 * - .ltn-form-radio    : Radio button
 * - .ltn-form-row      : Fila horizontal de campos (responsive)
 * - .ltn-form-row-item : Wrapper genérico dentro de fila
 */

/* ===========================================
   CONTENEDOR DE CAMPO
   =========================================== */
.ltn-form-field {
    margin-bottom: var(--ltn-spacing-md, 16px);
}

/* ===========================================
   ETIQUETAS
   =========================================== */
.ltn-form-label {
    display: block;
    color: var(--ltn-green-dark, #3e5120);
    font-weight: 600;
    margin-bottom: var(--ltn-spacing-xs, 4px);
    font-size: var(--ltn-font-size-sm, 13px);
}

.ltn-form-label .required {
    color: #DC2626;
    margin-left: 2px;
}

/* Título de campo en tablas y formularios custom (sin display:block — apto para <th>) */
.ltn-field-label {
    color: var(--ltn-green-dark, #3e5120);
    font-weight: 600;
    font-size: var(--ltn-font-size-sm, 13px);
}

/* ===========================================
   INPUTS, SELECTS, TEXTAREAS
   =========================================== */
.ltn-form-input,
.ltn-form-select,
.ltn-form-textarea {
    width: 100%;
    padding: 10px var(--ltn-spacing-sm, 8px);
    border: var(--ltn-border, 1px solid #E2E8F0);
    border-radius: var(--ltn-border-radius, 8px);
    font-size: var(--ltn-font-size-md, 14px);
    font-family: var(--ltn-font-family, inherit);
    transition: var(--ltn-transition, all 0.2s ease);
    background: white;
    color: var(--ltn-gray-900, #0F172A);
    box-sizing: border-box;
}

.ltn-form-input:focus,
.ltn-form-select:focus,
.ltn-form-textarea:focus {
    outline: none;
    border-color: var(--ltn-green-primary, #506727);
    box-shadow: 0 0 0 3px rgba(80, 103, 39, 0.1);
}

.ltn-form-input::placeholder,
.ltn-form-textarea::placeholder {
    color: var(--ltn-gray-400, #A0AEC0);
}

.ltn-form-input:disabled,
.ltn-form-select:disabled,
.ltn-form-textarea:disabled {
    background: var(--ltn-gray-100, #F8FAFC);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Textarea específico */
.ltn-form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* ===========================================
   CHECKBOX Y RADIO
   =========================================== */
.ltn-form-checkbox,
.ltn-form-radio {
    display: flex;
    align-items: center;
    gap: var(--ltn-spacing-sm, 8px);
    cursor: pointer;
    font-size: var(--ltn-font-size-md, 14px);
}

.ltn-form-checkbox input[type="checkbox"],
.ltn-form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ltn-green-primary, #506727);
}

/* ===========================================
   MENSAJES DE AYUDA Y ERROR
   =========================================== */
.ltn-form-help {
    display: block;
    color: var(--ltn-gray-500, #718096);
    font-size: var(--ltn-font-size-xs, 11px);
    margin-top: var(--ltn-spacing-xs, 4px);
}

.ltn-form-error {
    display: block;
    color: #DC2626;
    font-size: var(--ltn-font-size-xs, 11px);
    margin-top: var(--ltn-spacing-xs, 4px);
}

.ltn-form-field.has-error .ltn-form-input,
.ltn-form-field.has-error .ltn-form-select,
.ltn-form-field.has-error .ltn-form-textarea {
    border-color: #DC2626;
}

.ltn-form-field.has-error .ltn-form-input:focus,
.ltn-form-field.has-error .ltn-form-select:focus,
.ltn-form-field.has-error .ltn-form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* ===========================================
   ALIAS DE COMPATIBILIDAD (.acf-* → .ltn-*)
   =========================================== */
.acf-form-field {
    margin-bottom: var(--ltn-spacing-md, 16px);
}

.acf-form-label {
    display: block;
    color: var(--ltn-green-dark, #3e5120);
    font-weight: 600;
    margin-bottom: var(--ltn-spacing-xs, 4px);
    font-size: var(--ltn-font-size-sm, 13px);
}

.acf-form-input,
.acf-form-select,
.acf-form-textarea {
    width: 100%;
    padding: 10px var(--ltn-spacing-sm, 8px);
    border: var(--ltn-border, 1px solid #E2E8F0);
    border-radius: var(--ltn-border-radius, 8px);
    font-size: var(--ltn-font-size-md, 14px);
    transition: var(--ltn-transition, all 0.2s ease);
    background: white;
    box-sizing: border-box;
}

.acf-form-input:focus,
.acf-form-select:focus,
.acf-form-textarea:focus {
    outline: none;
    border-color: var(--ltn-green-primary, #506727);
    box-shadow: 0 0 0 3px rgba(80, 103, 39, 0.1);
}

/* ===========================================
   TOOLTIPS DE INSTRUCCIONES ACF
   Estilo WooCommerce/Dokan (negro)
   =========================================== */

/* Icono de ayuda - estilo verde corporativo */
.ltn-acf-tooltip-icon {
    margin-left: 6px;
    font-size: 14px;
    color: var(--ltn-green-primary);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.ltn-acf-tooltip-icon:hover {
    color: var(--ltn-green-primary);
}

/* Tooltip popup flotante - estilo WooCommerce negro */
.ltn-acf-tooltip-popup {
    position: fixed !important;
    z-index: 999999 !important;
    max-width: 300px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ltn-white) !important;
    background: var(--ltn-gray-800) !important;
    border-radius: 4px;
    box-shadow: var(--ltn-shadow-tooltip);
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Flecha del tooltip negro */
.ltn-acf-tooltip-popup::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 10px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--ltn-gray-800) transparent transparent;
}

/* Sin segundo pseudo-elemento para tooltip negro */
.ltn-acf-tooltip-popup::after {
    display: none;
}

/* Responsive: tooltips más pequeños en móvil */
@media (max-width: 768px) {
    .ltn-acf-tooltip-popup {
        max-width: 200px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ===========================================
   FILA CON ADDON (prefijo / sufijo de input)
   =========================================== */
.ltn-form-addon-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ltn-form-addon-text {
    color: var(--ltn-gray-500, #6b7280);
    font-size: 13px;
    white-space: nowrap;
}

.ltn-form-addon-row .ltn-form-input {
    width: 140px;
    flex-shrink: 0;
}

/* ===========================================
   INPUTS NUMÉRICOS — sin spinners nativos
   =========================================== */
.ltn-form-input[type="number"]::-webkit-inner-spin-button,
.ltn-form-input[type="number"]::-webkit-outer-spin-button,
.acf-form-input[type="number"]::-webkit-inner-spin-button,
.acf-form-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ltn-form-input[type="number"],
.acf-form-input[type="number"] {
    -moz-appearance: textfield;
}

/* ===========================================
   FILA DE CAMPOS (varios .ltn-form-field en horizontal)
   =========================================== */
.ltn-form-row {
    display: flex;
    gap: var(--ltn-spacing-md, 16px);
    flex-wrap: wrap;
}

.ltn-form-row > .ltn-form-field,
.ltn-form-row > .ltn-form-row-item {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Wrapper genérico dentro de fila (p. ej. contenedores condicionales
   que envuelven un .ltn-form-field): mismo reparto de ancho */
.ltn-form-row > .ltn-form-row-item > .ltn-form-field {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .ltn-form-row {
        flex-direction: column;
    }
}