/*=================================================================================================*/
/*SISTEMAS UTILITARIOS PARA ELEMENTOS DENTRO DE LAS COLUMNAS*/
/*=================================================================================================*/

/* CLASE PARA ANCHO COMPLETO EN CUALQUIER ELEMENTO DENTRO DE UNA COLUMNA */
.Ancho-Completo {
    display: block;              /* asegura que no sea inline */
    width: 100%;                 /* ocupar todo el ancho posible */
    max-width: 100%;             /* evitar desbordes */
    align-self: stretch;         /* clave dentro de flexbox */
    box-sizing: border-box;      /* evitar expansiones por padding/borde */
}

/* 1.CONVERTIR UN ELEMENTO HTML EN UN CONTENEDOR BASE (flex universal)*/
.Contenedor {
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column; /* Dirección por defecto */
}
/* 2. VARIANTES DE DIRECCIÓN*/
.Contenedor.Fila {flex-direction: row;}
.Contenedor.Columna {flex-direction: column;}
.Contenedor.Fila-Reversa {flex-direction: row-reverse;}
.Contenedor.Columna-Reversa {flex-direction: column-reverse;}

/* 3. ALINEACIONES UNIVERSALES (FUNCIONAN EN FILA Y COLUMNA)*/

/* EJE VERTICAL (justify-content)*/
.Contenedor.Arriba {justify-content: flex-start !important;}
.Contenedor.Centro {justify-content: center !important;}
.Contenedor.Abajo {justify-content: flex-end !important;}
.Contenedor.Espacio-Alrededor {justify-content: space-around !important;}
.Contenedor.Espacio-Entre {justify-content: space-between !important;}
.Contenedor.Espacio-Uniforme {justify-content: space-evenly !important;}
/* EJE HORIZONTAL (align-items)*/
.Contenedor.Izquierda {align-items: flex-start !important;}
.Contenedor.Centrado {align-items: center !important;}
.Contenedor.Derecha {align-items: flex-end !important;}
.Contenedor.Estirar {align-items: stretch !important;}

/* 4. COMBINACIONES (vertical-horizontal)*/
.Contenedor.Arriba-Izquierda {justify-content: flex-start; align-items: flex-start;}
.Contenedor.Arriba-Centro {justify-content: flex-start; align-items: center;}
.Contenedor.Arriba-Derecha {justify-content: flex-start; align-items: flex-end;}
.Contenedor.Centro-Izquierda {justify-content: center; align-items: flex-start;}
.Contenedor.Centro-Centro {justify-content: center; align-items: center;}
.Contenedor.Centro-Derecha {justify-content: center; align-items: flex-end;}
.Contenedor.Abajo-Izquierda {justify-content: flex-end; align-items: flex-start;}
.Contenedor.Abajo-Centro {justify-content: flex-end; align-items: center;}
.Contenedor.Abajo-Derecha {justify-content: flex-end; align-items: flex-end;}

/* 5. UTILIDADES INTERNAS DE FLEX*/
.Contenedor .Expandir {flex: 1 1 auto;}
.Contenedor .No-Comprimir {flex-shrink: 0;}
.Contenedor .Ajustar-Contenido {flex: 0 0 auto;}

/* 6. UTILIDADES DE MARGEN AUTO*/
.Contenedor.Margin-Auto {margin: auto;}
.Contenedor.Margin-Horizontal-Auto {margin-left: auto; margin-right: auto;}
.Contenedor.Margin-Vertical-Auto {margin-top: auto; margin-bottom: auto;}

/* 7. UTILIDADES DE TEXTO (universales, NO dependen del contenedor)*/
.U-Texto-Izquierda {text-align: left !important;}
.U-Texto-Centro {text-align: center !important;}
.U-Texto-Derecha {text-align: right !important;}
.U-Texto-Justificado {text-align: justify !important;}

/*=================================================================================================*/
/*VARIABLES CSS PARA EL SISTEMA DE GRILLA*/
/*=================================================================================================*/
:root {
    /* NÚMERO DE COLUMNAS MÁXIMAS DE LA FILA */
    --columnas-totales: 12;

    /* PROPIEDADES DE LAS COLUMNAS (POR DEFECTO) */
    --columna-margen: 5px;   /* AHORA SOLO SE USA COMO GAP */
    --columna-borde: 5px;
    --columna-relleno: 5px;

    /* COLORES DE BORDE (POR DEFECTO) */
    --columna-borde-color: transparent;
    --columna-borde-estilo: solid;

    /* BREAKPOINTS (NO SE PUEDEN USAR EN MEDIA, SON DOCUMENTALES) */
    --breakpoint-cel-ver-max: 575px;
    --breakpoint-cel-hor-min: 576px;
    --breakpoint-cel-hor-max: 767px;
    --breakpoint-tab-ver-min: 768px;
    --breakpoint-tab-ver-max: 991px;
    --breakpoint-tab-hor-min: 992px;
    --breakpoint-tab-hor-max: 1199px;
    --breakpoint-lap-min: 1200px;
    --breakpoint-lap-max: 1399px;
    --breakpoint-pc-min: 1400px;
    --breakpoint-pc-max: 1919px;
    --breakpoint-tv-min: 1920px;
    --breakpoint-tv-max: 2559px;
    --breakpoint-full-min: 2560px;
}

/*=================================================================================================*/
/*1. RESET BÁSICO DE LA GRILLA*/
/*=================================================================================================*/
.Fila,
.Columna,
[class*="Columna-"],
[class*="CelVer-"],
[class*="CelHor-"],
[class*="TabVer-"],
[class*="TabHor-"],
[class*="Lap-"],
[class*="Pc-"],
[class*="Tv-"],
[class*="Full-"] {
    box-sizing: border-box; 
    padding: var(--columna-relleno);
    border: var(--columna-borde) var(--columna-borde-estilo) var(--columna-borde-color);
    margin: 0; /* ← MUY IMPORTANTE: ELIMINAMOS EL MARGEN PARA EVITAR QUE SE ROMPA */
}

/*=================================================================================================*/
/*2. FILA PRINCIPAL*/
/*=================================================================================================*/
.Fila {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    overflow: hidden;
    margin-left: calc(-1 * var(--columna-margen));
    margin-right: calc(-1 * var(--columna-margen));
}

/*=================================================================================================*/
/*3. COLUMNA BASE*/
/*=================================================================================================*/
.Columna {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0;
}


/*=================================================================================================*/
/*4. CLASE BASE PARA TODAS LAS COLUMNAS ESPECÍFICAS*/
/*=================================================================================================*/
[class*="Columna-"],
[class*="CelVer-"],
[class*="CelHor-"],
[class*="TabVer-"],
[class*="TabHor-"],
[class*="Lap-"],
[class*="Pc-"],
[class*="Tv-"],
[class*="Full-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 0;
    padding-left: var(--columna-margen);
    padding-right: var(--columna-margen);
    margin: 0 !important;
}

/* Forzar que las columnas NO se compriman */
[class*="Columna-"],
[class*="CelVer-"],
[class*="CelHor-"],
[class*="TabVer-"],
[class*="TabHor-"],
[class*="Lap-"],
[class*="Pc-"],
[class*="Tv-"],
[class*="Full-"] {
    flex: 0 0 auto;
}

/* Permitir que las clases utilitarias puedan sobrescribir alineación */
[class*="Columna-"],
[class*="CelVer-"],
[class*="CelHor-"],
[class*="TabVer-"],
[class*="TabHor-"],
[class*="Lap-"],
[class*="Pc-"],
[class*="Tv-"],
[class*="Full-"] {
    align-items: inherit;  /* ⬅ ESTA ES LA CLAVE */
}

/*=================================================================================================*/
/*5. DEFINICIÓN DE TAMAÑOS DE COLUMNA BASE*/
/*=================================================================================================*/
.Columna-1, .Columna-2, .Columna-3, .Columna-4, .Columna-5, .Columna-6,
.Columna-7, .Columna-8, .Columna-9, .Columna-10, .Columna-11, .Columna-12 {
    flex: 0 0 auto;
}

.Columna-1  { flex-basis: calc(100% / var(--columnas-totales) * 1); }
.Columna-2  { flex-basis: calc(100% / var(--columnas-totales) * 2); }
.Columna-3  { flex-basis: calc(100% / var(--columnas-totales) * 3); }
.Columna-4  { flex-basis: calc(100% / var(--columnas-totales) * 4); }
.Columna-5  { flex-basis: calc(100% / var(--columnas-totales) * 5); }
.Columna-6  { flex-basis: calc(100% / var(--columnas-totales) * 6); }
.Columna-7  { flex-basis: calc(100% / var(--columnas-totales) * 7); }
.Columna-8  { flex-basis: calc(100% / var(--columnas-totales) * 8); }
.Columna-9  { flex-basis: calc(100% / var(--columnas-totales) * 9); }
.Columna-10 { flex-basis: calc(100% / var(--columnas-totales) * 10); }
.Columna-11 { flex-basis: calc(100% / var(--columnas-totales) * 11); }
.Columna-12 { flex-basis: 100%; }

/*=================================================================================================*/
/* MEDIA QUERIES */
/* (IMPORTANTE: No es posible usar var() en media, deben ir valores fijos) */
/*=================================================================================================*/

/*=================================================================================================*/
/*1. CELULARES VERTICAL (0px - 575px)*/
/*=================================================================================================*/
@media (max-width: 575px) {
    .CelVer-1  { flex-basis: calc(100% / 12 * 1); }
    .CelVer-2  { flex-basis: calc(100% / 12 * 2); }
    .CelVer-3  { flex-basis: calc(100% / 12 * 3); }
    .CelVer-4  { flex-basis: calc(100% / 12 * 4); }
    .CelVer-5  { flex-basis: calc(100% / 12 * 5); }
    .CelVer-6  { flex-basis: calc(100% / 12 * 6); }
    .CelVer-7  { flex-basis: calc(100% / 12 * 7); }
    .CelVer-8  { flex-basis: calc(100% / 12 * 8); }
    .CelVer-9  { flex-basis: calc(100% / 12 * 9); }
    .CelVer-10 { flex-basis: calc(100% / 12 * 10); }
    .CelVer-11 { flex-basis: calc(100% / 12 * 11); }
    .CelVer-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*2. CELULARES HORIZONTAL (576px - 767px)*/
/*=================================================================================================*/
@media (min-width: 576px) and (max-width: 767px) {
    .CelHor-1  { flex-basis: calc(100% / 12 * 1); }
    .CelHor-2  { flex-basis: calc(100% / 12 * 2); }
    .CelHor-3  { flex-basis: calc(100% / 12 * 3); }
    .CelHor-4  { flex-basis: calc(100% / 12 * 4); }
    .CelHor-5  { flex-basis: calc(100% / 12 * 5); }
    .CelHor-6  { flex-basis: calc(100% / 12 * 6); }
    .CelHor-7  { flex-basis: calc(100% / 12 * 7); }
    .CelHor-8  { flex-basis: calc(100% / 12 * 8); }
    .CelHor-9  { flex-basis: calc(100% / 12 * 9); }
    .CelHor-10 { flex-basis: calc(100% / 12 * 10); }
    .CelHor-11 { flex-basis: calc(100% / 12 * 11); }
    .CelHor-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*3. TABLET VERTICAL (768px - 991px)*/
/*=================================================================================================*/
@media (min-width: 768px) and (max-width: 991px) {
    .TabVer-1  { flex-basis: calc(100% / 12 * 1); }
    .TabVer-2  { flex-basis: calc(100% / 12 * 2); }
    .TabVer-3  { flex-basis: calc(100% / 12 * 3); }
    .TabVer-4  { flex-basis: calc(100% / 12 * 4); }
    .TabVer-5  { flex-basis: calc(100% / 12 * 5); }
    .TabVer-6  { flex-basis: calc(100% / 12 * 6); }
    .TabVer-7  { flex-basis: calc(100% / 12 * 7); }
    .TabVer-8  { flex-basis: calc(100% / 12 * 8); }
    .TabVer-9  { flex-basis: calc(100% / 12 * 9); }
    .TabVer-10 { flex-basis: calc(100% / 12 * 10); }
    .TabVer-11 { flex-basis: calc(100% / 12 * 11); }
    .TabVer-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*4. TABLET HORIZONTAL (992px - 1199px)*/
/*=================================================================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
    .TabHor-1  { flex-basis: calc(100% / 12 * 1); }
    .TabHor-2  { flex-basis: calc(100% / 12 * 2); }
    .TabHor-3  { flex-basis: calc(100% / 12 * 3); }
    .TabHor-4  { flex-basis: calc(100% / 12 * 4); }
    .TabHor-5  { flex-basis: calc(100% / 12 * 5); }
    .TabHor-6  { flex-basis: calc(100% / 12 * 6); }
    .TabHor-7  { flex-basis: calc(100% / 12 * 7); }
    .TabHor-8  { flex-basis: calc(100% / 12 * 8); }
    .TabHor-9  { flex-basis: calc(100% / 12 * 9); }
    .TabHor-10 { flex-basis: calc(100% / 12 * 10); }
    .TabHor-11 { flex-basis: calc(100% / 12 * 11); }
    .TabHor-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*5. LAPTOP (1200px - 1399px)*/
/*=================================================================================================*/
@media (min-width: 1200px) and (max-width: 1399px) {
    .Lap-1  { flex-basis: calc(100% / 12 * 1); }
    .Lap-2  { flex-basis: calc(100% / 12 * 2); }
    .Lap-3  { flex-basis: calc(100% / 12 * 3); }
    .Lap-4  { flex-basis: calc(100% / 12 * 4); }
    .Lap-5  { flex-basis: calc(100% / 12 * 5); }
    .Lap-6  { flex-basis: calc(100% / 12 * 6); }
    .Lap-7  { flex-basis: calc(100% / 12 * 7); }
    .Lap-8  { flex-basis: calc(100% / 12 * 8); }
    .Lap-9  { flex-basis: calc(100% / 12 * 9); }
    .Lap-10 { flex-basis: calc(100% / 12 * 10); }
    .Lap-11 { flex-basis: calc(100% / 12 * 11); }
    .Lap-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*6. PC ESCRITORIO (1400px - 1919px)*/
/*=================================================================================================*/
@media (min-width: 1400px) and (max-width: 1919px) {
    .Pc-1  { flex-basis: calc(100% / 12 * 1); }
    .Pc-2  { flex-basis: calc(100% / 12 * 2); }
    .Pc-3  { flex-basis: calc(100% / 12 * 3); }
    .Pc-4  { flex-basis: calc(100% / 12 * 4); }
    .Pc-5  { flex-basis: calc(100% / 12 * 5); }
    .Pc-6  { flex-basis: calc(100% / 12 * 6); }
    .Pc-7  { flex-basis: calc(100% / 12 * 7); }
    .Pc-8  { flex-basis: calc(100% / 12 * 8); }
    .Pc-9  { flex-basis: calc(100% / 12 * 9); }
    .Pc-10 { flex-basis: calc(100% / 12 * 10); }
    .Pc-11 { flex-basis: calc(100% / 12 * 11); }
    .Pc-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*7. TELEVISOR (1920px - 2559px)*/
/*=================================================================================================*/
@media (min-width: 1920px) and (max-width: 2559px) {
    .Tv-1  { flex-basis: calc(100% / 12 * 1); }
    .Tv-2  { flex-basis: calc(100% / 12 * 2); }
    .Tv-3  { flex-basis: calc(100% / 12 * 3); }
    .Tv-4  { flex-basis: calc(100% / 12 * 4); }
    .Tv-5  { flex-basis: calc(100% / 12 * 5); }
    .Tv-6  { flex-basis: calc(100% / 12 * 6); }
    .Tv-7  { flex-basis: calc(100% / 12 * 7); }
    .Tv-8  { flex-basis: calc(100% / 12 * 8); }
    .Tv-9  { flex-basis: calc(100% / 12 * 9); }
    .Tv-10 { flex-basis: calc(100% / 12 * 10); }
    .Tv-11 { flex-basis: calc(100% / 12 * 11); }
    .Tv-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/*8. FULL (2560px en adelante)*/
/*=================================================================================================*/
@media (min-width: 2560px) {
    .Full-1  { flex-basis: calc(100% / 12 * 1); }
    .Full-2  { flex-basis: calc(100% / 12 * 2); }
    .Full-3  { flex-basis: calc(100% / 12 * 3); }
    .Full-4  { flex-basis: calc(100% / 12 * 4); }
    .Full-5  { flex-basis: calc(100% / 12 * 5); }
    .Full-6  { flex-basis: calc(100% / 12 * 6); }
    .Full-7  { flex-basis: calc(100% / 12 * 7); }
    .Full-8  { flex-basis: calc(100% / 12 * 8); }
    .Full-9  { flex-basis: calc(100% / 12 * 9); }
    .Full-10 { flex-basis: calc(100% / 12 * 10); }
    .Full-11 { flex-basis: calc(100% / 12 * 11); }
    .Full-12 { flex-basis: 100%; }
}

/*=================================================================================================*/
/* ALINEACIONES DE FILA */
/*=================================================================================================*/
.Fila.F-Arriba-Izquierda { justify-content: flex-start;  align-items: flex-start; }
.Fila.F-Arriba-Centro   { justify-content: center;       align-items: flex-start; }
.Fila.F-Arriba-Derecha  { justify-content: flex-end;     align-items: flex-start; }

.Fila.F-Centro-Izquierda { justify-content: flex-start;  align-items: center; }
.Fila.F-Centro-Centro    { justify-content: center;      align-items: center; }
.Fila.F-Centro-Derecha   { justify-content: flex-end;    align-items: center; }

.Fila.F-Abajo-Izquierda { justify-content: flex-start;  align-items: flex-end; }
.Fila.F-Abajo-Centro    { justify-content: center;      align-items: flex-end; }
.Fila.F-Abajo-Derecha   { justify-content: flex-end;    align-items: flex-end; }

.Fila.F-Espacio-Alrededor { justify-content: space-around; }
.Fila.F-Espacio-Entre      { justify-content: space-between; }
.Fila.F-Espacio-Uniforme   { justify-content: space-evenly; }

.Fila.F-Columna         { flex-direction: column; }
.Fila.F-Columna-Reversa { flex-direction: column-reverse; }
.Fila.F-Fila-Reversa    { flex-direction: row-reverse; }

/*=================================================================================================*/
/* ALINEACIONES DE CONTENIDO EN COLUMNAS */
/*=================================================================================================*/
.Columna.C-Arriba-Izquierda,
[class*="Columna-"].C-Arriba-Izquierda,
[class*="CelVer-"].C-Arriba-Izquierda,
[class*="CelHor-"].C-Arriba-Izquierda,
[class*="TabVer-"].C-Arriba-Izquierda,
[class*="TabHor-"].C-Arriba-Izquierda,
[class*="Lap-"].C-Arriba-Izquierda,
[class*="Pc-"].C-Arriba-Izquierda,
[class*="Tv-"].C-Arriba-Izquierda,
[class*="Full-"].C-Arriba-Izquierda {
    justify-content: flex-start;
    align-items: flex-start;
}

.Columna.C-Arriba-Centro,
[class*="Columna-"].C-Arriba-Centro,
[class*="CelVer-"].C-Arriba-Centro,
[class*="CelHor-"].C-Arriba-Centro,
[class*="TabVer-"].C-Arriba-Centro,
[class*="TabHor-"].C-Arriba-Centro,
[class*="Lap-"].C-Arriba-Centro,
[class*="Pc-"].C-Arriba-Centro,
[class*="Tv-"].C-Arriba-Centro,
[class*="Full-"].C-Arriba-Centro {
    justify-content: flex-start;
    align-items: center;
}

.Columna.C-Arriba-Derecha,
[class*="Columna-"].C-Arriba-Derecha,
[class*="CelVer-"].C-Arriba-Derecha,
[class*="CelHor-"].C-Arriba-Derecha,
[class*="TabVer-"].C-Arriba-Derecha,
[class*="TabHor-"].C-Arriba-Derecha,
[class*="Lap-"].C-Arriba-Derecha,
[class*="Pc-"].C-Arriba-Derecha,
[class*="Tv-"].C-Arriba-Derecha,
[class*="Full-"].C-Arriba-Derecha {
    justify-content: flex-start;
    align-items: flex-end;
}

/* CENTRO VERTICAL */
.Columna.C-Centro-Izquierda,
[class*="Columna-"].C-Centro-Izquierda,
[class*="CelVer-"].C-Centro-Izquierda,
[class*="CelHor-"].C-Centro-Izquierda,
[class*="TabVer-"].C-Centro-Izquierda,
[class*="TabHor-"].C-Centro-Izquierda,
[class*="Lap-"].C-Centro-Izquierda,
[class*="Pc-"].C-Centro-Izquierda,
[class*="Tv-"].C-Centro-Izquierda,
[class*="Full-"].C-Centro-Izquierda {
    justify-content: center;
    align-items: flex-start;
}

.Columna.C-Centro-Centro,
[class*="Columna-"].C-Centro-Centro,
[class*="CelVer-"].C-Centro-Centro,
[class*="CelHor-"].C-Centro-Centro,
[class*="TabVer-"].C-Centro-Centro,
[class*="TabHor-"].C-Centro-Centro,
[class*="Lap-"].C-Centro-Centro,
[class*="Pc-"].C-Centro-Centro,
[class*="Tv-"].C-Centro-Centro,
[class*="Full-"].C-Centro-Centro {
    justify-content: center;
    align-items: center;
}

.Columna.C-Centro-Derecha,
[class*="Columna-"].C-Centro-Derecha,
[class*="CelVer-"].C-Centro-Derecha,
[class*="CelHor-"].C-Centro-Derecha,
[class*="TabVer-"].C-Centro-Derecha,
[class*="TabHor-"].C-Centro-Derecha,
[class*="Lap-"].C-Centro-Derecha,
[class*="Pc-"].C-Centro-Derecha,
[class*="Tv-"].C-Centro-Derecha,
[class*="Full-"].C-Centro-Derecha {
    justify-content: center;
    align-items: flex-end;
}

/* ABAJO */
.Columna.C-Abajo-Izquierda,
[class*="Columna-"].C-Abajo-Izquierda,
[class*="CelVer-"].C-Abajo-Izquierda,
[class*="CelHor-"].C-Abajo-Izquierda,
[class*="TabVer-"].C-Abajo-Izquierda,
[class*="TabHor-"].C-Abajo-Izquierda,
[class*="Lap-"].C-Abajo-Izquierda,
[class*="Pc-"].C-Abajo-Izquierda,
[class*="Tv-"].C-Abajo-Izquierda,
[class*="Full-"].C-Abajo-Izquierda {
    justify-content: flex-end;
    align-items: flex-start;
}

.Columna.C-Abajo-Centro,
[class*="Columna-"].C-Abajo-Centro,
[class*="CelVer-"].C-Abajo-Centro,
[class*="CelHor-"].C-Abajo-Centro,
[class*="TabVer-"].C-Abajo-Centro,
[class*="TabHor-"].C-Abajo-Centro,
[class*="Lap-"].C-Abajo-Centro,
[class*="Pc-"].C-Abajo-Centro,
[class*="Tv-"].C-Abajo-Centro,
[class*="Full-"].C-Abajo-Centro {
    justify-content: flex-end;
    align-items: center;
}

.Columna.C-Abajo-Derecha,
[class*="Columna-"].C-Abajo-Derecha,
[class*="CelVer-"].C-Abajo-Derecha,
[class*="CelHor-"].C-Abajo-Derecha,
[class*="TabVer-"].C-Abajo-Derecha,
[class*="TabHor-"].C-Abajo-Derecha,
[class*="Lap-"].C-Abajo-Derecha,
[class*="Pc-"].C-Abajo-Derecha,
[class*="Tv-"].C-Abajo-Derecha,
[class*="Full-"].C-Abajo-Derecha {
    justify-content: flex-end;
    align-items: flex-end;
}

/*=================================================================================================*/
/* UTILIDADES */
/*=================================================================================================*/
.Columna.C-Espacio-Alrededor { justify-content: space-around; }
.Columna.C-Espacio-Entre     { justify-content: space-between; }
.Columna.C-Espacio-Uniforme  { justify-content: space-evenly; }

.Columna.C-Margin-Auto           { margin: auto; }
.Columna.C-Margin-Horizontal-Auto{ margin-left: auto; margin-right: auto; }
.Columna.C-Margin-Vertical-Auto  { margin-top: auto; margin-bottom: auto; }

/*=================================================================================================*/
/* MODO DEBUG */
/*=================================================================================================*/

/* FILAS DEBUG */
.Fila.Dbug {
    position: relative;
    background-color: rgba(255, 200, 200, 0.1);
    border: 1px dashed #ff6b6b !important;
    margin: 2px !important;
    padding: 10px !important;
    min-height: 50px;
    counter-reset: column-count;
}

/* COLUMNAS DEBUG */
.Columna.Dbug,
[class*="Columna-"].Dbug,
[class*="CelVer-"].Dbug,
[class*="CelHor-"].Dbug,
[class*="TabVer-"].Dbug,
[class*="TabHor-"].Dbug,
[class*="Lap-"].Dbug,
[class*="Pc-"].Dbug,
[class*="Tv-"].Dbug,
[class*="Full-"].Dbug {
    position: relative;
    background-color: rgba(200, 230, 255, 0.2);
    border: 1px solid #4dabf7 !important;
    min-height: 40px;
    counter-increment: column-count;
}

/* NUMERACIÓN */
.Dbug::before {
    content: "Col " counter(column-count);
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    font-family: monospace;
    color: #666;
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 2px;
    z-index: 10;
}

/* ETIQUETAS */
.Fila.Dbug::after {
    content: "FILA";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    font-family: monospace;
    color: #ff6b6b;
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: bold;
    z-index: 10;
}

.Columna.Dbug::after,
[class*="Columna-"].Dbug::after,
[class*="CelVer-"].Dbug::after,
[class*="CelHor-"].Dbug::after,
[class*="TabVer-"].Dbug::after,
[class*="TabHor-"].Dbug::after,
[class*="Lap-"].Dbug::after,
[class*="Pc-"].Dbug::after,
[class*="Tv-"].Dbug::after,
[class*="Full-"].Dbug::after {
    content: "COL";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    font-family: monospace;
    color: #4dabf7;
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: bold;
    z-index: 10;
}

/*CONTENEDOR DEBUG*/

.Contenedor.Dbug {
    position: relative;
    background-color: rgba(255, 215, 0, 0.1);
    border: 1px dashed #ffd700 !important;
    padding: 8px !important;
    min-height: 30px;
}

.Contenedor.Dbug::after {
    content: "CONT";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    font-family: monospace;
    color: #ffd700;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: bold;
    z-index: 10;
}