/* ============================================================
   HUF — Componente: FormSections (.hd-form-sections)
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-form-sections> + <hd-form-section>.

   Un formulario de 50 campos en una sola columna no es un formulario:
   es un muro. Este componente lo parte en secciones navegables
   (Información · Contacto · Facturación · Configuración · Integraciones)
   sin dejar de ser UN SOLO <form>.

   Lo que NO es, y es la distinción importante:
   - **No es un wizard.** No hay pasos, no hay "siguiente", no hay varios
     POST. Todas las secciones están en el DOM y se envían juntas.
   - **No son tabs.** Los tabs (.hd-tabs) cambian de CONTENIDO; aquí no
     se cambia de contenido, se navega dentro de un mismo objeto que se
     guarda de una vez. Por eso la navegación puede marcar error en una
     sección que no estás viendo — un tab nunca hace eso.

   Consecuencia de diseño: la validación es por sección y la navegación
   muestra qué sección tiene errores, para que guardar nunca falle por
   algo que el usuario no puede ver.
   ============================================================ */

.hd-form-sections {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--hd-space-6);
    align-items: start;
}

/* ── Navegación lateral ────────────────────────────────────────
   Sticky: en un formulario largo, perder la navegación al bajar es
   perder la única referencia de dónde estás. */
.hd-form-sections__nav {
    position: sticky;
    top: var(--hd-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    min-width: 0;
}

.hd-form-sections__nav-item {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    height: var(--hd-size-control);
    padding: 0 var(--hd-space-3);
    border: none;
    background: transparent;
    border-radius: var(--hd-radius-sm);
    color: var(--hd-theme-text-muted);
    font-size: var(--hd-text-base);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--hd-motion-standard) var(--hd-ease),
                color var(--hd-motion-standard) var(--hd-ease);
}

.hd-form-sections__nav-item:hover {
    background: rgba(148, 163, 184, 0.06);
    color: var(--hd-theme-text);
}

.hd-form-sections__nav-item:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

/* Sección activa: línea de energía a la izquierda — misma firma que la
   fila seleccionada de una tabla y el link activo del sidebar (HVL §4). */
.hd-form-sections__nav-item[aria-current="true"] {
    background: rgba(var(--hd-theme-accent-rgb), 0.08);
    color: var(--hd-theme-text);
    box-shadow: inset 2px 0 0 var(--hd-theme-accent);
}

/* Marca de error: el color comunica, no embellece (HVL §5.3). Un punto,
   no un badge — el badge es para estados de registro, no para navegación. */
.hd-form-sections__nav-error {
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: var(--hd-radius-pill);
    background: var(--hd-color-error);
    flex-shrink: 0;
}

/* ── Panel de secciones ────────────────────────────────────────
   Las secciones inactivas siguen en el DOM (se envían con el form),
   solo se ocultan. */
.hd-form-sections__panel {
    min-width: 0;
}

.hd-form-section {
    display: none;
}

.hd-form-section.is-active {
    display: block;
}

.hd-form-section__title {
    margin: 0 0 var(--hd-space-4);
    font-size: var(--hd-text-title);
    font-weight: 600;
    color: var(--hd-theme-text);
}

/* ── Móvil ─────────────────────────────────────────────────────
   La navegación pasa a una fila superior con scroll horizontal. */
@media (max-width: 767.98px) {
    .hd-form-sections {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hd-space-4);
    }

    .hd-form-sections__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: var(--hd-space-2);
        border-bottom: 1px solid var(--hd-color-border);
    }

    .hd-form-sections__nav-item {
        flex-shrink: 0;
    }

    .hd-form-sections__nav-item[aria-current="true"] {
        /* En horizontal la línea de energía va abajo, no a la izquierda. */
        box-shadow: inset 0 -2px 0 var(--hd-theme-accent);
    }
}