/* ===========================================================================
 * Administración: un solo "carácter" para TODAS las pestañas, a cualquier nivel.
 * Se carga la última, así que manda sobre los estilos propios de cada módulo.
 *   - Cada pestaña tiene contorno (arriba y a los lados, esquinas superiores de 3px) y se apoya en la línea de la barra.
 *   - La activa va rellena (degradado de la marca, texto blanco) y abierta por abajo: se funde con el recuadro de contenido.
 *   - El contenido de cada pestaña va en un recuadro cuyo borde superior es la línea de la barra.
 * Niveles cubiertos: .labor-settings-tabs (Laboral, Logística, Flota/GPS…), .wh-tabs (Almacén, Proyectos, Formación…),
 * .wh-subtabs (subpestañas de fichas y de Almacén) y la barra de iconos de Laboral ([data-labor-tabs^="admin-"]).
 * =========================================================================== */

body { --tab-line: color-mix(in srgb, var(--primary) 55%, var(--border)); }

/* ---- Barra ---------------------------------------------------------------- */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs):has(> .labor-settings-tabs__item, > .wh-tab, > .wh-subtab) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3px;
    padding: 4px 0 0;
    margin: 0 !important;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tab-line);
    animation: none;
}

/* ---- Pestañas (inactivas) ------------------------------------------------- */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > :is(.labor-settings-tabs__item, .wh-tab, .wh-subtab),
[data-labor-tabs^="admin-"] .labor-tabs__button {
    border: 1px solid var(--tab-line) !important;
    border-radius: 3px 3px 0 0 !important;
    margin: 0 0 -1px !important;
    background: var(--surface-soft, color-mix(in srgb, var(--primary) 4%, var(--surface, #fff)));
    color: var(--primary-dark);
    box-shadow: none;
    transform: none;
}
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > :is(.labor-settings-tabs__item, .wh-tab, .wh-subtab):hover,
[data-labor-tabs^="admin-"] .labor-tabs__button:hover {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface, #fff));
    border-color: var(--primary) !important;
}

/* ---- Pestaña activa ------------------------------------------------------- */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > :is(.labor-settings-tabs__item, .wh-tab, .wh-subtab):is(.is-active, .is-active:hover),
[data-labor-tabs^="admin-"] .labor-tabs__button--active,
[data-labor-tabs^="admin-"] .labor-tabs__button--active:hover {
    background: var(--brand-fill-gradient) !important;
    color: #fff !important;
    font-weight: 800;
    border: 1px solid var(--tab-line) !important;
    border-bottom-color: transparent !important; /* abierta por abajo: se funde con el recuadro */
}
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > .is-active .labor-tab-label,
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > .is-active .logistics-tab-text,
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > .is-active .proj-count,
[data-labor-tabs^="admin-"] .labor-tabs__button--active .labor-tab-label { color: #fff !important; }
[data-labor-tabs^="admin-"] .labor-tabs__button--active .labor-tab-icon { background: rgba(255, 255, 255, .22); color: #fff; opacity: 1; }
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs) > .is-active .app-icon { filter: brightness(0) invert(1); }

/* ---- Recuadro de contenido ------------------------------------------------- */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs):has(> .labor-settings-tabs__item, > .wh-tab, > .wh-subtab)
    ~ :not([hidden], script, style, .labor-settings-tabs, .wh-tabs, .wh-subtabs) {
    position: relative;
    box-sizing: border-box;
    margin-top: 0 !important;  /* sin hueco entre la línea de la barra y el recuadro */
    margin-bottom: 0 !important;
    padding: 10px 10px 12px;   /* aire interior: ningún bloque toca ni tapa la línea */
}
/* Las líneas van en una capa superpuesta (encima de tarjetas, cabeceras y tablas) para que se vean siempre completas */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs):has(> .labor-settings-tabs__item, > .wh-tab, > .wh-subtab)
    ~ :not([hidden], script, style, .labor-settings-tabs, .wh-tabs, .wh-subtabs)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--tab-line);
    border-top: 0;
    border-bottom: 0;
    pointer-events: none;
    z-index: 60;
}
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs):has(> .labor-settings-tabs__item, > .wh-tab, > .wh-subtab)
    ~ :not([hidden], script, style, .labor-settings-tabs, .wh-tabs, .wh-subtabs):not(:has(~ :not([hidden], script, style)))::after {
    border-bottom: 1px solid var(--tab-line);
    border-radius: 0 0 3px 3px;
}

:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs)[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Pestañas "labor-tabs" de Logística (ficha de vehículo y vestuario): mismo aspecto de carpeta con recuadro.
 * --------------------------------------------------------------------------- */
[data-labor-tabs^="logistics-"] > .labor-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3px;
    padding: 4px 0 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tab-line);
}
[data-labor-tabs^="logistics-"] > .labor-tabs__nav > .labor-tabs__button {
    border: 1px solid var(--tab-line) !important;
    border-radius: 3px 3px 0 0 !important;
    margin: 0 0 -1px !important;
    background: var(--surface-soft, color-mix(in srgb, var(--primary) 4%, var(--surface, #fff)));
    color: var(--primary-dark);
    box-shadow: none;
    transform: none;
}
[data-labor-tabs^="logistics-"] > .labor-tabs__nav > .labor-tabs__button:hover {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface, #fff));
    border-color: var(--primary) !important;
}
[data-labor-tabs^="logistics-"] > .labor-tabs__nav > .labor-tabs__button--active,
[data-labor-tabs^="logistics-"] > .labor-tabs__nav > .labor-tabs__button--active:hover {
    background: var(--brand-fill-gradient) !important;
    color: #fff !important;
    font-weight: 800;
    border-bottom-color: transparent !important;
}
[data-labor-tabs^="logistics-"] > .labor-tabs__nav > .labor-tabs__button--active .labor-tab-label { color: #fff !important; }

[data-labor-tabs^="logistics-"] > .labor-tabs__nav ~ .labor-tabs__panel:not([hidden]) {
    position: relative;
    box-sizing: border-box;
    margin-top: 0 !important;
    padding: 10px 10px 12px;
}
[data-labor-tabs^="logistics-"] > .labor-tabs__nav ~ .labor-tabs__panel:not([hidden])::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--tab-line);
    border-top: 0;
    pointer-events: none;
    z-index: 60;
    border-radius: 0 0 3px 3px;
}

/* Sin separación entre la barra de pestañas y su recuadro (los contenedores en rejilla ponían 12-16px de hueco y cortaban las líneas laterales) */
[data-labor-tabs^="logistics-"],
:has(> :is(.labor-settings-tabs, .wh-tabs, .wh-subtabs):has(> .labor-settings-tabs__item, > .wh-tab, > .wh-subtab)) {
    row-gap: 0 !important;
}

/* Las pestañas de estos grupos ocupan todo el ancho, así que las líneas laterales pueden subir un poco y solaparse con el borde de la
   primera y la última pestaña (mismo color): la unión queda continua sin importar el hueco que deje el contenedor. */
[data-labor-tabs^="logistics-"] > .labor-tabs__nav ~ .labor-tabs__panel:not([hidden])::after {
    top: -18px;
}

/* ---------------------------------------------------------------------------
 * Botones de acción (Nuevo, Editar, Guardar, Cancelar, Borrar…): nada flotante. Van dentro de su contenedor, en fila y a la
 * derecha, como botones normales con su texto (igual que en Proyectos, Clientes y Proveedores).
 * --------------------------------------------------------------------------- */
.labor-form__actions--floating-dock {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
    margin-left: auto;
    z-index: auto;
}
.labor-form__actions--floating-dock .button {
    display: inline-flex;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: var(--radius) !important;
    clip-path: none !important;
    filter: none !important;
    box-shadow: var(--shadow-soft);
    gap: 6px;
    justify-items: initial;
}
.labor-form__actions--floating-dock .button[hidden] { display: none !important; }
.labor-form__actions--floating-dock .labor-btn-icon { transform: none !important; font-size: 1rem !important; }
.labor-form__actions--floating-dock .labor-btn-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Marcas puestas por assets/js/tab-boxes.js: el mismo recuadro aunque la barra de pestañas no esté justo antes del contenido
 * (dentro de una cabecera, de un contenedor con otras cosas, etc.).
 * --------------------------------------------------------------------------- */
[data-tb-anchor="wrap"] {
    align-items: flex-end;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--tab-line);
}
[data-tb-anchor="wrap"] [data-tb-strip] { border-bottom: 0 !important; }
[data-tb-parent] { row-gap: 0 !important; }

[data-tb-body] {
    position: relative;
    box-sizing: border-box;
    align-self: stretch;
    justify-self: stretch;
    max-width: none;
    margin: 0 !important;      /* algunos contenidos (p. ej. el dashboard de Laboral) se salían del panel con márgenes negativos y la línea quedaba fuera */
    padding: 10px 10px 12px;
}
[data-tb-body]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--tab-line);
    border-top: 0;
    border-bottom: 0;
    pointer-events: none;
    z-index: 60;
}
[data-tb-body][data-tb-last]::after {
    border-bottom: 1px solid var(--tab-line);
    border-radius: 0 0 3px 3px;
}

/* ---- Segundo nivel dentro de un recuadro (p. ej. subpestañas de Configuración de Laboral): sangrado y más compacto ---- */
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs)[data-tb-inner] {
    margin: 10px 10px 0 !important;
    padding: 4px 0 0;
}
:is(.labor-settings-tabs, .wh-tabs, .wh-subtabs)[data-tb-inner] > :is(.labor-settings-tabs__item, .wh-tab, .wh-subtab) {
    min-height: 32px;
    padding: 0 12px;
    font-size: .8rem;
}
/* El contenedor que lleva la barra y las subbarras: las líneas laterales arrancan bajo la barra de arriba (--tb-top) */
[data-tb-wrapbody] { position: relative; margin-bottom: 0 !important; padding-bottom: 0 !important; }
[data-tb-wrapbody]::after {
    content: '';
    position: absolute;
    inset: var(--tb-top, 0) 0 0 0;
    border: 1px solid var(--tab-line);
    border-top: 0;
    border-bottom: 0;
    pointer-events: none;
    z-index: 60;
}

/* Proyectos: la pestaña Constructor va sola, pegada al extremo derecho de la barra. El margin:0 0 -1px !important de arriba
   anulaba su margin-left:auto; este selector es más específico y lo recupera. */
.wh-tabs.proj-tabs > .proj-tab--config { margin-left: auto !important; }