/* =================================================================
   CSS LOCAL DEL PLANO: SITIO

   Este archivo es EDITABLE y DESCARTABLE.
   Contiene utilidades basicas para construir la interfaz del plano.
   Puede eliminarlo completamente y usar solo el CSS global,
   o agregar sus propios estilos especificos.
   ================================================================= */

/* =================================================================
   UTILIDADES DE ESPACIADO
   Clases genericas para margenes y padding
   ================================================================= */
.espacio-1 { padding: var(--che_commerce-espacio-1); }
.espacio-2 { padding: var(--che_commerce-espacio-2); }
.espacio-4 { padding: var(--che_commerce-espacio-4); }
.espacio-6 { padding: var(--che_commerce-espacio-6); }
.espacio-8 { padding: var(--che_commerce-espacio-8); }

.margen-arriba-2 { margin-top: var(--che_commerce-espacio-2); }
.margen-arriba-4 { margin-top: var(--che_commerce-espacio-4); }
.margen-arriba-6 { margin-top: var(--che_commerce-espacio-6); }

.margen-abajo-2 { margin-bottom: var(--che_commerce-espacio-2); }
.margen-abajo-4 { margin-bottom: var(--che_commerce-espacio-4); }
.margen-abajo-6 { margin-bottom: var(--che_commerce-espacio-6); }

/* =================================================================
   UTILIDADES DE LAYOUT
   Flexbox y grid basicos
   ================================================================= */
.fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--che_commerce-espacio-4);
}

.fila--entre {
    justify-content: space-between;
}

.fila--centro {
    align-items: center;
    justify-content: center;
}

.columna {
    display: flex;
    flex-direction: column;
    gap: var(--che_commerce-espacio-4);
}

.grilla-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--che_commerce-espacio-4);
}

/* =================================================================
   UTILIDADES DE TIPOGRAFIA
   ================================================================= */
.texto-chico { font-size: var(--che_commerce-texto-chico); }
.texto-base { font-size: var(--che_commerce-texto-base); }
.texto-grande { font-size: var(--che_commerce-texto-lg); }
.texto-titulo { font-size: var(--che_commerce-texto-xl); }

.texto-mono { font-family: var(--che_commerce-fuente-mono); }
.texto-titulo-fuente { font-family: var(--che_commerce-fuente-titulos); }

.texto-gris { color: var(--che_commerce-gris-medio); }
.texto-suave { color: var(--che_commerce-gris-oscuro); }
.texto-principal { color: var(--demente-rojo); }
.texto-secundario { color: var(--che_commerce-gris-medio); }

/* =================================================================
   UTILIDADES DE BORDES Y FONDOS
   ================================================================= */
.borde {
    border: 1px solid var(--che_commerce-gris-suave);
}

.borde-abajo {
    border-bottom: 1px solid var(--che_commerce-gris-suave);
}

.fondo-suave {
    background: var(--che_commerce-gris-claro);
}

.fondo-principal {
    background: var(--demente-rojo);
    color: var(--demente-blanco);
}

/* =================================================================
   COMPONENTES BASICOS
   Bloques reutilizables minimos
   ================================================================= */

/* Caja: contenedor con borde y padding */
.caja {
    border: 1px solid var(--che_commerce-gris-suave);
    padding: var(--che_commerce-espacio-4);
    background: var(--che_commerce-fondo);
}

/* Codigo: bloque de codigo/terminal */
.codigo {
    display: flex;
    flex-direction: column;
    font-family: var(--che_commerce-fuente-mono);
    font-size: var(--che_commerce-texto-chico);
    background: var(--demente-negro);
    color: var(--demente-blanco);
    padding: var(--che_commerce-espacio-4);
    overflow-x: auto;
    line-height: 1.6;
}

.codigo .carpeta { color: var(--che_commerce-gris-medio); }
.codigo .archivo { opacity: 0.9; }
.codigo .comentario { color: var(--che_commerce-gris-medio); }

/* Etiqueta: para mostrar rutas, metodos, etc */
.etiqueta {
    display: inline-block;
    font-family: var(--che_commerce-fuente-mono);
    font-size: var(--che_commerce-texto-chico);
    padding: var(--che_commerce-espacio-1) var(--che_commerce-espacio-2);
    background: var(--che_commerce-gris-claro);
    border: 1px solid var(--che_commerce-gris-suave);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 48em) {
    .fila {
        flex-direction: column;
    }

    .grilla-auto {
        grid-template-columns: 1fr;
    }
}