/* ===== SKELETON LOADING ===== */

/* Base skeleton element */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 40%,
        rgba(0, 0, 0, 0.04) 60%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 300% 100%;
    animation: skeleton-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 6px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Skeleton container - replaces the spinner wrapper */
.skeleton-loader {
    width: 100%;
    padding: 16px 0;
}

/* ===== TRANSITION ANIMATIONS ===== */

/* Skeleton entrance: fade in + slide up */
.skeleton-enter {
    animation: skeletonEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes skeletonEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered rows: each child appears with a cascade delay */
.skeleton-stagger > .skeleton-table-row,
.skeleton-stagger > .skeleton-list-item,
.skeleton-stagger > .skeleton-detail-row,
.skeleton-stagger > .skeleton-form-group,
.skeleton-stagger > .col-md-3,
.skeleton-stagger > .col-6 {
    opacity: 0;
    animation: skeletonRowEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.skeleton-stagger > :nth-child(1) { animation-delay: 0.04s; }
.skeleton-stagger > :nth-child(2) { animation-delay: 0.08s; }
.skeleton-stagger > :nth-child(3) { animation-delay: 0.12s; }
.skeleton-stagger > :nth-child(4) { animation-delay: 0.16s; }
.skeleton-stagger > :nth-child(5) { animation-delay: 0.20s; }
.skeleton-stagger > :nth-child(6) { animation-delay: 0.24s; }
.skeleton-stagger > :nth-child(7) { animation-delay: 0.28s; }
.skeleton-stagger > :nth-child(8) { animation-delay: 0.32s; }
.skeleton-stagger > :nth-child(9) { animation-delay: 0.36s; }
.skeleton-stagger > :nth-child(10) { animation-delay: 0.40s; }

@keyframes skeletonRowEnter {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Content reveal: applied to content that appears after skeleton hides */
.content-reveal {
    animation: contentReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contentReveal {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== STAGGERED ROW ANIMATION ===== */
.row-stagger {
    opacity: 0;
    animation: rowFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rowFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skeleton wrapper transition state */
.skeleton-wrapper-active {
    overflow: hidden;
}

/* ===== MODAL SLIDE-UP ANIMATION ===== */
.modal.fade:not(.modal-from-right) .modal-dialog {
    transform: translateY(40px) scale(0.98);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.fade.show:not(.modal-from-right) .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ===== SECTION TRANSITIONS ===== */

/* Fade out: applied to sections being hidden */
.section-fade-out {
    animation: sectionFadeOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Fade in: applied to sections being shown */
.section-fade-in {
    animation: sectionFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sectionFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: skeleton-pulse 2s ease-in-out infinite;
        background: rgba(0, 0, 0, 0.06);
    }
    @keyframes skeleton-pulse {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }
    .skeleton-enter,
    .content-reveal,
    .row-stagger,
    .section-fade-out,
    .section-fade-in,
    .skeleton-stagger > .skeleton-table-row,
    .skeleton-stagger > .skeleton-list-item,
    .skeleton-stagger > .skeleton-detail-row,
    .skeleton-stagger > .skeleton-form-group,
    .skeleton-stagger > .col-md-3,
    .skeleton-stagger > .col-6 {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .modal.fade:not(.modal-from-right) .modal-dialog {
        transform: none;
        opacity: 1;
        transition: none;
    }
    .skeleton-dots span {
        animation: none;
        opacity: 0.6;
    }
    a.cuadro > div,
    div.cuadro,
    .PopUpsItems {
        transition: none;
    }
    a.cuadro:hover > div,
    div.cuadro:hover,
    .PopUpsItems:hover {
        transform: none;
        box-shadow: none;
    }
    .btn-ripple:active::after {
        animation: none;
    }
    .SaveButtons:active,
    .ModalButtons:active,
    .externalButtons:active,
    .configButtons:active,
    .buttonRechazarSmallModals:active,
    .buttonAceptarSmallModals:active,
    .bottonTransaccionActive:active,
    .bottonTransaccionInactive:active,
    .botonComunicadosInactive:active {
        transform: none;
    }
}

/* ===== MODERN LOADING DOTS (replaces spinner-border) ===== */

.skeleton-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
}

.skeleton-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1056B3;
    animation: dotBounce 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.skeleton-dots span:nth-child(1) { animation-delay: 0s; }
.skeleton-dots span:nth-child(2) { animation-delay: 0.16s; }
.skeleton-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dots size variants */
.skeleton-dots-sm span {
    width: 5px;
    height: 5px;
}

.skeleton-dots-lg span {
    width: 10px;
    height: 10px;
    gap: 8px;
}

/* ===== SKELETON VARIANTS ===== */

/* Text line */
.skeleton-text {
    height: 13px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.skeleton-text-sm {
    height: 9px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text-lg {
    height: 18px;
    margin-bottom: 12px;
    border-radius: 6px;
}

/* Title */
.skeleton-title {
    height: 22px;
    width: 40%;
    margin-bottom: 16px;
    border-radius: 6px;
}

/* Avatar / Circle */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Image placeholder */
.skeleton-image {
    width: 100%;
    height: 160px;
    border-radius: 10px;
}

/* Button placeholder */
.skeleton-button {
    height: 36px;
    width: 110px;
    border-radius: 8px;
}

/* Badge/bubble placeholder */
.skeleton-badge {
    height: 26px;
    width: 72px;
    border-radius: 20px;
    display: inline-block;
}

/* ===== TABLE SKELETON ===== */

.skeleton-table {
    width: 100%;
}

.skeleton-table-header {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 4px;
}

.skeleton-table-header .skeleton {
    height: 14px;
    border-radius: 6px;
}

.skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.skeleton-table-row .skeleton {
    height: 13px;
    border-radius: 6px;
}

/* Column widths for table */
.skeleton-col-xs { flex: 0 0 40px; }
.skeleton-col-sm { flex: 0 0 80px; }
.skeleton-col-md { flex: 1; }
.skeleton-col-lg { flex: 2; }

/* ===== CARD SKELETON ===== */

.skeleton-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.skeleton-card-header .skeleton-text {
    flex: 1;
}

.skeleton-card-body .skeleton-text:last-child {
    width: 60%;
}

/* ===== DETAIL VIEW SKELETON ===== */

.skeleton-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.skeleton-detail-row {
    display: flex;
    gap: 24px;
}

.skeleton-detail-field {
    flex: 1;
}

.skeleton-detail-label {
    height: 11px;
    width: 35%;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-detail-value {
    height: 15px;
    width: 70%;
    border-radius: 6px;
}

/* ===== CHART SKELETON ===== */

.skeleton-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    padding: 20px 0;
}

.skeleton-chart-bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
}

/* ===== LIST ITEM SKELETON ===== */

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.skeleton-list-item-content {
    flex: 1;
}

/* ===== INLINE SKELETON ===== */

.skeleton-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

.skeleton-inline span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1056B3;
    animation: dotBounce 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.skeleton-inline span:nth-child(1) { animation-delay: 0s; }
.skeleton-inline span:nth-child(2) { animation-delay: 0.16s; }
.skeleton-inline span:nth-child(3) { animation-delay: 0.32s; }

/* ===== FORM SKELETON ===== */

.skeleton-form-group {
    margin-bottom: 20px;
}

.skeleton-form-label {
    height: 11px;
    width: 25%;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-form-input {
    height: 38px;
    width: 100%;
    border-radius: 8px;
}

/* ===== STAT CARD SKELETON ===== */

.skeleton-stat {
    text-align: center;
    padding: 16px;
}

.skeleton-stat-number {
    height: 32px;
    width: 50%;
    margin: 0 auto 8px auto;
    border-radius: 6px;
}

.skeleton-stat-label {
    height: 11px;
    width: 70%;
    margin: 0 auto;
    border-radius: 4px;
}

/* ===== PAGINATION SKELETON ===== */

.skeleton-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.skeleton-pagination-item {
    width: 30px;
    height: 30px;
    border-radius: 6px;
}

/* ===== ACTION SKELETON (for button/form actions) ===== */

.skeleton-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 16px;
}

.skeleton-action-dots {
    display: flex;
    gap: 6px;
}

.skeleton-action-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1056B3;
    animation: dotBounce 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.skeleton-action-dots span:nth-child(1) { animation-delay: 0s; }
.skeleton-action-dots span:nth-child(2) { animation-delay: 0.16s; }
.skeleton-action-dots span:nth-child(3) { animation-delay: 0.32s; }

.skeleton-action-text {
    height: 12px;
    width: 120px;
    border-radius: 6px;
}

/* ===== RIPPLE EFFECT FOR ACTION BUTTONS ===== */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

    .btn-ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .btn-ripple:active::after {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
        animation: btnRipple 0.4s ease-out;
    }

@keyframes btnRipple {
    0% {
        width: 0;
        padding-bottom: 0;
        opacity: 0.4;
    }
    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
    }
}