/**
 * Wapu UI Kit · wapu-input system
 *
 * Sistema canónico de inputs/textareas/selects. Reemplaza progresivamente
 * los inputs ad-hoc del inspector y de cualquier form del front.
 *
 * Filosofía:
 *   - Editorial premium · feel Linear/Framer/Notion
 *   - Cero WP-admin feel
 *   - Spacing rítmico consistente
 *   - Focus-visible elegante con accent
 *   - Dark mode con grises bien calibrados (NO embarrados)
 *
 * Estructura BEM:
 *   .wapu-field             · wrapper completo (label + control + hint/error)
 *   .wapu-field__label      · label semántico
 *   .wapu-field__control    · contenedor del input
 *   .wapu-field__hint       · helper text gris discreto
 *   .wapu-field__error      · error text rojo discreto
 *   .wapu-input             · input/url/email/tel/search/number/password
 *   .wapu-textarea          · textarea
 *   .wapu-select            · select nativo
 *
 * Variantes: --sm / --md (default) / --lg
 * Estados: :focus-visible, :hover, :disabled, .has-error
 *
 * @package WapuCore
 * @since   5.6.0
 */

/* ── Wrapper field ─────────────────────────────────────────────── */
.wapu-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.wapu-field__label {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--wapu-field-label-color, rgba(15, 23, 42, 0.72));
    margin: 0;
}

.wapu-field__hint {
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wapu-field-hint-color, rgba(15, 23, 42, 0.5));
    margin: 0;
    text-wrap: pretty;
}

.wapu-field__error {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--wapu-field-error-color, #9F1239);
    margin: 0;
    text-wrap: pretty;
}

.wapu-field__control {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Input base · text/url/email/tel/search/number/password ────── */
.wapu-input,
.wapu-textarea,
.wapu-select {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--wapu-input-color, rgba(15, 23, 42, 0.92));
    background: var(--wapu-input-bg, #ffffff);
    border: 1px solid var(--wapu-input-border, rgba(15, 23, 42, 0.12));
    border-radius: var(--wapu-input-radius, 8px);
    padding: 8px 12px;
    outline: none;
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
    -webkit-appearance: none;
}

/* Placeholder · sutil pero legible */
.wapu-input::placeholder,
.wapu-textarea::placeholder {
    color: var(--wapu-input-placeholder, rgba(15, 23, 42, 0.38));
    font-weight: 400;
}

/* Hover · border más visible */
.wapu-input:hover:not(:disabled),
.wapu-textarea:hover:not(:disabled),
.wapu-select:hover:not(:disabled) {
    border-color: var(--wapu-input-border-hover, rgba(15, 23, 42, 0.22));
}

/* Focus · accent del editor + sombra sutil */
.wapu-input:focus-visible,
.wapu-textarea:focus-visible,
.wapu-select:focus-visible {
    border-color: var(--wapu-input-border-focus, #818cf8);
    box-shadow: 0 0 0 3px var(--wapu-input-focus-ring, rgba(129, 140, 248, 0.18));
}

/* Disabled · legible pero claramente off */
.wapu-input:disabled,
.wapu-textarea:disabled,
.wapu-select:disabled {
    opacity: 0.6;
    background: var(--wapu-input-bg-disabled, rgba(15, 23, 42, 0.03));
    cursor: not-allowed;
    color: var(--wapu-input-color-disabled, rgba(15, 23, 42, 0.55));
}

/* ── Error state ───────────────────────────────────────────────── */
.wapu-field.has-error .wapu-input,
.wapu-field.has-error .wapu-textarea,
.wapu-field.has-error .wapu-select,
.wapu-input.has-error,
.wapu-textarea.has-error,
.wapu-select.has-error {
    border-color: var(--wapu-input-border-error, #9F1239);
}
.wapu-field.has-error .wapu-input:focus-visible,
.wapu-field.has-error .wapu-textarea:focus-visible,
.wapu-field.has-error .wapu-select:focus-visible {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

/* ── Sizes ─────────────────────────────────────────────────────── */
.wapu-input--sm,
.wapu-textarea--sm,
.wapu-select--sm {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}

.wapu-input--lg,
.wapu-textarea--lg,
.wapu-select--lg {
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
}

/* ── Textarea ──────────────────────────────────────────────────── */
.wapu-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}

/* ── Select · chevron custom · feel moderno ────────────────────── */
.wapu-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    cursor: pointer;
}
.wapu-select::-ms-expand { display: none; }

/* ── Number input · spinner refinado ───────────────────────────── */
.wapu-input[type="number"] {
    width: 100%;
    -moz-appearance: textfield;
}
.wapu-input[type="number"]::-webkit-outer-spin-button,
.wapu-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Required mark ─────────────────────────────────────────────── */
.wapu-field__label--required::after {
    content: '*';
    color: var(--wapu-field-error-color, #9F1239);
    margin-left: 4px;
    font-weight: 600;
}

/* ── Dark mode (cuando el contexto es dark) ────────────────────── */
[data-theme="dark"] .wapu-input,
[data-theme="dark"] .wapu-textarea,
[data-theme="dark"] .wapu-select,
.pg-builder .wapu-input,
.pg-builder .wapu-textarea,
.pg-builder .wapu-select {
    --wapu-input-color: rgba(241, 245, 249, 0.92);
    --wapu-input-bg: rgba(255, 255, 255, 0.04);
    --wapu-input-border: rgba(255, 255, 255, 0.10);
    --wapu-input-border-hover: rgba(255, 255, 255, 0.20);
    --wapu-input-border-focus: #818cf8;
    --wapu-input-focus-ring: rgba(129, 140, 248, 0.22);
    --wapu-input-placeholder: rgba(241, 245, 249, 0.36);
    --wapu-input-bg-disabled: rgba(255, 255, 255, 0.02);
    --wapu-input-color-disabled: rgba(241, 245, 249, 0.45);
    --wapu-field-label-color: rgba(241, 245, 249, 0.75);
    --wapu-field-hint-color: rgba(241, 245, 249, 0.50);
}

[data-theme="dark"] .wapu-select,
.pg-builder .wapu-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ── Inline group (input + button) ─────────────────────────────── */
.wapu-field__control--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.wapu-field__control--inline .wapu-input { flex: 1; }

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wapu-input,
    .wapu-textarea,
    .wapu-select {
        transition: none;
    }
}