/* ==========================================================================
   tema-compat.css
   Clases que usan las vistas pero que NO venían en el build que carga el
   layout (assets/css/app.min.css), porque pertenecen al tema anterior.

   Se cargan DESPUÉS de app.min.css, así que sólo completan lo que falta y no
   pisan nada del tema. Todas usan las variables --pe-* del tema actual, por
   lo que respetan los colores y el modo oscuro.

   Faltaban: .avatar-title · .bg-soft-* · .badge-soft-* · .badge-border
             .waves-effect · .fs-24 · .fs-30
   ========================================================================== */

/* --------------------------------------------------------------------------
   .avatar-title — recuadro que centra un icono/texto dentro de .avatar-*
   Antes de esto el icono se salía del recuadro (no había flex ni tamaño).
   -------------------------------------------------------------------------- */
.avatar-title {
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--pe-primary);
    color: #fff;
    font-weight: 500;
    line-height: 1;
}

/* El icono se ajusta al recuadro en lugar de desbordarlo.
   Si el contenedor lleva un .fs-* el icono toma ese tamaño. */
.avatar-title > i,
.avatar-title > svg,
.avatar-title > span {
    font-size: 1em;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Fondos suaves (los usa .avatar-title, badges y tarjetas de estadística)
   -------------------------------------------------------------------------- */
.bg-soft-primary   { background-color: rgba(var(--pe-primary-rgb), .18) !important; }
.bg-soft-secondary { background-color: rgba(var(--pe-secondary-rgb), .18) !important; }
.bg-soft-success   { background-color: rgba(var(--pe-success-rgb), .18) !important; }
.bg-soft-info      { background-color: rgba(var(--pe-info-rgb), .18) !important; }
.bg-soft-warning   { background-color: rgba(var(--pe-warning-rgb), .18) !important; }
.bg-soft-danger    { background-color: rgba(var(--pe-danger-rgb), .18) !important; }
.bg-soft-light     { background-color: rgba(var(--pe-light-rgb), .55) !important; }
.bg-soft-dark      { background-color: rgba(var(--pe-dark-rgb), .18) !important; }

/* --------------------------------------------------------------------------
   Badges suaves con o sin borde
   -------------------------------------------------------------------------- */
.badge-soft-primary   { color: var(--pe-primary)   !important; background-color: rgba(var(--pe-primary-rgb), .12); }
.badge-soft-secondary { color: var(--pe-secondary) !important; background-color: rgba(var(--pe-secondary-rgb), .12); }
.badge-soft-success   { color: var(--pe-success)   !important; background-color: rgba(var(--pe-success-rgb), .12); }
.badge-soft-info      { color: var(--pe-info)      !important; background-color: rgba(var(--pe-info-rgb), .12); }
.badge-soft-warning   { color: var(--pe-warning)   !important; background-color: rgba(var(--pe-warning-rgb), .12); }
.badge-soft-danger    { color: var(--pe-danger)    !important; background-color: rgba(var(--pe-danger-rgb), .12); }
.badge-soft-light     { color: var(--pe-body-color) !important; background-color: rgba(var(--pe-light-rgb), .55); }
.badge-soft-dark      { color: var(--pe-dark)      !important; background-color: rgba(var(--pe-dark-rgb), .12); }

.badge-border { border: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   .waves-effect — contenedor del efecto ripple del tema anterior.
   El JS que dibujaba la onda ya no existe, así que sólo se deja el botón
   presentable (sin overflow visible).
   -------------------------------------------------------------------------- */
.waves-effect {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}

/* --------------------------------------------------------------------------
   Tamaños de letra que faltaban
   -------------------------------------------------------------------------- */
.fs-24 { font-size: 24px !important; }
.fs-30 { font-size: 30px !important; }

/* --------------------------------------------------------------------------
   Modo oscuro: los fondos suaves un poco más marcados para que se noten
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .bg-soft-primary   { background-color: rgba(var(--pe-primary-rgb), .28) !important; }
[data-bs-theme=dark] .bg-soft-secondary { background-color: rgba(var(--pe-secondary-rgb), .28) !important; }
[data-bs-theme=dark] .bg-soft-success   { background-color: rgba(var(--pe-success-rgb), .28) !important; }
[data-bs-theme=dark] .bg-soft-info      { background-color: rgba(var(--pe-info-rgb), .28) !important; }
[data-bs-theme=dark] .bg-soft-warning   { background-color: rgba(var(--pe-warning-rgb), .28) !important; }
[data-bs-theme=dark] .bg-soft-danger    { background-color: rgba(var(--pe-danger-rgb), .28) !important; }

/* --------------------------------------------------------------------------
   Modificadores de FontAwesome portados a Remixicon.
   FontAwesome ya no está en el proyecto: sus iconos (fa-*) se migraron a
   ri-* y estos modificadores (tamaño, ancho fijo, giro, listas) se conservan
   con nombre ri-* para no perder el comportamiento.
   -------------------------------------------------------------------------- */
.ri-fw {
    width: 1.25em;
    text-align: center;
}

.ri-lg  { font-size: 1.33333em; line-height: .75em; vertical-align: -.0667em; }
.ri-1x  { font-size: 1em; }
.ri-2x  { font-size: 2em; }
.ri-3x  { font-size: 3em; }
.ri-4x  { font-size: 4em; }
.ri-5x  { font-size: 5em; }
.ri-6x  { font-size: 6em; }
.ri-7x  { font-size: 7em; }
.ri-8x  { font-size: 8em; }
.ri-9x  { font-size: 9em; }
.ri-10x { font-size: 10em; }

.ri-spin {
    animation: ri-girar 2s infinite linear;
}

.ri-pulse {
    animation: ri-girar 1s infinite steps(8);
}

@keyframes ri-girar {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ri-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0;
}

.ri-ul > li {
    position: relative;
}

.ri-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
}

.ri-border {
    border: .08em solid var(--pe-border-color);
    border-radius: .1em;
    padding: .2em .25em .15em;
}

.ri-pull-left  { float: left; margin-right: .3em; }
.ri-pull-right { float: right; margin-left: .3em; }

.ri-inverse { color: #fff; }