/* =============================================================================
   Articulos y familias (feature stylesheet)

   Antes era CSS aislado (Articulos.razor.css). Al modularizar la ficha en los
   subcomponentes ArticuloDetalle y FamiliaDetalle, el aislamiento dejaba esos
   componentes sin estilo (no llevan el atributo de scope de la pagina). Por eso
   pasa a ser un stylesheet de feature compartido:

   - Las reglas de contenido van scopeadas bajo .articulos-page. La pagina y sus
     subcomponentes renderizan dentro de ese contenedor, asi que las heredan, y
     las clases genericas (card-panel, panel-header, estado-chip, empty-state...)
     no se filtran al resto de pantallas.
   - El modal de confirmacion de borrado renderiza FUERA de .articulos-page; sus
     reglas y las de sus botones (clases exclusivas de Articulos) quedan sin scope.
   ============================================================================= */

.articulos-page,
.articulos-page *,
.articulos-page *::before,
.articulos-page *::after {
    box-sizing: border-box;
}

/* Los iconos (material-symbols-outlined) son decorativos: evitar que se seleccionen
   con el cursor (arbol de familias, ficha de familia y ficha de articulo). */
.articulos-page .material-symbols-outlined {
    user-select: none;
    -webkit-user-select: none;
}

.articulos-page {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: grid;
    /* Cabecera (auto) + zona de contenido (1fr, ocupa todo el alto restante). El KpiBoard quedó
       comentado; si se reactiva, añadir de nuevo su fila «auto» entre ambas. */
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    /* «backwards» (no «both»): el fotograma final del keyframe (transform/filter) NO se retiene tras
       la animacion. Con «both» quedaba aplicado de forma permanente y convertia a .articulos-page en
       el bloque contenedor de sus descendientes position:fixed, atrapando las ventanas de busqueda
       (SelectorEntidad) dentro del panel. El estado final equivale al de reposo, asi que la entrada
       se ve igual. */
    animation: articulosPageIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* CABECERA */

.articulos-page .articulos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    flex: 0 0 auto;
}

    /* Bloque de título (fase 1): se mantiene en una línea y NO cede; los botones del CommandBar
       se repliegan primero. Solo cede cuando el CommandBar ya está totalmente replegado (fase 2,
       clase command-bar-host-collapsed que añade el propio CommandBar). */
    .articulos-page .articulos-header > div:first-child {
        flex: 0 0 auto;
        min-width: 0;
    }

    .articulos-page .articulos-header.command-bar-host-collapsed > div:first-child {
        flex: 1 1 auto;
    }

.articulos-page .articulos-title {
    margin: 0;
    /* Escala con el viewport: mínimo 18px, fluido (1vw + 12px), tope 22px. */
    font-size: clamp(18px, 1vw + 12px, 22px);
    line-height: 1.15;
    font-weight: 850;
    color: #1f2937;
    letter-spacing: -0.02em;
    /* Una línea; si no cupiera, se recorta con puntos suspensivos en vez de desbordar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .articulos-subtitle {
    margin-top: 4px;
    /* Escala con el viewport, en línea con el título: mínimo 12px, fluido, tope 15px. */
    font-size: clamp(12px, 0.5vw + 9px, 15px);
    color: #6b7280;
    line-height: 1.35;
    /* Tope de ancho responsive: ocupa más ancho que antes (escala con el viewport hasta 760px) y se
       mantiene con un mínimo holgado (no se estrecha a un hilo). Aun así el bloque de texto sigue
       acotado, así que no empuja al CommandBar fuera de su sitio: el subtítulo envuelve dentro. */
    max-width: clamp(440px, 52vw, 760px);
    min-width: 360px;
}

/* Fase 2 (el CommandBar ya está replegado a «···»): el bloque de texto cede el ancho restante. */
.articulos-page .articulos-header.command-bar-host-collapsed .articulos-title {
    white-space: normal;
    overflow-wrap: break-word;
}

/* CommandBar de la cabecera: conserva su ancho natural y se alinea siempre a la derecha. Usa el
   estilo por defecto del componente (botones compactos icono+texto) y nunca envuelve. */
.articulos-page .articulos-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    align-self: center;
}

.articulos-page .propiedades-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* PANEL GENERAL */

.articulos-page .card-panel {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.articulos-page .panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    min-width: 0;
}

    .articulos-page .panel-header > div:first-child {
        min-width: 0;
    }

.articulos-page .section-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 850;
    color: #1f2937;
}

    .articulos-page .section-title.no-margin {
        margin: 0;
    }

.articulos-page .panel-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* LAYOUT PRINCIPAL */

.articulos-page .articulos-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    overflow: hidden;
}

.articulos-page .articulos-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* El panel de detalle ya no scrollea como un todo: se divide en cabecera fija, cuerpo scrolleable
   y footer de acciones fijo. Asi el scroll arranca DEBAJO de la cabecera. */
.articulos-page .articulos-detail-panel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

    /* Cabecera fija de la ficha (identidad + indicador + CommandBar): no participa en el scroll.
       Es el contenedor que mide el CommandBar para su desbordamiento (su «host»): la identidad y la
       barra son hermanas directas, igual que el titulo y la barra de la cabecera de la pagina. */
    .articulos-page .articulos-detail-panel > .panel-header {
        flex: 0 0 auto;
        /* Siempre en una fila, en todos los anchos: nunca apila identidad / indicador / barra
           (anula la regla responsive que pasa .panel-header a columna en pantallas pequenas). */
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 16px 18px;
        border-bottom: 1px solid #eef2f7;
        background: #ffffff;
        border-radius: 16px 16px 0 0;
    }

/* Identidad de la ficha en la cabecera (icono + nombre + meta), sustituye al titulo generico.
   Tiene prioridad de ancho: no cede (flex 0 0 auto) y su margen derecho automatico empuja el
   indicador y el CommandBar a la derecha. Asi la barra desborda el header y se repliega
   (icono -> «···») antes de tocar la identidad; esta solo cede como ultimo recurso (host-collapsed). */
.articulos-page .articulo-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 0 0 auto;
    margin-right: auto;
}

    .articulos-page .articulo-detail-head > div:last-child {
        min-width: 0;
    }

    /* Ultimo recurso: con la barra ya replegada a «···» y aun sin caber, la identidad cede el ancho
       y su nombre se recorta con puntos suspensivos. */
    .articulos-page .articulos-detail-panel > .panel-header.command-bar-host-collapsed .articulo-detail-head {
        flex: 1 1 auto;
    }

/* -----------------------------------------------------------------------------
   ACCIONES DE LA FICHA (CommandBar en linea)

   El CommandBar pinta por defecto botones compactos con el icono ARRIBA y el texto
   debajo. En la cabecera de la ficha lo queremos en linea (icono + texto al lado) y
   con el mismo aspecto que los botones de la pagina de notificaciones (nt-secondary-btn):
   contorno gris sobre fondo transparente y sin relleno de color. El hover se queda en gris
   neutro (el del propio CommandBar), sin el tinte azulado de notificaciones. La hoja es
   global (sin scope), asi que el selector compuesto .cb-ficha gana en especificidad a las
   reglas scopeadas del propio componente CommandBar.

   El MISMO juego lo usan las barras del contenido de las pestanas (.cb-seccion): las acciones
   de dentro de una pestana —guardar tallas, definir propiedades, imprimir la trazabilidad...—
   no son otra familia de botones, son las mismas de la ficha en otro sitio. Por eso comparten
   estas reglas en vez de duplicarlas: un solo sitio donde cambia el aspecto de los comandos de
   Articulos. Lo unico propio de .cb-seccion va al final del bloque (alineacion vertical y el
   boton «···», que en la cabecera conserva su tamano original).
   ----------------------------------------------------------------------------- */

/* La barra conserva su ancho natural (no se encoge): asi desborda el header y el script de
   desbordamiento la repliega, en vez de que su contenido se recorte/salte de linea. */
.articulos-page .cb-ficha,
.articulos-page .cb-seccion {
    flex: 0 0 auto;
}

/* EL4: el boton «Informes» de la ficha vive al lado del CommandBar y tiene que leerse como uno mas de
   la barra, no como algo pegado encima. Por eso adopta el mismo juego (.cb-ficha): en linea, contorno
   gris, fondo transparente. Va en esta hoja GLOBAL —no en el .razor.css del componente— porque ahi
   pinta el juego por defecto (icono arriba, texto debajo) y un selector compuesto sin scope es lo
   unico que gana en especificidad a una regla scopeada. */
.articulos-page .binf-ficha {
    flex: 0 0 auto;
    align-self: center;
}

.articulos-page .binf-ficha .binf__btn {
    flex-direction: row;
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .articulos-page .binf-ficha .binf__btn:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .articulos-page .binf-ficha .binf__btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.articulos-page .cb-ficha .command-bar__btn,
.articulos-page .cb-seccion .command-bar__btn {
    flex-direction: row;
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .articulos-page .cb-ficha .command-bar__btn:hover:not(:disabled),
    .articulos-page .cb-seccion .command-bar__btn:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .articulos-page .cb-ficha .command-bar__btn:disabled,
    .articulos-page .cb-seccion .command-bar__btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Deshabilitado + puntero encima: el boton no debe reaccionar. Hay que declararlo aunque repita
   el estado de reposo, porque «:hover» TAMBIEN casa con un boton deshabilitado: las reglas
   :hover del propio CommandBar (p. ej. .command-bar__btn.is-primary:hover) siguen aplicando, y
   empatan en especificidad con las de reposo de aqui, asi que ganarian por orden de carga (la
   hoja scopeada se carga despues de esta). Sin esto, «Guardar» sin cambios se pinta de azul. */
.articulos-page .cb-ficha .command-bar__btn:disabled:hover,
.articulos-page .cb-ficha .command-bar__btn.is-primary:disabled:hover,
.articulos-page .cb-ficha .command-bar__btn.is-danger:disabled:hover,
.articulos-page .cb-seccion .command-bar__btn:disabled:hover,
.articulos-page .cb-seccion .command-bar__btn.is-primary:disabled:hover,
.articulos-page .cb-seccion .command-bar__btn.is-danger:disabled:hover {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

.articulos-page .cb-ficha .command-bar__icon,
.articulos-page .cb-seccion .command-bar__icon {
    font-size: clamp(15px, 1.8vw, 16px);
}

/* «Guardar» (primario) no lleva relleno azul: aqui todos los botones comparten el mismo
   contorno neutro. Hay que declararlo aunque repita lo de arriba, porque la regla .is-primary
   del propio CommandBar empata en especificidad con la del boton base. */
.articulos-page .cb-ficha .command-bar__btn.is-primary,
.articulos-page .cb-seccion .command-bar__btn.is-primary {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

    .articulos-page .cb-ficha .command-bar__btn.is-primary:hover:not(:disabled),
    .articulos-page .cb-seccion .command-bar__btn.is-primary:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

/* «Eliminar» reposa igual que los demas y solo se tine de rojo al pasar por encima: ese hover
   es la unica senal de que la accion no es reversible. */
.articulos-page .cb-ficha .command-bar__btn.is-danger,
.articulos-page .cb-seccion .command-bar__btn.is-danger {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

    .articulos-page .cb-ficha .command-bar__btn.is-danger:hover:not(:disabled),
    .articulos-page .cb-seccion .command-bar__btn.is-danger:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #dc2626;
    }

/* --- Solo las barras del contenido de las pestanas (.cb-seccion) --- */

/* El componente ancla la barra arriba (util cuando el titulo de la ficha crece a varias lineas).
   Dentro de una pestana la barra convive con una linea de titulo o con un texto de confirmacion,
   asi que se centra con ellos. Se anade .command-bar al selector para ganar en especificidad a la
   regla del propio componente (.command-bar { align-self: flex-start }): empatarian a dos clases y,
   en el empate, gana la hoja scopeada porque se carga despues de esta. */
.articulos-page .cb-seccion.command-bar {
    align-self: center;
}

/* Editor de componentes incrustado en la pestana (.ec-head-comandos): el texto se queda a la izquierda
   y los comandos se van al borde derecho, con todo el hueco sobrante en medio. Hace falta el margen
   automatico —y no basta el reparto de la fila— porque esa cabecera admite salto de linea: sin el, en
   cuanto el titulo, el coste y los comandos no caben juntos, la barra baja a una linea nueva y se
   pinta pegada a la IZQUIERDA. La regla vive aqui y no en la hoja del editor porque aquella es
   scopeada y no alcanza el markup del CommandBar, que es de otro componente. */
.articulos-page .ec-head-comandos .cb-seccion {
    margin-left: auto;
}

/* El boton «···» del desbordamiento nace con la altura por defecto del componente (48 px, la del
   boton apilado icono-arriba/texto-debajo). Aqui los comandos miden ~32 px: sin esto, en cuanto
   la barra se repliega aparece un boton de otro tamano al lado de los que quedan. */
.articulos-page .cb-seccion .command-bar__more {
    height: clamp(30px, 4.4vw, 34px);
    min-width: 34px;
    padding: 0 8px;
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .articulos-page .cb-seccion .command-bar__more:hover {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

/* Cuerpo scrolleable de la ficha: el desbordamiento vertical vive aqui, no en el contenedor. */
.articulos-page .articulo-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 25px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    /* El estado vacio centra su mensaje en todo el alto disponible. */
    .articulos-page .articulo-detail-body-empty {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Indicador de cambios sin guardar en la cabecera de la ficha. No se encoge: el ancho lo cede el
   CommandBar contiguo, que es quien se repliega. */
.articulos-page .articulo-detail-dirty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    color: #b45309;
    white-space: nowrap;
    flex: 0 0 auto;
}

.articulos-page .articulo-detail-dirty-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    animation: dirtyPulse 1.6s ease-in-out infinite;
}

@keyframes dirtyPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.06);
    }
}

/* -----------------------------------------------------------------------------
   MODAL DE CONFIRMACION DE BORRADO

   Renderiza fuera de .articulos-page (a traves del componente Modal compartido),
   por eso estas reglas y las de sus botones quedan SIN scope. Las clases son
   exclusivas de Articulos, asi que no se filtran a otras pantallas.
   ----------------------------------------------------------------------------- */

.articulo-confirm {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.articulo-confirm-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .articulo-confirm-icon .material-symbols-outlined {
        font-size: 24px;
    }

.articulo-confirm-text {
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

    .articulo-confirm-text strong {
        color: #0f172a;
        font-weight: 900;
    }

.articulo-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

    .articulo-confirm-actions .articulos-action-btn,
    .articulo-confirm-actions .articulos-danger-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .articulo-confirm-actions .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

/* Botón destructivo (eliminar), usado en el modal de confirmación. */
.articulos-danger-btn {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #fecaca;
    background: #ffffff;
    color: #dc2626;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .articulos-danger-btn .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

    .articulos-danger-btn:hover {
        background: #fef2f2;
        border-color: #fca5a5;
        transform: none;
    }

.articulos-danger-btn-solid {
    border: none;
    background: #dc2626;
    color: #ffffff;
}

    .articulos-danger-btn-solid:hover {
        background: #b91c1c;
        box-shadow: 0 10px 18px rgba(220, 38, 38, 0.18);
    }

.articulos-danger-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

    .articulos-danger-btn:disabled:hover {
        background: #ffffff;
        border-color: #fecaca;
        transform: none;
    }

    .articulos-danger-btn-solid:disabled:hover {
        background: #dc2626;
        border-color: transparent;
        transform: none;
    }

/* BUSCADORES */

.articulos-page .articulos-search-row {
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.articulos-page .articulos-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    color: #94a3b8;
    pointer-events: none;
}

.articulos-page .articulos-search-input {
    padding-left: 42px !important;
}

/* INPUTS */

.articulos-page .articulos-input,
.articulos-page .articulos-textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.articulos-page .articulos-input {
    height: 38px;
    padding: 0 13px;
}

.articulos-page .articulos-textarea {
    min-height: 180px;
    padding: 12px;
    resize: vertical;
    line-height: 1.45;
}

    .articulos-page .articulos-input:focus,
    .articulos-page .articulos-textarea:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        background: #fbfdff;
    }

.articulos-page .articulo-title-input {
    font-weight: 850;
}

/* Descripcion de la familia: textarea mas baja que la generica (180px), pero claramente mas alta
   que un input de una linea. */
.articulos-page .familia-descripcion-textarea {
    min-height: 96px;
}

/* SELECTORES DE ENTIDAD (campo con aspecto de input que abre una ventana de busqueda). Compartido
   por ArticuloDetalle y FamiliaDetalle (ambos viven dentro de .articulos-page). */
.articulos-page .articulo-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.articulos-page .articulo-selector-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

    .articulos-page .articulo-selector-trigger:hover {
        border-color: #93c5fd;
    }

.articulos-page .articulo-selector-placeholder {
    color: #9ca3af;
}

.articulos-page .articulo-selector-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: #6b7280;
}

.articulos-page .articulo-selector-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .articulos-page .articulo-selector-clear:hover {
        background: #f1f3f5;
        color: #ef4444;
    }

.articulos-page .articulo-selector-clear .material-symbols-outlined {
    font-size: 20px;
}

/* LISTAS */

.articulos-page .familias-list,
.articulos-page .articulos-list {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .articulos-page .familias-list::-webkit-scrollbar,
    .articulos-page .articulos-list::-webkit-scrollbar,
    .articulos-page .articulo-detail-body::-webkit-scrollbar {
        width: 6px;
    }

    .articulos-page .familias-list::-webkit-scrollbar-track,
    .articulos-page .articulos-list::-webkit-scrollbar-track,
    .articulos-page .articulo-detail-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .articulos-page .familias-list::-webkit-scrollbar-thumb,
    .articulos-page .articulos-list::-webkit-scrollbar-thumb,
    .articulos-page .articulo-detail-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

        .articulos-page .familias-list::-webkit-scrollbar-thumb:hover,
        .articulos-page .articulos-list::-webkit-scrollbar-thumb:hover,
        .articulos-page .articulo-detail-body::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.articulos-page .familia-row,
.articulos-page .articulo-row,
.articulos-page .familia-articulo-row {
    width: 100%;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .articulos-page .familia-row:hover,
    .articulos-page .articulo-row:hover,
    .articulos-page .familia-articulo-row:hover {
        background: #f8fbff;
        border-color: #bfdbfe;
        transform: none;
    }

    .articulos-page .familia-row.selected,
    .articulos-page .articulo-row.selected {
        background: #eff6ff;
        border-color: #bfdbfe;
        box-shadow: inset 0 0 0 1px #bfdbfe;
    }

.articulos-page .familia-main,
.articulos-page .articulo-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .articulos-page .familia-main > div:last-child,
    .articulos-page .articulo-main > div:last-child {
        min-width: 0;
    }

.articulos-page .familia-icon,
.articulos-page .articulo-icon,
/* El hueco de la izquierda de la cabecera de la ficha ya no es un icono con reglas aquí: lo pinta
   SelectorImagen (la imagen de la ficha, o el icono de siempre mientras no la haya), que se trae su
   propio tamaño y su velo de edición. Las reglas de .articulo-detail-icon se retiraron con él. */

    .articulos-page .familia-icon .material-symbols-outlined,
    .articulos-page .articulo-icon .material-symbols-outlined {
        font-size: 21px;
    }

.articulos-page .familia-name,
.articulos-page .articulo-name,
.articulos-page .familia-articulo-name {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .familia-desc,
.articulos-page .articulo-meta,
.articulos-page .familia-articulo-meta {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .articulo-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    flex: 0 0 auto;
}

    .articulos-page .articulo-side strong {
        color: #1f2937;
        font-weight: 700;
    }

/* ARBOL DE FAMILIAS Y ARTICULOS (panel lateral) */

/* Cuerpo scrolleable del arbol: ocupa el alto libre del panel; el pager queda fijo abajo. */
.articulos-page .arbol-list {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.articulos-page .arbol-list::-webkit-scrollbar {
    width: 6px;
}

.articulos-page .arbol-list::-webkit-scrollbar-track {
    background: transparent;
}

.articulos-page .arbol-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

    .articulos-page .arbol-list::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.articulos-page .arbol-familia {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Fila de familia (carpeta): toggle + icono + nombre + contador de articulos. */
.articulos-page .arbol-familia-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .articulos-page .arbol-familia-row:hover {
        background: #f1f5f9;
    }

    .articulos-page .arbol-familia-row.selected {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }

/* Boton de expandir/contraer (chevron). */
.articulos-page .arbol-toggle {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .articulos-page .arbol-toggle:hover {
        background: #e2e8f0;
        color: #475569;
    }

    .articulos-page .arbol-toggle .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

.articulos-page .arbol-familia-icon {
    font-size: 19px !important;
    color: #64748b;
    flex: 0 0 auto;
}

.articulos-page .arbol-familia-row.selected .arbol-familia-icon {
    color: #2563eb;
}

.articulos-page .arbol-familia-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Contador de articulos de la familia. */
.articulos-page .arbol-badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.articulos-page .arbol-familia-row.selected .arbol-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Boton de expandir oculto cuando la familia no tiene hijos (mantiene la sangria del nivel). */
.articulos-page .arbol-toggle-hidden {
    visibility: hidden;
    cursor: default;
}

/* Contenedor de una rama desplegada (subfamilias + articulos de una familia). La indentacion y la
   linea vertical guia las aporta este contenedor (no las filas), por lo que la guia es CONTINUA por
   nivel y el anidamiento de ramas produce una linea por nivel sin cortes. El margen alinea la linea
   bajo el toggle/icono de la familia padre. */
.articulos-page .arbol-rama {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 17px;
    padding-left: 11px;
    border-left: 2px solid #dbe2ea;
}

/* Nodo virtual «Sin familia»: agrupa los articulos sin familia, con aspecto atenuado. */
.articulos-page .arbol-familia-row-sin .arbol-familia-icon {
    color: #94a3b8;
}

.articulos-page .arbol-familia-name-sin {
    font-style: italic;
    font-weight: 750;
    color: #64748b;
}

/* Contenedor anidado de articulos, con la guia vertical del arbol. */
.articulos-page .arbol-articulos {
    margin: 1px 0 3px 16px;
    padding-left: 10px;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.articulos-page .arbol-articulo-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .articulos-page .arbol-articulo-row:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

    .articulos-page .arbol-articulo-row.selected {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
        font-weight: 750;
    }

.articulos-page .arbol-articulo-icon {
    font-size: 17px !important;
    color: #94a3b8;
    flex: 0 0 auto;
}

.articulos-page .arbol-articulo-row.selected .arbol-articulo-icon {
    color: #2563eb;
}

.articulos-page .arbol-articulo-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .arbol-articulo-chip {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
}

.articulos-page .arbol-articulos-empty {
    padding: 3px 8px;
    font-size: 12px;
    font-style: italic;
    color: #94a3b8;
}

/* Pie de paginacion del arbol (fijo bajo el listado). */
.articulos-page .arbol-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}

.articulos-page .arbol-pager-info {
    font-size: 12px;
    font-weight: 850;
    color: #64748b;
}

.articulos-page .arbol-pager-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .articulos-page .arbol-pager-btn:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #334155;
    }

    .articulos-page .arbol-pager-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .articulos-page .arbol-pager-btn .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

/* ESTADOS */

.articulos-page .estado-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .articulos-page .estado-chip.ok {
        color: #15803d;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .articulos-page .estado-chip.draft {
        color: #b45309;
        background: #fffbeb;
        border-color: #fde68a;
    }

    /* Caducidad de lotes (F8): estado DERIVADO por Application; aquí solo el estilo. */
    .articulos-page .estado-chip.warn {
        color: #b45309;
        background: #fffbeb;
        border-color: #fde68a;
    }

    .articulos-page .estado-chip.danger {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

/* DETALLE */

.articulos-page .articulo-detail-name {
    /* Responsive: escala con el viewport para liberar espacio al CommandBar en pantallas
       estrechas. Minimo 15px, fluido, tope 18px (se alcanza ~1550px). */
    font-size: clamp(15px, 0.9vw + 4px, 18px);
    line-height: 1.15;
    font-weight: 950;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .articulo-detail-meta {
    margin-top: 4px;
    /* Responsive, en linea con el nombre: minimo 11px, fluido, tope 12px. */
    font-size: clamp(11px, 0.3vw + 7px, 12px);
    color: #64748b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TABS */

/* La barra (rail, scroll horizontal y flechas) la aporta el componente <ScrollableTabs>; aquí solo
   se separa de la sección siguiente y se estilan los botones de pestaña. */
.articulos-page .articulo-tabs-bar {
    margin-bottom: 18px;
}

.articulos-page .articulo-tab-btn {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    padding: 0 6px;
    margin-bottom: -1px;        /* el subrayado solapa el rail de 1px */
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.16s ease, border-color 0.16s ease;  /* sin transform */
}

    .articulos-page .articulo-tab-btn:hover {
        color: #334155;         /* solo oscurece el texto, sin movimiento */
    }

    .articulos-page .articulo-tab-btn.active {
        color: #1d4ed8;
        border-bottom-color: #2563eb;   /* subrayado azul de la activa */
        font-weight: 800;
    }

    .articulos-page .articulo-tab-btn:focus-visible {
        outline: 2px solid #bfdbfe;     /* accesibilidad por teclado */
        outline-offset: 2px;
    }

/* SECCIONES DEL DETALLE */

.articulos-page .articulo-section-card,
.articulos-page .propiedades-card,
.articulos-page .articulo-web-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    padding: 14px;
    margin-bottom: 14px;
}

.articulos-page .articulo-section-title {
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

/* PESTANA STOCK: barra superior con el selector de almacen y la disponibilidad del almacen mostrado. */
.articulos-page .articulo-stock-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.articulos-page .articulo-stock-almacen {
    flex: 1 1 280px;
    max-width: 360px;
}

.articulos-page .articulo-stock-kpi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f1f5f9;
}

.articulos-page .articulo-stock-kpi-label {
    font-size: clamp(.6rem, .55rem + .2vw, .7rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.articulos-page .articulo-stock-kpi-value {
    font-size: clamp(.72rem, .65rem + .25vw, .85rem);
    line-height: 1;
    font-weight: 700;
    color: #334155;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.articulos-page .articulo-stock-empty {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

/* En pantallas estrechas el selector pasa a ocupar todo el ancho; el indicador queda compacto debajo. */
@media (max-width: 640px) {
    .articulos-page .articulo-stock-almacen {
        flex: 1 1 100%;
        max-width: none;
    }
}

.articulos-page .articulo-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
}

.articulos-page .articulo-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.articulos-page .articulo-form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.articulos-page .articulo-form-grid-4,
.articulos-page .articulo-prices-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.articulos-page .articulo-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.articulos-page .articulo-field-span-2 {
    grid-column: span 2;
}

.articulos-page .articulo-field label {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #334155;
}

.articulos-page .articulo-check {
    margin-top: 14px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    /*border: 1px solid #e5e7eb;*/
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

    .articulos-page .articulo-check input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
    }

/* TOGGLE DE ESTADO (activar / desactivar el elemento)

   Contenedor independiente, a todo el ancho de la ficha: casilla a la izquierda y, al lado, el
   titulo (estado) con una descripcion breve debajo. Se reutiliza en la ficha de articulo y de familia. */
.articulos-page .articulo-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    padding: 14px;
    margin-bottom: 14px;
    cursor: pointer;
}

    .articulos-page .articulo-toggle-card input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
        flex: 0 0 auto;
        cursor: pointer;
    }

.articulos-page .articulo-toggle-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.articulos-page .articulo-toggle-title {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f2937;
}

.articulos-page .articulo-toggle-desc {
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

/* INFO CARDS */

.articulos-page .articulo-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 0;
}

.articulos-page .articulo-info-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
    padding: 13px;
}

    .articulos-page .articulo-info-card .material-symbols-outlined {
        color: #2563eb;
        font-size: 22px;
        flex: 0 0 auto;
    }

    .articulos-page .articulo-info-card > div {
        min-width: 0;
    }

    .articulos-page .articulo-info-card strong {
        display: block;
        font-size: 13px;
        color: #1f2937;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .articulos-page .articulo-info-card small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* FAMILIA DETALLE

   En la ficha de familia las secciones van planas (sin marco de tarjeta): se separan por su titulo
   y el espaciado vertical. El unico contenedor que conserva su caja es el toggle de estado
   («Familia activa»), que asi queda como acento. El listado de articulos sigue siendo un modulo
   autocontenido (cabecera con titulo + contador + buscador y pager al pie), pero sin marco propio. */

/* Secciones planas (sin marco de tarjeta) en las fichas de familia y de articulo: se separan por su
   titulo y el espaciado vertical. El toggle de estado no es un section-card, asi que mantiene su
   contenedor y queda como unico acento boxed. */
.articulos-page .familia-detalle .articulo-section-card,
.articulos-page .articulo-detalle .articulo-section-card {
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

/* Cabecera del listado: titulo a la izquierda, buscador a la derecha; se apila en pantallas
   estrechas (flex-wrap). Asume el borde inferior que normalmente pone el propio section-title. */
.articulos-page .familia-articulos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}

.articulos-page .familia-articulos-head-text {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Anula el margen/padding/borde que el section-title trae por defecto: aqui el borde lo pone la head. */
.articulos-page .familia-articulos-title {
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.articulos-page .familia-articulos-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.articulos-page .familia-articulos-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 170px;
    max-width: 280px;
}

.articulos-page .familia-articulos-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.articulos-page .familia-articulos-search-input {
    height: 34px !important;
    padding-left: 38px !important;
}

/* Lista de articulos de la pagina actual: la paginacion acota la altura, no hace falta scroll. */
.articulos-page .familia-articulos-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.articulos-page .familia-articulo-row {
    background: #f8fafc;
    border-color: transparent;
}

    .articulos-page .familia-articulo-row:hover {
        background: #f8fbff;
        transform: none;
    }

/* Pager al pie de la tarjeta: hereda el patron del arbol; aqui no necesita borde superior propio
   porque la lista ya queda separada por su gap. */
.articulos-page .familia-articulos-pager {
    margin-top: 12px;
}

/* PROPIEDADES */

.articulos-page .propiedades-card,
.articulos-page .articulo-web-card {
    padding: 0;
    overflow: hidden;
}

.articulos-page .propiedades-head,
.articulos-page .articulo-web-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.articulos-page .propiedades-head-balanced {
    align-items: center;
}

.articulos-page .propiedades-head-text {
    min-width: 0;
    max-width: 62%;
}

.articulos-page .propiedades-title {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
}

.articulos-page .propiedades-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.articulos-page .propiedades-actions-inline {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

    .articulos-page .propiedades-actions-inline .articulos-action-btn,
    .articulos-page .propiedades-actions-inline .articulos-primary-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: auto;
    }

    .articulos-page .propiedades-actions-inline .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

.articulos-page .propiedades-grid {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* -----------------------------------------------------------------------------
   PESTANA PROPIEDADES SIN TARJETA

   El contenido de una pestana ya vive dentro del cuerpo de la ficha: enmarcarlo otra vez es un borde
   que no separa nada (mismo criterio que la pestana Componentes). Se quita la caja —borde, esquinas,
   fondo— y el relleno que solo existia por ella, de modo que cabecera y lista se alinean con el resto
   del contenido de la pestana. Se conserva la linea bajo la cabecera, que si separa: es la misma que
   llevan los titulos de seccion de las demas pestanas.

   Las reglas van DESPUES de las de arriba a proposito: empatan en especificidad con ellas y es el
   orden lo que decide. Solo alcanzan a .propiedades-card; .articulo-web-card conserva su tarjeta.
   ----------------------------------------------------------------------------- */

.articulos-page .propiedades-card {
    border: none;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0;
    /* Ademas de sobrar sin esquinas redondeadas, «hidden» recortaria el menu «···» de la barra de
       comandos de la cabecera, que es un desplegable absoluto que se sale de la caja. */
    overflow: visible;
}

.articulos-page .propiedades-head {
    padding: 0 0 12px;
    background: transparent;
}

.articulos-page .propiedades-grid {
    padding: 14px 0 0;
}

.articulos-page .propiedad-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    background: #f8fafc;
    padding: 11px 12px;
}

.articulos-page .propiedad-name {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f2937;
}

.articulos-page .propiedad-value {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.articulos-page .propiedad-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.articulos-page .propiedad-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    /* En reposo, papelera negra sobre blanco: la fila donde vive ya tiene fondo gris, asi que el boton
       se lee como accion y no como parte de la fila. El aviso de que borra lo da el hover (rojo), no el
       estado de reposo. El borde no cambia: es el que lo separa del gris de la fila. */
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .articulos-page .propiedad-remove-btn:hover {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    .articulos-page .propiedad-remove-btn .material-symbols-outlined {
        font-size: 18px;
    }

/* WEB */

.articulos-page .articulo-web-list {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.articulos-page .articulo-web-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    background: #f8fafc;
    padding: 11px 12px;
    font-size: 13px;
    color: #334155;
    font-weight: 750;
    line-height: 1.35;
}

    .articulos-page .articulo-web-row .material-symbols-outlined {
        font-size: 20px;
        color: #22c55e;
        flex: 0 0 auto;
    }

/* -----------------------------------------------------------------------------
   BOTONES (articulos-action-btn / articulos-primary-btn)

   Sin scope: articulos-action-btn lo comparten la ficha (dentro de .articulos-page)
   y el modal de borrado (fuera). Son clases exclusivas de Articulos.
   ----------------------------------------------------------------------------- */

.articulos-action-btn,
.articulos-primary-btn {
    height: 38px;
    border-radius: 11px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.articulos-action-btn {
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #374151;
}

    .articulos-action-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: none;
    }

.articulos-primary-btn {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .articulos-primary-btn:hover {
        background: #1d4ed8;
        transform: none;
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
    }

/* Estado deshabilitado (sin cambios pendientes o guardando): sin interaccion ni elevacion. */
.articulos-primary-btn:disabled,
.articulos-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

    .articulos-primary-btn:disabled:hover {
        background: #2563eb;
        transform: none;
        box-shadow: none;
    }

    .articulos-action-btn:disabled:hover {
        background: #ffffff;
        border-color: #dbe2ea;
        transform: none;
    }

/* Giro del icono mientras se guarda (ficha de familia y modal de borrado). */
.articulo-detail-spin {
    animation: savingSpin 0.9s linear infinite;
}

@keyframes savingSpin {
    to {
        transform: rotate(360deg);
    }
}

/* VACIO */

.articulos-page .empty-state {
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

/* ANIMACIONES */

@keyframes articulosPageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* RESPONSIVE */

@media (max-width: 1440px) {
    .articulos-page .articulos-grid {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .articulos-page .articulo-form-grid,
    .articulos-page .articulo-form-grid-3,
    .articulos-page .articulo-form-grid-4,
    .articulos-page .articulo-prices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .articulos-page .articulos-grid {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    /* En pantallas pequenas el indicador de cambios se reduce a solo el punto (el texto «Cambios sin
       guardar» queda en el title), para dejar mas ancho a la identidad y al CommandBar sin apilar. */
    .articulos-page .articulo-detail-dirty-text {
        display: none;
    }
}

@media (max-width: 980px) {
    .articulos-page {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* La cabecera se mantiene en fila: el CommandBar siempre queda arriba a la derecha y se
       repliega al menú «···» en lugar de saltar de línea. */

    /* En tablets y moviles el bloque de titulo+subtitulo no ocupa todo el ancho: se acota para dejar
       mas aire y no estirarse de borde a borde (el subtitulo envuelve en mas lineas dentro del bloque). */
    .articulos-page .articulos-header > div:first-child {
        max-width: 70%;
    }

    /* En pantallas pequenas el subtitulo suelta el minimo holgado y se adapta al ancho disponible. */
    .articulos-page .articulos-subtitle {
        min-width: 0;
        max-width: 100%;
    }

    .articulos-page .articulos-grid {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .articulos-page .articulos-panel,
    .articulos-page .articulos-detail-panel {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* La ficha deja de tener cuerpo scrolleable propio: fluye con la pagina. */
    .articulos-page .articulo-detail-body {
        overflow: visible;
        min-height: 0;
    }

    .articulos-page .familias-list,
    .articulos-page .articulos-list,
    .articulos-page .arbol-list {
        max-height: 360px;
    }

    .articulos-page .articulo-info-grid,
    .articulos-page .articulo-form-grid,
    .articulos-page .articulo-form-grid-3,
    .articulos-page .articulo-form-grid-4,
    .articulos-page .articulo-prices-grid {
        grid-template-columns: 1fr;
    }

    .articulos-page .articulo-field-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .articulos-page .propiedades-actions,
    .articulos-page .propiedades-actions-inline {
        width: 100%;
    }

        .articulos-page .propiedades-actions-inline .articulos-action-btn,
        .articulos-page .propiedades-actions-inline .articulos-primary-btn {
            width: 100%;
        }

    .articulos-page .panel-header,
    .articulos-page .propiedades-head,
    .articulos-page .articulo-web-head {
        flex-direction: column;
        align-items: stretch;
    }

    .articulos-page .propiedades-head-text {
        max-width: 100%;
    }

    /* Con la cabecera apilada en columna, los comandos no se estiran ni se centran: se quedan a la
       derecha, debajo del texto, que es donde se leen en el resto de la ficha. */
    .articulos-page .propiedades-head .cb-seccion {
        align-self: flex-end;
    }

    .articulos-page .familia-row,
    .articulos-page .articulo-row,
    .articulos-page .familia-articulo-row,
    .articulos-page .propiedad-summary-row {
        flex-direction: column;
        align-items: stretch;
    }

    .articulos-page .articulo-side {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .articulos-page .card-panel {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .articulos-page,
    .articulos-page *,
    .articulos-page *::before,
    .articulos-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* LOTES Y SERIES (pestanas de consulta de la ficha, F5) */

.articulos-page .articulo-ls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

    .articulos-page .articulo-ls-head .articulo-section-title {
        margin-bottom: 0;
    }

.articulos-page .articulo-ls-filtro {
    max-width: 240px;
}

.articulos-page .articulo-ls-saldo {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

.articulos-page .articulo-ls-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.articulos-page .articulo-ls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .articulos-page .articulo-ls-table th {
        text-align: left;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #64748b;
        background: #f8fafc;
        padding: 8px 10px;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .articulos-page .articulo-ls-table td {
        padding: 7px 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #0f172a;
        white-space: nowrap;
    }

    .articulos-page .articulo-ls-table tbody tr:last-child td {
        border-bottom: 0;
    }

.articulos-page .articulo-ls-table .articulo-ls-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.articulos-page .articulo-ls-row {
    cursor: pointer;
}

    .articulos-page .articulo-ls-row:hover td {
        background: #f8fafc;
    }

    .articulos-page .articulo-ls-row.active td {
        background: #eff6ff;
    }

.articulos-page .articulo-ls-empty {
    color: #94a3b8;
    text-align: center;
    padding: 14px 10px;
}

.articulos-page .articulo-ls-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.articulos-page .articulo-ls-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

    .articulos-page .articulo-ls-pager-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .articulos-page .articulo-ls-pager-btn .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

.articulos-page .articulo-ls-pageinfo {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

/* Panel de trazabilidad: dos columnas (hacia atras / hacia delante), apiladas en pantallas estrechas. */
.articulos-page .articulo-traza-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.articulos-page .articulo-traza-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 850;
    color: #334155;
    margin-bottom: 8px;
}

    .articulos-page .articulo-traza-title .material-symbols-outlined {
        font-size: 16px;
        line-height: 1;
        color: #64748b;
    }

/* Mensaje de error de la impresion del informe de trazabilidad (F7). El boton de imprimir es un
   comando de la barra de la seccion (.cb-seccion), no un boton propio: no tiene estilo aparte. */
.articulos-page .articulo-ls-print-error {
    font-size: 12px;
    color: #b91c1c;
    margin-bottom: 8px;
}


/* ══════════ Pestana Tallas (Tallas y colores F2): matriz de variantes ══════════ */

.articulos-page .articulo-tallas-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

.articulos-page .articulo-ls-table td .articulos-input {
    min-width: 90px;
}


/* Detalle por tallas de la pestana Stock (Tallas y colores F3): matriz solo lectura */

.articulos-page .articulo-stock-tallas th:first-child {
    min-width: 80px;
}

.articulos-page .articulo-stock-tallas-leyenda {
    display: block;
    margin-top: 6px;
    color: #6b7280;
}