/*
 * Retoques del panel de administración.
 *
 * El admin de Paymenter es Filament, no el tema: tiene su propio CSS compilado
 * y no se puede rehacer desde aquí. Lo que sí se puede es que no parezca otra
 * aplicación —misma tipografía, mismo azul, mismas esquinas— aprovechando que
 * Paymenter inyecta en su `<head>` el fichero de colores del tema activo.
 */

body.fi-body,
.fi-body {
    font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* Tarjetas y widgets con el mismo relieve suave del área de cliente. */
.fi-wi-stats-overview-stat,
.fi-section,
.fi-ta-ctn {
    border-radius: .75rem !important;
    box-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1) !important;
}

/* Botones y campos con el mismo radio que el resto del panel. */
.fi-btn,
.fi-input-wrp,
.fi-select-input,
.fi-ta-search-field .fi-input-wrp {
    border-radius: .5rem !important;
}

/* La entrada activa del menú, marcada como en el área de cliente. */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: hsl(var(--color-primary) / .1) !important;
    border-radius: .625rem !important;
}

/* Los grupos del menú, en versalitas pequeñas: se distinguen de las entradas
   sin necesidad de leerlos. */
.fi-sidebar-group-label {
    font-size: .6875rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
}

/* En el teléfono, las tablas del admin se desplazan dentro de su caja en vez de
   empujar la página. */
@media (max-width: 767px) {
    .fi-ta-table {
        display: block;
        overflow-x: auto;
    }
}