/* ════════════════════════════════════════════════════════════════════
 * Fix global: iconos dentro de inputs que se encimaban al texto.
 *
 * En el proyecto se repite el patrón de un icono absoluto al inicio del
 * input (lupa, $, @, etc.) pero el input no siempre tenía padding-left
 * suficiente, así que el texto del usuario se encimaba en la primera
 * letra del icono. Esta hoja unifica todos los casos comunes.
 *
 * Las reglas son específicas (selector "wrapper > icon absolute ~ input")
 * para no aplicarse donde el input no tiene icono, y usan !important para
 * vencer paddings hardcoded en clases tailwind utility (pl-2, pl-3...).
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Patrón Tailwind genérico: <div class="relative"><i absolute><input/> ─── */
.relative > .absolute.left-2 ~ input,
.relative > .absolute.left-2 ~ select,
.relative > .absolute.left-2 ~ textarea,
.relative > .absolute.left-3 ~ input,
.relative > .absolute.left-3 ~ select,
.relative > .absolute.left-3 ~ textarea,
.relative > .absolute.left-4 ~ input,
.relative > .absolute.left-4 ~ select,
.relative > .absolute.left-4 ~ textarea {
    padding-left: 2.5rem !important;
}

/* ── 2. Patrón <i class="absolute"> sin clase de posición explícita ──────── */
.relative > i.absolute ~ input,
.relative > i.absolute ~ select,
.relative > i.absolute ~ textarea,
.relative > svg.absolute ~ input,
.relative > svg.absolute ~ select {
    padding-left: 2.5rem !important;
}

/* ── 3. Patrón "ast-search-wrapper" de Asistencias ─────────────────────── */
.ast-search-wrapper {
    position: relative;
}
.ast-search-wrapper > .ast-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.7);
    pointer-events: none;
    font-size: 0.95rem;
    z-index: 1;
}
.ast-search-wrapper > input,
.ast-search-wrapper > select,
.ast-search-wrapper > .input {
    padding-left: 2.6rem !important;
}

/* ── 4. Patrón "input-wrapper / input-with-icon" del login/signup ──────── */
.input-wrapper {
    position: relative;
}
.input-wrapper > .input-icon,
.input-wrapper > i.fas:first-child,
.input-wrapper > svg:first-child {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
/* 3.5rem (~56px): icon de 1.25rem (svg w-5) + left 1rem ocupa hasta
   2.25rem, queda 1.25rem de aire al texto. NO bajar de aquí — antes
   estaba en 2.75rem y el icono se encimaba con la primera letra. */
.input-with-icon {
    padding-left: 3.5rem !important;
}

/* ── 5. Spacing del lado derecho (toggle de password, chevrons) ──────── */
.relative > .absolute.right-2 ~ input,
.relative > .absolute.right-3 ~ input,
.relative > .absolute.right-4 ~ input,
.relative > button.absolute.right-2 ~ input,
.relative > button.absolute.right-3 ~ input {
    padding-right: 2.5rem !important;
}