@gambito-corp/mbs-library/src/components/atoms/Container/Container.css

Librería de componentes React reutilizables - Sistema de diseño modular y escalable

/* ===== BLOCK: container ===== */
.container {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem; /* padding medium por defecto */
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

/* ===== MODIFIERS: Variantes ===== */

/* container--card: Estilo tarjeta */
.container--card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.container--card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* container--panel: Estilo panel */
.container--panel {
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
}

/* container--hero: Estilo héroe */
.container--hero {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #ffffff;
    text-align: center;
    padding: 3rem 1rem;
}

/* container--sidebar: Estilo sidebar */
.container--sidebar {
    background-color: #f3f4f6;
    border-right: 1px solid #d1d5db;
    min-height: 100vh;
}

/* container--modal: Estilo modal */
.container--modal {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 50;
}

/* ===== MODIFIERS: Tamaños ===== */

.container--xs {
    max-width: 20rem; /* 320px */
}

.container--small {
    max-width: 24rem; /* 384px */
}

.container--large {
    max-width: 32rem; /* 512px */
}

.container--xlarge {
    max-width: 36rem; /* 576px */
}

/* ===== MODIFIERS: Anchos máximos ===== */

.container--max-xs { max-width: 20rem; }
.container--max-sm { max-width: 24rem; }
.container--max-md { max-width: 28rem; }
.container--max-lg { max-width: 32rem; }
.container--max-xl { max-width: 36rem; }
.container--max-2xl { max-width: 42rem; }
.container--max-3xl { max-width: 48rem; }
.container--max-4xl { max-width: 56rem; }
.container--max-5xl { max-width: 64rem; }
.container--max-6xl { max-width: 72rem; }
.container--max-7xl { max-width: 80rem; }
.container--max-none { max-width: none; }

/* ===== MODIFIERS: Padding ===== */

.container--padding-none { padding: 0; }
.container--padding-small { padding: 0.5rem; }
.container--padding-large { padding: 1.5rem; }
.container--padding-xlarge { padding: 2rem; }

/* ===== MODIFIERS: Margin ===== */

.container--margin-none { margin: 0; }
.container--margin-small { margin: 0.5rem; }
.container--margin-medium { margin: 1rem; }
.container--margin-large { margin: 1.5rem; }
.container--margin-xlarge { margin: 2rem; }
.container--margin-auto { margin: 0 auto; }

/* ===== MODIFIERS: Sombras ===== */

.container--shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.container--shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.container--shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.container--shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.container--shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ===== MODIFIERS: Bordes ===== */

.container--border-sm {
    border: 1px solid #d1d5db;
}

.container--border-md {
    border: 2px solid #d1d5db;
}

.container--border-lg {
    border: 4px solid #d1d5db;
}

.container--border-dashed {
    border: 1px dashed #d1d5db;
}

.container--border-dotted {
    border: 1px dotted #d1d5db;
}

/* ===== MODIFIERS: Bordes redondeados ===== */

.container--rounded-sm { border-radius: 0.125rem; }
.container--rounded-md { border-radius: 0.375rem; }
.container--rounded-lg { border-radius: 0.5rem; }
.container--rounded-xl { border-radius: 0.75rem; }
.container--rounded-2xl { border-radius: 1rem; }
.container--rounded-3xl { border-radius: 1.5rem; }
.container--rounded-full { border-radius: 9999px; }

/* ===== MODIFIERS: Fondos ===== */

.container--bg-white { background-color: #ffffff; }
.container--bg-gray { background-color: #f3f4f6; }
.container--bg-primary { background-color: #3b82f6; color: #ffffff; }
.container--bg-secondary { background-color: #6b7280; color: #ffffff; }
.container--bg-accent { background-color: #8b5cf6; color: #ffffff; }

/* ===== MODIFIERS: Estados ===== */

.container--centered {
    margin-left: auto;
    margin-right: auto;
}

.container--fluid {
    width: 100%;
    max-width: 100%;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 640px) {
    .container {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 0.75rem;
    }

    .container--hero {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .container--padding-large {
        padding: 1rem;
    }

    .container--padding-xlarge {
        padding: 1.5rem;
    }
}

/* ===== MODO OSCURO ===== */

.dark .container--card {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark .container--panel {
    background-color: #111827;
    border-color: #374151;
    color: #f9fafb;
}

.dark .container--sidebar {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark .container--modal {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.dark .container--bg-gray {
    background-color: #374151;
    color: #f9fafb;
}

/* ===== ACCESIBILIDAD ===== */

.container:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */

@media print {
    .container {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
}


/* ===== BLOCK: container ===== */
.container {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}
/* ===== MODIFIERS: Estados ===== */

.container--centered {
    margin-left: auto;
    margin-right: auto;
}

.container--fluid {
    width: 100%;
    max-width: 100%;
}

/* ✅ NUEVO: Fit content */
.container--fit-content {
    width: fit-content;
    max-width: fit-content;
}

/* ✅ COMBINACIÓN: fit-content + centered */
.container--fit-content.container--centered {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ===== BLOCK: container-skeleton ===== */
.container-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
    display: block;
    width: 100%;
    height: 6rem; /* 96px - medium por defecto */
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===== ANIMACIÓN SHIMMER ===== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== CONTENIDO INTERNO ===== */
.container-skeleton__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    justify-content: center;
}

.container-skeleton__line {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
    height: 0.75rem;
    width: 100%;
}

.container-skeleton__line--title {
    height: 1rem;
    width: 60%;
    background: rgba(255, 255, 255, 0.5);
}

.container-skeleton__line--text {
    height: 0.75rem;
    width: 80%;
}

.container-skeleton__line--short {
    width: 40%;
}

/* ===== MODIFIERS: Tamaños ===== */
.container-skeleton--xs {
    height: 3rem;   /* 48px */
    width: 20rem;   /* 320px */
}

.container-skeleton--small {
    height: 4rem;   /* 64px */
    width: 24rem;   /* 384px */
}

.container-skeleton--large {
    height: 8rem;   /* 128px */
    width: 32rem;   /* 512px */
}

.container-skeleton--xlarge {
    height: 10rem;  /* 160px */
    width: 36rem;   /* 576px */
}

/* ===== MODIFIERS: Anchos máximos ===== */
.container-skeleton--max-xs { max-width: 20rem; }
.container-skeleton--max-sm { max-width: 24rem; }
.container-skeleton--max-md { max-width: 28rem; }
.container-skeleton--max-lg { max-width: 32rem; }
.container-skeleton--max-xl { max-width: 36rem; }
.container-skeleton--max-2xl { max-width: 42rem; }
.container-skeleton--max-3xl { max-width: 48rem; }
.container-skeleton--max-4xl { max-width: 56rem; }
.container-skeleton--max-5xl { max-width: 64rem; }
.container-skeleton--max-6xl { max-width: 72rem; }
.container-skeleton--max-7xl { max-width: 80rem; }
.container-skeleton--max-none { max-width: none; }

/* ===== MODIFIERS: Padding ===== */
.container-skeleton--padding-none { padding: 0; }
.container-skeleton--padding-small { padding: 0.5rem; }
.container-skeleton--padding-large { padding: 1.5rem; }
.container-skeleton--padding-xlarge { padding: 2rem; }

/* ===== MODIFIERS: Bordes redondeados ===== */
.container-skeleton--rounded-none { border-radius: 0; }
.container-skeleton--rounded-sm { border-radius: 0.125rem; }
.container-skeleton--rounded-md { border-radius: 0.375rem; }
.container-skeleton--rounded-lg { border-radius: 0.5rem; }
.container-skeleton--rounded-xl { border-radius: 0.75rem; }
.container-skeleton--rounded-2xl { border-radius: 1rem; }
.container-skeleton--rounded-3xl { border-radius: 1.5rem; }
.container-skeleton--rounded-full { border-radius: 9999px; }

/* ===== MODIFIERS: Variantes ===== */
.container-skeleton--card {
    background: linear-gradient(90deg, #f8fafc 25%, #e2e8f0 50%, #f8fafc 75%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.container-skeleton--panel {
    background: linear-gradient(90deg, #f1f5f9 25%, #cbd5e1 50%, #f1f5f9 75%);
    border: 1px solid #cbd5e1;
}

.container-skeleton--hero {
    background: linear-gradient(90deg, #dbeafe 25%, #93c5fd 50%, #dbeafe 75%);
    height: 12rem; /* Más alto para hero */
    text-align: center;
}

.container-skeleton--sidebar {
    background: linear-gradient(90deg, #f3f4f6 25%, #d1d5db 50%, #f3f4f6 75%);
    width: 16rem; /* Ancho fijo para sidebar */
    height: 24rem; /* Alto fijo para sidebar */
}

.container-skeleton--modal {
    background: linear-gradient(90deg, #ffffff 25%, #f3f4f6 50%, #ffffff 75%);
    border: 1px solid #d1d5db;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 28rem; /* Ancho modal típico */
}

/* ===== MODIFIERS: Estados ===== */
.container-skeleton--centered {
    margin-left: auto;
    margin-right: auto;
}

.container-skeleton--fluid {
    width: 100%;
    max-width: 100%;
}

.container-skeleton--fit-content {
    width: fit-content;
    max-width: fit-content;
}

.container-skeleton--block {
    display: block;
}

/* ===== VARIANTES ESPECIALES DE CONTENIDO ===== */
.container-skeleton--hero .container-skeleton__content {
    align-items: center;
    text-align: center;
}

.container-skeleton--hero .container-skeleton__line--title {
    width: 80%;
    height: 1.5rem;
}

.container-skeleton--sidebar .container-skeleton__content {
    gap: 0.75rem;
}

.container-skeleton--sidebar .container-skeleton__line {
    width: 90%;
}

.container-skeleton--modal .container-skeleton__content {
    gap: 1rem;
}

.container-skeleton--modal .container-skeleton__line--title {
    width: 70%;
    height: 1.25rem;
}

/* ===== MODO OSCURO ===== */
.dark .container-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
}

.dark .container-skeleton__line {
    background: rgba(255, 255, 255, 0.1);
}

.dark .container-skeleton__line--title {
    background: rgba(255, 255, 255, 0.2);
}

.dark .container-skeleton--card {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    border-color: #374151;
}

.dark .container-skeleton--panel {
    background: linear-gradient(90deg, #111827 25%, #374151 50%, #111827 75%);
    border-color: #374151;
}

.dark .container-skeleton--hero {
    background: linear-gradient(90deg, #1e40af 25%, #3b82f6 50%, #1e40af 75%);
}

.dark .container-skeleton--sidebar {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
}

.dark .container-skeleton--modal {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    border-color: #374151;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .container-skeleton {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 0.75rem;
    }

    .container-skeleton--hero {
        height: 8rem;
        padding: 2rem 1rem;
    }

    .container-skeleton--sidebar {
        width: 100%;
        height: 8rem;
    }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
    .container-skeleton {
        animation: none;
        background: #f0f0f0;
    }

    .dark .container-skeleton {
        background: #374151;
    }
}
/* ===== BLOCK: animated-skeleton ===== */
.animated-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 0.5rem;
    display: block;
    width: 100%;
    height: 4rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===== CONTENIDO INTERNO ===== */
.animated-skeleton__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    justify-content: center;
}

.animated-skeleton__line {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
    height: 0.75rem;
    width: 100%;
}

.animated-skeleton__line--title {
    height: 1rem;
    width: 60%;
    background: rgba(255, 255, 255, 0.5);
}

.animated-skeleton__line--text {
    height: 0.75rem;
    width: 80%;
}

.animated-skeleton__line--short {
    width: 40%;
}

/* ===== ANIMACIONES SKELETON ===== */
.animated-skeleton--pulse {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.animated-skeleton--fade-in {
    animation: skeletonFadeIn 1s ease-in-out infinite;
}

.animated-skeleton--fade-out {
    animation: skeletonFadeOut 1s ease-in-out infinite;
}

.animated-skeleton--bounce {
    animation: skeletonBounce 1s ease-in-out infinite;
}

.animated-skeleton--slide {
    animation: skeletonSlide 1.5s ease-in-out infinite;
}

.animated-skeleton--rotate {
    animation: skeletonRotate 2s linear infinite;
}

.animated-skeleton--scale {
    animation: skeletonScale 1s ease-in-out infinite;
}

/* ===== KEYFRAMES ===== */
@keyframes skeletonPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes skeletonFadeIn {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes skeletonFadeOut {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes skeletonBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes skeletonSlide {
    0% { transform: translateX(-20px); opacity: 0; }
    50% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(20px); opacity: 0; }
}

@keyframes skeletonRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes skeletonScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===== MODIFIERS ===== */
.animated-skeleton--infinite {
    animation-iteration-count: infinite;
}

.animated-skeleton--medium {
    height: 4rem;
}

/* ===== MODO OSCURO ===== */
.dark .animated-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
}

.dark .animated-skeleton__line {
    background: rgba(255, 255, 255, 0.1);
}

.dark .animated-skeleton__line--title {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
    .animated-skeleton,
    .animated-skeleton--pulse,
    .animated-skeleton--fade-in,
    .animated-skeleton--fade-out,
    .animated-skeleton--bounce,
    .animated-skeleton--slide,
    .animated-skeleton--rotate,
    .animated-skeleton--scale {
        animation: none;
        background: #f0f0f0;
    }

    .dark .animated-skeleton {
        background: #374151;
    }
}