/* src/modules/system/components/input-card.css */

:host {
    display: flex;          /* Cambiado de inline-flex a flex para asegurar ancho */
    width: 100%;            /* Ocupa todo el ancho disponible */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;               /* El gap vertical entre Label y Cajones */
    box-sizing: border-box;
}

/* 1. EL LABEL (Estilo Figma) */
.label {
    color: var(--Blanco);
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;        /* Body Base */
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    
    /* Para que el // verde se vea guapo si lo quieres separar, 
       pero por ahora es todo blanco según tu CSS */
}

/* 2. EL CONTENEDOR DE CAJONES (SLOT) */
.input-container {
    display: grid;          /* Grid para manejar columnas fácil */
    width: 100%;
    gap: 12px;              /* Gap entre cajones (Horizontal/Vertical) */
    
    /* Por defecto 1 columna */
    grid-template-columns: 1fr; 
}

/* --- MODOS DE GRID (Atributos en el <app-input-card>) --- */

/* grid="2" -> Dos columnas (Genética: XX | YY) */
:host([grid="2"]) .input-container {
    grid-template-columns: 1fr 1fr;
}

/* grid="3" -> Tres columnas */
:host([grid="3"]) .input-container {
    grid-template-columns: 1fr 1fr 1fr;
}

/* grid="auto" -> Ajuste automático si quisieras */
:host([grid="auto"]) .input-container {
    display: flex;
    flex-wrap: wrap;
}