/* ============================================================
 * CSS del módulo "training" para el skin "sky".
 * Este archivo es un SUSTITUTO COMPLETO del CSS normal del
 * módulo cuando el skin activo es "sky" (no una capa de
 * ajustes encima) -- se carga en su lugar, nunca junto a él.
 * Edítalo libremente para dar a este módulo un aspecto
 * específico de este skin (incluye layout/estructura, no solo
 * colores). Ver también: assets/css/base.css (tokens/variables
 * por skin+modo).
 * ============================================================ */

/* Formación. Reutiliza las clases wh-* del Almacén (tarjetas, tablas, formularios, pestañas). */

.tr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tr-kpi { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 3px; background: var(--surface); box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 8%, transparent); cursor: pointer; }
.tr-kpi span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.tr-kpi strong { font-size: 1.7rem; line-height: 1.1; color: var(--primary-dark); }
.tr-kpi small { color: var(--text-soft); font-size: .72rem; }
.tr-kpi--ok { border-left-color: #16a34a; } .tr-kpi--expiring { border-left-color: #d99a00; } .tr-kpi--expired, .tr-kpi--overdue { border-left-color: #dc2626; }
.tr-kpi--pending { border-left-color: var(--primary); } .tr-kpi--total { border-left-color: var(--primary-dark); cursor: default; }
.tr-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tr-note { margin: 0 0 12px; padding: 8px 12px; background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 3px; font-size: .85rem; }
.tr-row-click { cursor: pointer; }
.tr-row-click:hover td { background: var(--surface-hover); }
.tr-clip { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tr-mini { min-height: 32px; padding: 3px 6px; font-size: .82rem; width: auto; max-width: 150px; }
.tr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.wh-subtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

/* Matriz */
.tr-legend { margin: 4px 0 8px; font-size: .78rem; color: var(--text-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tr-matrix-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.tr-matrix { border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.tr-matrix th, .tr-matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px; text-align: center; }
.tr-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-soft); vertical-align: bottom; }
.tr-col { min-width: 46px; max-width: 64px; height: 130px; }
.tr-col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 120px; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
.tr-person { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left !important; min-width: 200px; max-width: 240px; }
.tr-matrix thead .tr-person { z-index: 3; background: var(--surface-soft); }
.tr-person small { display: block; color: var(--text-soft); font-weight: 400; font-size: .7rem; }
.tr-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--primary-dark); cursor: pointer; text-align: left; }
.tr-cell--none { color: var(--text-soft); }
.tr-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 5px; border: 0; border-radius: 3px; font-size: .85rem; font-weight: 800; line-height: 1; cursor: pointer; }
.tr-chip small { font-size: .55rem; font-weight: 700; }
.tr-chip--ok { background: var(--success-soft); color: var(--success-soft-ink); } .tr-chip--expiring { background: var(--warning-soft); color: var(--warning-soft-ink); } .tr-chip--expired, .tr-chip--overdue { background: var(--danger-soft-tint); color: var(--danger-soft-ink); }
.tr-chip--pending { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary-dark); } .tr-chip--exempt { background: var(--surface-soft); color: var(--text-soft); }
.tr-legend .tr-chip { cursor: default; min-width: 20px; height: 20px; }

/* Convocatorias */
.tr-attend { overflow-x: auto; }
.tr-files__list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.tr-files__list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-files__add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-cand .wh-table-wrap { max-height: 50vh; overflow: auto; }

/* Zona del trabajador (móvil) */
.tr-worker { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
.tr-worker .wh-card { min-width: 0; box-sizing: border-box; }
.tr-worker .wh-table-wrap { max-width: 100%; overflow-x: auto; }
.tr-worker-alert { margin: 0 0 10px; padding: 10px 12px; background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 3px; font-size: .9rem; }
.tr-count { font-size: .7rem; background: #dc2626; color: #fff; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }
.tr-invite, .tr-req { padding: 10px 0; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.tr-invite:first-of-type, .tr-req:first-of-type { border-top: 0; }
.tr-invite__head, .tr-req__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tr-invite__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tr-invite__actions .button { flex: 1 1 140px; min-height: 44px; }
.tr-req p { margin: 0; }
.tr-req--overdue, .tr-req--expired { border-left: 3px solid #dc2626; padding-left: 8px; }
.tr-req--expiring { border-left: 3px solid #d99a00; padding-left: 8px; }
.tr-worker .wh-card { padding: 10px; }
.tr-worker h3 { margin: 0 0 6px; font-size: 1rem; }

@media (max-width: 900px) {
    .tr-two { grid-template-columns: minmax(0, 1fr); }
    .tr-person { min-width: 150px; }
}

/* EPIs (se muestra dentro de Logística; reutiliza las tarjetas del Almacén) */
.wh-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.wh-card__foot { margin-top: 10px; }

/* Icono (emoji) de EPIs y herramientas cuando el artículo de Almacén no tiene foto */
.wh-thumb--icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: inherit; }

/* Selector de iconos (formularios de EPIs y herramientas) */
.icon-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-picker__btn { width: 34px; height: 34px; font-size: 1.15rem; line-height: 1; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-soft); cursor: pointer; }
.icon-picker__btn:hover { background: var(--surface-hover); }
.icon-picker__btn.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }

/* Iconos SVG de una sola tinta (carpeta assets/icons/obra) dentro del recuadro del icono */
.wh-thumb--icon .wh-glyph { display: block; width: 62%; height: 62%; object-fit: contain; opacity: .85; }
.icon-picker__btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-picker__btn .wh-glyph { width: 28px; height: 28px; opacity: .85; }

/* Normativa: selector en formularios y chips en listados */
.norm-picker { display: grid; gap: 6px; }
.norm-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.norm-add { padding: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.norm-add__row { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 6px; align-items: center; }
@media (max-width: 720px) { .norm-add__row { grid-template-columns: 1fr; } }

/* Peticiones de EPIs/Herramientas en una sola línea: imagen · texto (recortado) · estado · cancelar */
.tr-req__line { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.tr-req__line .wh-thumb { flex: none; }
.tr-req__text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.tr-req__line .badge, .tr-req__line .button { flex: none; white-space: nowrap; }

/* Almacén personal + vehículo (material a cargo de una persona) */
.um-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.um-block { border: 1px solid var(--border); border-radius: 3px; padding: 8px 10px; background: var(--surface-soft); min-width: 0; }
.um-block h4 { margin: 0 0 6px; font-size: .9rem; }
.um-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.um-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.um-list__name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.um-list__qty { flex: none; font-weight: 700; font-size: .85rem; }

/* Selector excluyente («Para mí» / «Para el vehículo»): uno u otro, ninguno marcado por defecto */
.wh-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.wh-toggle__btn { flex: 1 1 140px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; }
.wh-toggle__btn:hover { border-color: var(--border-strong); }
.wh-toggle__btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary-dark); }

/* Existencias del artículo en las peticiones de los trabajadores */
.wh-stock-flag { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 3px; font-size: .72rem; font-weight: 800; }
.wh-stock-flag--out { background: #dc2626; color: #fff; }
.wh-stock-flag--low { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.wh-stock-flag--ok { background: #dcfce7; color: #166534; }
td .wh-prodrow { width: 100%; }
.wh-prodrow > .wh-stock-flag { margin: 0 0 0 auto; align-self: center; white-space: nowrap; flex: none; }

/* Normativa sugerida en los formularios de EPIs y herramientas */
.norm-suggest { display: grid; gap: 4px; margin: 4px 0 6px; padding: 6px 8px; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 3px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.norm-suggest[hidden] { display: none; }
.norm-suggest__chip { cursor: pointer; border-style: dashed; }
.norm-suggest__chip .wh-sub { margin-left: 4px; font-weight: 500; }

/* Aviso de disponibilidad al pedir material, herramientas o EPIs */
.wh-avail { display: block; margin-top: 3px; font-size: .78rem; font-weight: 700; line-height: 1.3; }
.wh-avail--ok { color: #166534; }
.wh-avail--low { color: #92400e; }
.wh-avail--out { color: #b91c1c; }

/* Peticiones del trabajador: tarjeta con varias líneas, iconos en los datos y estado con icono */
.req-card { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.req-card:first-of-type { border-top: 0; }
.req-card .wh-thumb { flex: none; }
.req-card__main { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; }
.req-card__name { font-size: .98rem; overflow-wrap: anywhere; }
.req-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--text-soft); }
.req-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.req-card__meta-item .app-icon { width: 14px; height: 14px; margin: 0; opacity: .75; }
.req-card__note { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; padding: 5px 8px; border-left: 3px solid var(--primary); background: var(--surface-soft); font-size: .82rem; }
.req-card__note .app-icon { width: 14px; height: 14px; margin: 2px 0 0; flex: none; }
.req-card__side { flex: none; display: grid; gap: 6px; justify-items: end; }
.req-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 3px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.req-state .app-icon { width: 14px; height: 14px; margin: 0; }
.req-state--pending { background: #fef3c7; color: #92400e; }
.req-state--approved { background: #dbeafe; color: #1e40af; }
.req-state--delivered { background: #dcfce7; color: #166534; }
.req-state--rejected { background: #fee2e2; color: #b91c1c; }
.req-state--cancelled { background: var(--surface-hover); color: var(--text-soft); }
@media (max-width: 560px) { .req-card { flex-wrap: wrap; } .req-card__side { width: 100%; grid-auto-flow: column; justify-content: space-between; justify-items: start; } }

.req-card__qty { color: var(--text-soft); font-weight: 700; }

.req-card__date { color: var(--text-soft); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.req-card__vehicle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: #d99a00; flex: none; }
.req-card__vehicle .app-icon { width: 13px; height: 13px; margin: 0; opacity: 1; filter: brightness(0) invert(1); }
.req-card__meta-item > span[style] { flex: none; }

.req-card__sign { display: block; margin-top: 2px; }
.req-card__sign img { display: block; height: 22px; width: auto; max-width: 70px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 1px 3px; }

.req-card--child { margin-left: 22px; padding-left: 12px; border-left: 3px solid var(--primary); }

.req-card--hold { align-items: stretch; }
.req-card__main { display: flex; flex-direction: column; }
.req-card__tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 3px; background: var(--surface-hover); color: var(--text-soft); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.req-hold { position: relative; overflow: hidden; margin-top: auto; align-self: flex-start; padding: 5px 12px; border: 1px solid #f3c2c2; border-radius: 3px; background: #fdecec; color: #b91c1c; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; user-select: none; touch-action: none; }
.req-hold__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #f5b5b5; transition: width .2s ease-out; }
.req-hold.is-holding .req-hold__fill { width: 100%; transition: width 2s linear; }
.req-hold__label { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.req-hold__label .app-icon { width: 14px; height: 14px; margin: 0; }
.req-card--hold .req-card__side { display: flex; flex-direction: column; align-items: flex-end; }
.req-card--hold .req-card__sign { margin-top: auto; padding-top: 4px; }

.req-card--hold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.req-card--hold .req-card__side { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
.req-card--hold .req-hold { grid-column: 1 / span 2; grid-row: 2; margin-top: 0; }
@media (max-width: 560px) { .req-card--hold .req-card__side { grid-column: 1 / -1; grid-row: auto; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } .req-card--hold .req-hold { grid-column: 1 / -1; grid-row: auto; } }
.req-card__sign img { height: clamp(30px, 4.5vw, 46px); max-width: clamp(90px, 16vw, 150px); }
.tr-count[hidden], .tr-count:empty { display: none !important; }

/* Estado como bola de color; el texto sale al pasar el ratón. */
.wh-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; cursor: help; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.wh-dot--in { background: #16a34a; }
.wh-dot--info { background: #2563eb; }
.wh-dot--warn { background: #f59e0b; }
.wh-dot--out { background: #dc2626; }
.wh-dot--muted { background: #9ca3af; }

/* ============================================================
 * ZONA DEL TRABAJADOR EN LOGÍSTICA (herramientas, EPIs, materiales, formación…): LISTADOS COMPACTOS EN MÓVIL
 * Se usa en la calle, con una mano y poca pantalla: sin rellenos ni bordes de más, una línea bien estructurada por cosa y todo
 * el ancho disponible. Solo móvil (hasta 720px); en escritorio no cambia nada.
 * ============================================================ */
@media (max-width: 720px) {
    /* La página: todo el ancho, sin márgenes de más alrededor */
    body[data-authenticated='true']:is(:has([data-logistics-self-tools-panel]:not([hidden])), :has([data-logistics-self-epi-panel]:not([hidden])), :has([data-logistics-self-material-panel]:not([hidden]))) .app-shell {
        width: 100vw;
        max-width: 100vw;
    }

    body[data-authenticated='true']:is(:has([data-logistics-self-tools-panel]:not([hidden])), :has([data-logistics-self-epi-panel]:not([hidden])), :has([data-logistics-self-material-panel]:not([hidden]))) .labor-panel__body {
        padding: 4px 2px !important;
    }

    /* La tarjeta contenedora de cada apartado desaparece: el contenido va directo sobre la página */
    .labor-card-section:has(> .labor-card-section__body > .tr-worker),
    .labor-card-section:has(> .labor-card-section__body > .mat-self) {
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .labor-card-section:has(> .labor-card-section__body > .tr-worker) > .labor-card-section__body,
    .labor-card-section:has(> .labor-card-section__body > .mat-self) > .labor-card-section__body {
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Tarjetas internas */
    .tr-worker, .mat-self { gap: 6px !important; }
    .tr-worker .wh-card, .mat-self .wh-card { padding: 6px 8px !important; border-radius: 3px; box-shadow: none !important; }
    .tr-worker .wh-card h3, .mat-self .wh-card h3 { margin: 0 0 4px !important; font-size: .9rem !important; gap: 6px; }
    .tr-worker .wh-card h3 .app-icon, .mat-self .wh-card h3 .app-icon { width: 15px; height: 15px; }
    .tr-worker .wh-card__foot, .mat-self .wh-card__foot { margin-top: 4px !important; margin-bottom: 4px; }
    .tr-worker .wh-card__foot .button, .mat-self .wh-card__foot .button { min-height: 28px !important; padding: 0 10px !important; font-size: .78rem !important; }
    .tr-worker-alert { margin: 0 0 6px !important; padding: 5px 8px !important; font-size: .78rem !important; line-height: 1.25; }
    .tr-worker .wh-empty, .mat-self .wh-empty { padding: 14px 8px !important; gap: 3px; }

    /* Pestañas (Mis herramientas / Mi historial…) más bajas */
    .tr-worker .labor-settings-tabs, .mat-self .labor-settings-tabs { margin-bottom: 4px !important; }
    .tr-worker .wh-tab, .mat-self .wh-tab { padding: 5px 0 !important; font-size: .76rem !important; gap: 4px; }
    .tr-worker .wh-tab .app-icon, .mat-self .wh-tab .app-icon { width: 15px; height: 15px; }

    /* Tarjeta de cada cosa (herramienta, EPI, petición): una línea bien estructurada */
    .tr-worker .req-card, .mat-self .req-card { gap: 8px !important; padding: 5px 0 !important; }
    .tr-worker .req-card .wh-thumb, .mat-self .req-card .wh-thumb { width: 34px !important; height: 34px !important; font-size: 21px !important; }
    .tr-worker .req-card .wh-thumb img, .mat-self .req-card .wh-thumb img { width: 34px; height: 34px; }
    .tr-worker .req-card__main, .mat-self .req-card__main { gap: 1px !important; }
    .tr-worker .req-card__name, .mat-self .req-card__name { font-size: .86rem !important; line-height: 1.2; }
    .tr-worker .req-card__meta, .mat-self .req-card__meta { gap: 1px 9px !important; font-size: .72rem !important; line-height: 1.25; }
    .tr-worker .req-card__meta-item, .mat-self .req-card__meta-item { gap: 3px !important; }
    .tr-worker .req-card__meta-item .app-icon, .mat-self .req-card__meta-item .app-icon { width: 12px !important; height: 12px !important; }
    .tr-worker .req-card__note, .mat-self .req-card__note { padding: 3px 6px !important; font-size: .72rem !important; margin: 1px 0 0 !important; }
    .tr-worker .req-card__side, .mat-self .req-card__side { gap: 3px !important; }
    .tr-worker .req-state, .mat-self .req-state { padding: 1px 6px !important; font-size: .6rem !important; gap: 3px !important; }
    .tr-worker .req-state .app-icon, .mat-self .req-state .app-icon { width: 11px !important; height: 11px !important; }
    .tr-worker .req-card__date, .mat-self .req-card__date { font-size: .66rem !important; }
    .tr-worker .req-card__sign img, .mat-self .req-card__sign img { height: 26px !important; max-width: 90px !important; }
    .tr-worker .req-card .button--small, .mat-self .req-card .button--small { min-height: 24px !important; padding: 0 8px !important; font-size: .7rem !important; }
    .tr-worker .req-hold { padding: 3px 9px !important; font-size: .7rem !important; }
    .tr-worker .req-card--child { margin-left: 12px !important; padding-left: 8px !important; }
    .tr-worker .req-card__vehicle { width: 17px; height: 17px; }
    .tr-worker .req-card__vehicle .app-icon { width: 11px !important; height: 11px !important; }

    /* Líneas de formación / pedidos antiguos */
    .tr-worker .tr-req, .tr-worker .tr-req__head { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
    .tr-worker .tr-req__text { font-size: .8rem !important; }

    /* Material a tu cargo (almacén personal y vehículo) */
    .um-grid { gap: 5px !important; grid-template-columns: minmax(0, 1fr) !important; }
    .um-block { padding: 4px 6px !important; }
    .um-block h4 { margin: 0 0 3px !important; font-size: .82rem !important; }
    .um-list { gap: 2px !important; }
    .um-list li { gap: 6px !important; }
    .um-list__name { font-size: .8rem !important; }
    .um-list__qty { font-size: .78rem !important; }

    /* Pedir material (carrito, resultados y peticiones) */
    .mat-self .wh-mat-item, .mat-self .wh-mat-row, .mat-self .wh-req { padding: 4px 6px !important; gap: 6px !important; }
    .mat-self .wh-mat-results { gap: 2px !important; }
    .mat-self .wh-req__head { gap: 6px !important; }
    .mat-self .wh-field { margin-bottom: 4px !important; }
    .mat-self .wh-sub { font-size: .68rem; margin-top: 0; }
    .mat-self .wh-thumb { width: 30px !important; height: 30px !important; }
    .mat-self .input { min-height: 36px !important; }
    .mat-self .button { min-height: 36px !important; }
    .mat-self .wh-mat-item { min-height: 40px !important; }
    .mat-self .wh-mat-results { max-height: 52vh !important; }
}

/* ============================================================
 * MÁXIMA DENSIDAD en la zona del trabajador de Logística (móvil). Segunda pasada, más agresiva que la anterior: cabeceras de
 * apartado finas, todo a ras de pantalla, filas mínimas. Lo táctil (campos y botones de acción) mantiene 36px de alto.
 * ============================================================ */
@media (max-width: 720px) {
    /* Cabecera de cada apartado (← Herramientas): una franja fina */
    [data-logistics-self-section] .logistics-self-panel-header {
        padding: 2px 6px !important;
        margin: 0 0 3px !important;
        gap: 6px !important;
        min-height: 0 !important;
        border-radius: 3px;
    }

    [data-logistics-self-section] .logistics-self-panel-header__left { gap: 6px !important; }
    [data-logistics-self-section] .logistics-self-panel-header__title { font-size: .82rem !important; line-height: 1.1; }
    [data-logistics-self-section] .logistics-self-back { min-height: 26px !important; height: 26px; min-width: 32px; padding: 0 8px !important; font-size: .9rem; }

    /* Todas las tarjetas/secciones del trabajador (ITV, seguros, vestuario, formación…): sin aire de más */
    [data-logistics-self-section] .labor-card-section:not(:has(> .labor-card-section__body > .tr-worker)):not(:has(> .labor-card-section__body > .mat-self)) {
        padding: 5px 6px !important;
        gap: 4px !important;
        border-radius: 3px;
    }

    [data-logistics-self-section] .labor-card-section__body { gap: 4px !important; }
    [data-logistics-self-section] .labor-card-section__header { padding: 0 !important; margin: 0 !important; gap: 4px !important; }
    [data-logistics-self-section] .labor-card-section__header h4 { font-size: .86rem !important; margin: 0 !important; }
    [data-logistics-self-section] .labor-card-section__kicker { font-size: .6rem !important; margin: 0 !important; }

    /* Tarjetas y títulos */
    .tr-worker, .mat-self { gap: 4px !important; }
    .tr-worker .wh-card, .mat-self .wh-card { padding: 4px 6px !important; gap: 4px !important; }
    .tr-worker .wh-card h3, .mat-self .wh-card h3, .mat-self h3 { margin: 0 0 2px !important; font-size: .84rem !important; }
    .mat-self h4 { margin: 2px 0 0 !important; font-size: .78rem !important; }
    .tr-worker .wh-card__foot, .mat-self .wh-card__foot { margin: 2px 0 3px !important; }
    .tr-worker-alert { margin: 0 0 4px !important; padding: 3px 6px !important; font-size: .72rem !important; }
    .tr-worker .wh-empty, .mat-self .wh-empty { padding: 8px 6px !important; font-size: .78rem; }
    .tr-worker .wh-empty small, .mat-self .wh-empty small { font-size: .68rem; }
    .tr-worker .wh-empty__icon .app-icon, .mat-self .wh-empty__icon .app-icon { width: 20px; height: 20px; }

    /* Pestañas: franja baja */
    .tr-worker .labor-settings-tabs, .mat-self .labor-settings-tabs { margin: 0 0 3px !important; }
    .tr-worker .wh-tab, .mat-self .wh-tab { padding: 4px 0 !important; font-size: .72rem !important; gap: 3px !important; }
    .tr-worker .wh-tab .app-icon, .mat-self .wh-tab .app-icon { width: 13px; height: 13px; }
    .tr-worker .tr-count, .mat-self .tr-count { font-size: .6rem; padding: 0 5px; }

    /* Fila de cada cosa: mínima, con todo bien alineado */
    .tr-worker .req-card, .mat-self .req-card { gap: 6px !important; padding: 3px 0 !important; align-items: center !important; }
    .tr-worker .req-card--hold, .mat-self .req-card--hold { align-items: start !important; }
    .tr-worker .req-card .wh-thumb, .mat-self .req-card .wh-thumb { width: 30px !important; height: 30px !important; font-size: 18px !important; }
    .tr-worker .req-card .wh-thumb img, .mat-self .req-card .wh-thumb img { width: 30px; height: 30px; }
    .tr-worker .req-card__name, .mat-self .req-card__name { font-size: .8rem !important; line-height: 1.15 !important; }
    .tr-worker .req-card__meta, .mat-self .req-card__meta { gap: 0 7px !important; font-size: .67rem !important; line-height: 1.2 !important; }
    .tr-worker .req-card__meta-item, .mat-self .req-card__meta-item { gap: 2px !important; }
    .tr-worker .req-card__meta-item .app-icon, .mat-self .req-card__meta-item .app-icon { width: 11px !important; height: 11px !important; }
    .tr-worker .req-card__note, .mat-self .req-card__note { padding: 2px 5px !important; font-size: .67rem !important; }
    .tr-worker .req-card__side, .mat-self .req-card__side { gap: 2px !important; }
    .tr-worker .req-state, .mat-self .req-state { padding: 0 5px !important; font-size: .56rem !important; line-height: 1.5; }
    .tr-worker .req-state .app-icon, .mat-self .req-state .app-icon { width: 10px !important; height: 10px !important; }
    .tr-worker .req-card__date, .mat-self .req-card__date { font-size: .62rem !important; }
    .tr-worker .req-card__sign img, .mat-self .req-card__sign img { height: 22px !important; max-width: 76px !important; }
    .tr-worker .req-hold { padding: 2px 8px !important; font-size: .66rem !important; }
    .tr-worker .req-card--child { margin-left: 8px !important; padding-left: 6px !important; }
    .tr-worker .req-card .button--small, .mat-self .req-card .button--small { min-height: 22px !important; padding: 0 7px !important; font-size: .66rem !important; }

    /* Material a tu cargo */
    .um-block { padding: 3px 5px !important; }
    .um-block h4 { margin: 0 0 2px !important; font-size: .76rem !important; }
    .um-list { gap: 1px !important; }
    .um-list__name { font-size: .76rem !important; }
    .um-list__qty { font-size: .74rem !important; }

    /* Pedir material */
    .mat-self .wh-mat-item, .mat-self .wh-mat-row, .mat-self .wh-req { padding: 3px 5px !important; gap: 5px !important; }
    .mat-self .wh-mat-item { min-height: 36px !important; }
    .mat-self .wh-field { margin-bottom: 2px !important; }
    .mat-self .wh-field label { font-size: .7rem; margin-bottom: 1px; }
    .mat-self .wh-thumb { width: 26px !important; height: 26px !important; }
    .mat-self .wh-table { font-size: .72rem !important; }
    .mat-self .wh-table th, .mat-self .wh-table td { padding: 3px 5px !important; }
}

/* Fila compacta de herramientas a cargo (el detalle y el aviso de problema van en el modal de doble clic) */
.req-card--compact { touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.req-card--compact .req-card__side { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px !important; max-width: 46%; }
.req-card--compact .req-card__date { flex-basis: 100%; text-align: right; }
.req-state--icon { padding: 2px 4px !important; }
.req-state--icon .app-icon { margin: 0; }
.loan-flag { display: inline-flex; vertical-align: middle; margin-left: 5px; }
.loan-flag .app-icon { width: 14px; height: 14px; margin: 0; }
.loan-flag--ok .app-icon { opacity: .55; }
.loan-flag--warn { filter: none; }
.loan-flag--warn .app-icon { filter: invert(52%) sepia(94%) saturate(1400%) hue-rotate(8deg); }
.loan-flag--bad .app-icon { filter: invert(25%) sepia(95%) saturate(4000%) hue-rotate(350deg); }
.loan-hint { margin: 6px 0 0; text-align: center; font-size: .68rem; color: var(--text-soft); }
.loan-detail { display: grid; gap: 6px; }
.loan-detail__head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.loan-detail__head strong { display: block; font-size: 1rem; }
.loan-detail__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.loan-detail__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: .88rem; }
.loan-detail__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: .8rem; }
.loan-detail__label .app-icon { width: 15px; height: 15px; margin: 0; opacity: .8; }
.loan-detail__value { text-align: right; font-weight: 600; }
.loan-detail__row--warn .loan-detail__value { color: #92400e; }
.loan-detail__row--bad .loan-detail__value { color: #b91c1c; }
.loan-detail__sign { display: grid; gap: 4px; padding-top: 4px; }
.loan-detail__sign img { display: block; max-width: 100%; max-height: 90px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 3px; }

/* Mis tallas (EPIs del trabajador): ropa, calzado y guantes en UNA línea, a partes iguales. */
.epi-sizes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.epi-sizes .wh-field { min-width: 0; margin: 0; }
.epi-sizes .wh-field label { display: block; margin-bottom: 2px; font-size: .72rem; }
.epi-sizes .input { width: 100%; min-width: 0; }