/* =============================================================
   Esqueletos de carga
   -------------------------------------------------------------
   Bloques grises con un brillo que recorre de izquierda a derecha,
   para ocupar el lugar del contenido mientras llega del servidor.
   Se usan en vez de un "Cargando..." suelto: la sección no salta
   ni cambia de alto cuando aparecen los datos reales.

   Se acompañan del helper Esqueleto de assets/js/skeleton.js.
   ============================================================= */

.sk {
    position: relative;
    overflow: hidden;
    background: #E6ECF7;
    border-radius: 8px;
    display: block;
}

.sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .7) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: sk-brillo 1.3s ease-in-out infinite;
}

@keyframes sk-brillo {
    100% { transform: translateX(100%); }
}

/* Quien prefiere menos movimiento ve el bloque quieto */
@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
}

/* ===== Piezas ===== */

.sk-linea      { height: 12px; }
.sk-linea + .sk-linea { margin-top: 8px; }

.sk-linea.alta  { height: 16px; }
.sk-linea.corta { width: 45%; }
.sk-linea.media { width: 70%; }
.sk-linea.larga { width: 90%; }

.sk-pastilla { height: 24px; width: 96px; border-radius: 999px; }
.sk-boton    { height: 34px; width: 34px; border-radius: 8px; }
.sk-switch   { height: 24px; width: 44px; border-radius: 999px; }
.sk-circulo  { height: 44px; width: 44px; border-radius: 12px; }
.sk-chip     { height: 48px; border-radius: 14px; }

/* ===== Composiciones ===== */

.sk-acciones { display: flex; gap: 6px; }

.sk-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #EEF3FB;
}

.sk-fila:last-child { border-bottom: none; }

.sk-fila .sk-texto { flex: 1; min-width: 0; }

.sk-tarjeta {
    border: 1px solid #E3EAF6;
    border-radius: 14px;
    padding: 18px;
    background: #fff;
}

/* width:100% para que no se encoja si el contenedor real es un flex */
.sk-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    width: 100%;
}

/* En una tabla el esqueleto vive dentro de las celdas */
.sk-celda { padding: 14px !important; }