/* General Styles */
.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    min-width: 340px;
}

label.input-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-input-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption-1);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--input-label);
}

label.input-label.disabled {
    color: var(--input-disabled);
}

.input-container {
    display: flex;
    height: 48px;
    max-height: 48px;
    padding: var(--spacing-md) var(--spacing-lg);
    align-items: center;
    align-self: stretch;
    border-radius: var(--radius-main);
    outline: 1px solid var(--input-border);
    background: var(--input-background);
    transition: outline-width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-container:hover {
    outline-width: 2px;
}

.input-container.focused {
    outline: 2px solid var(--input-border-active);
}

.input-container.error {
    outline: 2px solid var(--input-error);
}

.input-container.disabled {
    outline: 1px solid var(--input-disabled);
}

.input-icon {
    margin-right: var(--spacing-lg);
}

.input-field {
    flex: 1;
    background: none;
    border: none;
    font-size: var(--font-size-body-1);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-1);
    letter-spacing: var(--letter-spacing-md);
    color: var(--input-main);
}

.input-field::placeholder {
    color: var(--input-placeholder);
}

.input-field:focus {
    outline: none;
}

.clear-button {
    display: none; /* Oculto por defecto */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.clear-button svg path {
    fill: var(--input-main);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.clear-button:hover svg path {
    opacity: 1;
}

.input-container.has-content .clear-button {
    display: block;
}

p.supporting-text {
    display: flex;
    align-items: center;
    font-size: var(--font-size-input-label);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption-1);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--input-label);
}

.supporting-text.error {
    color: var(--input-error);
}

.supporting-text.disabled {
    color: var(--input-disabled);
}

/* Dark Mode Styles */
.input.overdark {
    --input-background: var(--bg-surface-5);
    --input-main: var(--text-primary-on-dark);
    --input-label: var(--text-tertiary-on-dark);
    --input-placeholder: var(--text-tertiary-on-dark);
    --input-border: var(--border-on-dark);
    --input-border-active: var(--border-active);
    --input-error: var(--text-error);
    --input-disabled: var(--text-tertiary-on-dark);
}

/* Default Mode Styles */
.input.default {
    --input-background: var(--bg-surface-1);
    --input-main: var(--text-primary);
    --input-label: var(--text-secondary);
    --input-placeholder: var(--text-placeholder);
    --input-border: var(--border);
    --input-border-active: var(--border-active);
    --input-error: var(--text-error);
    --input-disabled: var(--text-tertiary);
}