/* ============================================================
   HUF — Componente: Setting (.hd-setting)
   ------------------------------------------------------------
   Fila de configuración: explicación a la izquierda, control a la
   derecha. La columna de controles queda alineada de arriba abajo para
   que "qué tengo encendido" se lea de una pasada vertical.

   Separación por línea de 1px entre filas, igual que una tabla: son
   registros del mismo tipo. Solo ENTRE filas — el borde del panel que
   las contiene ya cierra arriba y abajo, y duplicarlo infringe la regla
   de bordes anidados (HVL §5.2).
   ============================================================ */

.hd-setting {
    display: grid;
    /* Mismo reparto 5/7 que traían las pantallas con rejilla de Bootstrap:
       la explicación necesita menos ancho que un grupo de opciones. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--hd-space-2) var(--hd-space-4);
    align-items: start;
    padding: var(--hd-space-3) 0;
}

.hd-setting + .hd-setting {
    border-top: 1px solid var(--hd-color-border);
}

.hd-setting__name {
    font-weight: 600;
    color: var(--hd-theme-text);
}

.hd-setting__desc {
    margin: var(--hd-space-1) 0 0;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    line-height: 1.5;
}

/* El control ya trae su propio envoltorio (.hd-field, .hd-segmented…);
   aquí solo se le quita el margen inferior que tendría suelto en un
   formulario, porque el espaciado entre filas lo pone la fila. */
.hd-setting__control > .hd-field {
    margin-bottom: 0;
}

/* Bajo 1200px la explicación y el control se apilan: mantener dos
   columnas obligaría a partir el texto en palabras sueltas. */
@media (max-width: 1199.98px) {
    .hd-setting {
        grid-template-columns: minmax(0, 1fr);
    }
}