/* ==========================================================================
   Infinet Design System — Componentes v1.0
   --------------------------------------------------------------------------
   Biblioteca de componentes compartida por los plugins de WordPress de
   SoyInfinet / InfinetFibra. Especificación: soyinfinet-design.md

   Depende de: infinet-tokens.css (encolar antes)

   ARCHIVO COMPARTIDO. Se copia idéntico a cada plugin. Un componente se define
   UNA sola vez y acá. Si un plugin necesita una variante, la agrega en su
   propio CSS extendiendo la clase, nunca redefiniéndola.

   NOMENCLATURA
   El nombre canónico es .if-<componente>[-<parte>][-<variante>]. Donde un
   selector aparece acompañado de .material-* o .uam-*, ese es un ALIAS DE
   MIGRACIÓN: el markup de user-approval-manager todavía emite esos nombres.
   Los alias existen para no duplicar la definición (que es justo el problema
   que este archivo resuelve) y se eliminan cuando el markup se migre a .if-*.
   Código nuevo: usar sólo .if-*.

   ÍNDICE
     1. Base
     2. Contenedor de página
     3. Tarjeta
     4. Botones y ripple
     5. Chips de estado
     6. Grupo de acciones
     7. Tabla
     8. Celda de identidad
     9. Tarjetas de fila (fallback móvil)
    10. Campos de formulario
    11. Barra de filtros
    12. Barra de acciones en lote
    13. Pestañas
    14. Diálogo
    15. Confirmación inline
    16. Mensajes, avisos y notas
    17. Snackbar y tooltip
    18. Carga y progreso
    19. Paginación
    20. Estadísticas
    21. Estado vacío y error
    22. Grilla de features (web app)
    23. Timeline y pasos
    24. Código
    25. FAB
    26. Animaciones
    27. Foco visible
    28. Responsive
    29. Shim de wp-admin
   ========================================================================== */


/* ==========================================================================
   1. Base
   ========================================================================== */

.if-scope,
.if-scope *,
.user-approval-container,
.user-approval-container * {
    box-sizing: border-box;
}

/* La familia se hereda; los controles de formulario son lo único que no la
   hereda por defecto, y se corrige en cada uno más abajo con `inherit`. */
.if-scope,
.user-approval-container {
    font-family: var(--font-ui);
    color: var(--on-surface);
}


/* ==========================================================================
   2. Contenedor de página (frontend)
   ========================================================================== */

.if-container,
.user-approval-container {
    max-width: var(--w-app);
    margin: var(--sp-6) auto;
    padding: var(--sp-6);
}


/* ==========================================================================
   3. Tarjeta
   --------------------------------------------------------------------------
   Bloque estructural por defecto. Una sola sombra en todo el sistema: --elev-1
   en reposo, --elev-2 en hover SÓLO si la tarjeta es interactiva (una tarjeta
   de formulario que reacciona al mouse miente sobre lo que se puede hacer).
   ========================================================================== */

.if-card,
.material-card {
    background-color: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

.if-card-interactive,
.material-card.interactive {
    transition: box-shadow var(--dur-fast) var(--ease);
}

.if-card-interactive:hover,
.material-card.interactive:hover {
    box-shadow: var(--elev-2);
}

.if-card-elevated,
.material-card.elevated {
    box-shadow: var(--elev-8);
}

/* Variante para acciones destructivas o irreversibles */
.if-card-danger {
    border: 1px solid var(--if-danger-border);
}

.if-card-header,
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.if-card-header h2,
.card-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--on-surface);
}

.if-card-danger .if-card-header {
    background: var(--if-danger-bg);
    border-bottom-color: var(--if-danger-border);
}

.if-card-body {
    padding: var(--sp-6);
}

.if-card-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
}


/* ==========================================================================
   4. Botones y ripple
   --------------------------------------------------------------------------
   Cuatro tamaños; el tamaño lo determina EL CONTENEDOR, no la importancia de
   la acción. La jerarquía (primary/approve/reject/…) es ortogonal al tamaño.
   Regla: una sola acción primaria por vista.
   ========================================================================== */

.if-btn,
.material-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 64px;
    height: var(--h-ctrl);
    padding: 0 var(--sp-4);
    border: none;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .25px;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: background-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

/* ---- Tamaños ---- */

/* Denso: sólo dentro de una fila de tabla en escritorio. */
.if-btn-dense,
.uam-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: var(--h-dense);
    padding: 0 var(--sp-2);
    border: none;
    border-radius: var(--r-chip);
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease);
}

/* CTA de la web app */
.if-btn-lg {
    height: var(--h-search);
    padding: 0 var(--sp-7);
    border-radius: var(--r-pill);
    font-size: 15px;
}

.if-btn-icon {
    min-width: 0;
    width: var(--h-ctrl);
    padding: 0;
    border-radius: var(--r-full);
}

/* ---- Jerarquía ---- */

.if-btn-primary,
.material-button.button-primary {
    background-color: var(--brand-blue);
    color: var(--surface);
}

.if-btn-primary:hover,
.material-button.button-primary:hover {
    background-color: var(--brand-blue-dark);
    box-shadow: var(--elev-1);
}

.if-btn-cta {
    background-color: var(--brand-navy);
    color: var(--surface);
}

.if-btn-cta:hover {
    background-color: var(--brand-navy-hover);
}

.if-btn-secondary,
.material-button.button-secondary {
    background-color: var(--surface);
    color: var(--brand-blue);
    border: 1px solid var(--border);
}

.if-btn-secondary:hover,
.material-button.button-secondary:hover {
    background-color: var(--hover);
}

.if-btn-text,
.material-button.button-text {
    background-color: transparent;
    color: var(--brand-blue);
    min-width: 48px;
    padding: 0 var(--sp-2);
}

.if-btn-text:hover,
.material-button.button-text:hover {
    background-color: var(--hover);
}

.if-btn-ghost,
.material-button.button-view {
    background-color: transparent;
    color: var(--on-surface-muted);
    border: 1px solid var(--border);
    min-width: auto;
    padding: 0 var(--sp-3);
}

.if-btn-ghost:hover,
.material-button.button-view:hover {
    background-color: var(--hover);
}

.if-btn-approve,
.material-button.button-approve,
.uam-btn-approve {
    background-color: var(--if-success);
    color: var(--surface);
}

.if-btn-approve:hover,
.material-button.button-approve:hover,
.uam-btn-approve:hover {
    background-color: var(--if-success-dark);
}

.if-btn-reject,
.material-button.button-reject,
.uam-btn-reject {
    background-color: var(--if-error);
    color: var(--surface);
}

.if-btn-reject:hover,
.material-button.button-reject:hover,
.uam-btn-reject:hover {
    background-color: var(--if-error-dark);
}

/* Texto oscuro: es el único botón con fondo lo bastante claro para que el
   blanco no llegue al contraste mínimo. */
.if-btn-revoke,
.uam-btn-revoke {
    background-color: var(--if-warning);
    color: var(--on-surface);
}

.if-btn-revoke:hover,
.uam-btn-revoke:hover {
    background-color: var(--if-warning-dark);
}

.if-btn-edit,
.uam-btn-edit {
    background-color: var(--brand-blue);
    color: var(--surface);
}

.if-btn-edit:hover,
.uam-btn-edit:hover {
    background-color: var(--brand-blue-dark);
}

/* ---- Icono ---- */

.if-btn .if-btn-icon-svg,
.material-button .button-icon {
    width: 18px;
    height: 18px;
    margin-right: var(--sp-2);
    fill: currentColor;
}

.if-btn.if-btn-icon-only .if-btn-icon-svg,
.material-button.icon-only .button-icon {
    margin: 0;
}

/* ---- Deshabilitado ----
   pointer-events: none impide que el navegador muestre el `title`, así que un
   botón bloqueado por una condición que el usuario PUEDE resolver debe usar
   .if-btn-blocked en lugar de [disabled]: se ve inactivo pero explica por qué. */

.if-btn[disabled],
.material-button[disabled] {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

.if-btn-blocked,
.uam-btn.uam-btn-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: auto;
}

.if-btn-blocked:hover,
.uam-btn.uam-btn-disabled:hover {
    opacity: .45;
}

/* ---- Ripple ----
   Lo inyecta material-components.js como <span class="ripple"> dentro del
   botón. Vive acá y no en JS para que sea inspeccionable y tematizable. */

.ripple {
    position: absolute;
    border-radius: var(--r-full);
    background-color: var(--ripple-on-dark);
    transform: scale(0);
    pointer-events: none;
}

.ripple-animate {
    animation: if-ripple var(--dur-slow) var(--ease);
}

@keyframes if-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* ==========================================================================
   5. Chips de estado
   --------------------------------------------------------------------------
   Un chip es un sustantivo, no una frase. Si el estado necesita explicación,
   va un aviso de bloque (§16), no un chip largo.
   ========================================================================== */

.if-chip,
.material-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: var(--h-dense);
    padding: 0 10px;
    border-radius: var(--r-chip);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .25px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Densa: dentro de una fila, con texto adicional y sin altura fija. */
.if-chip-dense,
.uam-verify-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 100%;
    padding: 3px var(--sp-2);
    border-radius: var(--r-chip);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.if-chip-success,
.material-chip.approved,
.material-chip.chip-approved,
.uam-verify-ok {
    background-color: var(--if-success-bg);
    color: var(--if-success);
}

.if-chip-error,
.material-chip.rejected,
.material-chip.chip-rejected,
.uam-verify-bad {
    background-color: var(--if-error-bg);
    color: var(--if-error-dark);
}

/* --if-warning-text, no --if-warning: #f9ab00 sobre #fef7e0 da 1.9:1 y es ilegible. */
.if-chip-warning,
.material-chip.pending,
.material-chip.chip-pending,
.uam-verify-warn {
    background-color: var(--if-warning-bg);
    color: var(--if-warning-text);
}

.if-chip-neutral,
.uam-verify-down {
    background-color: var(--if-neutral-bg);
    color: var(--if-neutral);
}

.if-chip-info {
    background-color: var(--brand-blue-pale);
    color: var(--brand-blue-dark);
}

/* Texto secundario dentro de un chip (un dato de contexto, no el estado). */
.if-chip-meta,
.uam-verify-titular {
    font-weight: 400;
    opacity: .85;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acción embebida en un chip (reintentar, deshacer). Hereda el color del chip
   para no introducir un tercer color en 11px de alto. */
.if-chip-action,
.uam-btn-recheck {
    background: none;
    border: 1px solid currentColor;
    border-radius: 10px;
    color: inherit;
    font-family: inherit;
    font-size: 10px;
    padding: 1px var(--sp-2);
    cursor: pointer;
}

.if-chip-action:disabled,
.uam-btn-recheck:disabled {
    cursor: default;
    opacity: .6;
}


/* ==========================================================================
   6. Grupo de acciones
   ========================================================================== */

.if-actions,
.uam-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-1);
    white-space: nowrap;
}


/* ==========================================================================
   7. Tabla
   --------------------------------------------------------------------------
   UN solo componente de tabla en frontend. En wp-admin se usa
   .wp-list-table widefat fixed striped de WordPress y nada de esto.
   ========================================================================== */

.if-table-container,
.material-table-container {
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--elev-1);
    /* auto, no hidden: con hidden las columnas que no entran quedan
       inalcanzables en pantallas angostas. */
    overflow-x: auto;
}

.if-table,
.material-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.if-table thead,
.material-table thead {
    background-color: var(--bg);
}

.if-table th,
.material-table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--on-surface-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.if-table td,
.material-table td {
    padding: var(--sp-3) var(--sp-4);
    color: var(--on-surface);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.if-table tbody tr,
.material-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease);
}

.if-table tbody tr:hover,
.material-table tbody tr:hover {
    background-color: var(--bg);
}

.if-table tbody tr:last-child td,
.material-table tbody tr:last-child td {
    border-bottom: none;
}

/* Aire en el borde exterior */
.if-table th:first-child,
.if-table td:first-child,
.material-table th:first-child,
.material-table td:first-child {
    padding-left: var(--sp-5);
}

.if-table th:last-child,
.if-table td:last-child,
.material-table th:last-child,
.material-table td:last-child {
    padding-right: var(--sp-5);
}

/* Columna de acciones: siempre a la derecha. */
.if-table .actions-column,
.material-table .actions-column {
    text-align: right;
}

.if-table .checkbox-column,
.material-table .checkbox-column {
    width: 48px;
}

/* Fila en curso: la acción se envió y el servidor todavía no confirmó. El
   usuario tiene que ver que su clic se registró antes de la respuesta. */
.if-row-processing,
.uam-row-processing {
    opacity: .55;
    pointer-events: none;
}


/* ==========================================================================
   8. Celda de identidad
   --------------------------------------------------------------------------
   Avatar + nombre + login + email en una sola columna. Cuatro columnas
   separadas para la misma entidad desperdician ancho.
   ========================================================================== */

.if-identity,
.user-info {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.if-identity-avatar,
.user-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    object-fit: cover;
    border: 2px solid var(--border-subtle);
}

.if-identity-body,
.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.if-identity-name,
.user-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--on-surface);
}

.if-identity-meta,
.user-login,
.user-email-inline {
    font-size: 12px;
    line-height: 1.2;
    color: var(--on-surface-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-email-inline {
    display: block;
    max-width: 250px;
}


/* ==========================================================================
   9. Tarjetas de fila (fallback móvil de la tabla)
   --------------------------------------------------------------------------
   Bajo 960px la tabla se oculta y se muestran estas. Scroll horizontal no es
   una alternativa aceptable.
   ========================================================================== */

.if-row-cards,
.material-mobile-cards {
    display: none;
}

.if-row-card,
.user-card {
    /* relative: .card-checkbox se posiciona absoluto contra la tarjeta. */
    position: relative;
    padding: 0;
    overflow: visible;
    margin-bottom: var(--sp-4);
}

.if-row-card .if-card-header,
.user-card .card-header {
    padding: var(--sp-4);
    border-bottom: none;
}

.if-row-card-body,
.user-card .card-body {
    padding: 0 var(--sp-4);
}

.if-row-card-row,
.user-card .info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: 14px;
}

.if-row-card-label,
.user-card .info-label {
    color: var(--on-surface-muted);
    font-weight: 500;
}

.if-row-card-value,
.user-card .info-value {
    color: var(--on-surface);
    text-align: right;
}

.if-row-card-actions,
.user-card .card-actions {
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
}

.if-row-card-actions .if-btn,
.user-card .card-actions .material-button {
    width: 100%;
    margin-bottom: var(--sp-2);
}

.if-row-card-actions .if-btn:last-child,
.user-card .card-actions .material-button:last-child {
    margin-bottom: 0;
}

.card-checkbox {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
}

/* La casilla flota sobre la cabecera, así que la cabecera tiene que dejarle el
   lugar: sin esto un nombre largo pasa por debajo. Modificador y no :has() para
   no reservar el hueco en las tarjetas que no son seleccionables. */
.if-row-card-selectable > .if-card-header,
.user-card.if-row-card-selectable > .card-header {
    padding-right: var(--sp-8);
}

.card-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}


/* ==========================================================================
   10. Campos de formulario
   ========================================================================== */

.if-input,
.if-textarea,
.material-input,
.uam-form-field input,
.uam-form-field textarea {
    width: 100%;
    height: var(--h-field);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface);
    background-color: var(--surface);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.if-textarea,
.uam-form-field textarea {
    height: auto;
    padding: var(--sp-3);
    line-height: 1.5;
    resize: vertical;
}

.if-input:focus,
.if-textarea:focus,
.material-input:focus,
.uam-form-field input:focus,
.uam-form-field textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 1px var(--brand-blue);
}

.if-input.if-invalid,
.uam-form-field input.field-error {
    border-color: var(--if-error);
    box-shadow: 0 0 0 1px var(--if-error);
}

.if-select,
.filter-select {
    min-width: 150px;
    height: var(--h-ctrl);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface);
    background-color: var(--surface);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.if-select:hover,
.filter-select:hover {
    background-color: var(--hover);
}

.if-select:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 1px var(--brand-blue);
}

/* ---- Etiquetas y ayudas ---- */

.if-label,
.uam-form-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-muted);
}

.if-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--on-surface-muted);
}

.if-error-text {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--if-error);
}

/* ---- Grupos ---- */

.if-form-group {
    margin-bottom: var(--sp-7);
}

.if-form-group > h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--on-surface);
}

.if-field,
.uam-form-field {
    margin-bottom: var(--sp-5);
}

.if-form-stack,
.uam-edit-name-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.if-checkbox-label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--on-surface);
}

.if-checkbox-label input {
    accent-color: var(--brand-blue);
    margin-right: var(--sp-2);
    cursor: pointer;
}

/* ---- Búsqueda ---- */

.if-search,
.material-search-field {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
}

.if-search input,
.material-search-field input {
    width: 100%;
    height: var(--h-search);
    padding: 0 var(--sp-8) 0 var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-search);
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface);
    background-color: var(--surface);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    outline: none;
}

.if-search input:focus,
.material-search-field input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 1px var(--brand-blue);
}

.if-search .search-icon,
.material-search-field .search-icon {
    position: absolute;
    right: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: var(--on-surface-muted);
    pointer-events: none;
}

/* ---- Checkbox dibujado ---- */

.if-checkbox,
.material-checkbox {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.if-checkbox input[type="checkbox"],
.material-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.if-checkbox label,
.material-checkbox label {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.if-checkbox label::before,
.material-checkbox label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--on-surface-muted);
    border-radius: 2px;
    background-color: var(--surface);
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.if-checkbox label::after,
.material-checkbox label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}

.if-checkbox input:checked + label::before,
.material-checkbox input[type="checkbox"]:checked + label::before {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.if-checkbox input:checked + label::after,
.material-checkbox input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

.if-checkbox input:indeterminate + label::before,
.material-checkbox input[type="checkbox"]:indeterminate + label::before {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.if-checkbox input:indeterminate + label::after,
.material-checkbox input[type="checkbox"]:indeterminate + label::after {
    opacity: 1;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 0;
    border-width: 0 0 2px 0;
    transform: none;
}


/* ==========================================================================
   11. Barra de filtros
   ========================================================================== */

.if-filters,
.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
}

.if-filter-group,
.filter-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.if-filter-group label,
.filter-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface-muted);
    white-space: nowrap;
}


/* ==========================================================================
   12. Barra de acciones en lote
   ========================================================================== */

.if-bulk,
.bulk-actions {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background-color: var(--brand-blue);
    color: var(--surface);
}

.if-bulk.active,
.bulk-actions.active {
    display: flex;
}

.if-bulk-text,
.bulk-actions-text {
    font-size: 14px;
    font-weight: 500;
}

.if-bulk-buttons,
.bulk-actions-buttons {
    display: flex;
    gap: var(--sp-2);
}


/* ==========================================================================
   13. Pestañas
   --------------------------------------------------------------------------
   Subrayado por borde, no indicador deslizante posicionado por JS: el borde
   sobrevive al flex-wrap y el deslizante no.
   ========================================================================== */

.if-tabs,
.material-tabs {
    margin-top: var(--sp-5);
}

.if-tab-header,
.material-tabs .tab-header {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.if-tab-button,
.material-tabs .tab-button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--sp-3) 18px;
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.if-tab-button:hover,
.material-tabs .tab-button:hover {
    color: var(--brand-blue);
}

.if-tab-button.active,
.material-tabs .tab-button.active {
    color: var(--brand-blue);
    font-weight: 500;
    border-bottom-color: var(--brand-blue);
}

.if-tab-panel,
.material-tabs .tab-panel {
    display: none;
    padding-top: var(--sp-5);
}

.if-tab-panel.active,
.material-tabs .tab-panel.active {
    display: block;
}


/* ==========================================================================
   14. Diálogo
   ========================================================================== */

.if-dialog-overlay,
.material-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background-color: var(--scrim);
    z-index: var(--z-dialog);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease),
                visibility var(--dur-base) var(--ease);
}

.if-dialog-overlay.active,
.material-dialog-overlay.active {
    opacity: 1;
    visibility: visible;
}

.if-dialog,
.material-dialog {
    background-color: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--elev-8);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    transform: scale(.9);
    transition: transform var(--dur-base) var(--ease);
}

.if-dialog-overlay.active .if-dialog,
.material-dialog-overlay.active .material-dialog {
    transform: scale(1);
}

.if-dialog-header,
.material-dialog-header {
    padding: var(--sp-6) var(--sp-6) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.if-dialog-title,
.material-dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--on-surface);
}

.if-dialog-content,
.material-dialog-content {
    padding: var(--sp-6);
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface-muted);
}

.if-dialog-actions,
.material-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border);
}


/* ==========================================================================
   15. Confirmación inline
   --------------------------------------------------------------------------
   Alternativa preferente al modal para confirmar una acción sobre una fila:
   se despliega en el tope de la tarjeta, con sangrado negativo para llegar a
   sus bordes.
   ========================================================================== */

.if-confirm,
.uam-inline-confirmation {
    position: relative;
    display: none;
    padding: var(--sp-5) var(--sp-6);
    margin: 0 calc(-1 * var(--sp-6));
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: var(--surface);
    box-shadow: 0 2px 8px rgba(26, 115, 232, .3);
    transform: translateY(-100%);
    opacity: 0;
    z-index: var(--z-dialog);
    transition: transform var(--dur-base) var(--ease),
                opacity var(--dur-base) var(--ease);
}

.if-confirm.show,
.uam-inline-confirmation.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    margin-bottom: var(--sp-4);
}

.if-confirm-content,
.uam-confirmation-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.if-confirm-header,
.uam-confirmation-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.if-confirm-message,
.uam-confirmation-message {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* Bloque de campos sobre el fondo azul */
.if-confirm-field,
.uam-rejection-reason-container {
    padding: var(--sp-4);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .1);
}

.if-confirm-field > label,
.uam-rejection-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .95);
}

.if-confirm-field textarea,
.uam-rejection-textarea {
    width: 100%;
    padding: var(--sp-3);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    color: var(--on-surface);
    background: rgba(255, 255, 255, .95);
    resize: vertical;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.if-confirm-field textarea:focus,
.uam-rejection-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .6);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.if-confirm-field textarea::placeholder,
.uam-rejection-textarea::placeholder {
    color: var(--on-surface-muted);
}

.if-confirm-hint,
.uam-rejection-hint {
    margin: var(--sp-2) 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .8);
}

.if-confirm-buttons,
.uam-confirmation-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: var(--sp-1);
}

.if-confirm-buttons .if-btn-dense,
.uam-confirmation-buttons .uam-btn {
    min-width: 100px;
    height: var(--h-ctrl);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: var(--surface);
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.if-confirm-buttons .if-btn-confirm,
.uam-confirmation-buttons .uam-btn-confirm {
    background: rgba(255, 255, 255, .95);
    color: var(--brand-blue);
    border-color: rgba(255, 255, 255, .95);
}

.if-confirm-buttons .if-btn-confirm:hover,
.uam-confirmation-buttons .uam-btn-confirm:hover {
    background: var(--surface);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.if-confirm-buttons .if-btn-cancel:hover,
.uam-confirmation-buttons .uam-btn-cancel:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}


/* ==========================================================================
   16. Mensajes, avisos y notas
   --------------------------------------------------------------------------
   Tres formas, cada una para una vida distinta:
     .if-message  efímero    — resultado de una acción
     .if-banner   persistente — condición del sistema
     .if-note     persistente — condición de un registro, dentro de su fila
   `border-left: 4px solid` es la firma de "esto es un aviso" en el sistema.
   ========================================================================== */

.if-message,
.uam-inline-message {
    position: relative;
    display: none;
    padding: var(--sp-3) var(--sp-5);
    margin: 0 calc(-1 * var(--sp-6));
    border-left: 4px solid;
    transform: translateY(-100%);
    opacity: 0;
    z-index: calc(var(--z-dialog) - 1);
    transition: transform var(--dur-base) var(--ease),
                opacity var(--dur-base) var(--ease);
}

.if-message.show,
.uam-inline-message.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    margin-bottom: var(--sp-4);
}

.if-message-content,
.uam-message-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.if-message-text,
.uam-message-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.if-message-close,
.uam-message-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--h-dense);
    height: var(--h-dense);
    padding: 0;
    border: none;
    border-radius: var(--r-full);
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    opacity: .7;
    transition: opacity var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}

.if-message-close:hover,
.uam-message-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .1);
}

.if-message-success,
.uam-message-success {
    background-color: var(--if-success-bg);
    color: var(--if-success);
    border-left-color: var(--if-success);
}

.if-message-error,
.uam-message-error {
    background-color: var(--if-error-bg);
    color: var(--if-error);
    border-left-color: var(--if-error);
}

/* --if-warning-text, no --if-warning: ver §5. */
.if-message-warning,
.uam-message-warning {
    background-color: var(--if-warning-bg);
    color: var(--if-warning-text);
    border-left-color: var(--if-warning);
}

.if-message-info {
    background-color: var(--brand-blue-pale);
    color: var(--brand-blue-dark);
    border-left-color: var(--brand-blue);
}

/* ---- Aviso persistente de sistema ---- */

.if-banner,
.uam-unready-banner {
    padding: 10px var(--sp-4);
    margin-bottom: var(--sp-3);
    border-left: 4px solid;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.5;
}

.if-banner-warning,
.uam-unready-banner {
    background-color: var(--if-warning-bg);
    border-left-color: var(--if-warning);
    color: var(--if-warning-prose);
}

.if-banner-error {
    background-color: var(--if-error-bg);
    border-left-color: var(--if-error);
    color: var(--if-error-dark);
}

.if-banner-info {
    background-color: var(--brand-blue-pale);
    border-left-color: var(--brand-blue);
    color: var(--brand-blue-dark);
}

/* ---- Nota dentro de una fila ----
   Va a todo el ancho de la celda a propósito: un chip discreto para una
   condición que exige decisión humana se pasa por alto. ---- */

.if-note,
.uam-manual-warning {
    padding: var(--sp-2) 10px;
    margin-bottom: var(--sp-2);
    border-left: 4px solid;
    border-radius: var(--r-sm);
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

.if-note-warning,
.uam-manual-warning {
    background-color: var(--if-warning-bg);
    border-left-color: var(--if-warning);
    color: var(--if-warning-prose);
}


/* ==========================================================================
   17. Snackbar y tooltip
   ========================================================================== */

.if-snackbar,
.material-snackbar {
    position: fixed;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 288px;
    max-width: 568px;
    padding: 14px var(--sp-6);
    border-radius: var(--r-sm);
    background-color: var(--inverse-surface);
    color: var(--surface);
    font-size: 14px;
    box-shadow: var(--elev-8);
    z-index: var(--z-snackbar);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease),
                visibility var(--dur-base) var(--ease);
}

.if-snackbar.active,
.material-snackbar.active {
    opacity: 1;
    visibility: visible;
}

.if-snackbar-action,
.material-snackbar-action {
    margin-left: var(--sp-6);
    color: var(--on-inverse-accent);
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

/* Lo inyecta material-components.js; vive acá para ser inspeccionable. */
.material-tooltip {
    position: absolute;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    background-color: var(--tooltip-surface);
    color: var(--surface);
    font-family: var(--font-ui);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--z-tooltip);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}

.material-tooltip.visible {
    opacity: 1;
}


/* ==========================================================================
   18. Carga y progreso
   ========================================================================== */

.if-loading-overlay,
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .8);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease),
                visibility var(--dur-base) var(--ease);
}

.if-loading-overlay.active,
.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* El spinner es SVG animado y no un borde con border-top-color: el SVG no
   salta en pantallas de alta densidad. */
.if-spinner,
.material-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
}

.if-spinner svg,
.material-spinner svg {
    width: 100%;
    height: 100%;
}

.if-spinner .circular,
.material-spinner .circular,
.circular {
    animation: if-rotate 2s linear infinite;
}

.if-spinner .path,
.material-spinner .path,
.path {
    stroke: var(--brand-blue);
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: if-dash 1.5s ease-in-out infinite;
}

@keyframes if-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes if-dash {
    0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.if-progress,
.material-progress {
    width: 100%;
    height: 4px;
    border-radius: var(--r-sm);
    background-color: var(--border);
    overflow: hidden;
}

.if-progress-indeterminate,
.material-progress-bar {
    height: 100%;
    border-radius: var(--r-sm);
    background-color: var(--brand-blue);
    animation: if-progress 2s ease-in-out infinite;
}

.if-progress-bar,
.material-progress-determinate {
    height: 100%;
    border-radius: var(--r-sm);
    background-color: var(--brand-blue);
    transition: width var(--dur-base) var(--ease);
}

@keyframes if-progress {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}


/* ==========================================================================
   19. Paginación
   ========================================================================== */

.if-pagination,
.material-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
}

.if-page-btn,
.pagination-button,
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--h-ctrl);
    height: var(--h-ctrl);
    padding: 0;
    border: none;
    border-radius: var(--r-full);
    background-color: transparent;
    color: var(--on-surface-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}

.if-page-btn:hover,
.pagination-button:hover,
.pagination-number:hover {
    background-color: var(--hover);
}

.if-page-btn.active,
.pagination-number.active {
    background-color: var(--brand-blue);
    color: var(--surface);
}

.if-page-btn:disabled,
.pagination-button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.if-page-btn svg,
.pagination-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.if-page-numbers,
.pagination-numbers {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.if-page-ellipsis,
.pagination-ellipsis {
    padding: 0 var(--sp-2);
    color: var(--on-surface-muted);
}


/* ==========================================================================
   20. Estadísticas
   ========================================================================== */

.if-stats,
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-6);
}

.if-stat,
.stat-card {
    padding: var(--sp-4);
    text-align: center;
}

.if-stat-value,
.stat-value {
    margin-bottom: var(--sp-1);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--on-surface);
}

.if-stat-label,
.stat-label {
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--on-surface-muted);
}


/* ==========================================================================
   21. Estado vacío y error
   --------------------------------------------------------------------------
   Un estado vacío dice QUÉ FALTA y QUÉ HACER, no "no hay datos".
   ========================================================================== */

.if-empty,
.empty-state {
    padding: var(--sp-9) var(--sp-6);
    text-align: center;
}

.if-empty-icon,
.empty-state-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--sp-6);
    opacity: .3;
}

.if-empty-icon svg,
.empty-state-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--on-surface-muted);
}

.if-empty-title,
.empty-state-title {
    margin-bottom: var(--sp-2);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--on-surface);
}

.if-empty-text,
.empty-state-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface-muted);
}

/* Estado vacío compacto, dentro de una tarjeta que ya tiene cabecera. */
.if-empty-compact,
.uam-no-users {
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    font-size: 14px;
    color: var(--on-surface-muted);
}

.if-inline-error,
.uam-error {
    padding: var(--sp-4);
    margin: var(--sp-4) 0;
    border-radius: var(--r-sm);
    background-color: var(--if-error-bg);
    color: var(--if-error);
    font-size: 14px;
}


/* ==========================================================================
   22. Grilla de features (web app)
   --------------------------------------------------------------------------
   El patrón del Panel de Control: celdas separadas por una regla superior
   fina, no tarjetas con sombra. Las ilustraciones son planas y multicolor,
   de la misma familia gráfica; no iconos monocromos de línea.
   ========================================================================== */

.if-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-8);
    max-width: var(--w-app);
    margin: 0 auto;
    padding: var(--sp-6);
}

.if-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    text-align: center;
}

.if-feature-art {
    width: 100%;
    max-width: 160px;
    height: auto;
}

.if-feature-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.5px;
    color: var(--on-surface);
}

.if-feature-text {
    margin: 0;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--on-surface-muted);
}

.if-page-title {
    margin: 0 0 var(--sp-8);
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -.5px;
    text-align: center;
    color: var(--on-surface);
}

@media (max-width: 600px) {
    .if-page-title { font-size: 30px; }
    .if-feature-title { font-size: 24px; }
    .if-features { gap: var(--sp-7); }
}


/* ==========================================================================
   23. Timeline y pasos
   ========================================================================== */

.if-timeline {
    counter-reset: if-timeline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.if-timeline li {
    position: relative;
    margin-left: var(--sp-3);
    padding: 0 0 18px var(--sp-8);
    border-left: 2px solid var(--border-subtle);
}

.if-timeline li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.if-timeline li::before {
    counter-increment: if-timeline;
    content: counter(if-timeline);
    position: absolute;
    left: -13px;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--h-dense);
    height: var(--h-dense);
    border-radius: var(--r-full);
    background: var(--brand-blue);
    color: var(--surface);
    font-size: 12px;
    font-weight: 600;
}

.if-timeline li strong {
    display: block;
    color: var(--on-surface);
}

.if-timeline li span {
    color: var(--on-surface-muted);
}

.if-step {
    display: flex;
    gap: var(--sp-4);
    padding: 18px 0;
    border-bottom: 1px solid var(--hover);
}

.if-step:first-child { padding-top: 0; }

.if-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.if-step-num {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--brand-blue-pale);
    color: var(--brand-blue);
    font-weight: 600;
}


/* ==========================================================================
   24. Código
   ========================================================================== */

.if-code {
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--hover);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand-blue);
}

.if-code-block {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-x: auto;
}

.if-code-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
}

.if-code-copy code {
    flex: 1;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--brand-blue);
    cursor: pointer;
}


/* ==========================================================================
   25. FAB
   ========================================================================== */

.if-fab,
.material-fab {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--r-full);
    background-color: var(--brand-blue);
    color: var(--surface);
    box-shadow: var(--elev-8);
    cursor: pointer;
    z-index: var(--z-overlay);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.if-fab:hover,
.material-fab:hover {
    transform: scale(1.1);
    box-shadow: var(--elev-8);
}

.if-fab svg,
.material-fab svg {
    width: var(--sp-6);
    height: var(--sp-6);
    fill: currentColor;
}


/* ==========================================================================
   26. Animaciones
   ========================================================================== */

@keyframes if-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.if-fade-in,
.fade-in {
    animation: if-fade-in var(--dur-base) var(--ease);
}


/* ==========================================================================
   27. Foco visible
   --------------------------------------------------------------------------
   Los componentes de arriba usan `outline: none` para no arrastrar el anillo
   nativo del navegador; este bloque lo reemplaza. Un componente sin foco
   visible está incompleto.
   ========================================================================== */

.if-btn:focus-visible,
.if-btn-dense:focus-visible,
.if-page-btn:focus-visible,
.if-tab-button:focus-visible,
.if-chip-action:focus-visible,
.if-message-close:focus-visible,
.material-button:focus-visible,
.uam-btn:focus-visible,
.pagination-button:focus-visible,
.pagination-number:focus-visible,
.material-tabs .tab-button:focus-visible,
.uam-message-close:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* Sobre fondos azules el anillo azul no se ve. */
.if-bulk .if-btn:focus-visible,
.bulk-actions .material-button:focus-visible,
.if-confirm-buttons .if-btn-dense:focus-visible,
.uam-confirmation-buttons .uam-btn:focus-visible {
    outline-color: var(--surface);
}

.if-checkbox input:focus-visible + label::before,
.material-checkbox input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}


/* ==========================================================================
   28. Responsive
   ========================================================================== */

/* Escritorio: densidad compacta en acciones de fila. */
@media (min-width: 961px) {
    .if-actions,
    .uam-action-buttons {
        gap: 2px;
    }

    .if-btn-dense,
    .uam-btn {
        min-width: 62px;
    }
}

/* Tablet: la tabla se cambia por tarjetas apiladas.
   --------------------------------------------------------------------------
   OPT-IN con .if-collapses en el contenedor de la tabla Y en el de las
   tarjetas. No es el default a propósito: la biblioteca no puede saber si el
   plugin realmente renderizó las tarjetas, y ocultar la tabla sin que exista
   el reemplazo deja la lista vacía —que es peor que una tabla con scroll—.

   Sin .if-collapses, la tabla sigue visible y hace scroll horizontal dentro de
   su contenedor (overflow-x: auto en §7), que es el mínimo aceptable. */
@media (max-width: 960px) {
    .if-table-container.if-collapses,
    .material-table-container.if-collapses {
        display: none;
    }

    .if-row-cards.if-collapses,
    .material-mobile-cards.if-collapses {
        display: block;
    }
}

/* Móvil */
@media (max-width: 600px) {
    .if-container,
    .user-approval-container {
        margin: var(--sp-4) auto;
        padding: var(--sp-4);
    }

    .if-card-header,
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .if-search,
    .material-search-field {
        max-width: 100%;
    }

    .if-filters,
    .filters-container {
        flex-direction: column;
    }

    .if-filter-group,
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .if-select,
    .filter-select {
        width: 100%;
    }

    .if-bulk,
    .bulk-actions.active {
        flex-direction: column;
        gap: var(--sp-4);
    }

    .if-page-numbers,
    .pagination-numbers {
        display: none;
    }

    .if-pagination,
    .material-pagination {
        justify-content: space-between;
    }

    /* El blanco de toque de 24px sólo es aceptable en tablas de escritorio. */
    .if-btn-dense,
    .uam-btn {
        height: var(--h-ctrl);
        line-height: 1;
        font-size: 12px;
    }

    .if-confirm,
    .uam-inline-confirmation {
        margin: 0 calc(-1 * var(--sp-4));
        padding: var(--sp-4);
    }

    .if-message,
    .uam-inline-message {
        margin: 0 calc(-1 * var(--sp-4));
    }

    .if-confirm.show,
    .uam-inline-confirmation.show,
    .if-message.show,
    .uam-inline-message.show {
        margin-bottom: var(--sp-4);
    }

    .if-confirm-buttons,
    .uam-confirmation-buttons {
        flex-direction: column-reverse;
    }

    .if-confirm-buttons .if-btn-dense,
    .uam-confirmation-buttons .uam-btn {
        width: 100%;
    }
}


/* ==========================================================================
   29. Shim de wp-admin
   --------------------------------------------------------------------------
   WordPress es dueño del layout en el admin: la tarjeta pierde la sombra y
   toma el borde gris del admin, y el contenedor deja de aportar padding.
   ========================================================================== */

.wp-admin .if-container,
.wp-admin .user-approval-container {
    max-width: none;
    margin: var(--sp-5) 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.wp-admin .if-card,
.wp-admin .material-card {
    border: 1px solid var(--wp-admin-border);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.wp-admin .if-card-header,
.wp-admin .card-header {
    padding: var(--sp-5) var(--sp-6);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.wp-admin .if-card-header h2,
.wp-admin .card-header h2 {
    font-size: 18px;
}

.wp-admin .if-table-container,
.wp-admin .material-table-container {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}

.wp-admin .if-filters,
.wp-admin .filters-container {
    padding: 15px var(--sp-5);
}